Have you ever wondered what something is called within Gutenberg? This guide is meant to help by giving the names and the expected behaviour of some of the basic design elements. If you want to build blocks and extend Gutenberg, knowing what to use or not is important. This is meant as a starting point, not a full description of all design elements.
Toolbars:
There are two toolbars:
- The Editor toolbar: This controls document tools like undo and information. Also within this toolbar are preview, publishing and saved state.
- The Block toolbar: This controls block specific behaviour, for example in a paragraph block bold/italic and adding a link. As a guide, place common settings that a user would want for every version of that block in the block toolbar.
Settings:
These are also referred to as 'advanced settings' when linked from the block toolbar.
There are two settings:
- Document: This gives you global settings for the entire document like visibility and reviewing. Think of this like your settings panel for your content.
- Format: This is per block and changes depending on the block and if it even has settings. These differ from the toolbar as are secondary block settings, for example adding a CSS class (in most blocks) and doing styling that isn’t as common.
More menus:
These come in 2 locations:
- Document: These contain document settings such as switching display modes, position of toolbar. Anything that is not specific to a block or the document would go here, for example display modes or something like a spell check.
- Block: When beside the block there are commonalities found in all blocks:
- Hide Advanced Settings (if visible) or Show (if hidden)
- Edit as HTML
- Remove
- Convert to Reusable Block
- Convert to another Block and a list of those blocks.
As a guide you’d not be adding to these menus in a custom block. You’d ideally use something like the advanced settings here.
Add:
It's worth noting that insert is changing to add potentially. There are multiple ways to add a block in Gutenberg to content:
- Toolbar (although this may be removed)
- Above a block: a ‘+’ appears on hover
- Below the block: a ‘+’ shows all the time to interact with
Library:
The library appears when you click to add and then you see all blocks available. You can also search for the block by name. Blocks are in sections both through tabs and in within each section there are categories.
Recent blocks
Recent blocks also shows all the blocks a user has been using frequently.
Document outline:
You can view information about a block by clicking ‘i’. This contains helpful document information like number or words written.
Leave a Reply