Shortcuts
Using keyboard shortcuts will save you a lot of effort, so it's well worth it to spend a bit of time to memorize some of the more useful ones. Below is a list of commonly used shortcuts.
- Ctrl + C - Copy currently selected block
- Ctrl + X - Cut currently selected block
- Ctrl + V - Paste block
- Ctrl + Alt + T - Insert block before selected block
- Ctrl + Alt + Y - Insert block after selected block
- Shift + Alt + Z - Delete currently selected block
- Ctrl + Shift + D - Duplicate currently selected block
- Ctrl + Alt + Shift + M - Toggle code editor view
- Shift + Alt + O - Toggle list view
Using other fields in Gutenberg
The Gutenberg editor will save its content to the body field, but what if you wanted to use other fields or metadata inside the editor? For instance, say you want to automatically embed the title, author, and published date, similar to what you see at the top of this article?
There is ostensibly a way to do this via templates as covered in the drupal.org documentation, but it's currently limited in scope and has poor support for different field types. We've found the best (if not the most elegant) solution is to use a contextually aware Drupal view, and embed that in the Gutenberg document.
To accomplish this, create a new view block display that renders a single node of your content type. In that view, you will add a contextual filter for Content: ID:
The key takeaway here is the WHEN THE FILTER VALUE IS NOT AVAILABLE section - you want to select Provide default value and select Content ID from URL in the dropdown. This tells views to "only display data from the current node being viewed."
From here you can add fields and format them as you normally would. Once you are done you can enable the view block in the Gutenberg settings, then embed it as you would any other Gutenberg block. Here is an example of the view we're using to display the title, author and date for this article:
Conclusion
That wraps up this series of articles about the Gutenberg editor. Congratulations if you've made it this far, you should now have a deeper knowledge of how to navigate the Drupal + Gutenberg ecosystem. Thanks for reading, and please feel free to get in touch with us for any of your web development needs!