Flex_Layout_Renderer
in package
This class provides functionality to render inner blocks of a block that supports reduced flex layout.
Table of Contents
- render_inner_blocks_in_layout() : string
- Render inner blocks in flex layout.
- compute_widths_for_flex_layout() : array{0: array, 1: bool}
- Compute widths for blocks in flex layout and decide whether the row must wrap.
- get_width_without_gap() : int
- How much of width we will strip to keep some space for the gap This is computed based on CSS rule used in the editor: For block with width set to X percent width: calc(X% - (var(--wp--style--block-gap) * (100 - X)/100)));
- render_single_row_layout() : string
- Render the inner blocks as a single, non-wrapping row.
- render_wrapping_layout() : string
- Render the inner blocks so they wrap when they don't fit on one line.
Methods
render_inner_blocks_in_layout()
Render inner blocks in flex layout.
public
render_inner_blocks_in_layout(array<string|int, mixed> $parsed_block, Rendering_Context $rendering_context) : string
Parameters
- $parsed_block : array<string|int, mixed>
-
Parsed block.
- $rendering_context : Rendering_Context
-
Rendering context.
Return values
string —compute_widths_for_flex_layout()
Compute widths for blocks in flex layout and decide whether the row must wrap.
private
compute_widths_for_flex_layout(array<string|int, mixed> $parsed_block, float $flex_gap) : array{0: array, 1: bool}
Parameters
- $parsed_block : array<string|int, mixed>
-
Parsed block.
- $flex_gap : float
-
Flex gap.
Return values
array{0: array, 1: bool} — The inner blocks (with computed widths) and whether the row should wrap instead of rendering as a single row.get_width_without_gap()
How much of width we will strip to keep some space for the gap This is computed based on CSS rule used in the editor: For block with width set to X percent width: calc(X% - (var(--wp--style--block-gap) * (100 - X)/100)));
private
get_width_without_gap(float $block_width, float $flex_gap, float $block_width_percent) : int
Parameters
- $block_width : float
-
Block width in pixels.
- $flex_gap : float
-
Flex gap in pixels.
- $block_width_percent : float
-
Block width in percent.
Return values
int —render_single_row_layout()
Render the inner blocks as a single, non-wrapping row.
private
render_single_row_layout(array<string|int, mixed> $inner_blocks, string $styles, string $justify, string $flex_gap, Rendering_Context $rendering_context) : string
This is the default layout: a table row whose cells sit side by side. It's correct whenever the items are known to fit the available width (and it's what every explicitly-sized buttons block uses, since those are shrunk to fit by {@see}).
Parameters
- $inner_blocks : array<string|int, mixed>
-
Inner blocks with computed widths.
- $styles : string
-
Wrapper styles (already includes margin-top and text-align).
- $justify : string
-
Resolved horizontal alignment (left/center/right).
- $flex_gap : string
-
Gap between items (e.g. "16px").
- $rendering_context : Rendering_Context
-
Rendering context.
Return values
string —render_wrapping_layout()
Render the inner blocks so they wrap when they don't fit on one line.
private
render_wrapping_layout(array<string|int, mixed> $inner_blocks, string $styles, string $justify, string $flex_gap, Rendering_Context $rendering_context) : string
Used for auto-width button rows (e.g. a footer navigation menu) whose combined width exceeds the available width. A table row can't reflow in email, so each item is emitted as an inline-block
before each item after the first forces it to stack the buttons vertically — no overflow, at the cost of a vertical list rather than a grid. Fixes NL-737.
Parameters
- $inner_blocks : array<string|int, mixed>
-
Inner blocks (at least one is auto-width in this path).
- $styles : string
-
Wrapper styles (already includes margin-top and text-align).
- $justify : string
-
Resolved horizontal alignment (left/center/right).
- $flex_gap : string
-
Gap between items (e.g. "16px").
- $rendering_context : Rendering_Context
-
Rendering context.