MethodBorderControls

Overview

Border style/width/color and border‑radius controls using WordPress’s native BorderBoxControl and BorderRadiusControl.

• File: lib/blocks/components/MethodBorderControls.js
• Panel label: “Border”

Props

Controls

Border

• UI: BorderBoxControl — WordPress’s native per‑side border editor supporting uniform or per‑side border configuration.
• Settings key: responsiveSettings.{breakpoint}.border

The stored value follows WordPress’s border format:

// Uniform border
{ color: '#000000', style: 'solid', width: '1px' }

// Per-side borders
{
  top:    { color: '#000', style: 'solid', width: '1px' },
  bottom: { color: '#ccc', style: 'dashed', width: '2px' },
  left:   { color: '#000', style: 'solid', width: '1px' },
  right:  { color: '#000', style: 'solid', width: '1px' },
}

// Uniform border
{ color: '#000000', style: 'solid', width: '1px' }

// Per-side borders
{
  top:    { color: '#000', style: 'solid', width: '1px' },
  bottom: { color: '#ccc', style: 'dashed', width: '2px' },
  left:   { color: '#000', style: 'solid', width: '1px' },
  right:  { color: '#000', style: 'solid', width: '1px' },
}

MethodStyleTag handles both formats — uniform borders become a single border CSS property, while per‑side borders become individual border-top, border-bottom, etc.

Border Radius

• UI: BorderRadiusControl from @wordpress/block-editor — supports uniform or per‑corner values with a linked/unlinked toggle.
• Settings key: responsiveSettings.{breakpoint}.borderRadius

// Per-corner (unlinked)
{ topLeft: '0px', topRight: '0px', bottomLeft: '0px', bottomRight: '0px' }

// Uniform (linked) — stored as a plain string
'8px'

// Per-corner (unlinked)
{ topLeft: '0px', topRight: '0px', bottomLeft: '0px', bottomRight: '0px' }

// Uniform (linked) — stored as a plain string
'8px'

MethodStyleTag handles both formats — per‑corner objects become individual border-*-*-radius properties, while plain strings become a single border-radius.Image AlignmentPosition Offset

ToolsPanel Behavior

• Border onSelect: Initializes to { color: '#000000', style: 'solid', width: '1px' }
• Border Radius onSelect: Initializes to { topLeft: '0px', topRight: '0px', bottomLeft: '0px', bottomRight: '0px' }
• resetAll: Removes both border and borderRadius from the breakpoint

Usage by Blocks