Gutenberg 9.4 Introduces Button Width Selector and Typography Controls for List Block

Gutenberg 9.4.0 was released this week with many small improvements to existing features, while work on full site editing continues. This release will not be included in the upcoming WordPress 5.6 release but those who are using the Gutenberg plugin will have access to the improvements right away.

The button block now has a width selector, which allows the user to set the button to 25%, 50%, 75%, or 100% of the parent container. By default, a button’s width is determined by the size of its content. If you like bigger buttons, this update will give you more flexibility. Button margins are also included in the width calculations, so users can create multiple buttons in a row, or a grid of buttons, and have them properly fit together and aligned.

Making a button is easier than it has ever been before. Gone are the days of using shortcodes or hunting for the correct CSS class to apply in order to match the theme. Button creation used to be so needlessly difficult with a fragmented, unfriendly workflow, but the block editor continues to chip away at the complexity with each new release.

Version 9.4 also introduces typography controls for the list block. Gutenberg contributors have been discussing adding color and text size customizations to all text-based blocks since 2018, and the list block is finally getting some font size controls.

Social icons can also be resized now. Users can select from several preset sizes, including small, normal, large, and huge.

The 9.4 update adds support for tags with a new button in the overflow rich text menu. These tags are useful for displaying content in the browser’s default monospace font, which helps when writing documentation or articles with inline code.

This release lays the groundwork for handling block variation transformations. Block variations are essentially the same block with registered variations that appear as a separate block in the block inserter. For example, the navigation block has horizontal and vertical variations. The editor now introduces a transform option for the scope field in block variations, so developers can control how to handle these transformations.

Enhancements in this release add polish to many aspects of the UI, including the inserter search, custom select menu styles, the link interface, Search block styling, shortcode block styling, and reduces the UI on hover (an optional setting in preferences).

One handy new feature for writing is that users can now add a header by typing /h1 to /h6 followed by enter/return. While I like the idea of this, it seems unintuitive to have to use enter/return to change the block to a header. This feature would be easier to remember if it mimicked the existing feature that allows users to add a header by typing ### followed by a space. Changing the trigger action to a space instead of a return would make more sense here.

Version 9.4 also includes a great deal of progress behind the scenes on experiments, including the full site editing framework, FSE blocks, the site editor, and global styles. Check out the changelog for a full list of bug fixes and enhancements.