vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-02-28 11:42:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Editor: Improves layout block support in wp_get_layout_style().

Browse Source 
This commit merges the remaining changes from [https://github.com/WordPress/gutenberg/pull/40875 Gutenberg PR 40875]. It's Part 2 (see [54162] for Part 1) of a layout improvement initiative and targets `wp_get_layout_style()` in `layout.php`.

Context:
The overall initiative is to improve layout block support:
>to use centralised layout definitions, output base layout styles from global styles, introduce a layout type semantic classname, reduce duplication of container class and style tag output, and fix blockGap at the block level in global styles.

Changes include:
* Adding an optional parameter `$block_spacing` to `wp_get_layout_style()` for setting a custom spacing on the block.
* Adding handle for the block spacing.
* Using the style engine to to enqueue and render layout styles via `wp_style_engine_get_stylesheet_from_css_rules()`.
* Introduces a new test file for `wp_get_layout_style()`.

Follow-up to [54162], [54160], [54159], [53421], [52380], [53085], [52069].

Props andrewserong, isabel_brison, costdev, hellofromTonya.
See #56467.

git-svn-id: https://develop.svn.wordpress.org/trunk@54274 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Tonya Mork 2022-09-21 13:00:29 +00:00
parent 34ace2304b
commit 2d75ae23d6
7 changed files with 552 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

378
src/wp-includes/block-supports/layout.php
View File

@ -33,24 +33,52 @@ function wp_register_layout_support( $block_type ) {
* Generates the CSS corresponding to the provided layout.
*
* @since 5.9.0
* @since 6.1.0 Added `$block_spacing` param, use style engine to enqueue styles.
* @access private
*
* @param string $selector CSS selector.
* @param array $layout Layout object. The one that is passed has already checked
* the existence of default block layout.
* @param boolean $has_block_gap_support Whether the theme has support for the block gap.
* @param string $gap_value The block gap value to apply.
* @param boolean $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor.
* @param string $fallback_gap_value The custom fallback value for block gap.
* @param string $selector CSS selector.
* @param array $layout Layout object. The one that is passed has already checked
* the existence of default block layout.
* @param boolean $has_block_gap_support Whether the theme has support for the block gap.
* @param string|string[]|null $gap_value Optional. The block gap value to apply. Default null.
* @param boolean $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor.
* @param string $fallback_gap_value The block gap value to apply.
* @param array|null $block_spacing Optional. Custom spacing set on the block. Default null.
* @return string CSS style.
*/
function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false, $fallback_gap_value = '0.5em' ) {
$layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';
function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false, $fallback_gap_value = '0.5em', $block_spacing = null ) {
$layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';
$layout_styles = array();
$style = '';
if ( 'default' === $layout_type ) {
$content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : '';
$wide_size = isset( $layout['wideSize'] ) ? $layout['wideSize'] : '';
if ( $has_block_gap_support ) {
if ( is_array( $gap_value ) ) {
$gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null;
}
if ( null !== $gap_value && ! $should_skip_gap_serialization ) {
array_push(
$layout_styles,
array(
'selector' => "$selector > *",
'declarations' => array(
'margin-block-start' => '0',
'margin-block-end' => '0',
),
),
array(
'selector' => "$selector$selector > * + *",
'declarations' => array(
'margin-block-start' => $gap_value,
'margin-block-end' => '0',
),
)
);
}
}
} elseif ( 'constrained' === $layout_type ) {
$content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : '';
$wide_size = isset( $layout['wideSize'] ) ? $layout['wideSize'] : '';
$justify_content = isset( $layout['justifyContent'] ) ? $layout['justifyContent'] : 'center';
$all_max_width_value = $content_size ? $content_size : $wide_size;
$wide_max_width_value = $wide_size ? $wide_size : $content_size;
@ -59,27 +87,102 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
$all_max_width_value = safecss_filter_attr( explode( ';', $all_max_width_value )[0] );
$wide_max_width_value = safecss_filter_attr( explode( ';', $wide_max_width_value )[0] );
if ( $content_size || $wide_size ) {
$style = "$selector > :where(:not(.alignleft):not(.alignright)) {";
$style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';';
$style .= 'margin-left: auto !important;';
$style .= 'margin-right: auto !important;';
$style .= '}';
$margin_left = 'left' === $justify_content ? '0 !important' : 'auto !important';
$margin_right = 'right' === $justify_content ? '0 !important' : 'auto !important';
$style .= "$selector > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}';
$style .= "$selector .alignfull { max-width: none; }";
if ( $content_size || $wide_size ) {
array_push(
$layout_styles,
array(
'selector' => "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull))",
'declarations' => array(
'max-width' => $all_max_width_value,
'margin-left' => $margin_left,
'margin-right' => $margin_right,
),
),
array(
'selector' => "$selector > .alignwide",
'declarations' => array( 'max-width' => $wide_max_width_value ),
),
array(
'selector' => "$selector .alignfull",
'declarations' => array( 'max-width' => 'none' ),
)
);
if ( isset( $block_spacing ) ) {
$block_spacing_values = wp_style_engine_get_styles(
array(
'spacing' => $block_spacing,
)
);
/*
* Handle negative margins for alignfull children of blocks with custom padding set.
* They're added separately because padding might only be set on one side.
*/
if ( isset( $block_spacing_values['declarations']['padding-right'] ) ) {
$padding_right = $block_spacing_values['declarations']['padding-right'];
$layout_styles[] = array(
'selector' => "$selector > .alignfull",
'declarations' => array( 'margin-right' => "calc($padding_right * -1)" ),
);
}
if ( isset( $block_spacing_values['declarations']['padding-left'] ) ) {
$padding_left = $block_spacing_values['declarations']['padding-left'];
$layout_styles[] = array(
'selector' => "$selector > .alignfull",
'declarations' => array( 'margin-left' => "calc($padding_left * -1)" ),
);
}
}
}
if ( 'left' === $justify_content ) {
$layout_styles[] = array(
'selector' => "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull))",
'declarations' => array( 'margin-left' => '0 !important' ),
);
}
if ( 'right' === $justify_content ) {
$layout_styles[] = array(
'selector' => "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull))",
'declarations' => array( 'margin-right' => '0 !important' ),
);
}
$style .= "$selector > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }";
$style .= "$selector > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }";
$style .= "$selector > .aligncenter { margin-left: auto !important; margin-right: auto !important; }";
if ( $has_block_gap_support ) {
if ( is_array( $gap_value ) ) {
$gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null;
}
$gap_style = $gap_value && ! $should_skip_gap_serialization ? $gap_value : 'var( --wp--style--block-gap )';
$style .= "$selector > * { margin-block-start: 0; margin-block-end: 0; }";
$style .= "$selector > * + * { margin-block-start: $gap_style; margin-block-end: 0; }";
if ( null !== $gap_value && ! $should_skip_gap_serialization ) {
// Get spacing CSS variable from preset value if provided.
if ( is_string( $gap_value ) && str_contains( $gap_value, 'var:preset|spacing|' ) ) {
$index_to_splice = strrpos( $gap_value, '|' ) + 1;
$slug = _wp_to_kebab_case( substr( $gap_value, $index_to_splice ) );
$gap_value = "var(--wp--preset--spacing--$slug)";
}
array_push(
$layout_styles,
array(
'selector' => "$selector > *",
'declarations' => array(
'margin-block-start' => '0',
'margin-block-end' => '0',
),
),
array(
'selector' => "$selector$selector > * + *",
'declarations' => array(
'margin-block-start' => $gap_value,
'margin-block-end' => '0',
),
)
);
}
}
} elseif ( 'flex' === $layout_type ) {
$layout_orientation = isset( $layout['orientation'] ) ? $layout['orientation'] : 'horizontal';
@ -90,54 +193,102 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
'center' => 'center',
);
$vertical_alignment_options = array(
'top' => 'flex-start',
'center' => 'center',
'bottom' => 'flex-end',
);
if ( 'horizontal' === $layout_orientation ) {
$justify_content_options += array( 'space-between' => 'space-between' );
}
$flex_wrap_options = array( 'wrap', 'nowrap' );
$flex_wrap = ! empty( $layout['flexWrap'] ) && in_array( $layout['flexWrap'], $flex_wrap_options, true ) ?
$layout['flexWrap'] :
'wrap';
$style = "$selector {";
$style .= 'display: flex;';
if ( $has_block_gap_support ) {
if ( is_array( $gap_value ) ) {
$gap_row = isset( $gap_value['top'] ) ? $gap_value['top'] : $fallback_gap_value;
$gap_column = isset( $gap_value['left'] ) ? $gap_value['left'] : $fallback_gap_value;
$gap_value = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
}
$gap_style = $gap_value && ! $should_skip_gap_serialization ? $gap_value : "var( --wp--style--block-gap, $fallback_gap_value )";
$style .= "gap: $gap_style;";
} else {
$style .= "gap: $fallback_gap_value;";
if ( ! empty( $layout['flexWrap'] ) && 'nowrap' === $layout['flexWrap'] ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'flex-wrap' => 'nowrap' ),
);
}
if ( $has_block_gap_support && isset( $gap_value ) ) {
$combined_gap_value = '';
$gap_sides = is_array( $gap_value ) ? array( 'top', 'left' ) : array( 'top' );
foreach ( $gap_sides as $gap_side ) {
$process_value = is_string( $gap_value ) ? $gap_value : _wp_array_get( $gap_value, array( $gap_side ), $fallback_gap_value );
// Get spacing CSS variable from preset value if provided.
if ( is_string( $process_value ) && str_contains( $process_value, 'var:preset|spacing|' ) ) {
$index_to_splice = strrpos( $process_value, '|' ) + 1;
$slug = _wp_to_kebab_case( substr( $process_value, $index_to_splice ) );
$process_value = "var(--wp--preset--spacing--$slug)";
}
$combined_gap_value .= "$process_value ";
}
$gap_value = trim( $combined_gap_value );
if ( null !== $gap_value && ! $should_skip_gap_serialization ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'gap' => $gap_value ),
);
}
}
$style .= "flex-wrap: $flex_wrap;";
if ( 'horizontal' === $layout_orientation ) {
$style .= 'align-items: center;';
/**
/*
* Add this style only if is not empty for backwards compatibility,
* since we intend to convert blocks that had flex layout implemented
* by custom css.
*/
if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
$style .= "justify-content: {$justify_content_options[ $layout['justifyContent'] ]};";
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'justify-content' => $justify_content_options[ $layout['justifyContent'] ] ),
);
}
if ( ! empty( $layout['verticalAlignment'] ) && array_key_exists( $layout['verticalAlignment'], $vertical_alignment_options ) ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'align-items' => $vertical_alignment_options[ $layout['verticalAlignment'] ] ),
);
}
} else {
$style .= 'flex-direction: column;';
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'flex-direction' => 'column' ),
);
if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
$style .= "align-items: {$justify_content_options[ $layout['justifyContent'] ]};";
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'align-items' => $justify_content_options[ $layout['justifyContent'] ] ),
);
} else {
$style .= 'align-items: flex-start;';
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'align-items' => 'flex-start' ),
);
}
}
$style .= '}';
$style .= "$selector > * { margin: 0; }";
}
return $style;
if ( ! empty( $layout_styles ) ) {
/*
* Add to the style engine store to enqueue and render layout styles.
* Return compiled layout styles to retain backwards compatibility.
* Since https://github.com/WordPress/gutenberg/pull/42452,
* wp_enqueue_block_support_styles is no longer called in this block supports file.
*/
return wp_style_engine_get_stylesheet_from_css_rules(
$layout_styles,
array(
'context' => 'block-supports',
'prettify' => false,
)
);
}
return '';
}
/**
@ -158,26 +309,43 @@ function wp_render_layout_support_flag( $block_content, $block ) {
return $block_content;
}
$block_gap = wp_get_global_settings( array( 'spacing', 'blockGap' ) );
$default_layout = wp_get_global_settings( array( 'layout' ) );
$has_block_gap_support = isset( $block_gap ) ? null !== $block_gap : false;
$default_block_layout = _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );
$used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $default_block_layout;
$block_gap = wp_get_global_settings( array( 'spacing', 'blockGap' ) );
$global_layout_settings = wp_get_global_settings( array( 'layout' ) );
$has_block_gap_support = isset( $block_gap ) ? null !== $block_gap : false;
$default_block_layout = _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );
$used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $default_block_layout;
if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] ) {
if ( ! $default_layout ) {
if ( ! $global_layout_settings ) {
return $block_content;
}
$used_layout = $default_layout;
}
$class_names = array();
$container_class = wp_unique_id( 'wp-container-' );
$class_names[] = $container_class;
$class_names = array();
$layout_definitions = _wp_array_get( $global_layout_settings, array( 'definitions' ), array() );
$block_classname = wp_get_block_default_classname( $block['blockName'] );
$container_class = wp_unique_id( 'wp-container-' );
$layout_classname = '';
// The following section was added to reintroduce a small set of layout classnames that were
// removed in the 5.9 release (https://github.com/WordPress/gutenberg/issues/38719). It is
// not intended to provide an extended set of classes to match all block layout attributes
// here.
// Set the correct layout type for blocks using legacy content width.
if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'] ) {
$used_layout['type'] = 'constrained';
}
if (
wp_get_global_settings( array( 'useRootPaddingAwareAlignments' ) ) &&
isset( $used_layout['type'] ) &&
'constrained' === $used_layout['type']
) {
$class_names[] = 'has-global-padding';
}
/*
* The following section was added to reintroduce a small set of layout classnames that were
* removed in the 5.9 release (https://github.com/WordPress/gutenberg/issues/38719). It is
* not intended to provide an extended set of classes to match all block layout attributes
* here.
*/
if ( ! empty( $block['attrs']['layout']['orientation'] ) ) {
$class_names[] = 'is-' . sanitize_title( $block['attrs']['layout']['orientation'] );
}
@ -190,26 +358,66 @@ function wp_render_layout_support_flag( $block_content, $block ) {
$class_names[] = 'is-nowrap';
}
$gap_value = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) );
// Skip if gap value contains unsupported characters.
// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
// because we only want to match against the value, not the CSS attribute.
if ( is_array( $gap_value ) ) {
foreach ( $gap_value as $key => $value ) {
$gap_value[ $key ] = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value;
}
// Get classname for layout type.
if ( isset( $used_layout['type'] ) ) {
$layout_classname = _wp_array_get( $layout_definitions, array( $used_layout['type'], 'className' ), '' );
} else {
$gap_value = $gap_value && preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
$layout_classname = _wp_array_get( $layout_definitions, array( 'default', 'className' ), '' );
}
$fallback_gap_value = _wp_array_get( $block_type->supports, array( 'spacing', 'blockGap', '__experimentalDefault' ), '0.5em' );
if ( $layout_classname && is_string( $layout_classname ) ) {
$class_names[] = sanitize_title( $layout_classname );
}
// If a block's block.json skips serialization for spacing or spacing.blockGap,
// don't apply the user-defined value to the styles.
$should_skip_gap_serialization = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
$style = wp_get_layout_style( ".$container_class", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value );
// This assumes the hook only applies to blocks with a single wrapper.
// I think this is a reasonable limitation for that particular hook.
/*
* Only generate Layout styles if the theme has not opted-out.
* Attribute-based Layout classnames are output in all cases.
*/
if ( ! current_theme_supports( 'disable-layout-styles' ) ) {
$gap_value = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) );
/*
* Skip if gap value contains unsupported characters.
* Regex for CSS value borrowed from `safecss_filter_attr`, and used here
* to only match against the value, not the CSS attribute.
*/
if ( is_array( $gap_value ) ) {
foreach ( $gap_value as $key => $value ) {
$gap_value[ $key ] = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value;
}
} else {
$gap_value = $gap_value && preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
}
$fallback_gap_value = _wp_array_get( $block_type->supports, array( 'spacing', 'blockGap', '__experimentalDefault' ), '0.5em' );
$block_spacing = _wp_array_get( $block, array( 'attrs', 'style', 'spacing' ), null );
/*
* If a block's block.json skips serialization for spacing or spacing.blockGap,
* don't apply the user-defined value to the styles.
*/
$should_skip_gap_serialization = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
$style = wp_get_layout_style(
".$block_classname.$container_class",
$used_layout,
$has_block_gap_support,
$gap_value,
$should_skip_gap_serialization,
$fallback_gap_value,
$block_spacing
);
// Only add container class and enqueue block support styles if unique styles were generated.
if ( ! empty( $style ) ) {
$class_names[] = $container_class;
}
}
/*
* This assumes the hook only applies to blocks with a single wrapper.
* A limitation of this hook is that nested inner blocks wrappers are not yet supported.
*/
$content = preg_replace(
'/' . preg_quote( 'class="', '/' ) . '/',
'class="' . esc_attr( implode( ' ', $class_names ) ) . ' ',
@ -217,8 +425,6 @@ function wp_render_layout_support_flag( $block_content, $block ) {
1
);
wp_enqueue_block_support_styles( $style );
return $content;
}

