As a developer, I understand the importance of providing the best possible features to ease out an editor's job. And recently when I was migrating my blog site I faced the challenge that I work every day on solving.
A unique opportunity laid in my way as well. As a Drupal 8 Acquia Grandmaster, I was excited about applying my knowledge into moving my blog site from WordPress to Drupal 9. My first Drupal 9 migration.
Refer to the Youtube Video for explanation with Demo.
Gutenberg Editor for my wordpress blog
I’ve been using Gutenberg on my WordPress site since December 2018 and I believe this tool strongly suffices blogging needs. It has almost all the features that a blog site should have, to create and manage blogs. It radically changes the editing experience of adding content blocks of different types such as text, image, gif, embed codes, audio clips, quotes.
It is more like a page builder tool itself.
Planning, Development and Drupal
But I considered moving my site from WordPress to Drupal and there were a couple of reasons to do this:
However good my experience on WordPress, it wasn't flexible enough to allow me to add custom blocks on the page or create a different ad placement position. As an editor, I felt restricted to explore or stretch out my capabilities especially when I wanted to play around with the layout of different pages.
My recent qualification for the Acquia Drupal GrandMaster, pushed me to apply this knowledge and handle all the phases of site development on my own. My first Drupal 9 migration.
I started brainstorming the ideas and wrote them down to make sure that all the ideas are covered during the development phase. I could have used Trello for this but I like to create sticky notes and write down the idea on a board using a marker.
While I was in between the development phase, I got a chance to attend the DrupalCon Global 2020, it was the first DrupalCon that was happening virtually due to the Covid-19 and my first DrupalCon as well. I thank Srijan for giving this opportunity to attend and learn new things about Drupal and connect with the community.
I was pretty excited and spent a complete weekend creating a proper schedule of the sessions that I was planning to attend. One of them being - Gutenberg Editor vs Layout Builder by Jenna Shenk. The session was great and what was even better was to learn that the same editor is also available in Drupal.
In Drupal: Paragraph module for a better editing experience
I was excited for my Drupal 9 site. I choose paragraphs module with different paragraphs fields for a good editing experience for the article content type.
While doing this, I had multiple things to manage:
The requirement of different types of fields to create a blog, such as - text header, text block, inline image, gif support, embed block, quote block, inline-table, photo gallery, video
The fields should be easily accessible and draggable for changing the order of the content on the page.
Apply frontend stylings to each of these fields and manage to add custom classes (if required).
The main area that needs to be looked into in this case is - Frontend styling. There are multiple fields to manage and style for the landing page to show up as a properly styled landing page.
Drupal 9 and Gutenberg Editor
As shared in the last section, the main area that needs to be worked upon or would need more time and effort is - Front-end (styling the components). This is where Gutenberg Editor came to the rescue :)
After DrupalCon, I installed Gutenberg Editor on my site and started experimenting with the Article Content-type.
To enable the Gutenberg experience on any content-type:
Install and enable the Gutenberg Module.
Head towards the content type editing page example : /admin/structure/types/manage/article and enable the editor as follows:
After enabling the editor for the content type, the node add page of the content type should look as shared in the image below:
The moment I enabled it for the Article content type (Content type I’m using for writing blogs) - I was again looking at the editor experience which I had in WordPress to write blogs on my Drupal site. It was pretty amazing!
I got back the ability to create blogs using different blocks at different positions without having to use different fields.
The list of the blocks you see in the second screenshot can be configured from the configuration on the content type edit page. When we check the box for enabling the editor, the form displays configuration for adding / removing specific Gutenberg or Drupal blocks (Custom / Core / Contributed) from the list example:
Gutenberg solved my problem of having N number of fields of different types in a content type for creating a blog.
I no longer have to manage the frontend of the content type by styling different sets of fields.
It also provides the ability to add custom fields and use the content added in them in the content listing (displayed on homepage or in any component on any other page), the custom fields added are displayed in the “More Settings” drop down :
In my case, I used this feature to add an image and a “Listing Summary” field to display images and a short summary on the blog listing page.
Pros and Cons of Gutenberg Editor
Pros
Easy to implement and almost no developer intervention required for enabling the editor experience and using features provided out of the box
Great tool for creating unstructured content.
Can include and display Drupal custom / core / contributed blocks.
Avoids the time consumption of deciding and building different types of fields required for creating a content.
Cons
Individual instances of blocks and layouts aren’t reusable. That means, if users want more than one page to look the same, they have to manually lay out the content the same way each time
Comparison with Layout Builder
Layout Builder was introduced to Drupal after the Drupal version 8.7.0+ release. It provides the feature of changing the page layout without making any changes to the theme or the template.
One can use its drag and drop feature to customize the content on the landing page or across different pages. The data can be entered in different fields in the content type and these fields then can be used in layout builder to be placed at different positions.
Providing feature to add custom blocks at different positions on the page.
Allowing content editors to mix the data entered into fields and Block entities in multiple ways.
Gutenberg editor can be used to create unstructured content that does not require displaying content in a specific layout or a format. It generally gives the content editor more control over placing the content blocks at different places one page at a time. Whereas, layout builder can be used for both - structured and unstructured content. You can define the layout of a single page or decide one layout and apply to all pages of that specific content type. This brings us to the end of this blog where we learn how to decide which one to use for building a site that has good editing experience. Which one to choose from? In my opinion, both options work towards providing a better editing experience while creating the content on a site. Depending on the requirements of the content / page that needs to be created we can decide which one to use for what content type. As I said in my case, the blogs that I post have unstructured content and it really depends on each and every blog and there is no specific standard for displaying content, hence I chose Gutenberg editor for “Article” content type for posting blogs on my site. I might choose the layout builder in future if I ever plan to extend my site with more content apart from just blogs.