Changeset 60968

Timestamp:

10/17/2025 11:52:41 PM (5 months ago)

Author:

dmsnell

Message:

HTML API: Backport from Gutenberg of layout image container refactor.

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 to eliminate possible parsing issues.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/10218
Discussed in https://core.trac.wordpress.org/ticket/63694

Gutenberg patch in ​https://github.com/WordPress/gutenberg/pull/72264

Props dmsnell, isabel_brison.
See #63694.

Location:

trunk

Files:

• src/wp-includes/block-supports/layout.php (modified) (1 diff)
• tests/phpunit/tests/block-supports/layout.php (modified) (4 diffs)

trunk/src/wp-includes/block-supports/layout.php

@@ -1075 +1075 @@
  */
 function wp_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' );
-
-    // 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'] ) );
-    }
-    $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>';
+    /*
+     * 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'
+    );
+
+    // 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 );
+    }
+
+    return "{$wrapper_processor->get_updated_html()}{$figure_processor->get_updated_html()}</div>";
 }
 

trunk/tests/phpunit/tests/block-supports/layout.php

@@ -75 +75 @@
         $expected      = '<figure class="wp-block-image size-full"><img src="/my-image.jpg"/></figure>';
 
-        $this->assertSame( $expected, wp_restore_image_outer_container( $block_content, $block ) );
+        $this->assertEqualHTML( $expected, wp_restore_image_outer_container( $block_content, $block ) );
     }
 
@@ -91 +91 @@
         $expected      = '<div class="wp-block-image"><figure class="alignright size-full"><img src="/my-image.jpg"/></figure></div>';
 
-        $this->assertSame( $expected, wp_restore_image_outer_container( $block_content, $block ) );
+        $this->assertEqualHTML( $expected, wp_restore_image_outer_container( $block_content, $block ) );
     }
 
@@ -112 +112 @@
         );
 
-        $this->assertSame( $expected, wp_restore_image_outer_container( $block_image_html, $block ) );
+        $this->assertEqualHTML( $expected, wp_restore_image_outer_container( $block_image_html, $block ) );
     }
 
@@ -166 +166 @@
         $expected      = '<figure class="wp-block-image alignright size-full is-style-round my-custom-classname"><img src="/my-image.jpg"/></figure>';
 
-        $this->assertSame( $expected, wp_restore_image_outer_container( $block_content, $block ) );
+        $this->assertEqualHTML( $expected, wp_restore_image_outer_container( $block_content, $block ) );
     }