Hopefully, content editors and website owners are ready to gasp in admiration — because we know they will when they discover Gutenberg editor in Drupal 8. The eighth version of Drupal already boasts with easy content publishing, custom layout creating, and, as of Drupal 8.6.0, improved media handling and remote video embedding. However, there is no limit to perfection! Gutenberg editor is bringing unprecedented content creation features to Drupal 8.
Gutenberg editor in Drupal 8
Where the Gutenberg name comes from
In the XV century, Johannes Gutenberg of Germany invented the printing press, which revolutionized book creation forever. The Gutenberg editor was named after him, and is expected to bring revolutionary web content creation experiences. Well, every epoch needs its own Gutenberg!
The essence of Gutenberg editor’s work
Gutenberg is a modern, open-source user interface for creating rich pages. It is an app built in JavaScript — more precisely, React.js.
Content editors can play with Gutenberg UI to shape the exact look of their pages. They can achieve theming effects otherwise available only to CSS and HTML experts — but easy for anyone with this editor.
Any page elements can be added as blocks and formatted to your heart’s content. These can be image galleries, texts, tables, lists, shortcodes, buttons, columns, social media embeds, paragraphs, quotes, verses, files, and so much more.
Bringing Gutenberg editor to Drupal 8
Gutenberg.js was created with WordPress in mind. WordPress has already adopted the editor, which is promised to be fully ready with the release of WordPress 5. However, this JavaScript app was so lucrative that the Drupal community also decided to get it.
Drupal developers Per Andre Rønsen and Marco Fernandes introduced Gutenberg to everyone at Drupal Europe in Darmstadt and created the Gutenberg Drupal module to connect the editor to Drupal 8 websites.
This Drupal 8 module is in alpha state at the moment of writing, so it is not completely ready for use. The module has a number of issues, and the same applies to Gutenberg editor itself.
Considering the extensive works being performed for both the app and the module, this situation can change very quickly.
How the Gutenberg module in Drupal 8 works
With the Gutenberg Drupal 8 module installed and enabled, the Gutenberg editor needs to be switched on for the desired content types. The “Gutenberg experience” option needs to be selected and checked.
The module requires a field of “long text” type with the Gutenberg text format selected.
When it’s done, every node opens for editing in the Gutenberg UI. As we see, its interface is pretty much white space, with the menu options hidden until you need them.
By clicking a plus icon in the left-hand corner, you are offered the list of page elements that can be added as blocks. For your convenience, blocks are searchable via the search box.
They fall into six main categories:
- Drupal blocks
Content body, title, image, user ID, picture, email, comments, and many more.
- Common blocks
Paragraph, image, heading, gallery, list, quote, audio, cover image, file, video.
- Formatting
Coding, preformatted, pullquote, table, verse.
- Layout elements
Button, columns, “more,” page break, separator, spacer.
- Widgets
Shortcode, archives, categories, latest comments, latest posts.
- Embeds
Over 30 social networks and media providers to embed content from.
Once a block is added, you can open its detailed settings in the right hand corner. For example, you can choose the background and text color, the size of the letters, the number of columns, and so on, depending on the block. Many blocks have an advanced option to add CSS styles.
You can move the blocks up and down, align them as you wish, switch their block type, duplicate or remove them. In addition to the visual editor, Gutenberg also has the code editor.
To recap
Drupal itself works like the best of Legos. And now it is getting another interesting Lego box inside it — Gutenberg editor.
The time has come for exclusive content creation opportunities! If you wish to migrate to Drupal 8 to enjoy them, or if you need help with installing and configuring any modules like Gutenberg editor in Drupal 8 or other, contact our Drupal web development company.