Mastering the New Minimum Width Block Support in WordPress 7.1

The Evolution of Dimension Controls in WordPress

For several releases, the WordPress block editor has steadily expanded its design toolset to give developers and site builders precise control over layout dimensions. Blocks have gradually gained support for properties like height, minHeight, and width. However, a notable omission in this layout toolset was the ability to set a minimum width directly within the editor. Without a native control, developers had to rely on custom CSS classes, inline style overrides, or custom block styles to prevent layout elements from collapsing on smaller viewports.

WordPress 7.1 addresses this layout gap by introducing native minWidth dimension block support (tracked via GitHub issue #76525 and implemented in PR #76949). Following the established pattern of the minHeight control, this new feature allows blocks to explicitly opt into a minimum width control. This addition ensures that complex container layouts, multi-column grids, and custom blocks maintain their structural integrity and readability across all screen sizes.

Enabling minWidth Support in block.json

To make the “Minimum width” control available for a custom block, you must register the support within the block’s block.json file. The feature is nested under the existing dimensions support object. By setting minWidth to true, the block registration system signals to the editor that the block can receive and apply minimum width styles.

Here is an example of a custom block registration opting into the minimum width feature:

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "name": "custom/layout-card",
  "title": "Layout Card",
  "category": "design",
  "supports": {
    "dimensions": {
      "minWidth": true
    }
  }
}

When this support is enabled, the block wrapper automatically receives the inline style or class associated with the rendered value, applying the CSS min-width property to the block’s outer container in both the editor and the frontend markup.

Configuring Global Settings in theme.json

Theme developers can control the availability of the minimum width setting globally or on a block-by-block basis using theme.json. To enable the control for all blocks that support it, you can declare it within the settings.dimensions path. Alternatively, if your theme enables appearanceTools, the setting is turned on automatically.

To explicitly enable the setting in your theme, structure your theme.json as follows:

{
  "version": 3,
  "settings": {
    "dimensions": {
      "minWidth": true
    }
  }
}

If you need to restrict or explicitly enable this control for specific block types, you can target individual blocks within the settings hierarchy. This is particularly useful when you want to prevent content creators from breaking layouts on delicate custom blocks while still allowing flexibility on standard container blocks like core/group.

Applying Default Styles and Presets

Beyond simply enabling the control, theme.json allows you to define default minimum width values. These defaults can be applied globally across all blocks or scoped to specific block types. This ensures consistent layout baselines without requiring manual configuration by the user.

The following theme.json configuration sets a global default minimum width of 320px and overrides it to 400px specifically for Group blocks:

{
  "version": 3,
  "styles": {
    "dimensions": {
      "minWidth": "320px"
    },
    "blocks": {
      "core/group": {
        "dimensions": {
          "minWidth": "400px"
        }
      }
    }
  }
}

If your theme defines custom dimension presets under settings.dimensions.dimensionSizes, the block editor’s UI control will automatically display these presets as selectable options. When a user selects a preset, WordPress applies the corresponding CSS custom property, following the standard naming convention: --wp--preset--dimension--{slug}.

UI Visibility and Inspector Controls

To maintain a clean and uncluttered editing experience, the minimum width control follows the standard visibility rules of the Gutenberg block inspector. By default, the control is hidden within the Dimensions panel for individual blocks, requiring the user to manually enable it via the panel’s options menu (the three-dot menu in the Dimensions panel header).

If you want the “Minimum width” control to be visible by default in the sidebar when a user selects your block, you must opt in using the __experimentalDefaultControls flag within your block’s support configuration:

{
  "supports": {
    "dimensions": {
      "minWidth": true,
      "__experimentalDefaultControls": {
        "minWidth": true
      }
    }
  }
}

In contrast to the block-level inspector, the control is visible by default within the Global Styles interface in the Site Editor, allowing theme customizers to set global defaults easily.

Practical Use Cases: Preventing Layout Collapse

The primary utility of minWidth is to prevent blocks from shrinking to unreadable or broken states within flexible layouts, such as CSS Flexbox or Grid containers. Consider a three-column layout where each column contains a call-to-action card. On medium-sized viewports, a standard flex layout might squeeze these columns, causing text to wrap awkwardly or buttons to overlap.

By applying a minimum width (e.g., 280px) to the column or card blocks, you guarantee that the elements will never shrink below that threshold. Instead of collapsing, the container’s wrapping behavior (if enabled) will force the cards to wrap gracefully to a new line, preserving both readability and visual appeal.

Another common use case is media placeholders or decorative blocks. Ensuring a minimum width prevents these visual elements from disappearing entirely when nested inside dynamic or highly fluid parent containers.

Technical Limitations and Best Practices

While the introduction of minWidth is a powerful addition to the block editor, developers must keep several technical considerations in mind:

• Viewport Overflow: Setting a fixed pixel value (e.g., 450px) as a minimum width can cause horizontal scrolling on smaller mobile screens (such as mobile devices with a 320px width). To prevent layout breakage, use relative units like percentages, viewport units (vw), or responsive presets where appropriate.
• CSS Cascade: Block-level values set by users in the editor will override theme-level defaults defined in theme.json. Ensure your theme’s layout architecture can handle user-defined minimum widths without breaking parent grid alignments.
• Backward Compatibility: This feature is fully backward-compatible. Blocks and themes that do not opt into minWidth will continue to function exactly as they did in previous WordPress versions without generating any extra CSS or markup.

Primary reference: Review the original announcement for exact release details. This article is an independent explanation and does not reproduce the source text.