How Will Gutenberg Change Your WordPress Workflow?

The Classic block in Gutenberg.
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.

DOWNLOAD NOW

Writing with Gutenberg

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.

Your Web Designer Toolbox

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.
So, what’s changing? Let’s have a look at some areas that WordPress 5.0 will have its greatest impact.
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.
The Block Lab plugin allows for a more visual approach to creating custom blocks.
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.
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.

Customizing the Edit Screen

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.
Yes, it’s a lot to take in. But at least we have the necessary tools and knowledge to handle these changes successfully.
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.
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.
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.
Among the biggest changes with WordPress 5.0 and Gutenberg are how customizations to the edit screen both look and are built.

Building a Custom WordPress Theme

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.
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.
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.
Want to see how your theme will handle each Gutenberg block? The Block Unit Test for Gutenberg plugin can help.
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.
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.

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.
Sample output from the Block Unit Test for Gutenberg plugin.
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.
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets
Starting at only .50/month!

Posted by WordPress Guru