Posted on

A Proposal for Improving the Change Block Type User Interface in Gutenberg

In Gutenberg 3.6.2, the development team moved the Convert Block option to the left most icon in the toolbar. As long as the toolbar is visible, so is the option to change block types. However, there are a few user experience issues with this approach.

Convert Block Option

The first is obvious. The paragraph block icon looks like an alignment option. The second issue is that the icon represents the current block being edited, sort of like a block label. Unless a user hovers their cursor over the icon, it’s difficult to realize that it’s for changing block types.

Kevin Hoffman, a WordPress developer and core contributor, has proposed a new user interface suggestion that aims to solve the issues mentioned above.

Suggested Changes by Kevin Hoffman

Hoffman suggests changing the icon to a drop-down menu, similar to the one in the Classic Editor. The menu would make the ability to change block types more discoverable. It removes confusion associated with icons and is a workflow that’s already established.

Gutenberg developer Joen Asmussen thanked Hoffman for the feedback and listed a number of things to consider with his approach. These include the editor’s need to be responsive, scale to editors with thin columns, accessibility, and accommodating long block names.

Gutenberg technical lead Matías Ventura also commented on the proposal.

Just wanted to say thanks for all the constructive voices here and willingness to find better solutions. If there’s anything that is fairly clear is that the current ‘block switching’ interaction is not as obvious as it could be.

I think using the paragraph icon instead of the one that is easily confused as alignment, @jasmussen‘s update in #9310, plus the addition of the drop-down arrow are a good baseline to check on the next release and see if we need something more involved. @kevinwhoffman it’d be great to expand on your proposal and see how it might look across more blocks and nested contexts.

Matías Ventura

Depending on your workflow, changing block types will be a common action. For example, I often press enter at the end of a paragraph block which creates a new paragraph block automatically. Being able to easily identify and use the change block type option will improve my writing experience.

Those with feedback on Hoffman’s proposal are encouraged to respond to the issue on GitHub. It’s also worth noting that the team is experimenting with using an icon that’s designated specifically for changing block types.

Posted on

Gutenberg Block Library Provides a Searchable Index of Individual Blocks

An avalanche of blocks is pouring into the WordPress ecosystem ahead of Gutenberg’s inclusion in core. A few block collections, such as Atomic Blocks, Stackable, and CoBlocks, can be found on WordPress.org, but it’s not easy to search the individual blocks they contain. Other collections and standalone blocks are spread across the web. WordPress theme developer Danny Cooper has built a centralized library of Gutenberg blocks that are currently available to extend the new editor.

The library loads blocks into a grid with infinite scroll. It is searchable, so visitors can easily find individual blocks that are part of a collection. Blocks are also tagged, which makes it possible to compare a group of similar blocks. Individual listings display screenshots of the block in action and its settings panel, as well as a link to the author and a link to download.

The Gutenberg Block Library currently has more than four dozen blocks. Visitors and block creators can submit a block that is missing from the library.

Cooper is the owner of Olympus Themes, a small collection of free and commercial niche-focused WordPress themes. He has also created his own blocks collection called Editor Blocks, which focuses on blocks for business sites. His corresponding Editor Blocks theme is available for free on WordPress.org with support for all the business blocks.

“As a theme developer I’d been waiting for a way to build themes in a way where what you see on the backend matches what you will see on the frontend,” Cooper said. “That can be achieved to some extent using the Customizer, but it’s hard to craft more than one complex page using that method.”

Cooper comes from a PHP/jQuery background and said he didn’t have a strong enough understanding of ES6, Webpack, Babel, React to create Gutenberg blocks right away. The learning curve was a little steep but after getting a handle on the basics he is now able to make small contributions to the Gutenberg project.

“It felt like I was hitting a brick wall every five minutes when I started,” he said. “Zac Gordon’s course helped me get past that stage. The #core-editor slack channel was a big help too. Other than that I just studied the code of the core blocks and used Google. As my knowledge increased I’ve tried to reach out by submitting bug reports to other Block Libraries and making minor contributions to the Gutenberg project on Github.”

WordPress.org may be able to benefit from a centralized block library in the future, as people will be frequently searching for blocks after Gutenberg lands in core. Cooper said if WordPress.org had a library like this it might even be possible to find and install blocks from inside Gutenberg.

“I could build a block that searches my library but it wouldn’t be able to install them as most are part of a ‘collection,’” Cooper said. “I’m not sure if in the future the ‘collections’ will continue to grow or people will move towards releasing individual blocks.”

In the meantime, the Gutenberg Block Library provides a helpful resource for early adopters. Browsing through the listings, it’s exciting to see the variety of block functionality that the community is creating. Users who fully embrace Gutenberg in WordPress 5.0 will find dozens of blocks (and perhaps hundreds by that time) available for the new editor, if they know where to look.

Posted on

WordPress to Support Classic Editor for “Many Years to Come,” Plugin and Theme Markets Expected to Drive Gutenberg Adoption

During the 2017 State of the Word address, Matt Mullenweg announced the availability of the Classic Editor plugin for site owners who are not ready to adopt Gutenberg when it makes its debut in WordPress 5.0. Since its release, the community has speculated about what the plugin’s active installation numbers mean and how long it will be supported.

Matt Mullenweg has confirmed that support for the Classic Editor will be available for “many years to come,” which should come as a relief to those who feared that WordPress would drop support for the old editor after a year or two.

“I love that people are using the Classic Editor plugin!” Mullenweg said in comment on a recent post. “There is an infinite number of ways that WP can be used and not all will be ready for Gutenberg when 5.0 is released, Classic allows people to still be able to update core and stay current with releases, and with the click of a button try out Gutenberg again in the future if they want to. It’s also trivial to maintain because Gutenberg also uses TinyMCE, so Classic Editor users will still get improvements and updates to TinyMCE — I won’t say ‘forever’ but I don’t see any reason why we can’t maintain classic for the edit screen for many years to come.”

These assurances about the continued availability of the classic editor mean that WordPress product developers will need to decide if they want to provide support for both editing experiences or go full steam ahead with Gutenberg, limiting support to WordPress 5.0+. We don’t yet know how many users will be installing the Classic Editor after WordPress 5.0 is released but that may inform more product decisions in the future.

The Market Will Drive Gutenberg Adoption

During the Q&A following the State of the Word in 2017, WordPress developer Kevin Hoffman asked a question about the prospect of developers having to support two different editing interfaces:

Hearing you suggest the Classic Editor plugin and different ways to undeclare support for Gutenberg leads me to this idea that we are headed towards a split admin interface with no finality to the transition, meaning that I don’t see a time in the future where everyone will be on Gutenberg. We will always have these people in classic mode. As plugin and theme developers, we will always have to support two different types of users. How do we reach that point where we are past the transition, however long it might take, where we can not have this box of chocolates effect where you click “edit post type” and you never know what you’re going to get?

Mullenweg said his hope and expectation, based on how this has worked out with new interfaces in the past, is that over time product developers would adopt the latest interface. He cited the Customizer as one example where one is now very hard-pressed to find a theme developer who is rolling their own options panel after the Customizer was introduced as the new standard. It was just three years ago in 2015 when WordPress.org began requiring theme options to be built using the Customizer and now it is used everywhere.

“The truth is, if you are a plugin or theme developer, people are going to expect things in Gutenberg, so you really need to develop for Gutenberg,” Mullenweg said. “And then, at some point, I’m totally ok if you drop support for the Classic [Editor]. There will be themes and plugins that will say you need to have Gutenberg, [WP] 5.0 or newer if you want to use this.

“We already have that existing now. Plugins only support so far back in PHP in WordPress. There will be plugins that don’t support under WordPress 5.0. It’s not going to be that much different from supporting different WordPress versions where people choose sometimes to go way way way back, sometimes a year or several years, and support WordPress 3.8 and 3.9. And some don’t bother anymore. There’s lots of APIs and other things that changed during that time. At some point you just have to make a cost benefit analysis and do things like maybe Yoast is doing for upgrading PHP, and say, ‘Hey, if you really want the best of this, check out this new thing.’”

As Gutenberg blocks become the standard way of extending WordPress’ editing and customization capabilities, the market will drive its adoption. This is already happening with new blocks and block collections being released every day. The new Gutenberg Block Library offers a glimpse of that and there are many more blocks on GitHub that are not yet commercially marketed.

During that December 2017 Q&A, developers seemed to be excited about the Gutenberg demos they had just seen but their uneasiness was palpable in their questions. Now, eight months later, the current proliferation of Gutenberg themes and plugins demonstrates that WordPress developers are ready to embrace the new editor and build the creative extensions that Gutenberg’s creators’ had always anticipated.

“I’m really looking forward to seeing what the design and developer community can build with it and where their imaginations can take us from there,” Gutenberg technical lead Matías Ventura said when I interviewed him in June. “Core is going to supply the infrastructure and the main building blocks but it’s everything that can be built around it that’s going to be exciting, as always with WordPress.”

The extension ecosystem that made WordPress a success in the first place is going to be a key influence in driving adoption for the new editor. Major players in the product market are not waiting to see how users react to the new editor before building their Gutenberg-compatible interfaces. Users may not be compelled by the writing experience, but Gutenberg’s block model will provide a better framework for site customization and a core standard for page builders that interface with WordPress. If the blocks pouring into the ecosystem right now are any indication, the plugin market surrounding Gutenberg is going to offer an exciting variety of tools for site building.

Posted on

Gutenberg 3.7 Released, Introduces Spotlight Mode

Gutenberg 3.7 is available for download and contains a number of changes. The Fixed Toolbar has been renamed Unified Toolbar. This is an optional mode that fixes all of the toolbar icons to the top of the editor, similar to the Classic editor.

The team discovered that experienced users who don’t mind the disconnect between blocks and the toolbar preferred this layout.

Unified Toolbar in Gutenberg
Unified Toolbar

There’s now an animation and icon specifically tailored for the Block Converter action. Hovering the cursor over a block’s icon will display two arrows that represent the ability to change block types.

Change Bock Types Icon in Gutenberg
Change Bock Types Icon

For those who want to focus on one block of content at a time, there’s a new mode called Spotlight. When enabled, the blocks that are not being edited partially fade away and the block outlines disappear. This is an experimental attempt at introducing a Distraction Free Writing mode.

The icons have been updated for Paragraph, Heading, and Subheading blocks to add clarity. Previous to 3.7, the Paragraph block icon looked like an alignment option causing confusion.

Updated Icons for Paragraph, Heading, and Subheading blocks
Updated Icons for Paragraph, Heading, and Subheading blocks

You can find a complete list of changes and links to corresponding issues on GitHub by visiting the Gutenberg 3.7 release post.