Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Gutenberg editor in Drupal 8 for unique content creation opportunities

Parent Feed: 

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 for 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.

Enable Gutenberg editor for content type in Drupal 8

The module requires a field of “long text” type with the Gutenberg text format selected.

Select Gutenberg text format for content type in Drupal 8

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.

Shortcode, archives, categories, latest comments, latest posts.

Over 30 social networks and media providers to embed content from.

List of blocks in Drupal 8's Gutenberg editor interface

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.

Configuring a block in Drupal 8's Gutenberg editor

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.

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web