Overview
Flex alignment, justification, and direction controls with icon‑based toggle groups, wrapped in a ToolsPanel for opt‑in behavior.
- File:
lib/blocks/components/MethodAlignmentControls.js
- Panel label: “Alignment”
Props
| Prop | Type | Default | Description |
|---|
breakpoint | string | (required) | The responsive breakpoint to read/write: base, mobile, tablet, or wide |
attributes | object | (required) | The block’s full attributes object |
setAttributes | function | (required) | WordPress setAttributes function |
include | string[] | ['alignItems', 'justifyContent'] | Which controls to render. Options: alignItems, justifyContent, flexDirection |
alignItemsLabel | string | 'Align Items' | Custom label for the align‑items control (e.g., "Content Vertical Alignment") |
Controls
Align Items
- UI:
ToggleGroupControl with 4 custom SVG icon options.
- Settings key:
responsiveSettings.{breakpoint}.alignItems
| Option | Value | Description |
|---|
| Start | flex-start | Align items to the start of the cross axis |
| Center | center | Center items on the cross axis |
| End | flex-end | Align items to the end of the cross axis |
| Stretch | stretch | Stretch items to fill the cross axis |
Justify Content
- UI:
ToggleGroupControl with 4 custom SVG icon options.
- Settings key:
responsiveSettings.{breakpoint}.justifyContent
| Option | Value | Description |
|---|
| Start | flex-start | Pack items toward the start of the main axis |
| Center | center | Center items on the main axis |
| End | flex-end | Pack items toward the end of the main axis |
| Between | space-between | Distribute items evenly with first/last flush to edges |
Flex Direction
- UI:
SelectControl dropdown.
- Settings key:
responsiveSettings.{breakpoint}.flexDirection
| Option | Value |
|---|
| Row | row |
| Row (Reverse) | row-reverse |
| Column | column |
| Column (Reverse) | column-reverse |
ToolsPanel Behavior
Each control is wrapped in a ToolsPanelItem with:
- hasValue: Returns
true if the settings key is defined (not undefined)
- onDeselect: Removes the key entirely from
responsiveSettings.{breakpoint} (clean deletion, not set to null)
- onSelect: Sets an initial value (
flex-start for align/justify, row for direction)
- resetAll: Removes all three keys (
alignItems, justifyContent, flexDirection) from the breakpoint
Usage by Blocks
| Block | Included Controls | Custom Label |
|---|
| Section | alignItems | “Content Vertical Alignment” |
| Container | alignItems | “Content Vertical Alignment” |
| Advanced Grid Row | alignItems, justifyContent | — |
| Basic Grid | alignItems, justifyContent | — |
| Flex Container | alignItems, justifyContent, flexDirection | — |
| Buttons | alignItems, justifyContent, flexDirection | — |
| Breadcrumb | alignItems, justifyContent | — |
| Social Nav | justifyContent, flexDirection | — |
