LayoutStyle final class
Minn\Blocks\LayoutStyle · public/minn/src/Minn/Blocks/LayoutStyle.php · 193 lines
The CSS rules a block's layout writes (wp_get_layout_style, probe block-supports), as selector => declarations pairs the style engine turns into a stylesheet:
- flow: only the gap between children (none, then the gap, on each); - constrained: the content width on the children that are not aligned left, right or full, the wide width on wide ones, no limit on full ones (justifyContent pushes the children to a side: both margins with a width, the one side alone without), negative margins on full ones for a block with side padding, then the children's gap; - flex: nowrap, the gap, then the direction and alignments the orientation reads from justifyContent and verticalAlignment; - grid: the column template (a count, a minimum width, or both folded together with the gap, or the fallback gap without one), then the gap.
Widths arrive checked (one dropped as unsafe is empty) and gaps with presets turned into custom properties.
Constants and properties
| private | JUSTIFY = array ( 'left' => 'flex-start', 'right' => 'flex-end', 'center' => 'center', 'stretch' => 'stretch', 'space-between' => 'space-between', ) | |
| private | ALIGN = array ( 'top' => 'flex-start', 'center' => 'center', 'bottom' => 'flex-end', 'stretch' => 'stretch', 'space-between' => 'space-between', ) | |
| private | CHILD_KEYS = array ( 0 => 'selfStretch', 1 => 'flexSize', 2 => 'columnSpan', 3 => 'rowSpan', 4 => 'columnStart', 5 => 'rowStart', ) |
Public
| static | rules(string $selector, array $layout, array|string|null $gap, array $padding = array ( ), string $fallbackGap = '0.5em'): array# | The rules for a container.
@return list<array{selector: string, declarations: array<string, string>}> | ||||||||||||
| static | childRules(string $selector, array $child, array $parent): array# | The rules a child writes from its own layout (wp_get_child_layout_style_rules): a fixed or filling flex size, a grid span, a grid position, released again (the full row for a span) in a container narrower than the columns it needs: the columns at the parent's minimum width (12rem by default) and the gaps between them (1.5rem, or 24px for a width in px).
@return list<array<string, mixed>> | ||||||||||||
| static | containerValues(array $layout): array# | A layout's container values: everything but the child keys. | ||||||||||||
| static | childValues(array $layout): array# | A layout's child values: the child keys alone. |
Internals 7
Private and protected methods: how the class does its work. Not a contract; they change whenever the code is tidied.
| private | flowGap(string $selector, array|string|null $gap): array# | @return list<array{selector: string, declarations: array<string, string>}> | |||
| private | constrained(string $selector, array $layout, array $padding): array# | @return list<array{selector: string, declarations: array<string, string>}> | |||
| private | flex(array $layout, array|string|null $gap): array# | @return array<string, string> | |||
| private | grid(array $layout, array|string|null $gap, string $fallbackGap): array# | @return array<string, string> | |||
| private | gapValue(array|string|null $gap): ?string# | A flex or grid gap: one value, or the row and column gaps together. | |||
| private | filled(array $declarations): array# |
@return array<string, string> the declarations that have a value | |||
| private | single(string $selector, array $declarations): array# |
@return list<array{selector: string, declarations: array<string, string>}> |
Nothing matches.