Very soon, the Gutenberg WordPress editor will become part of the WordPress core. What does that mean for you? What if you’re already using a page builder? In this post, we’ll walk through the basics of the new Gutenberg editor for WordPress and what you need to know.

What is the Gutenberg WordPress Editor?

The Gutenberg WordPress editor is a new page builder that is being designed to integrate with WordPress core. Gutenberg will add content blocks and page builder-like functionality to every up-to-date WordPress website. When in use, it will replace TinyMCE as the default content editor. With Gutenberg, content is added in blocks of various types from the WordPress backend.

Gutenberg is slated to be released with WordPress 5.0. Thankfully, there’s a lot of healthy debate going on around Gutenberg involving many people who develop and use WordPress.

Gutenberg WordPress editor

1. The Purpose of Gutenberg

  • “The goal of the block editor is to make adding rich content to WordPress simple and enjoyable.”
    – From the Gutenberg plugin description on WordPress.org.
  • “Gutenberg is an important step forward for WordPress. Gutenberg enables WordPress to build content layouts, not just write articles. It is one of the many transitions happening in WordPress toward a more simplified user experience.”
    – Zack Katz, speaking at WordCamp Denver 2017

The question of WHY Gutenberg is an ongoing debate. We’ll talk more about this later.

2. Matt Mullenweg is Completely Behind It

  • In The State of the Word 2016, Mullenweg announced that the visual editor would be one of three core focuses for 2017.
  • Matt took over as project lead for Gutenberg earlier this year and assigned Automattic employees Matias Ventura and Joen Asmussen to lead the development.
  • Read Matt’s take on Gutenberg here: We Called it Gutenberg for a Reason.

3. Gutenberg is Currently a Plugin

  • You can add Gutenberg to any WordPress site today as a plugin downloaded from the WordPress plugin directory.
  • The Gutenberg plugin is usually updated weekly as new features are included.
  • As noted in the plugin description… this is beta software. Use with care.

4. Gutenberg Will Be Included in WordPress 5.0

  • The revised Gutenberg roadmap was published in August.
    • Nov 2017: 4.9 release
    • Dec 2017: Begin merge proposal for Gutenberg
    • Jan 2018: Gutenberg / Customizer crossover
  • No date for WordPress 5.0 has been officially set based on the official WordPress roadmap.

5. Gutenberg is Definitely Not Finished Yet

  • Many of the features of Gutenberg are still being implemented, and new versions have changed previously implemented UI and features.
  • Don’t panic because it doesn’t work well right now.
  • Right now, you’re basically seeing the sausage being made, and it’s not pleasant. Some have complained about this, but there’s something to be said for transparency. Perhaps it’s not fair to criticize a half-built house because it’s drafty.
  • Gutenberg is currently written using REACT javascript. With Facebook’s recent move to relicense the project under the MIT license, Matt Mullenweg announced that WordPress.com and Gutenberg would be rewritten using a different library. Here’s more info on REACT and WordPress. This will surely delay the Gutenberg project for some time.

6. Gutenberg Blocks & Embeds

Gutenberg employs a number of ‘blocks’ you can use to customize your content and layout in the editor.

COMMON BLOCKS FORMATTING BLOCKS LAYOUT BLOCKS WIDGETS
Paragraph Pull Quote Separator Latest Posts
Image Table More Categories
Gallery Preformatted Button Shortcode
Heading Code Text Columns
Quote Custom HTML
List Custom Test
Cover Image Verse
Video
Audio

Embeds

Twitter Animoto Meetup.com SmugMug
YouTube Cloudup Mixcloud Speaker
Facebook CollegeHumor Photobucket TED
Instagram Dailymotion Polldaddy  Tumblr
WordPress Funny or Die Reddit  VideoPress
SoundCloud Hulu ReverbNation  Vine
Spotify Imgur  Screencast  WordPress.tv
Flickr  Issuu  Scribd
Vimeo  Kickstarter  Slideshare

7. Some of the Good with Gutenberg

It’s a move forward for the WordPress visual editor.

  • The WordPress visual editor has been stagnant for years.
  • While it’s predictable, it’s not exactly a fantastic experience.
  • The goal is to have an interface that is more intuitive for new users like those offered by Wix and Squarespace.

Using HTML comments to store block info is clever.

  • Gutenberg stores information about blocks in HTML comments.
  • These comments are only seen on the back end of the site and are not rendered on live pages.

Disabling Gutenberg won’t break your site.

  • Unlike many other page editors, if you uninstall Gutenberg, you won’t break your website.
  • The special HTML comments are retained in the content so that you can reactivate Gutenberg without losing previously arranged blocks.
  • Note that without Gutenberg active, the HTML comments are rendered in page source. But since they are just comments, they are benign.

The copy and paste routine is well executed.

  • In earlier versions of Gutenberg, copy and paste made a mess. Formatting was lost in the process. Not any more.
  • Pasting paragraphs, lists, headings, etc. results in blocks of the appropriate type being automatically created by Gutenberg.
  • Text markup like bold and italics are also retained.

Solid HTML 5 output

  • Gutenberg blocks output content using HTML 5 tags like section and figure.
  • Using HTML 5 tags will help to future proof content created in Gutenberg.

You can write your own blocks.

  • Developers will be able to create their own blocks for customized content.
  • Here’s more information on writing a Gutenberg block

8. Some of the Bad with Gutenberg

No more composing in the browser.

  • Gutenberg’s UI is focused on content layout not content creation.
  • The days of sitting down and composing in the post window are gone (of course there is a question about how many people do this anyway).

The UI is a bit clunky.

  • It can take more clicks to do simple tasks. Updating a page now takes two clicks instead of one.
    Nondescript icons are used without much clue to their function.
  • The three columns formed by the admin menu, Gutenberg editor and Gutenberg sidebar get crowded and can be confusing to scroll around on smaller displays (like the 12” Macbook I’m writing this on).
  • Metaboxes are hidden under extended settings underneath and beside the editor.

No shortcodes in paragraphs.

  • Currently, shortcodes cannot be executed in text columns or paragraph blocks.
  • They must be placed in the shortcode block in order to work.
  • This can cause some problems if your shortcodes produce inline content like the year or an inline call to action.
  • Note that shortcodes in pages/posts will still work when Gutenberg is added to an existing site. So they’ve done a good job making sure existing things don’t break.

No images or other embeds in paragraphs.

  • In Gutenberg, you can’t wrap text around an image. Images have their own block.
  • Embeds like audio and video also require their own block. oEmbed from Youtube, Vimeo, etc. will no longer work in Gutenberg paragraphs or text columns

Significant accessibility issues (at least currently)

  • Currently there are major accessibility issues on the using the back end Gutenberg editor and on content output by it on the front end (like inline CSS).
  • The WP Accessibility team will certainly deal with these issues before release.
    • Accessibility is a big priority for WordPress in general.
    • There are serious questions about how inline CSS will be addressed since it’s currently stored in HTML comments and then rendered on the front end.

Older themes don’t style HTML 5 output.

  • Gutenberg blocks output content using HTML 5 tags like section and figure.
  • Many older themes don’t have CSS to address styling these tags, so margins and padding for these tags will probably be nonexistent.
  • Gutenberg doesn’t have its own stylesheet to account for this.

9. What’s Unresolved with Gutenberg? A Lot.

The relationship between the Gutenberg editor and themes.

  • As mentioned above, Gutenberg deals with content not styling (well, sort of – you can add background colors to blocks but this is executed as an inline style).
  • At present time, block padding and margins are completely unaddressed. This of course could change.
  • Most WordPress page builders allow fine-tuned control over rows, columns, spacing, etc. Gutenberg relies on the theme right now for all of this.
  • There is currently only a little info in the docs for Gutenberg theme support, including block support, wide image support and color palette support.
  • There is some info in the docs on applying styles to Gutenberg with stylesheets.
  • The problem here is that novice users (which is the audience Gutenberg is trying to help) usually have no idea about themes or their relationship to the WordPress system.

How will it be integrated into the WordPress core?

  • Currently, every indication is that Gutenberg will be part of core WordPress in version 5.0 set to be released in 2018.
  • Will it be enabled by default? Will we be able to disable it? These questions are unanswered at this point.
  • It could be executed like the REST API which is on by default, but easily disabled by a single-purpose plugin or various security plugins like iThemes Security.
    • Surely there will be a “Disable Gutenberg” block of code or plugin. Or perhaps popular page builders will include a disable Gutenberg option in their settings.
  • One of the best suggestions I’ve read is put it in Jetpack and let those who want it activate it from that platform.

