MethodFlexControls
Overview
Flex item controls — grow, shrink, basis and, per responsive tier, order — as an opt-in ToolsPanel, for a block that sits inside a flex container.
- File: lib/blocks/components/MethodFlexControls.js
- Panel label: “Flex Options” by default
- Breakpoints: Any — each instance edits one tier of
responsiveSettings - Settings keys:
responsiveSettings.{breakpoint}.flexGrow,flexShrink,flexBasis,order
This is the item side of Method’s flexbox controls. The container side — direction, wrap, alignment and justification — lives in MethodAlignmentControls.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
breakpoint | string | (required) | The tier to edit: base, mobile, tablet or wide. |
attributes | object | (required) | The block’s full attributes object. |
setAttributes | function | (required) | WordPress setAttributes. |
label | string | "Flex Options" | The ToolsPanel heading. |
include | array | ['flexGrow', 'flexShrink', 'flexBasis'] | Which items the panel offers. order is not in the default and is added per tier by the block. |
Controls
Flex Grow
- Settings key:
flexGrow - UI:
NumberControl, minimum 0, stored as an integer - On select:
0 - CSS:
flex-grow
Flex Shrink
- Settings key:
flexShrink - UI:
NumberControl, minimum 0, stored as an integer - On select:
1 - CSS:
flex-shrink
Flex Basis
- Settings key:
flexBasis - UI:
UnitControlwith the default unit set - On select:
"auto" - CSS:
flex-basis
Order
- Settings key:
order - UI:
TextControlof type number; stored as a string - On select:
"" - CSS:
order
ToolsPanel Behavior
- onSelect: writes the starting value shown above for the tier.
- onDeselect: removes that key from the tier.
- Reset all: removes
flexGrow,flexShrink,flexBasisandorderfrom the tier — all four, whateverincludeoffers — and leaves every other key of the tier alone.
CSS Output
method_get_block_css_declarations() (lib/blocks.php) and MethodStyleTag emit the four properties for whichever tier holds a value, under the element the block’s CSS map names:
| Key | Declaration | Notes |
|---|---|---|
flexGrow | flex-grow | Emitted when truthy, so a stored 0 is not output (the browser default is 0 anyway). |
flexShrink | flex-shrink | Emitted when truthy; a stored 0 is not output. The browser default is 1, so “no shrink” has to come from the stylesheet. |
flexBasis | flex-basis | Emitted when set. |
order | order | Emitted when set and not 0; the editor applies the same rule. |
Usage by Blocks
| Block | Notes |
|---|---|
| Flex Item (method/flex-item) | Base: grow, shrink, basis. Mobile, tablet and wide tabs: the same plus order, so an item’s position can change per tier while the base order stays the document order. |