2
tests/phpunit/data/blocks/fixtures/core__column.server.html
View File

@ -1,5 +1,5 @@
<div class="wp-container-1 wp-block-column">
<div class="is-layout-flow wp-block-column">
<p>Column One, Paragraph One</p>

6
tests/phpunit/data/blocks/fixtures/core__columns.server.html
View File

@ -1,7 +1,7 @@
<div class="wp-container-1 wp-block-columns has-3-columns">
<div class="is-layout-flex wp-container-1 wp-block-columns has-3-columns">
<div class="wp-container-1 wp-block-column">
<div class="is-layout-flow wp-block-column">
<p>Column One, Paragraph One</p>
@ -11,7 +11,7 @@
</div>
<div class="wp-container-1 wp-block-column">
<div class="is-layout-flow wp-block-column">
<p>Column Two, Paragraph One</p>

2
tests/phpunit/data/blocks/fixtures/core__columns__deprecated.server.html
View File

@ -1,5 +1,5 @@
<div class="wp-container-1 wp-block-columns has-3-columns">
<div class="is-layout-flex wp-container-1 wp-block-columns has-3-columns">
<p class="layout-column-1">Column One, Paragraph One</p>

2
tests/phpunit/data/blocks/fixtures/core__gallery.server.html
View File

@ -1,5 +1,5 @@
<figure class="wp-container-1 wp-block-gallery-1 wp-block-gallery has-nested-images columns-default is-cropped columns-2">
<figure class="is-layout-flex wp-block-gallery-1 wp-block-gallery has-nested-images columns-default is-cropped columns-2">
<figure class="wp-block-image size-large">
<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="Image gallery image" />