When will the Gutenberg WordPress Editor be released?

  • Nobody knows (or at least it’s not been publicly stated).
  • In his article on REACT and WordPress, Matt Mullenweg said, “The Gutenberg team is going to take a step back and rewrite Gutenberg using a different library. It will likely delay Gutenberg at least a few weeks, and may push the release into next year.”
  • Many have had a strong reaction to that statement, like Yoast’s article on a Gutenberg alternative: “At Yoast, we were pretty shocked about these words. In its current form, Gutenberg is not ready -at all- for mainstream usage. In fact, we do not see it as being ready to be released anywhere in the first half of 2018. In our view, ready to be released also means that the community has had ample time to fix all of their integrations. In this point of time, it’s not possible for plugins at all to integrate with Gutenberg. How on earth should plugin authors be able to build their integrations within a few months? That’s not possible. At least not without breaking things.”

10. Articles of Note on The Gutenberg WordPress Editor

This is a collection of the best articles on Gutenberg that I’ve read to date.

Chris Lema talks about Gutenberg

Misunderstanding the goal of the Gutenberg Experience

Excerpt:

  • “If we’re going to solve a problem with this plugin, shouldn’t it be the cognitive dissonance that people have when they edit in one interface and see their work product appear in a different interface that doesn’t look like they thought it would?”

Beaver Builder’s Response to Gutenberg

August Update – 2.0, Themer, and Gutenberg, Oh My!

Excerpt:

  • “In short, we’re really excited and supportive of Gutenberg! Our hope is that the project continues to evolve into something Beaver Builder can embrace and extend. We’ve been collaborating with the core team on the project, and we’ve been speculating, both optimistically and cautiously, of Gutenberg’s potential impact on our business and the WordPress space in general. Imagine if Gutenberg “Blocks” we’re interchangeable with Beaver Builder modules, or if you could drag a saved row into a Gutenberg page. Or, Gutenberg’s text editor could be used inline in Beaver Builder. Lot’s of fun potential, right!?”

Elegant Themes

WordPress Responds to the Gutenberg Editor – A Review Roundup

Excerpt:

  • “When looking at the debate, it’s important to remember that every change will bring some inertia and resistance. WordPress needs to move forward in order to compete in a changing environment. However, that doesn’t mean that the concerns being voiced are not valid and don’t need to be addressed. Thankfully, the developers are doing their best to do just that. Yet, seeing how many people are concerned and feel left out, maybe some additional communication is necessary.”

A Rather Scathing Review on WPMU

This one pulls no punches.

Gutenberg Editor Review: Please Don’t Include This in WordPress Core

Excerpt:

  • “While the developers working on the Gutenberg editor plugin have obviously put a lot of work into creating the plugin and I commend them on their efforts so far, the truth is, this plugin is nowhere near ready to be included in WordPress and needs a lot more work, in particular, UX work.”

Yoast Suggests an Alternate Course for Gutenberg

Some significant problems are noted and solutions suggested.

An alternative approach to Gutenberg

Excerpt:

  • “We are very enthusiastic about the idea of blocks, but have strong concerns about some of the technical choices and the speed of the implementation process. We are also worried about the lack of priority given to accessibility issues in the project. But most importantly, we are very much concerned about the fact that plugins are not able to integrate with the new editor.”

Yoast Talks About Concepts for Integrating His Plugin with Gutenberg

Here’s a lead other plugin developers might follow.

Gutenberg: Concepts for integrating Yoast SEO

Excerpt:

  • “We started by breaking down all our features, and seeing where we could integrate them into Gutenberg. We don’t think holding on to a single, massive box below the editor will best serve our customers. We’d much rather integrate right where the action happens, and Gutenberg offers us that chance.”

Josh Pollock of Calera Forms

Five ways he wants to be proven wrong about Gutenberg:

Five Ways I’d Like To Be Proven Wrong About Gutenberg

Excerpt:

  • “This is a big decision about the future of WordPress. I believe that we as a community will get this right, but it’s going to take a lot of testing, iterating and discussion to get it right.”

The Best 1-Star Review of All

So What Should You Be Doing about Gutenberg?

Give it a try.

  • Get to know Gutenberg for yourself. Install it on a test site and give it a spin.
  • See what you like and don’t like about it.

Submit feedback.

  • Gutenberg recently added a Feedback link under it’s sidebar menu item.
  • Take some time and offer well-considered observations about your experience using Gutenberg.
  • “You guys are morons” is not what they’re looking for.

Don’t panic.

  • There’s a lot of thoughtful discussion happening by many good people on this.
  • Even if the version of Gutenberg that makes it to core totally stinks, there should be a way to disable it.

Watch the Webinar: Gutenberg is Coming (Don’t Be Afraid)

In this webinar, we walk through all things Gutenberg and attempt to answer some of the questions about what’s next.

The post The Gutenberg WordPress Editor: 10 Things You Need to Know appeared first on iThemes.

Powered by WPeMatico