One of the benefits of working with WordPress is its maturity as a platform. However, the reason it has stayed so relevant is the project’s adaptability. Recently, there have been great strides towards a switching to a brand new editor called Gutenberg.

As with any major software change, you’ll want to make sure your existing plugins and themes will be compatible with this new editor. Thankfully, the code for the Gutenberg editor is now available as a public plugin in the WordPress.org Plugin Directory. This means you can download and install it to get a feel for any major compatibility issues in your WordPress-related projects.

In this article, we’ll first introduce you to the general Gutenberg project. Then, we’ll show you how to test your WordPress projects and ensure they play well together. Let’s get to work!

Introducing the Gutenberg WordPress Editor Plugin

Gutenberg plugin in WordPress directory
The Gutenberg plugin is available at WordPress.org

Gutenberg is a recent push towards building a new standard editor for WordPress. Its stated goal is to “make adding rich content to WordPress simple and enjoyable.” While Gutenberg still has a way to go before its usability issues are sorted out, the core elements of the plugin are ready for developer testing. As it’s still in beta, it’s not yet ready for live production sites. It has been released purely for testing purposes, and to encourage developers to contribute to the project.

The editor focuses on making it easy to format content. Its primary feature is a drag-and-drop interface for formatting pages and posts, and you can use an Insert drop down to add ‘blocks’ such as text, galleries, hierarchal elements like headings and lists, buttons, widgets, and much more.

The current goal is to make Gutenberg the standard editor by WordPress 4.9, so you have a bit of time to prepare for its release. If your plugins or themes generate widgets, or otherwise manipulates the output of post content, it will be especially important to ensure its compatibility.

In the new interface, common elements such as text and images get a quick menu within your content:

Gutenberg editor preview

You can also use the Insert drop-down to display all manner of additional content directly within your post:

Gutenberg insert dropdown

Now that you’re a bit more familiar with the Gutenberg approach to content writing, it’s time to cover the types of content you need to make sure your projects will be compatible with this new tool.

How to Test Your Plugins With the Upcoming Gutenberg Editor (3 Elements)

Much like any other plugin, Gutenberg can be installed through your WordPress dashboard. We also recommend using a browser with a code inspector, such as Chrome or Firefox, so you can see what’s being produced on the back end.

We’ll also reiterate: You should only install Gutenberg on local installations, as it’s not yet ready for live sites! Let’s now take a look at the three key elements.

1. Check for Proper Shortcode Output

Shortcodes in the Gutenberg edito

Shortcodes (of course) are an inherent part of WordPress. They’re pre-designed blocks of code represented by small text within square brackets (for example, [example-shortcode]). Because they’re simply textual representations for blocks of code, the Gutenberg editor will be replacing them with native editor blocks. Rather than needing to remember and use many shortcodes, you’d simply use the Insert drop-down to add the same functionality.

However, it’s highly unlikely WordPress will discontinue support for shortcodes straight away, so it’s not critical to outdate your shortcodes just yet. That said, it’s a good idea to check for any unexpected output and start preparing to turn them into native Gutenberg blocks.

Fortunately, this step is simple: Open the Gutenberg editor and add the shortcode you want to test into a text block. Finally, save and preview the post to check for any abnormalities, resolving them as appropriate.

Meanwhile, new templates are coming out to help you turn shortcode-like content into Gutenberg blocks. Adding this integration now means your plugin will be supported by the time Gutenberg is integrated into core, so you should definitely begin the process sooner rather than later.

2. Test Custom Media Output

Media gallery output from Gutenberg
An example of an embedded media gallery in Gutenberg.

Although there’s a big change to the way Gutenberg handles each piece of content, this shouldn’t cause problems with most plugins. However, if your plugin inserts any kind of custom media within posts or pages, you’ll likely want to check for compatibility issues that may arise from the new approach. This is especially important as the way media displays on the front end can have a drastic impact on the overall experience of your site.

To test this out, once again create a new post in Gutenberg. Of course, you’ll need to make sure your media plugin is activated and works with other normal posts and pages. Then, view the page to check the output generated by Gutenberg. Play around with different layouts that include your custom media, and watch for any unexpected behaviors on the front end. This could be resizing issues, ‘alt’ text or captions not displaying, or a myriad of other problems you’ll need to resolve.

In short, thorough front end testing is always a good idea, but is especially important when such drastic changes are on the way!

3. View Gutenberg Content in Custom Templates

Custom WordPress template code
An example of a custom template in a WordPress theme.

Since Gutenberg is a completely new content engine, there’s a good chance that it may interact differently with your current page layouts. This is especially important if you are developing themes or plugins that include default styling for pages.

You’ll likely want to keep an eye on this as development continues with Gutenberg. Given that the plugin is in beta, there’s plenty of scope for changes down the line, which may affect the output of any custom templates made by your WordPress plugins and themes. Gutenberg’s goal is to make beautiful page layouts simpler, but this may cause some incompatibility with older solutions. For example, the Gutenberg editor doesn’t support meta boxes yet, so you may need to find ways to work around this in your templates.

If your theme relies on custom templates, you should check whether they are working as intended. Once again, this can be done by setting up a Gutenberg page that should automatically load them through the hierarchy. Should you run into issues that cannot be addressed within your own plugin or theme, you should leave a report on the official Gutenberg GitHub project to help get them resolved before it’s merged into core.

Conclusion

Staying up to date with WordPress can be a challenge, but as an active developer it’s your job to maintain code that works with changes to the platform. The addition of the Gutenberg editor is imminent, and by testing your themes and plugins with it now, you can catch any severe issues ahead of time.

To review, here are three important ways you should be testing your plugin with the Gutenberg editor:

  1. Check for proper shortcode output, possibly supplementing them with custom blocks.
  2. Test media output for unexpected behaviors.
  3. View Gutenberg content in custom templates to ensure they still look correct.

Do you think Gutenberg will make your WordPress plugin development easier? Tell us why in the comments section below!

Image Credits: Hannes Wolf.

John Hughes

John is a blogging addict, WordPress fanatic, and a staff writer for WordCandy.

The post How to Test Your Plugins With the Upcoming Gutenberg Editor appeared first on Torque.

Share This