2
tests/phpunit/data/blocks/fixtures/core__gallery__columns.server.html
View File

@ -1,5 +1,5 @@
<figure class="wp-container-1 wp-block-gallery-1 wp-block-gallery has-nested-images is-cropped columns-1" >
<figure class="is-layout-flex wp-block-gallery-1 wp-block-gallery has-nested-images is-cropped columns-1" >
<figure class="wp-block-image size-large">
<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="Image gallery image" />

253
tests/phpunit/tests/block-supports/wpGetLayoutStyle.php Normal file
View File

@ -0,0 +1,253 @@
<?php
/**
* @group block-supports
* @covers ::wp_get_layout_style
*/
class Tests_Block_Supports_WpGetLayoutStyle extends WP_UnitTestCase {
const ARGS_DEFAULTS = array(
'selector' => null,
'layout' => null,
'has_block_gap_support' => false,
'gap_value' => null,
'should_skip_gap_serialization' => false,
'fallback_gap_value' => '0.5em',
'block_spacing' => null,
);
/**
* @dataProvider data_wp_get_layout_style
* @ticket 56467
*
* @param array $args Dataset to test.
* @param string $expected_output The expected output.
*/
public function test_wp_get_layout_style( array $args, $expected_output ) {
$args = array_merge( static::ARGS_DEFAULTS, $args );
$layout_styles = wp_get_layout_style(
$args['selector'],
$args['layout'],
$args['has_block_gap_support'],
$args['gap_value'],
$args['should_skip_gap_serialization'],
$args['fallback_gap_value'],
$args['block_spacing']
);
$this->assertSame( $expected_output, $layout_styles );
}
/**
* Data provider.
*
* @return array
*/
public function data_wp_get_layout_style() {
return array(
'no args should return empty value' => array(
'args' => array(),
'expected_output' => '',
),
'nulled args should return empty value' => array(
'args' => array(
'selector' => null,
'layout' => null,
'has_block_gap_support' => null,
'gap_value' => null,
'should_skip_gap_serialization' => null,
'fallback_gap_value' => null,
'block_spacing' => null,
),
'expected_output' => '',
),
'only selector should return empty value' => array(
'args' => array(
'selector' => '.wp-layout',
),
'expected_output' => '',
),
'default layout and block gap support' => array(
'args' => array(
'selector' => '.wp-layout',
'has_block_gap_support' => true,
'gap_value' => '1em',
),
'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout.wp-layout > * + *{margin-block-start:1em;margin-block-end:0;}',
),
'skip serialization should return empty value' => array(
'args' => array(
'selector' => '.wp-layout',
'has_block_gap_support' => true,
'gap_value' => '1em',
'should_skip_gap_serialization' => true,
),
'expected_output' => '',
),
'default layout and axial block gap support' => array(
'args' => array(
'selector' => '.wp-layout',
'has_block_gap_support' => true,
'gap_value' => array( 'top' => '1em' ),
),
'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout.wp-layout > * + *{margin-block-start:1em;margin-block-end:0;}',
),
'constrained layout with sizes' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'constrained',
'contentSize' => '800px',
'wideSize' => '1200px',
),
),
'expected_output' => '.wp-layout > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:800px;margin-left:auto !important;margin-right:auto !important;}.wp-layout > .alignwide{max-width:1200px;}.wp-layout .alignfull{max-width:none;}',
),
'constrained layout with sizes and block spacing' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'constrained',
'contentSize' => '800px',
'wideSize' => '1200px',
),
'block_spacing' => array(
'padding' => array(
'left' => '20px',
'right' => '10px',
),
),
),
'expected_output' => '.wp-layout > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:800px;margin-left:auto !important;margin-right:auto !important;}.wp-layout > .alignwide{max-width:1200px;}.wp-layout .alignfull{max-width:none;}.wp-layout > .alignfull{margin-right:calc(10px * -1);margin-left:calc(20px * -1);}',
),
'constrained layout with block gap support' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'constrained',
),
'has_block_gap_support' => true,
'gap_value' => '2.5rem',
),
'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout.wp-layout > * + *{margin-block-start:2.5rem;margin-block-end:0;}',
),
'constrained layout with axial block gap support' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'constrained',
),
'has_block_gap_support' => true,
'gap_value' => array( 'top' => '2.5rem' ),
),
'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout.wp-layout > * + *{margin-block-start:2.5rem;margin-block-end:0;}',
),
'constrained layout with block gap support and spacing preset' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'constrained',
),
'has_block_gap_support' => true,
'gap_value' => 'var:preset|spacing|50',
),
'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout.wp-layout > * + *{margin-block-start:var(--wp--preset--spacing--50);margin-block-end:0;}',
),
'flex layout with no args should return empty value' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'flex',
),
),
'expected_output' => '',
),
'horizontal flex layout should return empty value' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'flex',
'orientation' => 'horizontal',
),
),
'expected_output' => '',
),
'flex layout with properties' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'flex',
'orientation' => 'horizontal',
'flexWrap' => 'nowrap',
'justifyContent' => 'left',
'verticalAlignment' => 'bottom',
),
),
'expected_output' => '.wp-layout{flex-wrap:nowrap;justify-content:flex-start;align-items:flex-end;}',
),
'flex layout with properties and block gap' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'flex',
'orientation' => 'horizontal',
'flexWrap' => 'nowrap',
'justifyContent' => 'left',
'verticalAlignment' => 'bottom',
),
'has_block_gap_support' => true,
'gap_value' => '29px',
),
'expected_output' => '.wp-layout{flex-wrap:nowrap;gap:29px;justify-content:flex-start;align-items:flex-end;}',
),
'flex layout with properties and axial block gap' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'flex',
'orientation' => 'horizontal',
'flexWrap' => 'nowrap',
'justifyContent' => 'left',
'verticalAlignment' => 'bottom',
),
'has_block_gap_support' => true,
'gap_value' => array(
'top' => '1px',
'left' => '2px',
),
),
'expected_output' => '.wp-layout{flex-wrap:nowrap;gap:1px 2px;justify-content:flex-start;align-items:flex-end;}',
),
'flex layout with properties and axial block gap using spacing preset' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'flex',
'orientation' => 'horizontal',
'flexWrap' => 'nowrap',
'justifyContent' => 'left',
'verticalAlignment' => 'bottom',
),
'has_block_gap_support' => true,
'gap_value' => array(
'left' => 'var:preset|spacing|40',
),
'fallback_gap_value' => '11px',
),
'expected_output' => '.wp-layout{flex-wrap:nowrap;gap:11px var(--wp--preset--spacing--40);justify-content:flex-start;align-items:flex-end;}',
),
'vertical flex layout with properties' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'flex',
'orientation' => 'vertical',
'flexWrap' => 'nowrap',
'justifyContent' => 'left',
'verticalAlignment' => 'bottom',
),
),
'expected_output' => '.wp-layout{flex-wrap:nowrap;flex-direction:column;align-items:flex-start;}',
),
);
}
}