This post is Tutorial 4 in the Gutenberg 101 series.
Want to edit the HTML of a page or post directly? With Gutenberg the Text tab in the editor is removed. You can now access the new code editor by clicking on the three vertical dots in the upper right hand corner next to the gear icon. You will see some new code though, so be prepared for that, but it is normally just HTML comments and helps to find the different blocks in the code. Alternatively, you can also use the shortcut Ctrl + Shift + Alt + M to switch between editors.
You can also edit the HTML on a per block basis. When you select a block click on the 3 vertical dots that appear and choose the Edit as HTML option. This lets you edit just one section of your content in HTML.
If you need to quickly add just a HTML snippet, then simply use the Custom HTML block and add the HTML code there.
Keyboard Shortcuts
Many of the keyboard shortcuts that work in the classic editor still work in Gutenberg. However Gutenberg does add some new shortcuts that will help you navigate the editor quicker.
- Enter – Simply pressing the enter key will automatically add a new paragraph block.
- / – The slash key is a shortcut for adding blocks. After you press the enter key press the slash key. A list of available blocks will appear. Use your arrow keys to choose the block you want to add. Alternatively you can start typing the name of the block after the /. For example: /heading will add a heading block.
- CTRL + Shift + ALT + M – Windows only shortcut to switch between the code editor and the block editor.
- Cmd + Shift + ALT + M – Mac only shortcut to switch between the code editor and the block editor.
- CTRL-Del – Windows only shortcut to delete a block.
- CMD-Backspace – Mac only shortcut to delete a block.
Still following along with this Gutenberg 101 tutorial series? If so, be sure to visit the next tutorial in the series: Advantages + Hurdles of Gutenberg.
