From d284f61dc1451587be5f9e7c5955bda0b5a4149f Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 3 Feb 2023 14:08:29 +1100 Subject: [PATCH 1/8] Inner block layout enhancements --- src/wp-includes/block-supports/layout.php | 114 +++++++++++++++++++--- 1 file changed, 100 insertions(+), 14 deletions(-) diff --git a/src/wp-includes/block-supports/layout.php b/src/wp-includes/block-supports/layout.php index eff8e305247d9..8f6ecfbe187fb 100644 --- a/src/wp-includes/block-supports/layout.php +++ b/src/wp-includes/block-supports/layout.php @@ -308,6 +308,26 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false return ''; } +/** + * Gets classname from last tag in a string of HTML. + * + * @since 6.2.0 + * @access private + * + * @param string $html markup to be processed. + * @return string String of inner wrapper classnames. + */ +function wp_get_classnames_from_last_tag( $html ) { + $tags = new WP_HTML_Tag_Processor( $html ); + $last_classnames = ''; + + while ( $tags->next_tag() ) { + $last_classnames = $tags->get_attribute( 'class' ); + } + + return (string) $last_classnames; +} + /** * Renders the layout config to the block wrapper. * @@ -321,10 +341,56 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false function wp_render_layout_support_flag( $block_content, $block ) { $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); $support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false ); + $has_child_layout = isset( $block['attrs']['style']['layout']['selfStretch'] ); - if ( ! $support_layout ) { + if ( ! $support_layout + && ! $has_child_layout ) { return $block_content; } + $outer_class_names = array(); + + if ( $has_child_layout && ( 'fixed' === $block['attrs']['style']['layout']['selfStretch'] || 'fill' === $block['attrs']['style']['layout']['selfStretch'] ) ) { + + $container_content_class = wp_unique_id( 'wp-container-content-' ); + + $child_layout_styles = array(); + + if ( 'fixed' === $block['attrs']['style']['layout']['selfStretch'] && isset( $block['attrs']['style']['layout']['flexSize'] ) ) { + $child_layout_styles[] = array( + 'selector' => ".$container_content_class", + 'declarations' => array( + 'flex-basis' => $block['attrs']['style']['layout']['flexSize'], + 'box-sizing' => 'border-box', + ), + ); + } elseif ( 'fill' === $block['attrs']['style']['layout']['selfStretch'] ) { + $child_layout_styles[] = array( + 'selector' => ".$container_content_class", + 'declarations' => array( + 'flex-grow' => '1', + ), + ); + } + + wp_style_engine_get_stylesheet_from_css_rules( + $child_layout_styles, + array( + 'context' => 'block-supports', + 'prettify' => false, + ) + ); + + $outer_class_names[] = $container_content_class; + + } + + // Return early if only child layout exists. + if ( ! $support_layout && ! empty( $outer_class_names ) ) { + $content = new WP_HTML_Tag_Processor( $block_content ); + $content->next_tag(); + $content->add_class( implode( ' ', $outer_class_names ) ); + return (string) $content; + } $global_settings = wp_get_global_settings(); $block_gap = _wp_array_get( $global_settings, array( 'spacing', 'blockGap' ), null ); @@ -341,7 +407,6 @@ function wp_render_layout_support_flag( $block_content, $block ) { $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 = ''; @@ -417,7 +482,7 @@ function wp_render_layout_support_flag( $block_content, $block ) { $should_skip_gap_serialization = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' ); $style = wp_get_layout_style( - ".$block_classname.$container_class", + ".$container_class.$container_class", $used_layout, $has_block_gap_support, $gap_value, @@ -432,18 +497,39 @@ function wp_render_layout_support_flag( $block_content, $block ) { } } - /* - * 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 ) ) . ' ', - $block_content, - 1 - ); + $content_with_outer_classnames = ''; + + if ( ! empty( $outer_class_names ) ) { + $content_with_outer_classnames = new WP_HTML_Tag_Processor( $block_content ); + $content_with_outer_classnames->next_tag(); + foreach ( $outer_class_names as $outer_class_name ) { + $content_with_outer_classnames->add_class( $outer_class_name ); + } + + $content_with_outer_classnames = (string) $content_with_outer_classnames; + } + + /** + * The first chunk of innerContent contains the block markup up until the inner blocks start. + * We want to target the opening tag of the inner blocks wrapper, which is the last tag in that chunk. + */ + $inner_content_classnames = isset( $block['innerContent'][0] ) && 'string' === gettype( $block['innerContent'][0] ) ? wp_get_classnames_from_last_tag( $block['innerContent'][0] ) : ''; + + $content = $content_with_outer_classnames ? new WP_HTML_Tag_Processor( $content_with_outer_classnames ) : new WP_HTML_Tag_Processor( $block_content ); + + if ( $inner_content_classnames ) { + $content->next_tag( array( 'class_name' => $inner_content_classnames ) ); + foreach ( $class_names as $class_name ) { + $content->add_class( $class_name ); + } + } else { + $content->next_tag(); + foreach ( $class_names as $class_name ) { + $content->add_class( $class_name ); + } + } - return $content; + return (string) $content; } // Register the block support. From 13d4ea3a74f0bfc2f23a5b156e77402f7e349dfd Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 3 Feb 2023 15:46:48 +1100 Subject: [PATCH 2/8] Add tests for wp_render_layout_support_flag --- tests/phpunit/tests/block-supports/layout.php | 84 +++++++++++++++++++ 1 file changed, 84 insertions(+) diff --git a/tests/phpunit/tests/block-supports/layout.php b/tests/phpunit/tests/block-supports/layout.php index bcc21775ba008..c6588cf12e2da 100644 --- a/tests/phpunit/tests/block-supports/layout.php +++ b/tests/phpunit/tests/block-supports/layout.php @@ -173,4 +173,88 @@ public function test_outer_container_not_restored_for_aligned_image_block_with_t $this->assertSame( $expected, wp_restore_image_outer_container( $block_content, $block ) ); } + + /** + * @ticket 57584 + * + * @dataProvider data_layout_support_flag_renders_classnames_on_wrapper + * + * @covers ::wp_render_layout_support_flag + * + * @param array $args Dataset to test. + * @param string $expected_output The expected output. + */ + public function test_layout_support_flag_renders_classnames_on_wrapper( $args, $expected_output ) { + $actual_output = wp_render_layout_support_flag( $args['block_content'], $args['block'] ); + $this->assertEquals( $expected_output, $actual_output ); + } + + /** + * Data provider for test_layout_support_flag_renders_classnames_on_wrapper. + * + * @return array + */ + public function data_layout_support_flag_renders_classnames_on_wrapper() { + return array( + 'single wrapper block layout with flow type' => array( + 'args' => array( + 'block_content' => '
', + 'block' => array( + 'blockName' => 'core/group', + 'attrs' => array( + 'layout' => array( + 'type' => 'default', + ), + ), + 'innerBlocks' => array(), + 'innerHTML' => '
', + 'innerContent' => array( + '
', + ), + ), + ), + 'expected_output' => '
', + ), + 'single wrapper block layout with constrained type' => array( + 'args' => array( + 'block_content' => '
', + 'block' => array( + 'blockName' => 'core/group', + 'attrs' => array( + 'layout' => array( + 'type' => 'constrained', + ), + ), + 'innerBlocks' => array(), + 'innerHTML' => '
', + 'innerContent' => array( + '
', + ), + ), + ), + 'expected_output' => '
', + ), + 'multiple wrapper block layout with flow type' => array( + 'args' => array( + 'block_content' => '
', + 'block' => array( + 'blockName' => 'core/group', + 'attrs' => array( + 'layout' => array( + 'type' => 'default', + ), + ), + 'innerBlocks' => array(), + 'innerHTML' => '
', + 'innerContent' => array( + '
', + ' ', + '
', + ), + ), + ), + 'expected_output' => '
', + ), + ); + } } From 9b12e2207bc247aa94ab2a90d740e7ebe9b74003 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 3 Feb 2023 15:47:22 +1100 Subject: [PATCH 3/8] Update classname order in fixtures --- .../blocks/fixtures/core__column.server.html | 10 +++---- .../blocks/fixtures/core__columns.server.html | 30 +++++++++---------- .../core__columns__deprecated.server.html | 18 +++++------ .../blocks/fixtures/core__gallery.server.html | 11 ++++--- .../core__gallery__columns.server.html | 10 +++---- 5 files changed, 35 insertions(+), 44 deletions(-) diff --git a/tests/phpunit/data/blocks/fixtures/core__column.server.html b/tests/phpunit/data/blocks/fixtures/core__column.server.html index d3d3cac0834b7..696b159ed6ca1 100644 --- a/tests/phpunit/data/blocks/fixtures/core__column.server.html +++ b/tests/phpunit/data/blocks/fixtures/core__column.server.html @@ -1,10 +1,8 @@ +
-
-

