Webinar Recap: Designing Gutenberg with Mel Choyce

Mel Choyce, product designer at Automattic, recently spoke with Pantheon’s Steve Persch during Pantheon’s Designing Gutenberg webinar and gave viewers an inside-look into how Gutenberg was designed. She also provided insight on how you can make the most of Gutenberg when designing websites. You can view the recorded webinar here. Below is an overview of the webinar.

Designing Gutenberg Webinar

Webinar Notes:

What is Gutenberg?

Gutenberg is the new publishing experience for WordPress that is currently in development. It is going to affect the entire publishing experience, starting with the editor. It is centered around the idea of content as structured blocks. It will be split into three phases: editing, customizing, and theming. The project is currently in phase one.

How’d we get here?

The idea for Gutenberg came about when MP6 was released, which was the dashboard redesign in 2013. Towards the end of the redesign process, Matt Mullenweg asked the designers on the project to start thinking beyond just reskinning the admin. Joen Asmussen, who was the original design lead for Gutenberg, took a stab at what a block-based editor might look like in WordPress. It featured a library of blocks on the side of the editor. The designs were shelved, but you can see a lot of the influence in Gutenberg.

Gutenberg has had a lot of influence in the changes to Calypso and WordPress.com. Since the REST API was launched, people now have more freedom to build the sites and the apps that they always dreamed of building on WordPress. At WordPress.com, they took a step back and evaluated what WordPress would look like if it were totally rebuilt today. It would be written entirely in JavaScript and be API-powered. At WordPress.com a redesign was released that was code named Calypso in 2015. It had the effect of transforming an entire company of PHP developers into JavaScript developers.

Matt Mullenweg challenged everyone in the WordPress community to learn JavaScript deeply in 2015. That set the stage for more JavaScript-powered apps coming into WordPress. At the beginning of 2016, Matt announced the editor focus for the year. That is when Gutenberg was born.

Gutenberg Goals

Create a more WYSIWYG, modern-feeling experience.

  1. Let people create rich posts and layouts without knowing any code.

  2. Provide a better base to create custom client interfaces.

  3. Unify all content types (shortcodes, widgets, embeds, etc.) under one umbrella: blocks.

WordPress has always been about empowering people to write and publish what they want without necessarily needing to know how to code. 

—Mel Choyce, Product Designer, Automattic

Gutenberg Design Principles

Everything is a block

Text, images, galleries, widgets, shortcodes, and even chunks of custom HTML, no matter if it’s added by plugins or otherwise. You should only have to learn to master a single interface.

All blocks are created equal

They all live in the same inserter interface, the block inserter. You can search by recency, tabs, and groupings, so everything is easily within reach and easily groupable and extendable by themes and plugins.

Drag and drop is additive

You should be able to do everything with your keyboard and mouse or voiceover and drag and drop is the last resort. Drag and drop has been added to Gutenberg, but it was important to nail the basics first without needing the manual dexterity to drag and drop something.

Placeholders are key

If your block can have a neutral placeholder state, it should. An image placeholder block shows a button to open the media library, a text placeholder block shows a writing prompt. By embracing placeholders, layouts can be predefined as editable, so all you have to do is fill in the blanks.

Direct manipulation

You are able to click into a page and directly edit content. Plugin and theme authors will have the ability to create their own tailored blocks that give users a WYSIWYG environment for creating on the web.

Customization

What previously required complicated shortcodes and meta fields, can now use collections of block layouts that are directly editable. That means your clients get a WYSIWYG experience where they can easily make updates, but can’t ruin the markup.

The editor is actually enjoyable to use. I don’t think ever, in my many years working with CMSs, have I wanted to write my content in the CMS. I write it in a Google Doc and then I copy and paste. But having used Gutenberg a little bit, I can imagine myself just drafting blog posts directly in WordPress rather than in a Google Doc. 

—Steve Persch, Lead Developer Advocate, Pantheon

Gutenberg Features

  • Editor Bar

  • Block Inserter

  • Sidebar

  • Quick Toolbar

  • Color Controls

  • Slash Command

  • Block Transforms

  • Dynamic Blocks

  • Shared Blocks

  • Nested Blocks

  • Block Layouts

Third-Party Examples Covered

Gutenberg Themes

  • Editor Styles

  • Custom Colors

Gutenberg Site Building

  • Widgets

  • Layouts

  • Global Blocks

When will Gutenberg be released?

It will come out when it’s ready. No deadline is assigned yet. It is getting close to being considered feature complete.

How can WordPress users help Gutenberg get released faster?

Use the Gutenberg plugin on your website. It needs to get into the hands of thousands of people to stress test before it is released. Try building on it.

Will the classic editor be available in WordPress 5.0?

It will be available or it will be easy to get it back. The classic editor won’t be going anywhere for a long time. There are too many legacy sites that will still need to use the classic editor.

Gutenberg thumbnail  

WordPress 5.0 and the Gutenberg Editor
Get ready for the biggest change to WordPress in years with a complete guide to Gutenberg from the experts at Pantheon.


You may also like:

Topics Ecommerce, WordPress