MethodDimensionControls

Overview

Width, height, min‑width, min‑height, and MatchHeight group controls for block sizing.

• File: lib/blocks/components/MethodDimensionControls.js
• Panel label: “Dimensions”

Props

Controls

Width / Min Width / Height / Min Height

• UI: UnitControl — WordPress’s native unit-aware input supporting px, em, rem, %, vh, vw, etc.
• Settings keys: responsiveSettings.{breakpoint}.width, minWidth, height, minHeight
• Default value on select: '0px'

MethodStyleTag only outputs these CSS properties when the value does not start with '0', preventing zero values from overriding inherited sizing. Now that these controls are “opt-in”, this behavior may be revised in future releases.

MatchHeight Group

• UI: TextControl (free text input).
• Settings key: responsiveSettings.base.mh
• Visibility: Only rendered when include contains 'mhGroup' and breakpoint === 'base'. Not available on responsive breakpoints.

MatchHeight groups allow multiple blocks to be height‑matched on the frontend using the jQuery MatchHeight library (included via Method’s inc/matchHeight dependency). Blocks sharing the same group string will be equalized in height.

ToolsPanel Behavior

• Dimension controls onSelect: Initialize to '0px'
• Dimension controls onDeselect: Remove the key entirely
• MatchHeight onSelect: Initialize to empty string
• MatchHeight onDeselect: Remove the mh key
• resetAll: Removes width, minWidth, height, minHeight, and mh from the breakpoint

Usage by Blocks