Column One, Paragraph One

- - + +

Column One, Paragraph Two

- -
+
\ No newline at end of file diff --git a/tests/phpunit/data/blocks/fixtures/core__columns.server.html b/tests/phpunit/data/blocks/fixtures/core__columns.server.html index f8b9705b598f8..07d0b58942449 100644 --- a/tests/phpunit/data/blocks/fixtures/core__columns.server.html +++ b/tests/phpunit/data/blocks/fixtures/core__columns.server.html @@ -1,24 +1,22 @@ +
+ +
-
- -
-

Column One, Paragraph One

- - + +

Column One, Paragraph Two

- +
- - -
- + + +
+

Column Two, Paragraph One

- - + +

Column Three, Paragraph One

- +
- -
+
\ No newline at end of file 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 6240dc51a8de7..b45d35119abb0 100644 --- a/tests/phpunit/data/blocks/fixtures/core__columns__deprecated.server.html +++ b/tests/phpunit/data/blocks/fixtures/core__columns__deprecated.server.html @@ -1,16 +1,14 @@ +
-
-

Column One, Paragraph One

- - + +

Column One, Paragraph Two

- - + +

Column Two, Paragraph One

- - + +

Column Three, Paragraph One

- -
+
\ No newline at end of file diff --git a/tests/phpunit/data/blocks/fixtures/core__gallery.server.html b/tests/phpunit/data/blocks/fixtures/core__gallery.server.html index c7a5d3bb44aa8..d550791c97875 100644 --- a/tests/phpunit/data/blocks/fixtures/core__gallery.server.html +++ b/tests/phpunit/data/blocks/fixtures/core__gallery.server.html @@ -1,15 +1,14 @@ +
-
-
Image gallery image
- - + +
Image gallery image
- -
+
\ No newline at end of file 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 2970d60ced4f7..6f140311e91f7 100644 --- a/tests/phpunit/data/blocks/fixtures/core__gallery__columns.server.html +++ b/tests/phpunit/data/blocks/fixtures/core__gallery__columns.server.html @@ -1,15 +1,13 @@ +
-
-
Image gallery image
- - + +
Image gallery image
- -
+
\ No newline at end of file From aed3ad68a3e2cd503426bfe72c31b1921009111c Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 3 Feb 2023 16:08:08 +1100 Subject: [PATCH 4/8] Fix whitespace. --- 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 8f6ecfbe187fb..4bc5a38859ca1 100644 --- a/src/wp-includes/block-supports/layout.php +++ b/src/wp-includes/block-supports/layout.php @@ -313,7 +313,7 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false * * @since 6.2.0 * @access private - * + * * @param string $html markup to be processed. * @return string String of inner wrapper classnames. */ From 2d883e7d143bcb67f030c2ef133eec612a5d2c8f Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 6 Feb 2023 09:34:39 +1100 Subject: [PATCH 5/8] Revert whitespace removal in fixture files. --- .../blocks/fixtures/core__column.server.html | 10 ++++--- .../blocks/fixtures/core__columns.server.html | 26 ++++++++++--------- .../core__columns__deprecated.server.html | 18 +++++++------ .../blocks/fixtures/core__gallery.server.html | 11 ++++---- .../core__gallery__columns.server.html | 10 ++++--- 5 files changed, 42 insertions(+), 33 deletions(-) diff --git a/tests/phpunit/data/blocks/fixtures/core__column.server.html b/tests/phpunit/data/blocks/fixtures/core__column.server.html index 696b159ed6ca1..a3624daaf02cf 100644 --- a/tests/phpunit/data/blocks/fixtures/core__column.server.html +++ b/tests/phpunit/data/blocks/fixtures/core__column.server.html @@ -1,8 +1,10 @@ -
+
+

