Product Management is always messy. It’s easy to think that the problems at your organisation are unusual and that they have it all sorted somewhere else. This isn’t true. Understanding that these same problems happen everywhere has made me feel much happier in my work; it has given me a new perspective on what I do, and lots of tools to succeed.
Silence isn’t acquiescence. We can have a tendency to assume that if no one says anything in response to our ideas that they must agree with them. However it’s much more likely that they don’t but aren’t comfortable sharing why, for any number of reasons. It’s best to assume that people don’t agree, unless they explicitly say they do!
Focus on user goals and needs. This came up many times in lots of contexts. It’s always worth circling back to user needs, as its a great way to help focus conversations on what really matters.
There was a lot more that was very useful in this book. I’d recommend it for anyone who works on software products.
Below are my notes. When I say “we” I mean the team who worked on Gutenberg, which I wasn’t part of!
I’m Ben Dwyer, I work for Automattic, which is the parent company of WordPress.com and Jetpack. I’m sorry I can’t be with you in person; you’ll have to blame my son who I’ve been looking after today! I’m here to give you an overview of Gutenberg; what it is, what problems it solves, why we need it, and where the project is headed.
You probably noticed that there was a big change to the editor in WordPress 5.0. This new block editor is called Gutenberg, and it marks a big change to WordPress today and in the future direction of WordPress.
What’s the problem?
Why do we need to change things? Aren’t things fine as they are?
We heard this a lot from people who were used to the old editor and already knew how WordPress worked. When you are familiar with something it feels easy and natural, and you get used to it.
HTML mode
Think back to the old WordPress editor; raise your hand if you ever need to switch to HTML view to make changes to your post, or fix something….?!
This is something we noticed – we were doing this a lot, and that was concerning, because users who aren’t technical wouldn’t know how to jump into the HTML editor and fix their posts.
Rich media posts
We noticed a lot of other issues too. Creating posts with rich media has never been easy in WordPress; working with photos, adding video or creating even very simple layouts is really hard with the old editor.
Complex layouts
For users who don’t know how to write code, getting their site to look the way they want it is more or less impossible.
Theme setup
If you don’t know how to use WordPress, creating a website with WordPress is really hard. We saw this time and time again in our user testing and research. For example:
Users would install a new theme, but the site wouldn’t look like the demo, and getting it to look the same as the demo would often take hours of work.
Site settings are scattered all over the place. There are different places to edit posts, the sidebar, the header, the footer, the menu, widgets etc. For users who don’t know WordPress, learning this is really hard and confusing and complicated. Many of them just give up.
Switching themes
Another issue we saw a lot is that users would lose things when they switched themes. Switching a theme in WordPress is meant to be non-destructive; whatever theme you choose, your content won’t change; and this is true. However maybe themes come with features like a slideshow, or a cover image, and when users switch between themes they lose these features. Often they want to cherry pick features from different themes, which isn’t possible with way themes work today.
Principles of Gutenberg
With these problems in mind, we knew that the solution to this needed to satisfy several requirements:
Users should only need to learn one interface to use WordPress. Based on what we’ve seen in our user tests, we ask our users to learn a lot, and learning to use WordPress is hard. Gutenberg aims to simplify this by making it possible to do most common tasks within the editor.
The interface should be visual; using direct manipulation. One big barrier when using WordPress is that there is no clear connection between the settings you change and the way the site looks. Allowing users to directly manipulate the content they want to change shows the connection between the content and the change being make, so they can understand the impact of their changes more easily. This also makes it easier to discover the interface for changing settings.
No coding necessary. For many users, a big selling point of WordPress is that you don’t need to learn to code, so its important to maintain this principle to support all users; they shouldn’t need technical expertise to use it.
What is Gutenberg?
The old editor used Tiny MCE to assist with writing. This was perfect for creating text based content. However for rich media posts it’s ineffective. To create posts and pages with rich media, the current editor uses a mixture of different things:
Media library/HTML for images, multimedia and approved files.
Pasted links for embeds.
Shortcodes for specialized assets from plugins.
Featured images for the image at the top of a post or page.
Excerpts for subheadings.
Widgets for content on the side of a page.
When you see this list the problem is clear.
The solution we came up with was the concept of “blocks”. By making all these different things into “blocks” we were able to unify the interface; everything becomes a block.
Blocks
Blocks enable us to achieve the three aims of Gutenberg:
Everything is a block; this means that users only have to learn one paradigm to manipulate blocks – inserting, removing and reordering blocks is always the same. Of course the mechanism for editing blocks will need to be different depending on the content of the blocks, but we can also encourage consistency in this area too.
Blocks enable visual editing. Blocks have two modes; a view mode and an editing mode. When in view mode they should look identical to the front end of the site. When in edit mode, blocks should look as close as practical to their rendered state, so that users can manipulate their content directly.
Blocks have clear responsibilities. These clear lines of separation help each block to focus on their content without impacting on any others. This helps in avoiding users ever needing to edit or write code.
Other benefits
In addition to the benefits above, blocks bring other benefits:
Placeholder content
When a user inserts a block it can be created with some default content, which can act as a guide on how to use the block.
Another aspect of this is the blank page syndrome. When creating new content we often find it really hard to get started. Pre-filling a block with some content – especially content that’s relevant to the user’s site, gets us over this hurdle; its much easier to edit something than create.
Helping developers
Currently when a developer creates a plugin there is no standard interface for their users to interact with it. Often settings end up hidden away in wp-admin somewhere which doesn’t help anyone. Blocks enable developers to build tools that work in the editor, in a standard way that everyone is already familiar with. This enables developers to create consistent and user friendly features.
Front-end editing
Gutenberg isn’t a front-end editor. You still edit your content in a separate interface from consumption. However it makes the editing experience much closer to a front-end editor; the preview in the editor will look exactly like the rendered site.
Templates
Blocks are the basic unit of Gutenberg. Templates are ways of combining blocks together. If a block is a lego brick, then a template is like the instructions that come with a lego kit. Templates can have
A mixture of blocks
Predefined attributes
Placeholder content
A default initial state
Imagine creating a new page and, instead of seeing an empty sheet, you have a choice of page templates to choose from. We could create all sorts of templates, depending on the type of site – recipes, menus, a product listing, a contact page etc.
Unlike blocks, templates don’t require a lot of code to build; because they are just an arrangement of existing blocks augmented with custom content. This makes them much more accessible; there is a lot of opportunity here for a lot more people to get involved.
Reusable Blocks
Sometimes you want to share a piece of content across multiple pages. Reusable Blocks enable this by letting you create a blocks which can be used in any post of page. When you edit a reusable block, each instance of the block will be updated. Reusable blocks let you achieve similar things to custom post types, but without any need to code.
How can Gutenberg help you?
As a WordPress user
Blocks give you tools to start creating much more interesting content on your sites, without needing to get your hands dirty. There are is a rapidly growing list of blocks being built which will help you to build more interesting layouts, add more features and integrate with more services.
As a design, developer or site builder
Blocks offer an opportunity for you to help your clients create structured content in a much more flexible way. By building custom blocks for your clients, you can build features that they can use and reuse in different ways, with all the benefits of a consistent, familiar interface.
No more do you need to worry about clients breaking posts by editing the markup, because the block is explicit about how the information will be presented.
The future of Gutenberg
It’s important to understand that the current iteration of Gutenberg is only the beginning. There are still some rough edges that are being ironed out, and a lot of work going in to improving the things.
The vision for Gutenberg is that it will grow from being a post and page editor to being a full site editor. However rather than throwing away everything we have and starting again, the approach we have taken to Gutenberg is to build from the bottom up.
Bottom up
Because blocks are the most basic unit of content, this is where our efforts were started. Notice thought that Gutenberg doesn’t prevent you from using old familiar workflows. You can continue to use “Classic” blocks, which give you access to TinyMCE, so you can create posts in exactly the same way as before. Shortcodes can also be used in Gutenberg as basic blocks
Now we have defined what blocks are and how they work, we can consider how this will impact the rest of WordPress. There is work currently underway that adds blocks to the widget section. This means the same blocks that you are already using in your site content will be available to add to sidebars.
Similar iterations are happening with menus; work is happening which will make menus into a block.
Site building
Today we think of the editor as being only responsible for page or post content; but as more of WordPress becomes “blocks” we can see the future ahead of us. Gutenberg will enable users to edit all parts of their site; the header, the footer and sidebars, as well as the post content. Users won’t need to understand the difference between all these different areas, and learn different places for editing them. They will be able to edit all of their site in one interface; Gutenberg.
The block directory
Another development in Gutenberg is the idea of a block directory. Similar to the plugin directory this will be a way of helping users to discover blocks that will help them create content.
Users create blocks using the block picker, but only blocks they have already installed appear. The block directory will show other relevant blocks alongside the already installed blocks and enable users to install them on their site.
Blocks in the directory will be like plugins only much simpler; they can only contain one block. This idea is still in its infancy but presents a new opportunity to help users.
Questions?
How do I use blocks?
Blocks have three levels of control; the block itself, which is the primary interface, the block toolbar, which sits above the block, for secondary controls, and the sidebar, for optional tertiary controls.
The sidebar is collapsed by default on mobile devices so it shouldn’t contain any UI which is crucial to using the block.secondary controls (block toolbar)
What does Gutenberg mean for Themes?
Themes began as a way to control the presentation layer of your site. They began as little more than CSS. As the web has become more complex, themes have needed to provide a lot more features, as users demanded them.
The addition of blocks to the editor removes a lot of concerns from Themes. No longer will themes need to provide features like a carousel, or a cover image; these should all be blocks. Instead, themes can go back to only being concerned about the presentation layer. Themes will become a collection of CSS and block templates.
Themes still have a vital role to play in Gutenberg. Gutenberg provides new features that Themes can take advantage of, for example wide images. Themes remain responsible for the presentation layer of a site and will need to lay new styles over Gutenberg blocks.
What does Gutenberg mean for Plugins?
Plugins will continue to work as they do today. However it does open the door to a lot more opportunities for plugins to integrate more fully into the editing experience. By providing plugin features through blocks, your users will find it easier to setup and use your plugin.
How can I get involved?
Gutenberg, like WordPress is open source project. Contributions from anyone are welcome and encouraged. Remember you don’t have to be a developer to get involved, help is needed with design, content, testing, writing documentation, translation and much more. Find out more on GitHub.
Can templates set constraints on what blocks they contain and their position?
[This question was answered incorrectly by my during the call] Yes they can! Templates have a locking mechanism which gives you control over how much the user can edit their content. There’s more detail in the docs.
scruffian 