Inspiration, Learning

New Kids on the Block | #GetGutenbergReady Series 2018

Back in June 2017, at WordCamp Europe, Matt Mullenweg presented a preview of the new Gutenberg editor and announced its availability as a plugin on WordPress. The Gutenberg project has been in active development for over a year already and is currently being developed on GitHub.

It is a completely new publishing experience for WordPress, updating its current TinyMCE text editor with the new editor using game-changing blocks and revolutionizing how users can edit words, pictures and layouts on WordPress in the future. It’s currently planned for merge into core for version 5.0 of WordPress, which we’re expecting to be released in mid-2018 (Check out the revised Gutenberg Roadmap here and MVP Scope & Features).

Gutenberg presents a fascinating step forward in the way content is edited with WordPress. For the first time in core using content blocks and page builder-like functionality to bring together all the different areas of the post/page creating process.

“The Gutenberg editor uses blocks to create all types of content, replacing a half-dozen inconsistent ways of customizing WordPress, bringing it in line with modern coding standards, and aligning with open web initiatives. These content blocks transform how users, developers, and hosts interact with WordPress to make building rich web content easier and more intuitive, democratizing publishing — and work — for everyone, regardless of technical ability.” – WordPress.org

So, what does that mean for you as a developer and author?

Gutenberg is a big deal for authors and customers as the change is going to impact everyone who uses WordPress and upgrades to 5.0. So, we’re launching this series of posts to introduce authors to the concepts and experience of Gutenberg (though you’ve likely already heard of it) and the ways you can prepare for it.

We’ll go through the new Gutenberg editor for WordPress and what you need to know in its design, what the user experience will be like, showcase some online and offline learning events and outline insights from our experts and industry specialists.

GIF Image Source: https://wordpress.org/gutenberg/handbook/outreach/resources/

The Gutenberg Story

Named after Johannes Gutenberg, who invented the printing press and introduced the mechanical movable type, it works to replace the content editor and make the experience easier, by utilizing blocks to allow for more advanced and customizable layouts. Explore the Gutenberg editor in detail here.

What Are the Block(s) and Why Are They So Important?

At the heart of Gutenberg lies the idea of blocks. Content blocks (or Gutenblocks as some people call them) are designed to create an easy canvas for building posts or pages. The current WordPress editor is made up of a simple WYSIWYG editor, which isn’t ideal for using various forms of content.

Gutenberg looks to enhance the experience, providing a well-designed layout, using blocks to allow easy editing for users. As a theme or plugin developer, you should check out how to create block types here and block design best practices.

The overall vision for Gutenberg is highlighted in the WordPress Handbook, which states :

  • Everything is a block
  • All blocks are created equal
  • Drag and drop is additive
  • Placeholders are key
  • Direct manipulation
  • Customization
GIF Image Source: https://wordpress.org/gutenberg/handbook/outreach/resources/

Preparing for Gutenberg

The goal of Gutenberg is to help to move WordPress forward as a platform, “Not only by modernizing the UI, but by modernizing the foundation.” As Gutenberg is introduced, plugin and theme developers will need to consider adapting their businesses and creating content blocks suitable for Gutenberg’s design, just as we are here at Envato.

Of great interest to our authors, Gutenberg will open up an entirely new market to get involved in, with more ways to earn – designing new premium block plugins or updating existing plugins to work with the new editor. However, this also means that developers will need to prepare for WordPress 5.0 by making sure their current items aren’t affected by the implementation of Gutenberg.

The WordPress core team realise that this is a major change to WordPress and that Gutenberg might not be compatible with some existing sites. They have created a plugin called the ‘Classic Editor’, once installed it reverts the editing screen and essentially disables Gutenberg.

Top Five Tips to Help Prepare for Gutenberg:

We asked our WordPress specialists what the most important things are when preparing items on Envato Market, Envato Hosted and Envato Elements for Gutenberg and WordPress 5.0. Here are their top five:

  1. Familiarise yourself with the language of Gutenberg and functionalities:
  • Read through the Gutenberg handbook on WP.org
  • Download and install the Gutenberg plugin to test out the new functionality and follow along with releases early here.
  1.  Make sure your items will not break with the upcoming WP 5.0 major release (including Gutenberg and any other 5.0 changes):
  • Add basic styling for Gutenberg blocks and elements that matches the item
  • For themes that integrate one or more page builder(s), allow the customer to easily choose to use Gutenberg vs. the other(s).
  1. Communicate to customers if your item ‘is’ or ‘is not’ compatible with WP 5.0 and Gutenberg:
  • Promote Gutenberg compatibility in your item description and live preview.
  • Add a Gutenberg element style guide page to your theme live previews to showcase how Gutenberg blocks will look.

    4.  Update your item description/documentation to cover any new Gutenberg features or integrations as necessary:

  • For themes that integrate an alternate page builder that’s not compatible with Gutenberg, we recommend providing step-by-step instructions to help users revert to the classic editor and set-up the page builder.

     5.  If your item is not compatible with Gutenberg, let customers know and support them through the new installation:

  • Provide documentation/support material to help the customer to revert back to the classic editor if needed.
  • Recommend/require the installation of the Classic Editor plugin using TGM activation class.
  • Start planning to support Gutenberg in a future release, as customers are likely to want it!
GIF Image Source: https://wordpress.org/gutenberg/handbook/outreach/resources/

WordPress Into the Future

These are exciting times for WordPress. Developers will be exposed to a new market of opportunities for their business. This will require some investment from WordPress developers to learn new tools and experimentation with creating their own blocks and ensure their WordPress Theme or Plugin provides a seamless user experience.

With changing times, adaptability is key and modernizing WordPress development will ultimately help to bring in new audiences, advance designs and increase accessibility for users across all levels of WordPress editing. Anyone can download the Gutenberg plugin from the official WordPress.org repository – try your existing Themes and Plugins to see how you find it!

Keep an eye out for our next article in this series where you can get all the latest insights from ThemeForest author and WordPress Specialist, ThemeBeans.

If you have any questions, want to continue the conversation or share your Gutenberg insights, jump over to our dedicated Gutenberg thread on the forums and connect with your fellow author community.