Earlier today, Gutenberg 11.3 landed in the WordPress plugin directory. The latest update introduces a new dimensions panel to toggle block options related to spacing. The Button block now supports fill control, and the Post Featured Image block has new width and height settings.
One of the strengths of the version was the improved opening and searching speed in the inserter. The open time dropped by over 200 ms, from 370.35 ms to 137.28 ms. Search speed increased from 190.37 ms to 67.24 ms.
The latest version 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 take advantage of the reduced specificity of reset stylesheets and the classic editor. Such changes always make it easier for theme authors to match the style of the editor and the front-end.
Dimension panel for spacing controls
Gutenberg 11.3 introduces a new Dimensions panel for blocks that support margin or padding controls. The function adds an ellipse (
...) 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, exposing only the controls that a user really needs. Since these needs are subjective, allowing users to turn them on / off is an ideal route to take.
The current drawbacks are twofold. Once you choose to show the margin or padding controls, the panel itself cannot be minimized. This exacerbates the very problem the new feature is trying to solve: decluttering the sidebar interface. For me, at least, I still want quick access to the spacing commands. However, I don’t always have to show them.
The second problem is that the user’s choice of what to display doesn’t seem to be saved. Whenever you work with a block, you need to select the commands that should appear.
The new Dimensions panel is only part of the process of managing size (width and height), spacing (spacing and margin), and related controls for blocks. Work towards a more complete solution is still ongoing. Presumably, the dev team will address these and other issues in future releases. However, those running the Gutenberg plugin in production should expect some quirks with the usage.
The Block Visibility plugin currently has the most user-friendly version of such a toggle control. It is not yet a perfect solution, but it works a little better than what is currently done in Gutenberg.
Button block filling
It’s no secret that I don’t like the default Button block padding when using the TT1 Blocks theme (the block-based version of Twenty Twenty-One). I made it one of my missions to report it systematically, even going so far as to refuse to use the block during the last call for tests as part of the FSE awareness program.
An oversized button isn’t always the wrong stylistic choice on a web page. Context is important and I somehow continue to run into scenarios where I need something a little smaller. Button block padding control has been on my wishlist for months, and the Gutenberg development team delivered it.
Since 11.3, users can control the filling of individual Button blocks. It will now appear as an option in the new Dimensions panel mentioned earlier.
Prayer answered. Now let’s move on to adding fill controls to all blocks.
The only potential issue some users may encounter is maintaining consistent spacing when using multiple Button Blocks at the same time. The easiest way to do this is to add and style the first one, then duplicate it to create more with the same spacing. This is not a new problem; it applies to all Button options where users want consistency within a group.
Featured Image Dimension Controls
The Post Featured Image block finally got a small but handy upgrade. In the past, users and theme authors only had one option when 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 display a separate “Scale” option with the following choices:
- Coverage (default)
What are these options really for? That would be a good question. Even as someone in the web design and development loop for almost two decades, I sometimes forget and have to look for them. These are values for the
object-fit CSS property and are likely to confuse users in many cases.
Cover and Contain allows the image to fit in the containing element’s box while maintaining its proportions (no image stretching). The difference is that the coverage value will be truncated if it doesn’t fit and the content value can be in mailbox. A stretch value will fill its container regardless of the aspect ratio.
Depending on the aspect ratio of the image on its container, each of the values could essentially display the same thing on the screen. Or, they could provide very different results. Pairing these dimension controls with wide and full alignments (also width related options) could also give rise to unpredictable experiences.
The theme designer in me wants to completely disable the UI for this and present something a little more controlled: an image size switcher.
Such a selector should not be confused with the width and height controls. WordPress theme authors have been saving custom image sizes for years. The main use case for this was the images shown. 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’m in the camp who thinks frame size controls should have been the first addition to the block. It’s such an integral part of WordPress theme design that it can’t be left out, and I’ve fought – or at least nagged – to make sure theme authors can control the images presented via sizes. personalized.
Fortunately, there is an open ticket for custom image size support. Among other features that are still missing, this is a blocker for many theme authors looking to make the jump to block themes.
There are many use cases for the new options, such as automatically cropping featured images from a post grid to a square. I am fair impatiently pending a more robust toolset for the Post Featured Image block.