Ideas, Knowledge & Updates

The latest posts from the Make Do team

How Gutenberg changes the WordPress experience and how you can prepare for it’s release

Some of you may have seen the following notification popping up in your WordPress dashboard after a recent update:

Get Ready for WordPress Gutenberg
Get Ready for WordPress Gutenberg

Gutenberg is the new editor experience from WordPress, and it is great! It lets you quickly build and reorder a page structure with a whole array of custom blocks!

Here is a super quick overview of how it works:

The Gutenberg tour from Make Do

Looks great doesn’t it? But there are a few things you need to watch out for when preparing your site for Gutenberg.

Gutenberg May Break Things

For the most part Gutenberg works pretty well with most WordPress installs. But there are a few things to watch out for.

Classic Editor

When you first enable Gutenberg all of your content will be displayed in the ‘Classic Editor’.

The Classic Editor in Gutenberg
The Classic Editor in Gutenberg

You can continue to use the ‘classic’ block for all of your content if you like, but if you want to convert it into blocks, just click on the ‘three dots’ icon at the side of the block and select ‘Convert to Blocks’.

The 'Convert to Blocks' option
The ‘Convert to Blocks’ option

This will convert all of your content into Gutenberg Blocks.

The content has been converted to blocks
The content has been converted to blocks

Plugin Support

Most plugins have already been tested, but if you rely on plugins that have not yet been updated for Gutenberg,  have been custom developed, or are no-longer supported, you may run into trouble.

For example here is a content expiry plugin that hooks into the WordPress ‘Publish’ meta box. Note how there is an additional ‘Expires’ setting.

Expiry Date Plugin - Pre-Gutenberg
Expiry Date Plugin – Pre-Gutenberg

When Gutenberg is turned on, the hooks to add this kind of content are removed, meaning that the functionality is lost.

No expiry options after Gutenberg
Not an expiry  option in sight after the Gutenberg upgrade

If this is something you need support with. Make Do can help you bring your custom or unsupported plugins up-to-date with Gutenberg.

Theme Support and Layout Options

When you install Gutenberg you will need to check your theme compatibility. Gutenberg adds lots of new layout options and not all of them will work with your theme without a little extra development.

For example one of the new features is the new advanced image layout options, which allow images to render full screen:

Advanced Full Screen Layout Options
Advanced Full Screen Layout Options

Viewing the image in a theme that does not support the layout options will not necessarily ‘break’ the layout, but it won’t behave as you expect.

Viewing the image in a theme that does not support advanced layout options
Viewing the image in a theme that does not support advanced layout options

To support of these advanced layout options you may need to work your theme slightly, and you are better off having a theme that has no sidebar to fully take advantage of the options, alternatively you could suppress the options with a little extra development.

A theme that supports advanced image layout options
A theme that does support the advanced image layout options

Get Some Expert Help

Make Do are a skilled WordPress development team, and we can help you get your website upgraded to Gutenberg. We can help you with the following:

  • Gutenberg Upgrade Analysis and Recommendations
  • Adding Gutenberg Support to your theme
  • Suppressing certain blocks or layout options
  • Making your plugins work with Gutenberg (or providing alternatives)
  • Developing custom Gutenberg Blocks for your site
  • (In worst case scenarios) Preventing Gutenberg running on your website

Get in touch with Make Do to get started with a Gutenberg Upgrade.

Get Some Custom Gutenberg Blocks on Your WordPress Site

With custom layout blocks, your content appears in the editor exactly the same as how it will appear on the front end of your site. Custom layout blocks make managing your content intuitive, and a pleasure to do for your editorial team.

Have a look at this example profile layout sat inline with the other content on the page. You can upload a custom image, edit the name, title and description inline with the rest of your content

Testimonial Layout Example from Atomic Blocks
Profile Layout Example from Atomic Blocks

What you could do with a set of custom blocks designed specifically for your site? Would it take the pain out of building landing pages for example?

If this sounds like something you would like help with get in touch with Make Do for assistance with a suite of custom Gutenberg blocks for your site.

Are You a WordPress Developer?

Need something a little more technical? Would like to know more about developing for Gutenberg? Our co-founder Matt Watson has a selection of Gutenberg technical tutorials, and custom plugins.

Featured Blog & News

Read more blog posts...

Sign up to our newsletter