All Courses > Up and Running > Gutenberg Roundtable

The next release of WordPress (5.0) is due soon and is going to include a new editor, dubbed Gutenberg. The inclusion of Gutenberg in WordPress core is highly anticipated by some yet highly feared by others. We discussed what we currently know about Gutenberg, highlighted some of the concerns and unknowns, and debated the implications of these. For those who use and/or develop with WordPress day-to-day, the key takeaway is: don’t panic.

What is Gutenberg?

Officially, Gutenberg is the name of the project to create a new WordPress editor. Most people now refer to the new editor itself as Gutenberg. While it’s expected to be released sometime in 2018 as part of WordPress 5.0, nobody yet knows the exact release date. Currently it’s available to download as a plugin, and is being tested and iterated on.

Essentially, Gutenberg is a page builder. It’s a simple block-based editor, intended to make it easier to build nice looking layouts [2:17]. It’s similar to third-party WordPress page builders like Beaver Builder, or other services like Squarespace and Wix.

Page Builders Are a Good Developer Tool Now

WordPress page builders have a problematic reputation, and in the past they were particularly bad, causing sites to break and making it impossible for developers to fix issues [5:58].

While some page builders continue to cause these issues (think Visual Composer), others are more thoughtful about how they put a layout onto a page. In particular, Beaver Builder is an excellent tool for building highly visual layouts.

Having realized it’s possible to do this well, Gutenberg is WordPress’s venture into the page builder space.

Gutenberg Will Probably Remain a Backend Builder

The vast majority of commercial page builders work in both the back- and frontend, allowing you to edit a layout on the page itself. But Gutenberg works exclusively in the backend – at least for the foreseeable future [7:35].

This is likely because it’s simply too difficult to build frontend capability into WordPress core. There’s too much bad JavaScript floating around to get it to work with anywhere near 100% of sites. This is backed up by the Gutenberg handbook stating it isn’t going to be a frontend builder.

It’s more feasible that individual companies will create their own frontend capabilities off the back of Gutenberg [8:54]. WordPress.com (Automattic’s hosted version of WordPress) would be a prime candidate. Unlike many of their direct competitors, they’re yet to move into the page builder space yet they’re heavily involved in the development of Gutenberg. So it would be natural for them to finally make that move once Gutenberg is ready.

What’s Wrong with the Existing Editor?

Why do we need a completely new editor anyway, when the existing one works fine and tons of people are already using it?

While the current editor is familiar, it forces a bad user experience on people. Many of the formatting elements used by the current editor were a cry for help – solutions hacked together because there were no good layout solutions [13:07].

Consequently, there’s a big (and growing) problem around how content is handled.

While WordPress is now very quick to install, the time investment needed to wade through plugins, shortcodes, widgets and page templates – then work out how they all fit together – is significant [5:54].

The Gutenberg project calls blocks the ‘unifying evolution of shortcodes, embeds, widgets, post formats, custom post types, theme options, meta-boxes, and other formatting elements’.

The promise of blocks is that we can have a lot less kludges and a lot more good quality solutions.

Editor “Mystery Meat”

Some of the elements used by WordPress to handle layout are like mystery meat – impossible for anyone but the person who wrote that element to know for sure what it’s going to do. This is especially true for shortcodes and page templates.

Shortcodes are square bracket bounded, HTML-like attributes [3:22]. They’re often created by plugin and theme authors to allow users to embed forms, or to create complicated layout elements. For a user, they’re difficult to understand.

Adding them to a post or page is a bit like writing code, except you do it in the editor. You also need to hunt through documentation to figure out which shortcode to use and there’s no consistency because they’re unique to each plugin or theme. Shortcodes are also mysterious because once typed into the editor, you have to click preview in order to visualize that shortcode.

Similarly with the current editor, a page template is mystery meat to anyone who didn’t create it themselves. Any content added to the editor will appear in a location dictated by the person who built the template. Without previewing the page, there’s no way to know where that content will appear.

The hope is that Gutenberg will remove the need for any mystery meat solutions as everything will be transparent, making building a WordPress page easier and more intuitive.

On release, Gutenberg will let you put a shortcode inside a specific block so existing shortcodes won’t be rendered obsolete [34:18]. But moving forward, best practice will be to make a block to replace what your shortcode would do. This allows users to better visualize and not have to trawl documentation learning to use different shortcodes for every individual theme or plugin.

Better for WordPress Developers

