Gutenberg 11.3 Introduces Dimensions Panel, Adds Button Padding Support, and Speeds Up the Inserter

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

Toggling "display options" for padding and margin controls in the WordPress editor.
Toggling the padding and margin controls for the Site Tagline block.

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

Customizing the padding for the Button block in the WordPress editor.
Testing the new Button block padding option with TT1 Blocks.

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

A post featured image block in the WordPress editor with its height, width, and scale options shown in the sidebar.
Adjusting a Post Featured Image block’s dimensions.

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 fightingor 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.


13 responses to “Gutenberg 11.3 Introduces Dimensions Panel, Adds Button Padding Support, and Speeds Up the Inserter”

  1. “The theme designer in me wants to disable the UI for this altogether and present something slightly more controlled: an image size selector.”

    Well, as a user, I almost never use a featured image, especially with an event listing or short post, as it often seems to dominate the page. I will likely add the image at the top left character of the first paragraph, then go to the HTML editor to see the size, and grab my trusty calculator to play with some options, keeping the ratio equal—and now I have Yellow Pencil to align the top of the image with the top of the text as I would expect to do in print!

    • That would be the recommendation, correct. TT1 Blocks is a block theme, so it enables experimental Full Site Editing features.

      But, there are plenty of folks (WP Tavern included) who run Gutenberg itself in production. We’re actually planning to relaunch our site’s design on a hybrid/block theme sometime soon (more on that later), so it will be interesting to see what sort of problems we run into in a real-world test.

      • Thanks for your reply! I might try using Gutenberg in production then, just not with a block theme. I really like the new features and I need the navigation menu and I don’t have the strength really to wait for 5.9 🤪.

  2. So in order to get the padding control I need to have add_theme_support( ‘custom-spacing’ ); in my functions.php file. But to get the margin controls (which share the same panel however) I need to add support for it in the theme.json file, which 99.99% of all themes available don’t have it, and don’t use it? Somebody, please correctly me if I’m wrong…

    BTW, padding/margin controls should had been handled 3 years ago, not now, where almost all block libraries have implemented their own versions of them, making the backsite more confusing and complex to end users (content makers – web designers, etc…).

    Also, there are only 16 (sixteen – XVI) FSE themes on (so they do use theme.json I assume) but most are just embarrassingly horrible, as all the WP default themes with the only probably exception of Twenty Twelve – (at the time 9 years ago). I can’t use any of them for a customer site (at least with a straight face)…

    I am going to stop here so I won’t break any of the rules here… but seriously though, as a theme/plugin developer (not a user), I’m 40% excited and absolutely love these new things, and 60% frustrated, angered, which sometimes melts to pure raw “postal” rage, and then back to being excited – it’s a true love/hate story ! BTW, my frustrations are only 60% thanks to ACF Pro, where I can build my custom blocks exceptionally fast, and exceptionally easily.

    • The goal is to move all such settings to theme.json. So, if you want both margin and padding support, just add them both to that file instead of splitting them up. You can use theme.json without building a block theme.

      I hope the development team eventually makes this filterable via PHP so that theme authors can choose to implement this via PHP instead of JSON based on their personal preferences. It’s one of those things that just seems like such an easy way to win over current theme developers.

      • “You can use theme.json without building a block theme.”

        That I did not know, I will start looking at docs, how to implement the theme.json file in traditional themes… immediately.

        Thanks for the info Justin, and I hope they listen to you about the filterable via PHP, just for us to have all the options available.

    • padding/margin controls should had been handled 3 years ago, not now, where almost all block libraries have implemented their own versions of them, making the backsite more confusing and complex to end users (content makers – web designers, etc…).

      the divergence of 3rd party solutions stacked on top of Gutenberg, with their many libraries and freemium upsells has prevented me from using any 3rd party add-on. It adds another layer of unpredictability to the ecosystem. One day I add a FreeBlocksStylez padding to my site, then a month or so latter there’s an update to the plugin with the news : “FreeBlocksStylez has become part of the ProBlocksCorp group and renamed to ProBlocksLite – and here are some upselling admin nags”

      I don’t need that extra layer of annoyance, so I stay away from add-on suites, they are too unpredictable and will be a burden on my future self.


Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: