Alongside the Customizer and the REST API, the other key focus for WordPress in 2017 is improving the tool we use on a daily basis to craft our content – the editor.
Content creators are craving a richer, more powerful and more intuitive authoring experience. In response to this, the “Gutenberg” project was formed. Gutenberg totally re-imagines the editor design and treats sections of content as “blocks” which authors can interact with and re-arrange.
The concept was summed up well in Joen’s post last month;
The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.
Displaying editor content in customisable, re-arrangeable blocks is a powerful concept and will go a long way to improve the editing experience. Authors will no longer have to guess how their shortcodes or custom HTML are going to look when they click “Publish”. That liberation allows them to concentrate on writing great content.
In his post, Joen highlights the vertical nature of post content and how Gutenberg will focus on this initially. But WordPress is so much more than posts and pages. For Gutenberg to succeed we’ll need to consider how it will handle other content types. Removing the ambiguity from features like shortcodes is one thing, but what about the authoring experience for fundamentally different types of content, like products?
Creating products with WooCommerce and Gutenberg
I’ve been around since the dawn of time in the WooCommerce world and know first-hand that users yearn for more flexibility with their product page layouts and a more intuitive product authoring experience. It goes without saying that Gutenberg signifies an exciting opportunity in this regard and I thought it might be a fun exercise to imagine how the product creation UI might look in Gutenberg.
The current experience
But first, let’s remind ourselves of the current experience. Here’s a side-by-side screenshot that illustrates the product authoring screen and the product display on the frontend:
Clearly there is a disparity here. There is almost no visual correlation between what the you see on the frontend and what you see on the backend when you edit a product. This can make the experience slow, frustrating and confusing. It’s made more complex due to the fact that products can have intangible data attached to them such as variations, visibility status and specific shipping rules.
So how might this look in Gutenberg? I really like the idea of being able to define preset templates (and preset blocks) in Gutenberg for specific post types. So when adding a product, that predefined template, which contains the relevant blocks is pre-loaded. The author is immediately made familiar with the product layout and has a good idea of how it’s going to look when they publish. Themes would be able to filter the presets and load templates that match their desired display. How might it look?
The future?
Similar to the post editing experience, some data is hidden from the initial display which allows the store owner to focus on the most pressing product info (which are now “blocks”);- images, title, description(s) and price. It is immediately obvious how to add this information – just point and click. As well as activating the edit-ability of one of these blocks, interacting with one will also reveal handles that allow the user to drag and drop to re-arrange widths and create (or remove) additional layout columns.
It’s now immediately obvious how a product is going to look on the frontend when it’s published. The confidence, familiarity and encouragement this inspires is crucial – adding a product is one of the first things a new store owner will do so it’s imperative to deliver a delightful experience.
Complex data such as product options, backorder availability and visibility status can be configured in the advanced ‘Product settings’ panel. The separation of visual and ‘hidden’ data really streamlines the add product flow.
Sowing the seed
We’ve begun work on basic WooCommerce integration with Gutenberg. Soon you will be able to pull products in to posts and pages via blocks (without relying on shortcodes). The seed has been sown.
Advanced product creation will come later. It’s our responsibility as designers to lead how this experience will look and feel and you can be assured that we’ll be exploring this exciting opportunity in greater detail very soon!
We’re calling this editor project “Gutenberg”, and we are working on it every day in GitHub. Feel free to join us in the development. You’re also welcome to give feedback, the easiest is to join us in our Slack channel, #core-editor.
Although it’s a difficult challenge and we’re far from done yet, we are moving fast, and amazing things are happening every day.
Gutenberg is available as a beta version plugin, and you can try it now.
Automattic Design 