Earlier today, Gutenberg 11.3 landed in the WordPress plugin directory. The latest update introduces a new dimensions panel for toggling spacing-related block options. The Button block now supports the padding control, and the Post Featured Image block has new width and height settings.
One of the release’s highlights was a speed improvement for both opening and searching within the inserter. The opening time dropped over 200 ms, from 370.35 ms to 137.28 ms. Search speed went from 190.37 ms to 67.24 ms.
The latest release includes a simplified color picker library. Rich previews for links, a feature introduced in Gutenberg 10.9 for external URLs, now works with internal site links.
Theme authors should enjoy the reduced specificity of the reset and classic editor stylesheets. Such changes always make it a little easier for theme authors to match editor and front-end styling.
Dimension Panel for Spacing Controls
Gutenberg 11.3 introduces a new Dimensions panel for blocks that support either margin or padding controls. The feature adds an ellipsis (...) button in place of the typical open/close tab arrow. Users can select which controls they want to use.
The long-term goal is to clean up the interface, only exposing controls that a user actually needs. Because such needs are subjective, allowing users to toggle them on/off is an ideal route to take.
The current downsides are twofold. Once choosing to display margin or padding controls, the panel itself cannot be collapsed. This exacerbates the very problem that the new feature attempts to solve — decluttering the sidebar interface. For me, at least, I always want quick access to spacing controls. However, I do not always need them shown.
The second issue is that the user choice of what to display does not seem to be stored. Each time you work with a block, you must select which controls should appear.
The new Dimensions panel is only one part of the process of wrangling sizing (width and height), spacing (padding and margin), and related controls for blocks. Work toward a more well-rounded solution is still underway. Presumably, the development team will address these issues and others in future releases. However, those who run the Gutenberg plugin in production should expect oddities with usage.
The Block Visibility plugin has the most user-friendly version of such a toggle control right now. It is not yet a perfect solution, but it works a little better than what is currently in Gutenberg.
Button Block Padding
It is no secret that I dislike the default padding of the Button block when using the TT1 Blocks theme (block-based version of Twenty Twenty-One). I have made it one of my missions to routinely point it out, even going so far as refusing to use the block in the last call for testing as part of the FSE Outreach Program.
An oversized button is not always the wrong stylistic choice on a webpage. Context matters and I somehow continue to run into scenarios where I need something a bit more scaled back. Control over the Button block’s padding has been on my wish list for months, and the Gutenberg development team delivered.
As of 11.3, users can control the padding of individual Button blocks. It will now appear as an option within the new Dimensions panel mentioned earlier.
Prayer answered. Now, let us move toward adding padding controls to all the blocks.
The one potential issue some users might run into is maintaining consistent spacing when using multiple Button blocks together. The easiest way to do this is to add and style the first, then duplicate it to create others with the same spacing. This is not a new issue; it applies to all Button options where users want consistency within a group.
Featured Image Dimension Controls
The Post Featured Image block has finally received a small but handy upgrade. In the past, users and theme authors only had a single option of deciding whether to link it to the post. Now, they can control the width and height of the image.
If a user sets a height for the image, the editor will reveal a separate “Scale” option with the following choices:
- Cover (default)
- Contain
- Stretch
What do these options actually do? That would be a good question. Even as someone in the web design and development loop for close to two decades, I sometimes forget and must look them up. They are values for the object-fit CSS property and are likely to confuse users in many instances.
Cover and contain allow the image to fit within the containing element’s box while maintaining its aspect ratio (no stretching the image). The difference is that the cover value will be clipped if it does not fit and the contain value may be letterboxed. A stretch value will fill its container regardless of the aspect ratio.
Depending on the image’s aspect ratio on its container, each of the values could essentially display the same thing on the screen. Or, they could provide wildly different results. Coupling these dimensions controls with wide and full alignments (also width-related options) could make for some unpredictable experiments too.
The theme designer in me wants to disable the UI for this altogether and present something slightly more controlled: an image size selector.
Such a selector should not be confused with width and height controls. WordPress theme authors have been registering custom image sizes for years. The primary use case for this was featured images. Users can use these sizes with the current Image and Latest Posts blocks. However, they do not yet have this option with Post Featured Image.
I am in the camp that believes image size controls should have been the first addition to the block. It is such an integral part of WordPress theme design that it cannot be left out, and I have been fighting — or at least nagging — to make sure that theme authors can control featured images via custom sizes.
Fortunately, there is an open ticket for custom image size support. Among other still-missing features, it is a blocker for many theme authors looking to take the leap toward block themes.
There are plenty of use cases for the new options, such as automatically cropping a post grid’s featured images to a square. I am just impatiently awaiting a more robust set of tools for the Post Featured Image block.
Thanks for the Block Visibility shoutout Justin! 😉