Featured Technology Web Development WordPress

Gutenberg for Developers: How the Upcoming WordPress 5.0 Update Will Affect You

Image courtesy of Pixabay

WordPress’ new Gutenberg editor will change how users interact with and create their sites, and, of course, this means it’ll also impact your plugin or theme. If your plugin or theme isn’t ready for this, you’ll probably be getting a lot of support emails. So, let’s dive into what you can expect from Gutenberg.

Gutenberg Timeline

It’s in beta right now, and you should definitely download Gutenberg as a plugin to see how it works firsthand between now and the full update release. (Of course, if you do try Gutenberg while it’s in beta, don’t put it on a live website.) Otherwise, it’s being released with WordPress 5.0 sometime in 2018. It won’t come out until it’s ready—there’s a lot to do to make it really shine.

Certainly, though, it’s not too early to adapt.

From TinyMCE to a New Editor

Gutenberg is replacing WordPress’s TinyMCE editor in this next update. This represents a complete reboot of the editing experience in WordPress, and, consequently, will probably have significant implications for your work.

Basically, Gutenberg is making content on WordPress pages creatable and editable in blocks. Eventually, entire WordPress pages can be created and edited live without having to continuously hit “preview” to see how content looks and behaves. This creates a friendly, familiar experience for users that gives them more control over how their websites look than TinyMCE does. The TinyMCE library offers a lot and is a great deal better than WordPress’s original offering, but you’ll probably be glad to move on.

Users can quickly create new blocks and change settings like design elements, all without knowing the underlying code. It’s liberating to a lot of WordPress users, particularly people who were frustrated that their posts never really did look exactly how they wanted them to.

Prep for Gutenberg

Strategy-wise, there’s a lot you can do to help your plugin fit the Gutenberg ecosystem, and you’ll want it to.

Some Plugins won’t be as popular with users once Gutenberg gains steam, because they won’t look as good or work the same way. To keep your work competitive, I recommend preparing it for Gutenberg.

For many, this means creating plugins and themes that work with Gutenberg’s blocks. Maybe your plugin, for instance, will let users make blocks directly. Maybe all you need is the Block API because your plugin relies on shortcodes. Or, you may need the Sidebar API if what you’re doing is a bit more complicated.

You can use:

  • Block API–blocks are the Gutenberg editor’s primary elements
  • Shortcode API–when blocks aren’t enough
  • There’s others too (Status Bar, Publish Panel, etc.)

For themes there’s:

  • Adding-in custom styles for Gutenberg
  • Creating themes with blocks
  • Allowing for customized blocks

Getting the right development environment together to develop for Gutenberg is important, and there’s some things to know.

  • Gutenberg Plugins are coded in Javascript, so you’ll need to know some basics to make Gutenberg plugins
  • React was used to create Gutenberg; not essential for you to know, but might be helpful

Now, how your plugin operates will dictate what you’ll need to do to get it ready. One thing I can almost guarantee is that your plugin probably already does something or uses something that is dependent on Gutenberg. You’ll need to prepare for Gutenberg if your plugin uses the editor, and, well, that includes just about everyone. You’ll need to pay careful attention to understanding the basics of the Gutenberg editor so you’ll know how your plugin will behave.

In many cases, your plugin or theme pages will revolve around the use of blocks. So, we should probably talk about what those are and how they work in Gutenberg.

Block Basics

A block does so much and can be so much. Like:

  • Text
  • Widgets
  • Media, like videos and audio
  • Buttons
  • Graphics and images
  • Embedded stuff, like content from social media sites

Most of these are common blocks. Then there are also layout blocks. You can save blocks to reuse somewhere else on your site, too. So many options.

With your plugin or theme, you can integrate blocks and customize them to behave how you want them to. Awesome! Blocks are discrete units you can edit by themselves, together making the design of a post layout.

While it’s not really a page builder yet, Gutenberg will make it a lot easier to create more complex and customized post layouts. Maybe, in the future, it’ll become a page-building tool. Gutenberg is definitely still evolving and likely will for some time as users and developers get more creative with it.

Help Your Users Transition to New Things

No one wants to leave their plugin and theme users high and dry, of course. But plenty of developers have been waiting to update and prepare themselves for these changes. That’s taking a risk, I think.

These changes are coming up fast. And users and developers alike can already start playing around with Gutenberg, so what do you have to lose? It’s time to start making the transition now.

I like Gutenberg. I think in time you will too. It’s not 100 percent where it needs to be yet, but it’s completely changing the WordPress editing environment, and I believe it’s doing so for the better.

About the author

avatar

Mika Epstein

As DreamHost’s official WordPress guru, Mika Epstein troubleshoots any issue that comes up, offers top-notch support, and plays a key role in building and maintaining DreamPress, the managed WordPress hosting solution DreamHost offers. When she’s not working as a WordPress developer, she’s racking up stamps in her passport to speak at WordCamps about coding and open source technology. She also writes about these topics—and more—on her personal WordPress website.