My top advice, use the shortcuts
Learn the shortcuts. As with any software, it’s always beneficial in the long run. It takes only a few tries to remember them and once they are known, editing and creating content becomes a lot more enjoyable and efficient. Totally worth it. What I personally do with any software is that I check the shortcut by hovering over a button and then use the shortcut without clicking on it to force myself to learn. In Gutenberg, a lot of the shortcuts are revealed this way. If it’s not the case on a specific button, use [Alt+Shift+H] or [Ctrl+Opt+H] to reveal the list of available shortcuts. The full list is also available on this page
Start by learning the shortcuts of the tools that you use the most. For example:
Duplicate block: [CTRL + SHIFT + D] or [CMD + SHIFT + D]
Delete block: [CTRL + ALT + Z]
Move block up:
Move block up:
Header toolbar & preferences
Select VS Editing mode:
It’s sometimes useful to switch between the 2 modes. Most often, you will use the EDITING mode but when struggling to select a block or when it’s not clear if 2 lines of text is made using 1 or 2 blocks, use the SELECT mode. The same applies when trying to add a new block between 2 blocks when the + icon does not show because of spacing. The SELECT mode will help with that
Shortcuts
[ENTER]: Editing, [ESCAPE]: selection
View headings, paragraph, character and block counts
Click on the DETAILS icon in order to see an overview of your content. This is useful when targetting a specific amount of words you would like to have on your page. It’s also great to verify that your headings are properly structured. For example, check that only one H1 is used, H3 headers are used under H2 etc.
Outline
The Outline button allows you to see a Tree / List of your blocks. This can be useful when selecting a specific block. Not that this button will only show the block list of a selected block (if you have one selected). So if you are having issues understanding the overall structure of a group of block, simply click on it before clicking on the Outline button so you don’t need to go through the entire list of block used on your page
Undo / Redo
Use the Undo Redo function as often as needed making sure to use the shortcuts
Editing the content
Adding a new block in the content
The faster way to add a new block is to press [ENTER] then [ / ]. I.E you finished typing a header, press [ENTER] to create a new block then [ / ] to show a list of block and be able to start typing the name of the block that you would like to add
Start typing the first few letters of the block to quickly find and select it. Remember to use your keyboard as much as possible! This is particularly useful when adding an element by clicking on the icon within the page content because the widget shown there is small and only shows the blocks you last used
Copy, pasting, formatting, adding a new row
The usual copy/pasting and text formatting shortcuts found on most other softwares work her too.
For example:
CMD or CTRL C, V, X to copy, past, cut
CMD or CTRL K to convert a string to a link
CMD or CTRL B, I for Bold and Italic
If you need to go back to a new line without creating a new paragraph. Use [SHIFT] + [ENTER] so you don’t have any spacing applied to a paragraph block in between the lines
Use the Preview button
Some blocks, like the HTML block, let you insert tags/codes. This does not look like it will when browsing the page that you are editing. For example, if you use a block to past a SVG image, your will see the code of the SVG rather than the actual image. Select your block and click on PREVIEW in order to render the code instead
Note that you can view and edit any block’s HTML by clicking on the block’s CONTROLS (the block’s options) button . Here, I edited the HTML to past the icon within this paragraph block. This converted my paragraph into a HTML code block
Reusable blocks
At the moment, you are able to convert a group of blocks that you create within your page content into a Reusable block. Be careful though, this is meant to be used when the same exact content of this block needs to be shown on multiple pages of your site. If you modify a reusable block from any page content, the block’s style and its content will be changed everywhere it is used on your site!
If you have a new block to create but with different content in it, you can add your Reusable block and convert it into a block. I would assume that a feature to create blocks or Patterns rather than only Reusable blocks will be released in the future
Overview of the shortcuts listed when pressing [Alt+Shift+H] or [Ctrl+Opt+H]
Below shortcut list can be seen on the official documentation page
Editor shortcuts
| Shortcut description | Linux/Windows shortcut | macOS shortcut |
|---|---|---|
| Display keyboard shortcuts. | Shift+Alt+H | ⌃⌥H |
| Save your changes. | Ctrl+S | ⌘S |
| Undo your last changes. | Ctrl+Z | ⌘Z |
| Redo your last undo. | Ctrl+Shift+Z | ⇧⌘Z |
| Show or hide the settings sidebar. | Ctrl+Shift+, | ⇧⌘, |
| Open the block navigation menu. | Shift+Alt+O | ⌃⌥O |
| Navigate to the next part of the editor. | Ctrl+` | ⌃` |
| Navigate to the previous part of the editor. | Ctrl+Shift+` | ⌃⇧` |
| Navigate to the next part of the editor (alternative). | Ctrl+Alt+N | ⌃⌥N |
| Navigate to the previous part of the editor (alternative). | Ctrl+Alt+P | ⌃⌥P |
| Navigate to the nearest toolbar. | Alt+F10 | ⌥F10 |
| Switch between visual editor and code editor. | Ctrl+Shift+Alt+M | ⇧⌥⌘M |
| Toggle fullscreen mode. | CMD+Option+Shift+F | ⇧⌥⌘F |
Blocks shortcuts
| Shortcut description | Linux/Windows shortcut | macOS shortcut |
|---|---|---|
| Duplicate the selected block(s). | Ctrl+Shift+D | ⇧⌘D |
| Remove the selected block(s). | Shift+Alt+Z | ⌃⌥Z |
| Insert a new block before the selected block(s). | Ctrl+Alt+T | ⌥⌘T |
| Insert a new block after the selected block(s). | Ctrl+Alt+Y | ⌥⌘Y |
| Move the selected block(s) up. | Ctrl+Alt+Shift+T | ⌥⌘⇧T |
| Move the selected block(s) down. | Ctrl+Alt+Shift+Y | ⌥⌘⇧Y |
| Change the block type after adding a new paragraph. | / | / |
| Remove multiple selected blocks. | delbackspace |
Selection shortcuts
| Shortcut description | Linux/Windows shortcut | macOS shortcut |
|---|---|---|
| Select all text when typing. Press again to select all blocks. | Ctrl+A | ⌘A |
| Clear selection. | Esc | Esc |
text formatting
| Shortcut description | Linux/Windows shortcut | macOS shortcut |
|---|---|---|
| Make the selected text bold. | Ctrl+B | ⌘B |
| Make the selected text italic. | Ctrl+I | ⌘I |
| Underline the selected text. | Ctrl+U | ⌘U |
| Convert the selected text into a link. | Ctrl+K | ⌘K |
| Remove a link. | Ctrl+Shift+K | ⇧⌘K |
| Add a strikethrough to the selected text. | Shift+Alt+D | ⌃⌥D |
| Display the selected text in a monospaced font. | Shift+Alt+X | ⌃⌥X |
External links for more information
WordPress Editor documentation: https://wordpress.org/support/article/wordpress-editor/
WordPress Block editor documentation: https://developer.wordpress.org/block-editor/