WordPress 5.0 and Gutenberg: 5 Things You Need to Know

Monday, December 31st, 2018 by Alex Martin

Web Design Collaboration

What is Gutenberg?

The WordPress team at Automattic has made some big upgrades to their new editor titled Gutenberg. The Gutenberg WordPress editor, built with React.js, is a new-style page builder that is being developed to integrate with WordPress core. This new block-based editor is designed to streamline your editing experience across your website without having to understand HTML code. You will have more flexibility regarding how your content is displayed by using blocks that are easy to edit, snap, and re-arrange to fit your needs. The project was named after Johannes Gutenberg, the man who brought the written word to the masses. With that being said, here are 5 things you need to know about the WordPress 5.0 and the Gutenberg editor:

1. The Reason Behind Gutenberg

Matt Mullenweg, the creator of WordPress, is completely behind the Gutenberg project. From their plugin page: “The editor will create a new page- and post-building experience that makes writing rich posts effortless, and has ‘blocks’ to make it easy what today might take shortcodes, custom HTML, or ‘mystery meat’ embed discovery. — Matt Mullenweg”. The goal of the block editor is to make adding rich content much more enjoyable by revising a layout editor (Tiny MCE) that has been largely unchanged for nearly a decade. This block editor will allow users with less technical experience create their own content more easily.

2. Editing with Blocks

The new Gutenberg editor introduces blocks. Before WordPress 5.0, your content lived inside one giant HTML file; to make any sort of enhancements would require a shortcode, embed, widget, or custom post type. Each of these has their own quirks and odd behaviors, and they can cost you time when they act up. By using blocks, you can customize your content like your own Lego set – building, stacking, and editing any way you see fit with a few simple buttons. The new editor has several default block types and includes an API that will allow developers to create their own to meet future needs. Here is a list of all Gutenberg blocks as of December 2018:

3. A Beautiful New Default Theme

Twenty Nineteen, the new default theme for WordPress 5.0, shows off the power and versatility of Gutenberg. This theme was designed specifically for Gutenberg’s block-based editor. At its core, Twenty Nineteen is a theme with a minimalistic aesthetic with a focus on beautiful typography and responsive design. Its minimal design allows the theme to work well in a variety of applications. Whether you need a simple blog or a full-fledged website, this theme, coupled with Gutenberg’s block-editing, packs a heavy punch for rich content editing.

4. Not a Fan? Switch to Classic Editor

The beauty of WordPress 5.0’s new Gutenberg update is that they are not forcing you to use their new editor. You can easily switch back by clicking the Classic Editor option on any page you wish to edit. If you would like to permanently disable the Gutenberg editor completely, you can choose from a wide array of plugins designed to do so. We at CompuSys recommend the plugin Disable Gutenberg.

5. React and Gutenberg Block Development

If you are a plugin or theme developer, you need to start exploring Gutenberg and making your theme and/or plugin compatible with it. There is also a burgeoning market for new opportunities to develop “Gutenberg Blocks” on the job market. Gutenberg is built using the React library, which is a JavaScript library developed by the Facebook team. React is a component-based user interface library used for building beautiful UI components. Since Gutenberg has a thin layer of abstraction over React, it is not necessary to learn React to develop custom Gutenberg blocks. However, if you want to understand what is going on under

the hood (which comes in handy when you run into errors in block development), then we would recommend you learn ES6, JSX, React, and Redux in that order to further your understanding of block development in Gutenberg.

Final Thoughts

WordPress 5.0 is making big changes with their new React-based editor Gutenberg, and these changes necessitate caution and patience when upgrading your WordPress installation. Before upgrading, you should make sure your theme and plugins are compatible with version 5.0 and above. As development progresses on Gutenberg, things will get more stable and compatibility errors will become less frequent. Editing pages and posts will be much easier than in the Classic Editor, which will speed up productivity in developing content. We at CompuSys believe the future looks very bright for WordPress after their new 5.0 update.
 


 
Interested in our web design services? We provide a multitude of services – whether that may be Email Marketing, SEO Campaigns, Website Optimizations, or Full Website Development – let CompuSys provide you with a solution that fits your needs!