There’s a lot of concerned discussion among the WordPress community [31.35]. This concern surrounds the areas of Gutenberg that are yet to be worked out, and what the implication of these are.

This uncertainty is breeding some unnecessary hype. It’s important to remember that there is a hype cycle – we saw it before with the release of the REST API and we’re seeing it again now with Gutenberg [33:38]. The hype cycle starts with anticipation, then moves to worry. But once Gutenberg is released, it’s actually going to be a bit of an anti-climax as people will realize ‘oh it’s just that’.

Ultimately, Gutenberg is going to help you build layouts. It’ll take away the need to keep creating hacky solutions, like shortcodes, and replace these with best practice.

Gutenberg is just another page builder that might be better or worse than other third-party page builders. So in the next 12-24 months, the implications for Gutenberg on you as a WordPress developer are really the same as for third-party page builders [12:28].

With Gutenberg, you no longer have to rely on hacks to get layouts into WordPress. That means that things like widgetized home pages, and shortcode-based layouts will become a thing of the past.

Meta Boxes vs. Meta Blocks

Custom fields are still a big question mark for a lot of people [36:35]. The current editor provides lots of space for meta boxes, but how does Gutenberg deal with these?

All meta boxes still work with Gutenberg – they sit at the bottom of the post editor as before. However, this isn’t necessarily the best user experience. It never was.

Gutenberg opens up new possibilities of storing that data, depending on what works best for a particular use case. One option is to create your own meta block: a block in Gutenberg that stores data as post meta. This would allow you to store things like prices as post meta, rather than an HTML div inside of your post.

There’s also now the ability to use a side panel to add post meta and switch between these side panels for different plugins.

While still a work in progress, this area of Gutenberg is set to provide a better user experience.

Themes Should (Hopefully) Change

Unfortunately right now there’s a lot of momentum behind creating themes bloated with many hardcoded layouts [18:40].

This practice encourages people to shop for themes by looking for an exact layout. Consequently, many thousands more themes exist than are really necessary, and these themes lock users in by causing sites to break if swapped out.

The arrival of Gutenberg should remove the appeal of choosing a theme based on specific layouts offered. And therefore, it should also encourage theme shops to build more pared down themes.

The ideal scenario is themes move to provide an overall aesthetic, but leave out the predefined page layouts. Layouts would instead be modified via the editor and any other functionality added via plugins.

A Better Way of Working

Like the introduction of the Customizer back in 2013, it could take some time for theme shops to buy into this new way of working. WordPress is a huge messy space with lots of substandard practices [23:46]. It’s likely that existing bad practices will continue to predominate for at least a couple of years.

It’s up to individual developers to make the most of Gutenberg’s potential.

As a developer, you personally won’t be forced to do the bad stuff that had previously been necessary day to day. You can opt for simpler themes and decide not to rely on plugins for layout options. You can choose to rely less on widgets and shortcodes.

Importantly, Gutenberg doesn’t dry up any aspect of a WordPress developer’s job. It just gives you more power when it comes to creating custom layouts. You can do it yourself without relying on a theme option specifying that for you.

As Gutenberg gets better, hopefully we see a standardized sub-community that works with Gutenberg well.

Don’t Panic!

Right now, Gutenberg does a small number of interesting things that should improve your experience. However, the wider question of what it means for the future of WordPress is still up in the air.

Whatever the answer turns out to be, it’s clear that in three years’ time, we’ll all still be here making money from WordPress. What’s likely to disappear are some of the bad themes on Themeforest, which can only be a good thing for WordPress.

And, if Gutenberg is successful, WordPress should become more appealing to more people. We may even see movement of Squarespace and Wix users over to WordPress.

So, some takeaways [46:40]:

  1. Don’t panic!
  2. The implications of Gutenberg are important but not huge.
  3. Try it out and test it for yourself to see how it fits with your workflow. Once shipped, it’ll be part of WordPress core anyway, but you can download the plugin now.
  4. If you like, you can learn all about Gutenberg now (including how to build blocks). But you don’t need to just yet.
  5. This is very much an evolving space. Keep an eye on what’s happening and keep up to date via WPShout.com and the Make WordPress blogs.

Hopefully this discussion has cleared up some of the big questions around Gutenberg. Despite the unknowns, we’re confident Gutenberg is going to provide a better user experience and rid WordPress of much of the bad practice that’s currently part of the day-to-day work for many developers.