The way you develop for and create content with WordPress is changing. With the release of WordPress 5.0 and the new Gutenberg editor, there will be a lot of adjustments to make. They not only affect what we see on our screens, but also the underlying techniques we use to customize the back end.

What’s especially important to note is that it’s not just web professionals who will bear the burden of a changed workflow. Everyday users will also have their own learning curve to deal with. The simple act of writing a blog post, for example, will look much differently with Gutenberg than with the Classic Editor.

That’s not to paint any of these changes as either positive or negative. Regardless of how you feel about them, they are changes nonetheless.

So, what’s changing? Let’s have a look at some areas that WordPress 5.0 will have its greatest impact.

Writing with Gutenberg

The most visible change with WordPress 5.0 is the block-based Gutenberg editor. Gone are the days of a single rectangular field to type away at your next blog post. Instead, virtually everything is contained with portable blocks – including text paragraphs.

The positive side of this change is that it’s easy to rearrange content – something that could be frustrating with the Classic editor. A user can, for instance, edit one block without fear of impacting any of the surrounding content.

Still, it’s going to take some getting used to – especially for longtime users. The UI is fairly intuitive, but a different experience altogether from what a standard WordPress install has been.

Oh, and one tip worth mentioning about those paragraph blocks: Hitting the Enter key at the end of one paragraph will automatically create another new block. So, you can continue writing in the editor without having to manually add blocks via the UI. Alternatively, you can use the “Classic” block, that allows for the more traditional style of content writing.

The Classic block in Gutenberg.

Customizing the Edit Screen

Among the biggest changes with WordPress 5.0 and Gutenberg are how customizations to the edit screen both look and are built.

For example, if you use a plugin such as Advanced Custom Fields to create custom field UI setups, it will still work just fine. But Gutenberg forces these fields down to the very bottom of the screen. Therefore, any elaborate custom layouts you’ve built for the back end are going to be stuck below the fold – unless you opt to remain with the Classic editor.

Beyond that, adding custom features to the editor itself is a completely different process in the post 5.0 world. Since the Classic editor’s TinyMCE-based setup is being pushed aside, you’ll need to create a custom block for Gutenberg in order to integrate with the editor. That will require some serious knowledge of React and JavaScript in general.

Thankfully, the aforementioned Advanced Custom Fields and the new Block Lab plugin both provide easier methods for creating custom blocks. This will enable more developers to build in custom capabilities for the new editor without diving too deeply into the weeds with JS. The process will be more familiar, yet still requires some effort to learn.

All told, customizing the edit screen will require a very different approach in order to achieve the same level of integration with the WordPress editor’s UI.

The Block Lab plugin allows for a more visual approach to creating custom blocks.

Building a Custom WordPress Theme

It seems fairly unlikely that Gutenberg will “break” any themes. Instead, existing themes just may not be setup to take full advantage of some of the fancy new features, such as cover images.

By default, some “baseline” styles for all Gutenberg blocks will be included. However, you can also add custom styles to your theme in order to better control how blocks look on the front end of your site.

Want to see how your theme will handle each Gutenberg block? The Block Unit Test for Gutenberg plugin can help.

Sample output from the Block Unit Test for Gutenberg plugin.

It’s also possible to include (or withhold) support for specific features, such as full-width images, via some code in your theme’s functions.php file. This provides you with some measure of oversight regarding what your theme can or can’t do with Gutenberg.

Lastly, one of the main selling points of Gutenberg is an experience that is much closer to being truly WYSIWYG. To get as close as possible, adding editor styles to your theme can provide a more accurate reflection in the editor of how content will look on the front end. WordPress has a built in a handy .editor-styles-wrapper class to get you going.

Rolling with the Changes

In some ways, this may all sound a bit overwhelming. But while change isn’t easy, it’s also inevitable. Therefore, all we can do is make the best of it.

A positive aspect of all of this is that, even though WordPress 5.0 is out there, we can still opt for the Classic editor if we so choose. This empowers us to make the final decision on whether these changes are a good fit for our own particular situation.

The Classic editor will be supported at least through the end of 2021, meaning we have some time to adjust before taking the plunge into Gutenberg. So, while our workflows are indeed going to change eventually, we get to do so at our own pace.

Yes, it’s a lot to take in. But at least we have the necessary tools and knowledge to handle these changes successfully.

Written by Eric Karkovack

Eric Karkovack is a web designer with well over a decade of experience. You can visit his business site here. In July 2013, Eric released his first eBook: Your Guide to Becoming a Freelance Web Designer. He also has an opinion on just about every subject. You can follow his rants on Twitter @karks88.