Column One, Paragraph One

- - + +

Column One, Paragraph Two

+ +
-
\ No newline at end of file diff --git a/tests/phpunit/data/blocks/fixtures/core__columns.server.html b/tests/phpunit/data/blocks/fixtures/core__columns.server.html index 07d0b58942449..1c144512d1238 100644 --- a/tests/phpunit/data/blocks/fixtures/core__columns.server.html +++ b/tests/phpunit/data/blocks/fixtures/core__columns.server.html @@ -1,22 +1,24 @@ -
+
+
- +

Column One, Paragraph One

- - + +

Column One, Paragraph Two

- +
- - + +
- +

Column Two, Paragraph One

- - + +

Column Three, Paragraph One

- +
+ +
-
\ No newline at end of file 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 b45d35119abb0..9d213ddcdf34e 100644 --- a/tests/phpunit/data/blocks/fixtures/core__columns__deprecated.server.html +++ b/tests/phpunit/data/blocks/fixtures/core__columns__deprecated.server.html @@ -1,14 +1,16 @@ -
+
+

Column One, Paragraph One

- - + +

Column One, Paragraph Two

- - + +

Column Two, Paragraph One

- - + +

Column Three, Paragraph One

+ +
-
\ No newline at end of file diff --git a/tests/phpunit/data/blocks/fixtures/core__gallery.server.html b/tests/phpunit/data/blocks/fixtures/core__gallery.server.html index d550791c97875..00949ea4b91c6 100644 --- a/tests/phpunit/data/blocks/fixtures/core__gallery.server.html +++ b/tests/phpunit/data/blocks/fixtures/core__gallery.server.html @@ -1,14 +1,15 @@ -
+
+
Image gallery image
+ - - +
Image gallery image
+ +
-
\ No newline at end of file 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 6f140311e91f7..0fc742157e929 100644 --- a/tests/phpunit/data/blocks/fixtures/core__gallery__columns.server.html +++ b/tests/phpunit/data/blocks/fixtures/core__gallery__columns.server.html @@ -1,13 +1,15 @@ -
+
+
Image gallery image
+ - - +
Image gallery image
+ +
-
\ No newline at end of file From 45b87765a4ed010158b6526b27ac351fa9cb548a Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 7 Feb 2023 10:47:16 +1100 Subject: [PATCH 6/8] Inline function and fix whitespace. --- src/wp-includes/block-supports/layout.php | 39 ++++++++--------------- 1 file changed, 13 insertions(+), 26 deletions(-) diff --git a/src/wp-includes/block-supports/layout.php b/src/wp-includes/block-supports/layout.php index 4bc5a38859ca1..40542209d072c 100644 --- a/src/wp-includes/block-supports/layout.php +++ b/src/wp-includes/block-supports/layout.php @@ -308,26 +308,6 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false return ''; } -/** - * Gets classname from last tag in a string of HTML. - * - * @since 6.2.0 - * @access private - * - * @param string $html markup to be processed. - * @return string String of inner wrapper classnames. - */ -function wp_get_classnames_from_last_tag( $html ) { - $tags = new WP_HTML_Tag_Processor( $html ); - $last_classnames = ''; - - while ( $tags->next_tag() ) { - $last_classnames = $tags->get_attribute( 'class' ); - } - - return (string) $last_classnames; -} - /** * Renders the layout config to the block wrapper. * @@ -343,14 +323,12 @@ function wp_render_layout_support_flag( $block_content, $block ) { $support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false ); $has_child_layout = isset( $block['attrs']['style']['layout']['selfStretch'] ); - if ( ! $support_layout - && ! $has_child_layout ) { + if ( ! $support_layout && ! $has_child_layout ) { return $block_content; } $outer_class_names = array(); if ( $has_child_layout && ( 'fixed' === $block['attrs']['style']['layout']['selfStretch'] || 'fill' === $block['attrs']['style']['layout']['selfStretch'] ) ) { - $container_content_class = wp_unique_id( 'wp-container-content-' ); $child_layout_styles = array(); @@ -381,7 +359,6 @@ function wp_render_layout_support_flag( $block_content, $block ) { ); $outer_class_names[] = $container_content_class; - } // Return early if only child layout exists. @@ -511,9 +488,19 @@ function wp_render_layout_support_flag( $block_content, $block ) { /** * The first chunk of innerContent contains the block markup up until the inner blocks start. - * We want to target the opening tag of the inner blocks wrapper, which is the last tag in that chunk. + * This targets the opening tag of the inner blocks wrapper, which is the last tag in that chunk. */ - $inner_content_classnames = isset( $block['innerContent'][0] ) && 'string' === gettype( $block['innerContent'][0] ) ? wp_get_classnames_from_last_tag( $block['innerContent'][0] ) : ''; + $inner_content_classnames = ''; + + if ( isset( $block['innerContent'][0] ) && 'string' === gettype( $block['innerContent'][0] ) ) { + $tags = new WP_HTML_Tag_Processor( $block['innerContent'][0] ); + $last_classnames = ''; + while ( $tags->next_tag() ) { + $last_classnames = $tags->get_attribute( 'class' ); + } + + $inner_content_classnames = (string) $last_classnames; + } $content = $content_with_outer_classnames ? new WP_HTML_Tag_Processor( $content_with_outer_classnames ) : new WP_HTML_Tag_Processor( $block_content ); From 77c9305c435a930d3217e0c4b0f81529bb413a80 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 7 Feb 2023 10:59:16 +1100 Subject: [PATCH 7/8] Change test assertion --- 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 c6588cf12e2da..7424aa3317de2 100644 --- a/tests/phpunit/tests/block-supports/layout.php +++ b/tests/phpunit/tests/block-supports/layout.php @@ -186,7 +186,7 @@ public function test_outer_container_not_restored_for_aligned_image_block_with_t */ public function test_layout_support_flag_renders_classnames_on_wrapper( $args, $expected_output ) { $actual_output = wp_render_layout_support_flag( $args['block_content'], $args['block'] ); - $this->assertEquals( $expected_output, $actual_output ); + $this->assertSame( $expected_output, $actual_output ); } /** From 26b103115e0ba50812c9ca6fdd117da6061301dd Mon Sep 17 00:00:00 2001 From: Felix Arntz Date: Tue, 7 Feb 2023 09:30:26 -0800 Subject: [PATCH 8/8] Fix fixtures. --- .../data/blocks/fixtures/core__gallery.server.html | 10 +++++----- .../blocks/fixtures/core__gallery__columns.server.html | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/tests/phpunit/data/blocks/fixtures/core__gallery.server.html b/tests/phpunit/data/blocks/fixtures/core__gallery.server.html index cdc66af2a54fb..54757c5e30c17 100644 --- a/tests/phpunit/data/blocks/fixtures/core__gallery.server.html +++ b/tests/phpunit/data/blocks/fixtures/core__gallery.server.html @@ -1,15 +1,15 @@ -
- +
+
Image gallery image
+ - - +
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 828c8ace216d5..dfbd5b3008e5a 100644 --- a/tests/phpunit/data/blocks/fixtures/core__gallery__columns.server.html +++ b/tests/phpunit/data/blocks/fixtures/core__gallery__columns.server.html @@ -1,15 +1,15 @@ -
- +
+
Image gallery image
+ - - +
Image gallery image
- +