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.
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.
Create a more WYSIWYG, modern-feeling experience.
Let people create rich posts and layouts without knowing any code.
Provide a better base to create custom client interfaces.
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.
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.
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.
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.
Third-Party Examples Covered
Gutenberg Site Building
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.
WordPress 5.0 and the Gutenberg Editor
You may also like: