Gutenberg Configuration Example

Learn how to configure and customize the WordPress Gutenberg editor with the Combo plugin.

Basic Gutenberg Configuration

This example demonstrates how to configure the Gutenberg editor to match your project requirements:

config.yml

1# Gutenberg configuration
2gutenberg:
3  default-blocks: false #disable WordPress default blocks
4  allowed-blocks: false #or specify which blocks you want to authorize
5  default-css: false # remove default WordPress blocks css
6  fullscreen: false # disable Gutenberg fullscreen mode on first load
7
8  blocks-excerpt: # specify what fields can be used for excerpt 
9    text:
10      - 'block_text_content'
11    textpicture:
12      - 'block_textpicture_content'
13
14  categories: # define gutenberg block categories
15  - slug: 'text'
16    title: 'Texte'
17    icon: null
18
19  - slug: 'media'
20    title: 'Médias'
21    icon: null
22
23  - slug: 'hero'
24    title: 'Heros'
25    icon: null
26
27  - slug: 'picture'
28    title: 'Images'
29    icon: null
30
31  - slug: 'video'
32    title: 'Videos'
33    icon: null
34
35  - slug: 'relation'
36    title: 'Relationnels'
37    icon: null
38
39  - slug: 'other'
40    title: 'Autres'
41    icon: null

Configuration Options Explained

Core Settings

default-blocks: When set to false, disables all default WordPress blocks. Set to true to keep them.
allowed-blocks: Controls which blocks are available to editors. Set to false to allow all blocks, or specify an array of block names to restrict available blocks.
default-css: When set to false, removes WordPress default block CSS. This gives you more control over styling.
fullscreen: When set to false, disables Gutenberg's fullscreen mode on initial load.

Excerpt Configuration

The blocks-excerpt setting allows you to specify which fields from which blocks can be used to generate post excerpts:

1blocks-excerpt:
2  text:
3    - 'block_text_content'
4  textpicture:
5    - 'block_textpicture_content'

In this example, the content from block_text_content field in text blocks and block_textpicture_content field in textpicture blocks will be used for generating excerpts.

Custom Block Categories

The categories setting allows you to define custom categories for organizing blocks in the editor:

1categories:
2  - slug: 'text'
3    title: 'Texte'
4    icon: null
5
6  - slug: 'media'
7    title: 'Médias'
8    icon: null

Each category requires a slug and title. The icon property is optional and can be set to a Dashicon name or left as null.

Specifying Allowed Blocks

If you want to restrict which blocks are available, you can specify them in the configuration:

1gutenberg:
2  default-blocks: false
3  allowed-blocks:
4    - 'core/paragraph'
5    - 'core/heading'
6    - 'core/image'
7    - 'core/list'
8    - 'core/quote'
9    - 'acf/testimonial'
10    - 'acf/team-member'
11    - 'acf/call-to-action'

This configuration allows only the specified core blocks and custom ACF blocks, restricting editors from using any other blocks.

Adding Custom Icons to Categories

You can add custom icons to your block categories using WordPress Dashicons:

1categories:
2  - slug: 'text'
3    title: 'Text'
4    icon: 'editor-textcolor'
5
6  - slug: 'media'
7    title: 'Media'
8    icon: 'format-image'
9
10  - slug: 'layout'
11    title: 'Layout'
12    icon: 'layout'

The icon property accepts any valid WordPress Dashicon name. You can find the complete list of available icons in the WordPress Dashicons reference.

Best Practices for Gutenberg Configuration

Limit available blocks to only those needed for your specific content strategy
Organize blocks into logical categories that make sense for your content editors
Consider disabling default WordPress blocks and CSS if you're providing custom blocks with your own styling
Use the excerpt configuration to ensure consistent excerpt generation from your custom blocks
Test your configuration thoroughly with content editors to ensure a smooth editing experience

← Advanced Images Multilingual Setup →