- 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)
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
For this tutorial, I’ll be using the dev release of the module so that we have the latest features.
To download the latest dev version:
composer require drupal/gutenberg:1.x-dev
Once you’ve downloaded the module go to Extend and install it.
Configure Gutenberg on Page Content Type
Now that we’ve installed the module let’s configure it on the Page content type.
1. Go to Structure, “Content types” and click on Edit from the Operations menu.
2. Click on “Gutenberg experience” from the vertical tabs and check “Enable Gutenberg experience”.
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.
How to use Gutenberg
Now go to Content, “Add content” and click on “Basic page”. You should now see a very different node edit form.
How to Add Content
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.
Integration with Drupal’s Managed File System
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.
Add Drupal Blocks into the Editor
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.
Create Reusable Blocks
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”.
Add Reusable Block to Page
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.
Managing Custom Fields
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.
1. Go to Extend and enable “Gutenberg Cloud”.
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.
How is the Gutenberg Data Stored?
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.
Q: Can I use this module on a production site?
Update: Since publishing this tutorial, the Gutenberg module became stable and is actively maintained.
Can you use this module on a production site, I think so yes.
I wouldn’t use this module in a project just yet. It’s still too early. The module looks good, however, there are a few bugs and not that many sites are using the module. Go to the project page and look for “… sites report using this module”. But if you have the skills to fix bugs and migrate the data out of Gutenberg if you no longer want to use the module, then by all means, use it.
12 thoughts on “Create Pages using Gutenberg (WordPress Editor) in Drupal 8”
Thanks! That was super helpful and informative! How far away do you think the module is from being used on production sites? Also do you see Gutenberg becoming a viable alternative to using Paragraphs for enabling clients to have control over creating content in the GUI?
I really can’t answer that as I’m not the maintainer of the module.
Best to ask in the project issue queue. (https://www.drupal.org/project/gutenberg)
The module is ready for production usage. We use it in production sites for several clients already 🙂
Hi Thor Andre Gretland,
Thanks for your comment.
I’ve updated the tutorial (The FAQ section at the bottom) to reflect that it can be used in production.
Great tutorial, thanks!
Is this an alternative to layout builder and paragraphs.
And are there situations where one of them is prefferred ?
Gutenberg is meant to replace the body field editor. So it’s closer to Paragraphs than Layout Builder.
Layout Builder is more focused on managing blocks and regions.
Thank for great tutorial.
Can you show how use views with materials, like news (with image and texst section created by gutenberg)? How create a news block and news page with first image from news type material? Or we need first image field anyway?
Sorry, I don’t fully understand your question.
Any block view is accessible as a Gutenberg block. So just create your block view and it should appear there.
Anything more than that you’ll need to create a Gutenberg block, https://www.drupal.org/docs/8/modules/gutenberg/create-a-custom-block-for-gutenberg-cloud
Can you help me?
I had created the block with a views module. But I can’t see it in gutenberg any section. It did not appear in a gutenberg drupal block section. How can I post this block in to a page? Maybe I do somthing wrong. Can you create tutorial how show wievs block of taxonomy term into a page?
Don’t really know what’s happening.
Try a different view display, i.e., make sure it’s a block view.
If that doesn’t work look in the project issue queue to see if others have had the same problem.
Hi, Ivan. Thanks for you tutorial. How can we install any extend gutenberg plugins? For example,
Getwid? I want to use accordian plugin in to a gutenberg editor. How can I do this?
I never installed extra Gutenberg plugins so I don’t know.