diff --git a/src/wp-includes/block-supports/layout.php b/src/wp-includes/block-supports/layout.php index 4ad4665fd4c48..a00d39f7e219c 100644 --- a/src/wp-includes/block-supports/layout.php +++ b/src/wp-includes/block-supports/layout.php @@ -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] ); + $margin_left = 'left' === $justify_content ? '0 !important' : 'auto !important'; + $margin_right = 'right' === $justify_content ? '0 !important' : 'auto !important'; + 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 .= '}'; - - $style .= "$selector > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}'; - $style .= "$selector .alignfull { max-width: none; }"; + 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'; + if ( ! empty( $layout['flexWrap'] ) && 'nowrap' === $layout['flexWrap'] ) { + $layout_styles[] = array( + 'selector' => $selector, + 'declarations' => array( 'flex-wrap' => 'nowrap' ), + ); + } - $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; + 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 ), + ); } - $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;"; } - $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; }"; + 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 $style; + 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 = ''; + + // 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. + /* + * 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' ), '' ); + } + + if ( $layout_classname && is_string( $layout_classname ) ) { + $class_names[] = sanitize_title( $layout_classname ); } - $fallback_gap_value = _wp_array_get( $block_type->supports, array( 'spacing', 'blockGap', '__experimentalDefault' ), '0.5em' ); + /* + * 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; + } + } - // 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. + /* + * 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; } diff --git a/tests/phpunit/data/blocks/fixtures/core__column.server.html b/tests/phpunit/data/blocks/fixtures/core__column.server.html index cdc525068b262..d3d3cac0834b7 100644 --- a/tests/phpunit/data/blocks/fixtures/core__column.server.html +++ b/tests/phpunit/data/blocks/fixtures/core__column.server.html @@ -1,5 +1,5 @@ -
+

Column One, Paragraph One

diff --git a/tests/phpunit/data/blocks/fixtures/core__columns.server.html b/tests/phpunit/data/blocks/fixtures/core__columns.server.html index 1999742228035..f8b9705b598f8 100644 --- a/tests/phpunit/data/blocks/fixtures/core__columns.server.html +++ b/tests/phpunit/data/blocks/fixtures/core__columns.server.html @@ -1,7 +1,7 @@ -
+
-
+

Column One, Paragraph One

@@ -11,7 +11,7 @@
-
+

Column Two, Paragraph One

diff --git a/tests/phpunit/data/blocks/fixtures/core__columns__deprecated.server.html b/tests/phpunit/data/blocks/fixtures/core__columns__deprecated.server.html index 8aa88433d668c..6240dc51a8de7 100644 --- a/tests/phpunit/data/blocks/fixtures/core__columns__deprecated.server.html +++ b/tests/phpunit/data/blocks/fixtures/core__columns__deprecated.server.html @@ -1,5 +1,5 @@ -
+

Column One, Paragraph One

diff --git a/tests/phpunit/data/blocks/fixtures/core__gallery.server.html b/tests/phpunit/data/blocks/fixtures/core__gallery.server.html index a185c67cd7264..c7a5d3bb44aa8 100644 --- a/tests/phpunit/data/blocks/fixtures/core__gallery.server.html +++ b/tests/phpunit/data/blocks/fixtures/core__gallery.server.html @@ -1,5 +1,5 @@ -
+
Image gallery image diff --git a/tests/phpunit/data/blocks/fixtures/core__gallery__columns.server.html b/tests/phpunit/data/blocks/fixtures/core__gallery__columns.server.html index 40562035894af..2970d60ced4f7 100644 --- a/tests/phpunit/data/blocks/fixtures/core__gallery__columns.server.html +++ b/tests/phpunit/data/blocks/fixtures/core__gallery__columns.server.html @@ -1,5 +1,5 @@ -
+
Image gallery image diff --git a/tests/phpunit/tests/block-supports/wpGetLayoutStyle.php b/tests/phpunit/tests/block-supports/wpGetLayoutStyle.php new file mode 100644 index 0000000000000..1f545e6ed4b1a --- /dev/null +++ b/tests/phpunit/tests/block-supports/wpGetLayoutStyle.php @@ -0,0 +1,253 @@ + 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;}', + ), + ); + } +}