From f7041f1cbfdfc50cf02174a8313f8a6f0a2078bf Mon Sep 17 00:00:00 2001
From: Isabel Brison <isabel_brison@git.wordpress.org>
Date: Mon, 8 Jan 2024 06:12:00 +0000
Subject: [PATCH] Editor: add layout classes to legacy Group inner container.

Moves generated layout classes into the Group block inner container in classic themes, so that block gap support can work correctly.

Props flixos90, mukesh27.
Fixes #60130.


git-svn-id: https://develop.svn.wordpress.org/trunk@57246 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/block-supports/layout.php     | 36 +++++++-
 tests/phpunit/tests/block-supports/layout.php | 90 +++++++++++++++++++
 2 files changed, 122 insertions(+), 4 deletions(-)

diff --git a/src/wp-includes/block-supports/layout.php b/src/wp-includes/block-supports/layout.php
index 70d1fe4255..67d6a3f1b7 100644
--- a/src/wp-includes/block-supports/layout.php
+++ b/src/wp-includes/block-supports/layout.php
@@ -638,7 +638,7 @@ function wp_render_layout_support_flag( $block_content, $block ) {
 	 * for features like the enhanced pagination of the Query block.
 	 */
 	$container_class = wp_unique_prefixed_id(
-		'wp-container-' . sanitize_title( $block['blockName'] ) . '-layout-'
+		'wp-container-' . sanitize_title( $block['blockName'] ) . '-is-layout-'
 	);
 
 	// Set the correct layout type for blocks using legacy content width.
@@ -883,17 +883,45 @@ function wp_restore_group_inner_container( $block_content, $block ) {
 		return $block_content;
 	}
 
-	$replace_regex   = sprintf(
+	/*
+	 * This filter runs after the layout classnames have been added to the block, so they
+	 * have to be removed from the outer wrapper and then added to the inner.
+	 */
+	$layout_classes = array();
+	$processor      = new WP_HTML_Tag_Processor( $block_content );
+
+	if ( $processor->next_tag( array( 'class_name' => 'wp-block-group' ) ) ) {
+		foreach ( $processor->class_list() as $class_name ) {
+			if ( str_contains( $class_name, 'is-layout-' ) ) {
+				$layout_classes[] = $class_name;
+				$processor->remove_class( $class_name );
+			}
+		}
+	}
+
+	$content_without_layout_classes = $processor->get_updated_html();
+	$replace_regex                  = sprintf(
 		'/(^\s*<%1$s\b[^>]*wp-block-group[^>]*>)(.*)(<\/%1$s>\s*$)/ms',
 		preg_quote( $tag_name, '/' )
 	);
-	$updated_content = preg_replace_callback(
+	$updated_content                = preg_replace_callback(
 		$replace_regex,
 		static function ( $matches ) {
 			return $matches[1] . '<div class="wp-block-group__inner-container">' . $matches[2] . '</div>' . $matches[3];
 		},
-		$block_content
+		$content_without_layout_classes
 	);
+
+	// Add layout classes to inner wrapper.
+	if ( ! empty( $layout_classes ) ) {
+		$processor = new WP_HTML_Tag_Processor( $updated_content );
+		if ( $processor->next_tag( array( 'class_name' => 'wp-block-group__inner-container' ) ) ) {
+			foreach ( $layout_classes as $class_name ) {
+				$processor->add_class( $class_name );
+			}
+		}
+		$updated_content = $processor->get_updated_html();
+	}
 	return $updated_content;
 }
 
diff --git a/tests/phpunit/tests/block-supports/layout.php b/tests/phpunit/tests/block-supports/layout.php
index df0abf9b49..379c10fe2b 100644
--- a/tests/phpunit/tests/block-supports/layout.php
+++ b/tests/phpunit/tests/block-supports/layout.php
@@ -252,4 +252,94 @@ class Test_Block_Supports_Layout extends WP_UnitTestCase {
 			),
 		);
 	}
+
+	/**
+	 * Check that wp_restore_group_inner_container() restores the legacy inner container on the Group block.
+	 *
+	 * @ticket 60130
+	 *
+	 * @covers ::wp_restore_group_inner_container
+	 *
+	 * @dataProvider data_restore_group_inner_container
+	 *
+	 * @param array  $args            Dataset to test.
+	 * @param string $expected_output The expected output.
+	 */
+	public function test_restore_group_inner_container( $args, $expected_output ) {
+		$actual_output = wp_restore_group_inner_container( $args['block_content'], $args['block'] );
+		$this->assertEquals( $expected_output, $actual_output );
+	}
+
+	/**
+	 * Data provider for test_restore_group_inner_container.
+	 *
+	 * @return array
+	 */
+	public function data_restore_group_inner_container() {
+		return array(
+			'group block with existing inner container'    => array(
+				'args'            => array(
+					'block_content' => '<div class="wp-block-group"><div class="wp-block-group__inner-container"></div></div>',
+					'block'         => array(
+						'blockName'    => 'core/group',
+						'attrs'        => array(
+							'layout' => array(
+								'type' => 'default',
+							),
+						),
+						'innerBlocks'  => array(),
+						'innerHTML'    => '<div class="wp-block-group"><div class="wp-block-group__inner-container"></div></div>',
+						'innerContent' => array(
+							'<div class="wp-block-group"><div class="wp-block-group__inner-container">',
+							' ',
+							' </div></div>',
+						),
+					),
+				),
+				'expected_output' => '<div class="wp-block-group"><div class="wp-block-group__inner-container"></div></div>',
+			),
+			'group block with no existing inner container' => array(
+				'args'            => array(
+					'block_content' => '<div class="wp-block-group"></div>',
+					'block'         => array(
+						'blockName'    => 'core/group',
+						'attrs'        => array(
+							'layout' => array(
+								'type' => 'default',
+							),
+						),
+						'innerBlocks'  => array(),
+						'innerHTML'    => '<div class="wp-block-group"></div>',
+						'innerContent' => array(
+							'<div class="wp-block-group">',
+							' ',
+							' </div>',
+						),
+					),
+				),
+				'expected_output' => '<div class="wp-block-group"><div class="wp-block-group__inner-container"></div></div>',
+			),
+			'group block with layout classnames'           => array(
+				'args'            => array(
+					'block_content' => '<div class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained"></div>',
+					'block'         => array(
+						'blockName'    => 'core/group',
+						'attrs'        => array(
+							'layout' => array(
+								'type' => 'default',
+							),
+						),
+						'innerBlocks'  => array(),
+						'innerHTML'    => '<div class="wp-block-group"></div>',
+						'innerContent' => array(
+							'<div class="wp-block-group">',
+							' ',
+							' </div>',
+						),
+					),
+				),
+				'expected_output' => '<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained"></div></div>',
+			),
+		);
+	}
 }