WTH is Gutenberg and Will It Affect Your Site?

October 19, 2018 1:00 pm

What is Gutenberg?

Gutenberg is the new editor included with the upcoming WordPress 5.0 update. Named after Johannes Gutenberg (he invented movable type printing), the new editor aims to make it easier to add rich content to your pages and posts.

screenshot of the current WordPress editorThe current visual editor can require the use of a lot of shortcodes and sometimes even a knowledge of HTML to make things work the way you want. I know I’ve fought with it a few times and usually just end up writing out HTML as a quicker and more accurate solution.

With Gutenberg, WordPress is moving to a system of blocks. Each block is a piece of your pages content such as a heading, an image or paragraph text. You’ll also have the option to build custom blocks to customize your site even further. I’ll be diving into the various blocks in an upcoming post, in the meantime you can learn more on the official Gutenberg page.

How does this affect existing websites?

The new block system will be a noticeable change from they way you’ve been editing before. Gone is the web form-like design where you enter the title in the first field and the content in the larger field and perhaps a featured image on the right. Now, you’ll see more of a blank canvas where you can start adding blocks for your content. By default, you’ll start with a title block and a story block which is similar to the current editor.

screenshot of the new Gutenberg WordPress editorCurrent WordPress themes and plugins might have compatibility issues with the new editor. In my testing it appears that the various blocks will take on a theme’s styles to format the content. For example, if you have a theme with blue, sans-serif header text (like this one) inserting a header block will still insert blue sans-serif text. Additionally, there is a block specifically for shortcodes if your theme or plugin requires.

I built for this site’s theme in WordPress 4.9 and didn’t see any major issues by simply adding Gutenberg. The only change I’ll be making is to create a new, full-width page template to take full advantage of new blocks like Cover Image and Columns (which is still in beta).

If you’re interested in testing your site’s theme, try setting up a local version on your computer and installing the Gutenberg Plugin. It will give you all the new functionality that will be default in the upcoming release (no official release date as of this writing). If you find something amiss don’t worry, WordPress says the Classic Editor will be available as a plugin if needed.

Be sure to check back soon for more posts about what to expect in the Gutenberg update and tutorials on using the new editor.

Categorised in: ,