Skip to main content

Gutenberg blocks

Adding a block in the editor

There are three ways in which you can add a block.

  1. When you are unfamiliar with the blocks and what they do,
    the best way is to click the large blue toggle block library button Gutenberg toggle Block inserter panel on the toolbar.
    This will open a panel on the left which shows all the blocks you have available, collected together in groups. Hovering over an item in the list will show you a brief description.
  2. Whenever you see the text 'Type / to choose block' (on a blank page or when you click below the bottom block) then you can either
    • type some text - which creates a Paragraph,
    • type / and a menu will appear showing you the last few blocks you have chosen
    • type / followed by the name of the block type you want to create - so if you know you want to insert a block of columns, just type /columns.
  3. Sometimes when hovering over the page a smaller toggle block library icon - sometimes in grey - will appear. Click this and you will see the last 6 blocks you have used underneath a search box.

Block toolbars

Each block has a toolbar (or set of controls) of its own which appears when the block is selected for editing. This will either float above the block or be docked to the Gutenberg toolbar if Option: Top Toolbar is selected.
There are some tools that are common to most blocks:

Gutenberg sample block toolbar - columns

Gutenberg sample block menu un-docked
un-docked (Top Toolbar option off)
Gutenberg sample block menu docked
docked (Top Toolbar option on)

The two toolbars are nearly identical: apart from being attached to the Gutenberg toolbar, the docked toolbar does not have the Drag and drop handle - .

The first (left most) icon shows the type of block when you hover over it. Click it to transform the block to a different one while keeping the contents.

The Drag and Drop handle allows you to drag and drop the block anywhere on the page (you drag the handle). Alternatively you can 'cut and paste' (ctrl+x to cut, ctrl/c to copy and then ctrl-v), or use the Move to menu item in the Block Options menu.

The up and down carets allows you to quickly move the block up or down. This will not move a block into or out of a columns block.

Column blocks show left and right carets to swap the block with the neighbouring one.

The right most icon [] opens the Block Options menu.

In between these icons, most blocks add their own specific items to their block toolbar.

Block Options menu

Gutenberg Block - Options Menu

Hide more settings
- simply shows / hides the Settings Panel

Copy
- copies the block to the clipboard

Duplicate
- creates a duplicate of the block below

Insert before, Insert after
- creates a 'Type / to choose block' widget before or after the selected block.

Move to
- displays a blue line above the block which you can move using the arrow keys. Then press enter to move the block to that position. I find this fiddly. Currently (Dec 23) does not work well with columns.