Get notified when new tutorials are published. Subscribe to our newsletter.
📽 Video sections:
- Download and Install Gutenberg (01:15)
- Configure Gutenberg on Page content type (02:01)
- How to use Gutenberg editor (03:21)
- Upload images into Gutenberg (06:55)
- Create reuseable blocks (11:02)
- Use Gutenberg Cloud (15:42)
- Learn how the Gutenberg data is stored in Drupal (20:31)
Want to Learn Drupal? Check out our FREE courses.
Gutenberg is the new editor for WordPress 5.0. It's a new style of editor/page builder. Instead of writing text in a single text area, you build a page using blocks. A block could be something simple such as a paragraph or an image. Or more complex blocks like a "Media & Text" or adding in columns.
In this tutorial, you'll learn to install and configure the Gutenberg module, and you'll learn how to use it on the Page content type.
If you're keen to have a play with the editor without configuring a Drupal site go to https://drupalgutenberg.org/demo.
Before we begin, go download and install the Gutenberg module. Run the following Composer command:
composer require drupal/gutenberg
Now that we've installed the module let's configure it on the Page content type.
3. Click on "Allowed blocks" to expand a list of available blocks. You can control which blocks will be available for editors to use.
4. Once you've configured everything, click on "Save content type".
That's all the setup work required to get it working on any content type, pretty easy.
Now go to Content, "Add content" and click on "Basic page". You should now see a very different node edit form.
The Gutenberg editor is very different than the text editor which comes with Drupal 8. Instead of just writing into a large text field, you create and manage blocks (Gutenberg blocks).
NOTE: I'm not referring to Drupal blocks which are added to regions.
To see all the available blocks, hover over "Start writing or type.." or click on the plus (+) icon.
Let's say, for example, you want to add a heading and a paragraph. You would create a Heading block, then a Paragraph block.
Instead of clicking the (+) icon, you can add blocks even quicker by typing "/" and search using its name. Any block can be added this way.
Also, if you paste in a bunch of text then the Paragraph block will be automatically used.
Each block has its own configuration. If we take the Paragraph block, for example, you can change the font-size, background color, text color and more. You can access the settings by clicking on the Block tab on the right.
Apart from just offering the editor, the Gutenberg module integrates nicely with Drupal's managed file system.
Take for example the "Media & Text" block. You can upload files (by drag-and-drop as well, which is great) and add text to the right.
And if you click on "Media Library" you can reuse any images which have already been uploaded.
You can add Drupal blocks into the editor (now I'm talking about Drupal blocks which are added to regions).
Just search for any block using its name or look in the "Drupal Blocks" section.
Here's an example of how to add the "Recent content" block view.
There are a lot of different blocks in Gutenberg, and I recommend you spend time playing around and learning how to use them.
Gutenberg allows you to create reusable blocks. These blocks can be added to any page and if you modify the block, it'll change across all pages.
For example, let's create a List block which will be reused on multiple pages.
1. Create the block in Gutenberg.
2. Click on the 3 vertical dots which will open the "More options" drop-down.
3. Then click on "Add to Reusable Blocks".
To reuse a block, click on the (+) and you should see a Reusable section with the block.
To edit a reusable block, add it to a page and click on the Edit button.
NOTE: This will change the block across all pages which are using it.
You may have noticed that the editor takes over the whole node edit page. What happens if you use Gutenberg on a content type with custom fields?
The fields get added at the bottom of the page in a field-set called "More settings":
The team who built the Gutenberg module also created a website called Gutenberg Cloud. It allows you to share Gutenberg blocks with others.
Using blocks in your own site is easy. You just need to enable the "Gutenberg Cloud" sub-module which ships with the module.
2. Then, go to Configuration, "Gutenberg Cloud block manager".
From this page, you can enable blocks from "Gutenberg Cloud" to be used on your own site.
3. To use enabled blocks, just select them from the "Cloud Blocks" section. Or search for them by name.
So you may be thinking right now; how is the data stored in Drupal? When you add a block, where is it stored?
Short answer, it's stored in the body field.
If you look in the
node__body table and look in the
body_value column you'll see that all the blocks are stored as markup.
Setting up the Gutenberg editor was easy. By simply checking the "Enable Gutenberg experience" checkbox on a content type, you have the editor up and running. To be honest, I was surprised it was this easy to configure.
Originally published at WebWash on April 4, 2019.