When Automattic releases version 5 of its very popular Content Management System (WordPress) later this year, it will come with a new editor. The new editor, named Gutenberg, will provide a welcomed update to the way website owners edit pages and posts. I have been using the Gutenberg editor for several months now. Read on to discover the good, the bad, and the ugly issues I encountered using the new editor.
Gutenberg uses the concept of blocks for adding content to a WordPress website. Common items, such as headlines, lists, and images, are now entered using blocks. These blocks are easily targeted using CSS, providing the ability to customize the block. The new editor provides some of the same functionality found in page builder themes and plugins (such as Divi Builder and Beaver Builder).
Gutenberg changes the way users interact with WordPress. The concept of blocks is relatively easy to grasp. Just think of a page being a group of individual sections that you can edit and update to produce the look and feel you want for your website. You don’t have to remember shortcodes. Gutenberg is also a visual editor. When you add a new block, you immediately see how it will look on the page. One feature I really like is the context menu that displays common parameters related to the block currently being edited. You can also save a block and reuse the block in other places on your website (for instance, you create a custom footer that you want to use on every page). Another feature I found helpful is you can move blocks around at will using the drag and drop capability.
The Gutenberg editor does not support responsive columns (i.e. the website displays three columns horizontally on desktop monitors but stacks the columns vertically on smartphones). If you need a fully responsive website (and who doesn’t?), you need to test your website before using the Gutenberg editor. The horizontal page layout options are currently limited. Custom page layout requires adding custom CSS to the backend. You also need to target the new classes added by the Gutenberg editor. Adding theme support for Gutenberg requires adding custom code to the functions.php file. This custom coding is outside the knowledge of most WordPress users.
Compatibility with currently installed plugins and themes is a significant issue. Some of the most popular theme creators are adapting their offerings to support Gutenberg. For instance, Divi Builder, Beaver Builder, and Yoast SEO are all adding support for Gutenberg. There is only limited support for adding meta boxes to blocks. While blocks make it easy to add a class, there is no way to add a unique ID to a block. One workaround is to use unique classes but that goes against the premise of using classes.
Gutenberg will break some themes and plugins, causing website layouts to fail.
So, with several months of testing Gutenberg under my belt, what do I think? First, I like the approach taken by the new editor. It helps WordPress users create content using a visual editor so they can immediately see what the page will look like. The concept of blocks is already used by other software and is easily understood. Will Gutenberg take work away from website designers and developers? I don’t think so. When WordPress 5.0 launches, there will be a requirement to test websites to ensure they will function properly. Finally, there will also be work converting websites to the new editor. There will be work finding solutions to plugins and themes that do not support the new editor. The best advice I can give is to check your website now to ensure it is compatible with Gutenberg. Don’t wait until WordPress 5.0 releases and sections of your website stop working.
Is your website ready for Gutenberg?