From 7761f116614613f26014e4a585f95b25c6d5cc72 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Thu, 15 Sep 2022 10:42:34 +1000 Subject: [PATCH 01/14] Backport Layou block support refactor part 2 --- src/wp-includes/block-supports/layout.php | 325 +++++++++++++++++----- 1 file changed, 253 insertions(+), 72 deletions(-) diff --git a/src/wp-includes/block-supports/layout.php b/src/wp-includes/block-supports/layout.php index 4ad4665fd4c48..2856a7179c1ad 100644 --- a/src/wp-includes/block-supports/layout.php +++ b/src/wp-includes/block-supports/layout.php @@ -33,6 +33,7 @@ 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. @@ -41,45 +42,145 @@ function wp_register_layout_support( $block_type ) { * @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 $fallback_gap_value The block gap value to apply. + * @param array $block_spacing Custom spacing set on the block. * @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'; - - $style = ''; + $layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default'; + $layout_styles = array(); 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; // Make sure there is a single CSS rule, and all tags are stripped for security. - $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] ); + // TODO: Use `safecss_filter_attr` instead - once https://core.trac.wordpress.org/ticket/46197 is patched. + $all_max_width_value = wp_strip_all_tags( explode( ';', $all_max_width_value )[0] ); + $wide_max_width_value = wp_strip_all_tags( 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 +191,98 @@ 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 we no longer call wp_enqueue_block_support_styles in this block supports file. + return wp_style_engine_get_stylesheet_from_css_rules( + $layout_styles, + array( + 'context' => 'block-supports', + ) + ); } - return $style; + return ''; } /** @@ -158,21 +303,36 @@ 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 @@ -190,24 +350,47 @@ 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 + // 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; + } + } 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. $content = preg_replace( @@ -217,8 +400,6 @@ function wp_render_layout_support_flag( $block_content, $block ) { 1 ); - wp_enqueue_block_support_styles( $style ); - return $content; } From 7a1b5d4cbb994e7bfdd3f13f2cda3ba4a6125c1e Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Thu, 15 Sep 2022 10:58:37 +1000 Subject: [PATCH 02/14] Add tests --- tests/phpunit/tests/block-supports/layout.php | 302 ++++++++++++++++++ 1 file changed, 302 insertions(+) diff --git a/tests/phpunit/tests/block-supports/layout.php b/tests/phpunit/tests/block-supports/layout.php index 3611c28efa22e..a716b4ce8c02a 100644 --- a/tests/phpunit/tests/block-supports/layout.php +++ b/tests/phpunit/tests/block-supports/layout.php @@ -173,4 +173,306 @@ function test_outer_container_not_restored_for_aligned_image_block_with_themejso $this->assertSame( $expected, wp_restore_image_outer_container( $block_content, $block ) ); } + + /** + * Generates the CSS corresponding to the provided layout. + * + * @ticket 56467 + * + * @dataProvider data_wp_get_layout_style + * + * @covers ::wp_get_layout_style + * + * @param array $args { + * Arguments for the test function. + * + * @type string $selector CSS selector. + * @type array $layout Layout object. The one that is passed has already checked the existence of default block layout. + * @type boolean $has_block_gap_support Whether the theme has support for the block gap. + * @type string $gap_value The block gap value to apply. + * @type boolean $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor. + * @type string $fallback_gap_value The block gap value to apply. + * @type array $block_spacing Custom spacing set on the block. + * } + * @param string $expected_output The expected output. + */ + function test_wp_get_layout_style( $args, $expected_output ) { + $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 for test_wp_get_layout_style(). + * + * @ticket 56467 + * + * @return array + */ + public function data_wp_get_layout_style() { + return array( + 'should_return_empty_value_with_no_args' => 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' => '', + ), + 'should_return_empty_value_with_only_selector' => array( + 'args' => array( + 'selector' => '.wp-layout', + 'layout' => null, + 'has_block_gap_support' => null, + 'gap_value' => null, + 'should_skip_gap_serialization' => null, + 'fallback_gap_value' => null, + 'block_spacing' => null, + ), + 'expected_output' => '', + ), + 'should_return_default_layout_with_block_gap_support' => array( + 'args' => array( + 'selector' => '.wp-layout', + 'layout' => null, + 'has_block_gap_support' => true, + 'gap_value' => '1em', + 'should_skip_gap_serialization' => null, + 'fallback_gap_value' => null, + 'block_spacing' => null, + ), + 'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout.wp-layout > * + *{margin-block-start:1em;margin-block-end:0;}', + ), + 'should_return_empty_value_with_block_gap_support_and_skip_serialization' => array( + 'args' => array( + 'selector' => '.wp-layout', + 'layout' => null, + 'has_block_gap_support' => true, + 'gap_value' => '1em', + 'should_skip_gap_serialization' => true, + 'fallback_gap_value' => null, + 'block_spacing' => null, + ), + 'expected_output' => '', + ), + 'should_return_default_layout_with_axial_block_gap_support' => array( + 'args' => array( + 'selector' => '.wp-layout', + 'layout' => null, + 'has_block_gap_support' => true, + 'gap_value' => array( 'top' => '1em' ), + 'should_skip_gap_serialization' => null, + 'fallback_gap_value' => null, + 'block_spacing' => null, + ), + 'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout.wp-layout > * + *{margin-block-start:1em;margin-block-end:0;}', + ), + 'should_return_constrained_layout_with_sizes' => array( + 'args' => array( + 'selector' => '.wp-layout', + 'layout' => array( + 'type' => 'constrained', + 'contentSize' => '800px', + 'wideSize' => '1200px', + ), + 'has_block_gap_support' => null, + 'gap_value' => null, + 'should_skip_gap_serialization' => null, + 'fallback_gap_value' => null, + 'block_spacing' => null, + ), + '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;}', + ), + 'should_return_constrained_layout_with_sizes_and_block_spacing' => array( + 'args' => array( + 'selector' => '.wp-layout', + 'layout' => array( + 'type' => 'constrained', + 'contentSize' => '800px', + 'wideSize' => '1200px', + ), + 'has_block_gap_support' => null, + 'gap_value' => null, + 'should_skip_gap_serialization' => null, + 'fallback_gap_value' => null, + '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);}', + ), + 'should_return_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', + 'should_skip_gap_serialization' => null, + 'fallback_gap_value' => null, + 'block_spacing' => null, + ), + '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;}', + ), + 'should_return_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' ), + 'should_skip_gap_serialization' => null, + 'fallback_gap_value' => null, + 'block_spacing' => null, + ), + '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;}', + ), + 'should_return_constrained_layout_with_block_gap_support_and_spacing' => array( + 'args' => array( + 'selector' => '.wp-layout', + 'layout' => array( + 'type' => 'constrained', + ), + 'has_block_gap_support' => true, + 'gap_value' => 'var:preset|spacing|50', + 'should_skip_gap_serialization' => null, + 'fallback_gap_value' => null, + 'block_spacing' => null, + ), + '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;}', + ), + 'should_return_empty_value_for_flex_layout_with_no_args' => array( + 'args' => array( + 'selector' => '.wp-layout', + 'layout' => array( + 'type' => 'flex', + ), + 'has_block_gap_support' => null, + 'gap_value' => null, + 'should_skip_gap_serialization' => null, + 'fallback_gap_value' => null, + 'block_spacing' => null, + ), + 'expected_output' => '', + ), + 'should_return_empty_value_for_horizontal_flex_layout_with_orientation_only' => array( + 'args' => array( + 'selector' => '.wp-layout', + 'layout' => array( + 'type' => 'flex', + 'orientation' => 'horizontal', + ), + 'has_block_gap_support' => null, + 'gap_value' => null, + 'should_skip_gap_serialization' => null, + 'fallback_gap_value' => null, + 'block_spacing' => null, + ), + 'expected_output' => '', + ), + 'should_return_rule_horizontal_flex_layout_with_flex_properties' => array( + 'args' => array( + 'selector' => '.wp-layout', + 'layout' => array( + 'type' => 'flex', + 'orientation' => 'horizontal', + 'flexWrap' => 'nowrap', + 'justifyContent' => 'left', + 'verticalAlignment' => 'bottom', + ), + 'has_block_gap_support' => null, + 'gap_value' => null, + 'should_skip_gap_serialization' => null, + 'fallback_gap_value' => null, + 'block_spacing' => null, + ), + 'expected_output' => '.wp-layout{flex-wrap:nowrap;justify-content:flex-start;align-items:flex-end;}', + ), + 'should_return_rule_for_horizontal_flex_layout_with_flex_properties_and_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', + 'should_skip_gap_serialization' => null, + 'fallback_gap_value' => null, + 'block_spacing' => null, + ), + 'expected_output' => '.wp-layout{flex-wrap:nowrap;gap:29px;justify-content:flex-start;align-items:flex-end;}', + ), + 'should_return_rule_for_horizontal_flex_layout_with_flex_properties_and_axial_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', + ), + 'should_skip_gap_serialization' => null, + 'fallback_gap_value' => null, + 'block_spacing' => null, + ), + 'expected_output' => '.wp-layout{flex-wrap:nowrap;gap:1px 2px;justify-content:flex-start;align-items:flex-end;}', + ), + 'should_return_rule_for_horizontal_flex_layout_with_flex_properties_gap_fallback_and_spacing' => 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', + ), + 'should_skip_gap_serialization' => null, + 'fallback_gap_value' => '11px', + 'block_spacing' => null, + ), + 'expected_output' => '.wp-layout{flex-wrap:nowrap;gap:11px var(--wp--preset--spacing--40);justify-content:flex-start;align-items:flex-end;}', + ), + 'should_return_rule_for_vertical_flex_layout_with_flex_properties' => array( + 'args' => array( + 'selector' => '.wp-layout', + 'layout' => array( + 'type' => 'flex', + 'orientation' => 'vertical', + 'flexWrap' => 'nowrap', + 'justifyContent' => 'left', + 'verticalAlignment' => 'bottom', + ), + 'has_block_gap_support' => null, + 'gap_value' => null, + 'should_skip_gap_serialization' => null, + 'fallback_gap_value' => null, + 'block_spacing' => null, + ), + 'expected_output' => '.wp-layout{flex-wrap:nowrap;flex-direction:column;align-items:flex-start;}', + ), + ); + } } From a7904b483dde020dab4dd9a309cadb5c14b2d1f3 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Thu, 15 Sep 2022 14:34:32 +1000 Subject: [PATCH 03/14] Update test fixtures with new classnames --- tests/phpunit/data/blocks/fixtures/core__column.server.html | 2 +- .../phpunit/data/blocks/fixtures/core__columns.server.html | 6 +++--- .../blocks/fixtures/core__columns__deprecated.server.html | 2 +- .../phpunit/data/blocks/fixtures/core__gallery.server.html | 2 +- .../data/blocks/fixtures/core__gallery__columns.server.html | 2 +- 5 files changed, 7 insertions(+), 7 deletions(-) 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 From c5dd3dc19ee4caf07e46d851b5f741f1489b3747 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Thu, 15 Sep 2022 15:02:37 +1000 Subject: [PATCH 04/14] Fix Layout tests --- src/wp-includes/block-supports/layout.php | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/wp-includes/block-supports/layout.php b/src/wp-includes/block-supports/layout.php index 2856a7179c1ad..1035436c75517 100644 --- a/src/wp-includes/block-supports/layout.php +++ b/src/wp-includes/block-supports/layout.php @@ -46,7 +46,7 @@ function wp_register_layout_support( $block_type ) { * @param array $block_spacing Custom spacing set on the block. * @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' ) { +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(); if ( 'default' === $layout_type ) { @@ -277,7 +277,8 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false return wp_style_engine_get_stylesheet_from_css_rules( $layout_styles, array( - 'context' => 'block-supports', + 'context' => 'block-supports', + 'prettify' => false, ) ); } From 145a9c29d386599bb4e68605f8f4ab6efc8baaab Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 16 Sep 2022 12:34:04 +1000 Subject: [PATCH 05/14] Add code quality updates based on feedback --- src/wp-includes/block-supports/layout.php | 62 ++++++++++++------- tests/phpunit/tests/block-supports/layout.php | 56 +++++++++-------- 2 files changed, 69 insertions(+), 49 deletions(-) diff --git a/src/wp-includes/block-supports/layout.php b/src/wp-includes/block-supports/layout.php index 1035436c75517..5f51a18c03fa2 100644 --- a/src/wp-includes/block-supports/layout.php +++ b/src/wp-includes/block-supports/layout.php @@ -39,9 +39,9 @@ function wp_register_layout_support( $block_type ) { * @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 bool $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 bool $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 $block_spacing Custom spacing set on the block. * @return string CSS style. @@ -83,9 +83,8 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false $wide_max_width_value = $wide_size ? $wide_size : $content_size; // Make sure there is a single CSS rule, and all tags are stripped for security. - // TODO: Use `safecss_filter_attr` instead - once https://core.trac.wordpress.org/ticket/46197 is patched. - $all_max_width_value = wp_strip_all_tags( explode( ';', $all_max_width_value )[0] ); - $wide_max_width_value = wp_strip_all_tags( explode( ';', $wide_max_width_value )[0] ); + $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'; @@ -118,8 +117,10 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false ) ); - // 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. + /* + * 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( @@ -233,7 +234,7 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false } if ( 'horizontal' === $layout_orientation ) { - /** + /* * 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. @@ -271,9 +272,12 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false } 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 we no longer call wp_enqueue_block_support_styles in this block supports file. + /* + * 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( @@ -335,10 +339,12 @@ function wp_render_layout_support_flag( $block_content, $block ) { $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'] ); } @@ -362,14 +368,18 @@ function wp_render_layout_support_flag( $block_content, $block ) { $class_names[] = sanitize_title( $layout_classname ); } - // Only generate Layout styles if the theme has not opted-out. - // Attribute-based Layout classnames are output in all cases. + /* + * 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 - // because we only want to match against the value, not the CSS attribute. + /* + * 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; @@ -381,8 +391,10 @@ function wp_render_layout_support_flag( $block_content, $block ) { $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. + /* + * 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 ); @@ -392,8 +404,10 @@ function wp_render_layout_support_flag( $block_content, $block ) { } } - // 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 ) ) . ' ', diff --git a/tests/phpunit/tests/block-supports/layout.php b/tests/phpunit/tests/block-supports/layout.php index a716b4ce8c02a..f90860016252e 100644 --- a/tests/phpunit/tests/block-supports/layout.php +++ b/tests/phpunit/tests/block-supports/layout.php @@ -175,42 +175,48 @@ function test_outer_container_not_restored_for_aligned_image_block_with_themejso } /** - * Generates the CSS corresponding to the provided layout. + * Tests the generation of CSS corresponding to the provided layout. * * @ticket 56467 * - * @dataProvider data_wp_get_layout_style - * * @covers ::wp_get_layout_style * + * @dataProvider data_wp_get_layout_style + * * @param array $args { * Arguments for the test function. * * @type string $selector CSS selector. * @type array $layout Layout object. The one that is passed has already checked the existence of default block layout. - * @type boolean $has_block_gap_support Whether the theme has support for the block gap. + * @type bool $has_block_gap_support Whether the theme has support for the block gap. * @type string $gap_value The block gap value to apply. - * @type boolean $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor. + * @type bool $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor. * @type string $fallback_gap_value The block gap value to apply. * @type array $block_spacing Custom spacing set on the block. * } * @param string $expected_output The expected output. */ function test_wp_get_layout_style( $args, $expected_output ) { - $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'] ); + $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 for test_wp_get_layout_style(). * - * @ticket 56467 - * * @return array */ public function data_wp_get_layout_style() { return array( - 'should_return_empty_value_with_no_args' => array( + 'no args should return empty value' => array( 'args' => array( 'selector' => null, 'layout' => null, @@ -222,7 +228,7 @@ public function data_wp_get_layout_style() { ), 'expected_output' => '', ), - 'should_return_empty_value_with_only_selector' => array( + 'only selector should return empty value' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => null, @@ -234,7 +240,7 @@ public function data_wp_get_layout_style() { ), 'expected_output' => '', ), - 'should_return_default_layout_with_block_gap_support' => array( + 'default layout and block gap support' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => null, @@ -246,7 +252,7 @@ public function data_wp_get_layout_style() { ), 'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout.wp-layout > * + *{margin-block-start:1em;margin-block-end:0;}', ), - 'should_return_empty_value_with_block_gap_support_and_skip_serialization' => array( + 'skip serialization should return empty value' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => null, @@ -258,7 +264,7 @@ public function data_wp_get_layout_style() { ), 'expected_output' => '', ), - 'should_return_default_layout_with_axial_block_gap_support' => array( + 'default layout and axial block gap support' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => null, @@ -270,7 +276,7 @@ public function data_wp_get_layout_style() { ), 'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout.wp-layout > * + *{margin-block-start:1em;margin-block-end:0;}', ), - 'should_return_constrained_layout_with_sizes' => array( + 'constrained layout with sizes' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => array( @@ -286,7 +292,7 @@ public function data_wp_get_layout_style() { ), '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;}', ), - 'should_return_constrained_layout_with_sizes_and_block_spacing' => array( + 'constrained layout with sizes and block spacing' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => array( @@ -307,7 +313,7 @@ public function data_wp_get_layout_style() { ), '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);}', ), - 'should_return_constrained_layout_with_block_gap_support' => array( + 'constrained layout with block gap support' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => array( @@ -321,7 +327,7 @@ public function data_wp_get_layout_style() { ), '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;}', ), - 'should_return_constrained_layout_with_axial_block_gap_support' => array( + 'constrained layout with axial block gap support' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => array( @@ -335,7 +341,7 @@ public function data_wp_get_layout_style() { ), '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;}', ), - 'should_return_constrained_layout_with_block_gap_support_and_spacing' => array( + 'constrained layout with block gap support and spacing preset' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => array( @@ -349,7 +355,7 @@ public function data_wp_get_layout_style() { ), '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;}', ), - 'should_return_empty_value_for_flex_layout_with_no_args' => array( + 'flex layout with no args should return empty value' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => array( @@ -363,7 +369,7 @@ public function data_wp_get_layout_style() { ), 'expected_output' => '', ), - 'should_return_empty_value_for_horizontal_flex_layout_with_orientation_only' => array( + 'horizontal flex layout should return empty value' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => array( @@ -378,7 +384,7 @@ public function data_wp_get_layout_style() { ), 'expected_output' => '', ), - 'should_return_rule_horizontal_flex_layout_with_flex_properties' => array( + 'flex layout with properties' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => array( @@ -396,7 +402,7 @@ public function data_wp_get_layout_style() { ), 'expected_output' => '.wp-layout{flex-wrap:nowrap;justify-content:flex-start;align-items:flex-end;}', ), - 'should_return_rule_for_horizontal_flex_layout_with_flex_properties_and_gap' => array( + 'flex layout with properties and block gap' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => array( @@ -414,7 +420,7 @@ public function data_wp_get_layout_style() { ), 'expected_output' => '.wp-layout{flex-wrap:nowrap;gap:29px;justify-content:flex-start;align-items:flex-end;}', ), - 'should_return_rule_for_horizontal_flex_layout_with_flex_properties_and_axial_gap' => array( + 'flex layout with properties and axial block gap' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => array( @@ -435,7 +441,7 @@ public function data_wp_get_layout_style() { ), 'expected_output' => '.wp-layout{flex-wrap:nowrap;gap:1px 2px;justify-content:flex-start;align-items:flex-end;}', ), - 'should_return_rule_for_horizontal_flex_layout_with_flex_properties_gap_fallback_and_spacing' => array( + 'flex layout with properties and axial block gap using spacing preset' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => array( @@ -455,7 +461,7 @@ public function data_wp_get_layout_style() { ), 'expected_output' => '.wp-layout{flex-wrap:nowrap;gap:11px var(--wp--preset--spacing--40);justify-content:flex-start;align-items:flex-end;}', ), - 'should_return_rule_for_vertical_flex_layout_with_flex_properties' => array( + 'vertical flex layout with properties' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => array( From 00079325d4f37ca9fcbbdc0156724e8eb890f98e Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 16 Sep 2022 12:42:24 +1000 Subject: [PATCH 06/14] Fix whitespace linting issue --- tests/phpunit/tests/block-supports/layout.php | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/tests/phpunit/tests/block-supports/layout.php b/tests/phpunit/tests/block-supports/layout.php index f90860016252e..571d86be317ef 100644 --- a/tests/phpunit/tests/block-supports/layout.php +++ b/tests/phpunit/tests/block-supports/layout.php @@ -216,7 +216,7 @@ function test_wp_get_layout_style( $args, $expected_output ) { */ public function data_wp_get_layout_style() { return array( - 'no args should return empty value' => array( + 'no args should return empty value' => array( 'args' => array( 'selector' => null, 'layout' => null, @@ -228,7 +228,7 @@ public function data_wp_get_layout_style() { ), 'expected_output' => '', ), - 'only selector should return empty value' => array( + 'only selector should return empty value' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => null, @@ -240,7 +240,7 @@ public function data_wp_get_layout_style() { ), 'expected_output' => '', ), - 'default layout and block gap support' => array( + 'default layout and block gap support' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => null, @@ -264,7 +264,7 @@ public function data_wp_get_layout_style() { ), 'expected_output' => '', ), - 'default layout and axial block gap support' => array( + 'default layout and axial block gap support' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => null, @@ -276,7 +276,7 @@ public function data_wp_get_layout_style() { ), '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( + 'constrained layout with sizes' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => array( @@ -313,7 +313,7 @@ public function data_wp_get_layout_style() { ), '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( + 'constrained layout with block gap support' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => array( @@ -384,7 +384,7 @@ public function data_wp_get_layout_style() { ), 'expected_output' => '', ), - 'flex layout with properties' => array( + 'flex layout with properties' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => array( @@ -402,7 +402,7 @@ public function data_wp_get_layout_style() { ), 'expected_output' => '.wp-layout{flex-wrap:nowrap;justify-content:flex-start;align-items:flex-end;}', ), - 'flex layout with properties and block gap' => array( + 'flex layout with properties and block gap' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => array( @@ -461,7 +461,7 @@ public function data_wp_get_layout_style() { ), '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( + 'vertical flex layout with properties' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => array( From dcebfae9da77affdf2bb19f95df167cf30bcc635 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 16 Sep 2022 12:48:23 +1000 Subject: [PATCH 07/14] Try to fix odd linting issue --- tests/phpunit/tests/block-supports/layout.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/phpunit/tests/block-supports/layout.php b/tests/phpunit/tests/block-supports/layout.php index 571d86be317ef..428b78d046a5a 100644 --- a/tests/phpunit/tests/block-supports/layout.php +++ b/tests/phpunit/tests/block-supports/layout.php @@ -384,7 +384,7 @@ public function data_wp_get_layout_style() { ), 'expected_output' => '', ), - 'flex layout with properties' => array( + 'flex layout with properties' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => array( From 8fe076615290d521822ed5519cdaff0c498ba5e4 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 16 Sep 2022 12:52:40 +1000 Subject: [PATCH 08/14] Revert prior change to linting --- tests/phpunit/tests/block-supports/layout.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/phpunit/tests/block-supports/layout.php b/tests/phpunit/tests/block-supports/layout.php index 428b78d046a5a..571d86be317ef 100644 --- a/tests/phpunit/tests/block-supports/layout.php +++ b/tests/phpunit/tests/block-supports/layout.php @@ -384,7 +384,7 @@ public function data_wp_get_layout_style() { ), 'expected_output' => '', ), - 'flex layout with properties' => array( + 'flex layout with properties' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => array( From ef942657a9d400b1ef3782c12e7b06e11cfd92d9 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 16 Sep 2022 13:55:42 +1000 Subject: [PATCH 09/14] Re-fix linting --- tests/phpunit/tests/block-supports/layout.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/phpunit/tests/block-supports/layout.php b/tests/phpunit/tests/block-supports/layout.php index 571d86be317ef..a42fa7888b4b4 100644 --- a/tests/phpunit/tests/block-supports/layout.php +++ b/tests/phpunit/tests/block-supports/layout.php @@ -384,7 +384,7 @@ public function data_wp_get_layout_style() { ), 'expected_output' => '', ), - 'flex layout with properties' => array( + 'flex layout with properties' => array( 'args' => array( 'selector' => '.wp-layout', 'layout' => array( From 2a6a882417f70d9e88f509fc52ba22611969dfde Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 16 Sep 2022 14:54:52 +1000 Subject: [PATCH 10/14] Split call to wp_get_layout_style onto multiple lines Co-authored-by: Colin Stewart <79332690+costdev@users.noreply.github.com> --- src/wp-includes/block-supports/layout.php | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/wp-includes/block-supports/layout.php b/src/wp-includes/block-supports/layout.php index 5f51a18c03fa2..99e0e088e8ed9 100644 --- a/src/wp-includes/block-supports/layout.php +++ b/src/wp-includes/block-supports/layout.php @@ -396,7 +396,16 @@ function wp_render_layout_support_flag( $block_content, $block ) { * 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 ); + + $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 ) ) { From d64d61d141e3795aa21524941b75e22c5fdf1b9b Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 16 Sep 2022 15:20:59 +1000 Subject: [PATCH 11/14] Empty commit to restart CI From 0099959174adbd77f9c8590391be5ee8782393db Mon Sep 17 00:00:00 2001 From: Jb Audras Date: Wed, 21 Sep 2022 12:29:58 +0200 Subject: [PATCH 12/14] `return` mention improvement Co-authored-by: Mukesh Panchal --- src/wp-includes/block-supports/layout.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-includes/block-supports/layout.php b/src/wp-includes/block-supports/layout.php index 99e0e088e8ed9..e03593038ff33 100644 --- a/src/wp-includes/block-supports/layout.php +++ b/src/wp-includes/block-supports/layout.php @@ -44,7 +44,7 @@ function wp_register_layout_support( $block_type ) { * @param bool $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 $block_spacing Custom spacing set on the block. - * @return string CSS style. + * @return string CSS style or an empty string. */ 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'; From ad32baa50af8dfbb43c2274d28a2521ab0b37ce6 Mon Sep 17 00:00:00 2001 From: hellofromtonya Date: Wed, 21 Sep 2022 06:10:34 -0500 Subject: [PATCH 13/14] Update wp_get_layout_style() DocBlock * Reverts changes not found in Gutenberg PR 40875 * Updates changes from Gutenberg PR 40875 for coding standards https://github.com/WordPress/gutenberg/pull/40875 --- src/wp-includes/block-supports/layout.php | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/wp-includes/block-supports/layout.php b/src/wp-includes/block-supports/layout.php index e03593038ff33..a00d39f7e219c 100644 --- a/src/wp-includes/block-supports/layout.php +++ b/src/wp-includes/block-supports/layout.php @@ -36,19 +36,20 @@ function wp_register_layout_support( $block_type ) { * @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 bool $has_block_gap_support Whether the theme has support for the block gap. - * @param string $gap_value The block gap value to apply. - * @param bool $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 $block_spacing Custom spacing set on the block. - * @return string CSS style or an empty string. + * @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', $block_spacing = null ) { $layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default'; $layout_styles = array(); + if ( 'default' === $layout_type ) { if ( $has_block_gap_support ) { if ( is_array( $gap_value ) ) { From 53719471ee9c2a9f6f8fc5f07fc09b2797859f6a Mon Sep 17 00:00:00 2001 From: hellofromtonya Date: Wed, 21 Sep 2022 07:01:13 -0500 Subject: [PATCH 14/14] Move tests to separate file --- tests/phpunit/tests/block-supports/layout.php | 308 ------------------ .../tests/block-supports/wpGetLayoutStyle.php | 253 ++++++++++++++ 2 files changed, 253 insertions(+), 308 deletions(-) create mode 100644 tests/phpunit/tests/block-supports/wpGetLayoutStyle.php diff --git a/tests/phpunit/tests/block-supports/layout.php b/tests/phpunit/tests/block-supports/layout.php index a42fa7888b4b4..3611c28efa22e 100644 --- a/tests/phpunit/tests/block-supports/layout.php +++ b/tests/phpunit/tests/block-supports/layout.php @@ -173,312 +173,4 @@ function test_outer_container_not_restored_for_aligned_image_block_with_themejso $this->assertSame( $expected, wp_restore_image_outer_container( $block_content, $block ) ); } - - /** - * Tests the generation of CSS corresponding to the provided layout. - * - * @ticket 56467 - * - * @covers ::wp_get_layout_style - * - * @dataProvider data_wp_get_layout_style - * - * @param array $args { - * Arguments for the test function. - * - * @type string $selector CSS selector. - * @type array $layout Layout object. The one that is passed has already checked the existence of default block layout. - * @type bool $has_block_gap_support Whether the theme has support for the block gap. - * @type string $gap_value The block gap value to apply. - * @type bool $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor. - * @type string $fallback_gap_value The block gap value to apply. - * @type array $block_spacing Custom spacing set on the block. - * } - * @param string $expected_output The expected output. - */ - function test_wp_get_layout_style( $args, $expected_output ) { - $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 for test_wp_get_layout_style(). - * - * @return array - */ - public function data_wp_get_layout_style() { - return array( - 'no 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', - 'layout' => null, - 'has_block_gap_support' => null, - 'gap_value' => null, - 'should_skip_gap_serialization' => null, - 'fallback_gap_value' => null, - 'block_spacing' => null, - ), - 'expected_output' => '', - ), - 'default layout and block gap support' => array( - 'args' => array( - 'selector' => '.wp-layout', - 'layout' => null, - 'has_block_gap_support' => true, - 'gap_value' => '1em', - 'should_skip_gap_serialization' => null, - 'fallback_gap_value' => null, - 'block_spacing' => null, - ), - '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', - 'layout' => null, - 'has_block_gap_support' => true, - 'gap_value' => '1em', - 'should_skip_gap_serialization' => true, - 'fallback_gap_value' => null, - 'block_spacing' => null, - ), - 'expected_output' => '', - ), - 'default layout and axial block gap support' => array( - 'args' => array( - 'selector' => '.wp-layout', - 'layout' => null, - 'has_block_gap_support' => true, - 'gap_value' => array( 'top' => '1em' ), - 'should_skip_gap_serialization' => null, - 'fallback_gap_value' => null, - 'block_spacing' => null, - ), - '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', - ), - 'has_block_gap_support' => null, - 'gap_value' => null, - 'should_skip_gap_serialization' => null, - 'fallback_gap_value' => null, - 'block_spacing' => null, - ), - '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', - ), - 'has_block_gap_support' => null, - 'gap_value' => null, - 'should_skip_gap_serialization' => null, - 'fallback_gap_value' => null, - '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', - 'should_skip_gap_serialization' => null, - 'fallback_gap_value' => null, - 'block_spacing' => null, - ), - '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' ), - 'should_skip_gap_serialization' => null, - 'fallback_gap_value' => null, - 'block_spacing' => null, - ), - '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', - 'should_skip_gap_serialization' => null, - 'fallback_gap_value' => null, - 'block_spacing' => null, - ), - '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', - ), - 'has_block_gap_support' => null, - 'gap_value' => null, - 'should_skip_gap_serialization' => null, - 'fallback_gap_value' => null, - 'block_spacing' => null, - ), - 'expected_output' => '', - ), - 'horizontal flex layout should return empty value' => array( - 'args' => array( - 'selector' => '.wp-layout', - 'layout' => array( - 'type' => 'flex', - 'orientation' => 'horizontal', - ), - 'has_block_gap_support' => null, - 'gap_value' => null, - 'should_skip_gap_serialization' => null, - 'fallback_gap_value' => null, - 'block_spacing' => null, - ), - 'expected_output' => '', - ), - 'flex layout with properties' => array( - 'args' => array( - 'selector' => '.wp-layout', - 'layout' => array( - 'type' => 'flex', - 'orientation' => 'horizontal', - 'flexWrap' => 'nowrap', - 'justifyContent' => 'left', - 'verticalAlignment' => 'bottom', - ), - 'has_block_gap_support' => null, - 'gap_value' => null, - 'should_skip_gap_serialization' => null, - 'fallback_gap_value' => null, - 'block_spacing' => null, - ), - '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', - 'should_skip_gap_serialization' => null, - 'fallback_gap_value' => null, - 'block_spacing' => null, - ), - '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', - ), - 'should_skip_gap_serialization' => null, - 'fallback_gap_value' => null, - 'block_spacing' => null, - ), - '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', - ), - 'should_skip_gap_serialization' => null, - 'fallback_gap_value' => '11px', - 'block_spacing' => null, - ), - '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', - ), - 'has_block_gap_support' => null, - 'gap_value' => null, - 'should_skip_gap_serialization' => null, - 'fallback_gap_value' => null, - 'block_spacing' => null, - ), - 'expected_output' => '.wp-layout{flex-wrap:nowrap;flex-direction:column;align-items:flex-start;}', - ), - ); - } } 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;}', + ), + ); + } +}