HTML API: Refactor layout image container. (#72264)

For classic themes, image blocks need to create a `DIV` wrapper which
contains alignment classes from the inner `FIGURE`. This has been
processed using PCRE matching.

With this change the HTML API is used instead of PCRE functions to
provide more semantic transformation, clearer intent, and eliminate
possible parsing issues.

Co-authored-by: Glen Davies <glendaviesnz@users.noreply.github.com>
Co-authored-by: tellthemachines <isabel@tellthemachines.com>
Github-PR: 72264
Github-PR-URL: #72264
Core-Backport-PR: WordPress/wordpress-develop#10218
Core-Backport-PR-URL: WordPress/wordpress-develop#10218

Author: 3 people

backport-changelog/6.9/10218.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/10218
+
+* https://github.com/WordPress/gutenberg/pull/72264

lib/block-supports/layout.php

@@ -1113,7 +1113,6 @@ static function ( $matches ) {
 }
 add_filter( 'render_block_core/group', 'gutenberg_restore_group_inner_container', 10, 2 );
 
-
 /**
  * For themes without theme.json file, make sure
  * to restore the outer div for the aligned image block
@@ -1124,50 +1123,53 @@ static function ( $matches ) {
  * @return string Filtered block content.
  */
 function gutenberg_restore_image_outer_container( $block_content, $block ) {
-	$image_with_align = "
-/# 1) everything up to the class attribute contents
-(
-	^\s*
-	<figure\b
-	[^>]*
-	\bclass=
-	[\"']
-)
-# 2) the class attribute contents
-(
-	[^\"']*
-	\bwp-block-image\b
-	[^\"']*
-	\b(?:alignleft|alignright|aligncenter)\b
-	[^\"']*
-)
-# 3) everything after the class attribute contents
-(
-	[\"']
-	[^>]*
-	>
-	.*
-	<\/figure>
-)/iUx";
+	if ( wp_theme_has_theme_json() ) {
+		return $block_content;
+	}
 
+	$figure_processor = new WP_HTML_Tag_Processor( $block_content );
 	if (
-		wp_theme_has_theme_json() ||
-		0 === preg_match( $image_with_align, $block_content, $matches )
+		! $figure_processor->next_tag( 'FIGURE' ) ||
+		! $figure_processor->has_class( 'wp-block-image' ) ||
+		! (
+			$figure_processor->has_class( 'alignleft' ) ||
+			$figure_processor->has_class( 'aligncenter' ) ||
+			$figure_processor->has_class( 'alignright' )
+		)
 	) {
 		return $block_content;
 	}
 
-	$wrapper_classnames = array( 'wp-block-image' );
+	/*
+	 * The next section of code wraps the existing figure in a new DIV element.
+	 * While doing it, it needs to transfer the layout and the additional CSS
+	 * class names from the original figure upward to the wrapper.
+	 *
+	 * Example:
+	 *
+	 *     // From this…
+	 *     <!-- wp:image {"className":"hires"} -->
+	 *     <figure class="wp-block-image wide hires">…
+	 *
+	 *     // To this…
+	 *     <div class="wp-block-image hires"><figure class="wide">…
+	 */
+	$wrapper_processor = new WP_HTML_Tag_Processor( '<div>' );
+	$wrapper_processor->next_token();
+	$wrapper_processor->set_attribute(
+		'class',
+		is_string( $block['attrs']['className'] ?? null )
+			? "wp-block-image {$block['attrs']['className']}"
+			: 'wp-block-image'
+	);
 
-	// If the block has a classNames attribute these classnames need to be removed from the content and added back
-	// to the new wrapper div also.
-	if ( ! empty( $block['attrs']['className'] ) ) {
-		$wrapper_classnames = array_merge( $wrapper_classnames, explode( ' ', $block['attrs']['className'] ) );
+	// And remove them from the existing content; it has been transferred upward.
+	$figure_processor->remove_class( 'wp-block-image' );
+	foreach ( $wrapper_processor->class_list() as $class_name ) {
+		$figure_processor->remove_class( $class_name );
 	}
-	$content_classnames          = explode( ' ', $matches[2] );
-	$filtered_content_classnames = array_diff( $content_classnames, $wrapper_classnames );
 
-	return '<div class="' . implode( ' ', $wrapper_classnames ) . '">' . $matches[1] . implode( ' ', $filtered_content_classnames ) . $matches[3] . '</div>';
+	return "{$wrapper_processor->get_updated_html()}{$figure_processor->get_updated_html()}</div>";
 }
 
 if ( function_exists( 'wp_restore_image_outer_container' ) ) {

phpunit/block-supports/layout-test.php

@@ -99,7 +99,7 @@ public function test_additional_styles_moved_to_restored_outer_container_for_ali
 		$this->assertSame( $expected, gutenberg_restore_image_outer_container( $block_classes_random_placement, $block ) );
 
 		$block_classes_other_attributes = '<figure style="color: red" class=\'is-style-round wp-block-image alignright my-custom-classname size-full\' data-random-tag=">"><img src="/my-image.jpg"/></figure>';
-		$expected_other_attributes      = '<div class="wp-block-image is-style-round my-custom-classname"><figure style="color: red" class=\'alignright size-full\' data-random-tag=">"><img src="/my-image.jpg"/></figure></div>';
+		$expected_other_attributes      = '<div class="wp-block-image is-style-round my-custom-classname"><figure style="color: red" class="alignright size-full" data-random-tag=">"><img src="/my-image.jpg"/></figure></div>';
 
 		$this->assertSame( $expected_other_attributes, gutenberg_restore_image_outer_container( $block_classes_other_attributes, $block ) );
 	}