MethodSpacingControls

Overview

Padding, margin, and gap controls using WordPress’s BoxControl, wrapped in a ToolsPanel with per‑item opt‑in and configurable side constraints.

• File: lib/blocks/components/MethodSpacingControls.js
• Panel label: “Block Spacing”

Props

Default sides

{
  padding: ['top', 'bottom', 'left', 'right'],
  margin:  ['top', 'bottom'],
  gap:     ['horizontal', 'vertical'],
}

{
  padding: ['top', 'bottom', 'left', 'right'],
  margin:  ['top', 'bottom'],
  gap:     ['horizontal', 'vertical'],
}

Controls

Padding

• UI: BoxControl with configurable sides.
• Settings key: responsiveSettings.{breakpoint}.padding
• Value shape: { top: '0rem', bottom: '0rem', left: '0rem', right: '0rem' }

The sides prop determines which sides are editable. Commonly limited to top/bottom for certain blocks.

Margin

• UI: BoxControl with configurable sides + “Allow Negative Values” checkbox.
• Settings key: responsiveSettings.{breakpoint}.margin
• Value shape: { top: '0rem', bottom: '0rem', left: '0rem', right: '0rem' }

Full‑width awareness: When attributes.align === 'full', left/right margin sides are automatically filtered out, leaving only top/bottom. This prevents full‑width blocks from receiving horizontal margins that would break the layout.

Negative margins: When the allowNegative checkbox is enabled (responsiveSettings.{breakpoint}.allowNegative), the BoxControl’s input range expands from the default to -999 through 999. This is stored as a separate key and is removed when the margin control is deselected.

Gap

• UI: BoxControl with splitOnAxis={true} for horizontal/vertical gap.
• Settings key: responsiveSettings.{breakpoint}.gap
• Value shape: { top: '1.5rem', bottom: '1.5rem', left: '1.5rem', right: '1.5rem' }

Gap uses BoxControl’s axis splitting — top/bottom map to row‑gap and left/right map to column‑gap. The sides prop controls which axes are available (e.g., ['horizontal', 'vertical'] for both, or ['horizontal'] for column‑gap only).

ToolsPanel Behavior

• Padding onDeselect: Removes padding key entirely from the breakpoint settings
• Margin onDeselect: Removes both margin and allowNegative keys simultaneously via updateMultipleSettings
• Gap onDeselect: Removes gap key
• resetAll: Removes padding, margin, gap, and allowNegative from the breakpoint

Default reset values are auto‑generated based on the include prop:

• Padding resets to 0rem on all sides
• Margin resets to 0rem on all sides
• Gap resets to 1.5rem on applicable axes

CSS Output

The spacing values are consumed by MethodStyleTag which maps them to CSS properties:

The distinction between gap and gapAsVars in the selector map determines whether standard CSS gap or Bootstrap CSS custom properties are used.

Usage by Blocks

Used by nearly every Method block. Common configurations: