Categories

(60)
(42)
(7)
(26)
(67)
(93)

Gutenberg editor in Drupal 8 for unique content creation opportunities

03.10.2018
Gutenberg editor in Drupal 8 for unique content creation opportunities
Author:

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.

  • Widgets

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

  • Embeds

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.

3 votes, Rating: 5

Read also

1

Congrats to everyone on the release of Drupal 8.6.0! :) The new minor version of Drupal promises to be especially attractive for website users, owners, editors, and developers alike. Six months...

2

Everyone can enjoy the advantages of working with Drupal CMF in terms of filling a website due to...

3

The dream of many website owners is to have the option to send emails on their websites. Of course, it’s possible with Drupal 8, because it has infinite powers. We’ve already discussed how your...

4

You’re an experienced player in online business and stay here for a long time. Probably, your site was built in days of yore and your functional is outdated. There is a great possibility you...

5

Each Drupal release makes it more refined and up-to-date. The latest one offers better architecture, fresh functionality, improved security and other...