WordPress' highly acclaimed editor is now in Drupal! Also known as the WordPress Block Editor, Gutenberg got included in WordPress core in version 5.0+. It replaced the former classic WordPress editor and brought about a new and improved way to create and edit page content. The default admin text editor now in Drupal 8 and Drupal 9 core is CKEditor which succeeded the not-so-powerful FCKeditor. Gutenberg got included as a contributed module since Drupal version 8.1. While both CKEditor and Gutenberg editors are WYSIWYG editors, they are very different in the way they treat content. The latter embraces the concept of the blocks. Gutenberg editor's content blocks are similar to the current two Drupal approaches that are the Paragraph-based Approach and the Layout-builder Approach. It integrates well with everything Drupal uses including blocks and views.
The Gutenberg editor allows you to create all types of content using blocks instead of editing content in one large content area. It is great for non-technical users to build landing pages with ease as you don't have to write HTML manually (even if you want to create/save/reuse reusable blocks). It is also a great replacement for Layout builder. All in all, the Gutenberg editor is a game-changer for Drupal as it offers a modern, intuitive and easy editing experience for non-Drupal users. Thus opening Drupal's doors to a wider audience.
Features like these (Gutenberg and more) make up great reasons for you to migrate from Drupal 7 to Drupal 8. If you're still on Drupal 7 and skeptical about migrating to Drupal 8, read this article to resolve your doubts.
How different is Gutenberg from CKEditor
By now we know that CKEditor and Gutenberg are both WYSIWYG editors but there are many differences in the way they handle content. The significant distinction being the way Gutenberg treats content in terms of blocks while CKEditor treats content as, well, content. It is a new style of editor/page builder. Generally, we write text in a single text area but using Gutenberg editor, we can use content in terms of blocks. A block could be Paragraph, List, Heading, Table, Image, Video, button, etc. This editor is written in Javascript, mostly in React. It is very simple to use even for non-Drupal folks.
| Ckeditor | Gutenberg |
| If you want to change the color of a heading, you will need to go to the source, find the heading and manually change the style color | A heading style can get changed by simply clicking on that heading block and selecting the edit options from the sidebar on the right |
| Provides a single large layout for content editing | Leverages blocks to build layouts consisting of various editable elements |
| Videos and Social posts can be embedded using additional submodules | Can directly include embedded code using related blocks |
| Limited options for image-to-text alignment like wrapping text around images | Can efficiently wrap text around images offering many alignment options |
| Needs some amount of HTML and CSS experience to work with | Does not require you to have any HTML or CSS experience to build pages on the fly |
Implementing the Gutenberg Drupal module
Using the Gutenberg Drupal module is very simple as other contributed and core Drupal modules. The Gutenberg module can be installed by following steps:
- Installation: Install the Drupal Gutenberg module from here and install the module in the same way as you would install any contributed Drupal module.
- Enabling: You will find that Gutenberg comes along with 3 submodules. Let's enable all three submodules.
- Application in Content Types : It can be applied by following steps.
Structure > Content Type > Edit a content type which will use Gutenberg Editor > Enable by check box “Enable Gutenberg experience” - Using the Editor : Create a page using the content type which had applied Gutenberg Editor.
What are Gutenberg Blocks?
Gutenberg’s blocks are the editor blocks that are used to create content layouts.
All blocks are categorized as Text, Media, Design, embeds, Cloud Blocks, Drupal blocks, Reusable blocks.
Text Blocks :
1. Paragraph
2. List
3. Heading
4. Verse
5. Table
6. Code
7. Quote
8. Pull Quote
9. Preformatted
Media Blocks :
1. Image
2. Cover Image
3. Image Gallery
4. Audio
5. Video
6. File
7. Media and Text
Design Blocks :
1. Group
2. Separator
3. Navigation
4. Spacer
5. Button
6. Columns
Embeds Blocks: Almost all popular social media blocks insert using embeds blocks. List of social media blocks included: Youtube, Facebook, Twitter, Instagram, Flickr, etc.
Cloud Blocks: The Gutenberg development team also provides blocks that can be used by enabling the Gutenberg Cloud sub-module.
After enabling the “Gutenberg Cloud” module, choose the cloud modules from “Gutenberg Cloud Block Manager”. This is in the configuration's Content Authoring section.
Drupal Blocks: You can now add Drupal blocks into the editor. You may search for all available blocks in the “Drupal Blocks” section.
Reusable blocks: Gutenberg allows adding reusable blocks. If common content is added at multiple places then a reusable Drupal block can be created.
How to add Gutenberg blocks as Content?
According to the above description, we know that the Gutenberg editor is very different from the default CKEditor. To start adding available blocks, click on the plus (+) icon or hover over “Start writing or type”. Now you will get all the available blocks in a dropdown list. Click on any block that you want to insert in the content area.
Block Configuration
Configuration options can be added to each block according to their default properties. Like for a Paragraph block, the default properties are font-size, line-height, text-color, background-color, drop-cap, or adding a custom class.
