Changeset 60038

Timestamp:

03/18/2025 12:41:31 PM (4 weeks ago)

Author:

joemcgill

Message:

Editor: Fix layout support classes to be generated with a stable ID.

This fixes a bug reported in ​https://github.com/WordPress/gutenberg/issues/67308 related to the Interactivity API's client-side navigation feature by replacing the incrementally generated IDs with stable hashes derived from the block's layout style definition.

Fixes #62985.
Props darerodz.

Location:

trunk

Files:

• src/wp-includes/block-supports/layout.php (modified) (3 diffs)
• src/wp-includes/functions.php (modified) (1 diff)
• tests/phpunit/data/blocks/fixtures/core__columns.server.html (modified) (1 diff)
• tests/phpunit/data/blocks/fixtures/core__columns__deprecated.server.html (modified) (1 diff)
• tests/phpunit/tests/block-supports/layout.php (modified) (2 diffs)
• tests/phpunit/tests/functions/wpUniqueIdFromValues.php (added)

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

@@ -581 +581 @@
     // Child layout specific logic.
     if ( $child_layout ) {
-        $container_content_class   = wp_unique_prefixed_id( 'wp-container-content-' );
+        /*
+         * Generates a unique class for child block layout styles.
+         *
+         * To ensure consistent class generation across different page renders,
+         * only properties that affect layout styling are used. These properties
+         * come from `$block['attrs']['style']['layout']` and `$block['parentLayout']`.
+         *
+         * As long as these properties coincide, the generated class will be the same.
+         */
+        $container_content_class = wp_unique_id_from_values(
+            array(
+                'layout'       => array_intersect_key(
+                    $block['attrs']['style']['layout'] ?? array(),
+                    array_flip(
+                        array( 'selfStretch', 'flexSize', 'columnStart', 'columnSpan', 'rowStart', 'rowSpan' )
+                    )
+                ),
+                'parentLayout' => array_intersect_key(
+                    $block['parentLayout'] ?? array(),
+                    array_flip(
+                        array( 'minimumColumnWidth', 'columnCount' )
+                    )
+                ),
+            ),
+            'wp-container-content-'
+        );
+
         $child_layout_declarations = array();
         $child_layout_styles       = array();
@@ -707 +733 @@
     $layout_definitions = wp_get_layout_definitions();
 
-    /*
-     * Uses an incremental ID that is independent per prefix to make sure that
-     * rendering different numbers of blocks doesn't affect the IDs of other
-     * blocks. Makes the CSS class names stable across paginations
-     * for features like the enhanced pagination of the Query block.
-     */
-    $container_class = wp_unique_prefixed_id(
-        'wp-container-' . sanitize_title( $block['blockName'] ) . '-is-layout-'
-    );
-
     // 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'] ) {
@@ -806 +822 @@
             : null;
         $has_block_gap_support = isset( $block_gap );
+
+        /*
+         * Generates a unique ID based on all the data required to obtain the
+         * corresponding layout style. Keeps the CSS class names the same
+         * even for different blocks on different places, as long as they have
+         * the same layout definition. Makes the CSS class names stable across
+         * paginations for features like the enhanced pagination of the Query block.
+         */
+        $container_class = wp_unique_id_from_values(
+            array(
+                $used_layout,
+                $has_block_gap_support,
+                $gap_value,
+                $should_skip_gap_serialization,
+                $fallback_gap_value,
+                $block_spacing,
+            ),
+            'wp-container-' . sanitize_title( $block['blockName'] ) . '-is-layout-'
+        );
 
         $style = wp_get_layout_style(

trunk/src/wp-includes/functions.php

@@ -9175 +9175 @@
     return hash_equals( $hash, wp_fast_hash( $message ) );
 }
+
+/**
+ * Generates a unique ID based on the structure and values of a given array.
+ *
+ * This function serializes the array into a JSON string and generates a hash
+ * that serves as a unique identifier. Optionally, a prefix can be added to
+ * the generated ID for context or categorization.
+ *
+ * @since 6.8.0
+ *
+ * @param array  $data   The input array to generate an ID from.
+ * @param string $prefix Optional. A prefix to prepend to the generated ID. Default ''.
+ *
+ * @return string The generated unique ID for the array.
+ */
+function wp_unique_id_from_values( array $data, string $prefix = '' ): string {
+    if ( empty( $data ) ) {
+        _doing_it_wrong(
+            __FUNCTION__,
+            sprintf(
+                __( 'The $data argument must not be empty.' ),
+                gettype( $data )
+            ),
+            '6.8.0'
+        );
+    }
+    $serialized = wp_json_encode( $data );
+    $hash       = substr( md5( $serialized ), 0, 8 );
+    return $prefix . $hash;
+}

trunk/tests/phpunit/data/blocks/fixtures/core__columns.server.html

@@ -1 +1 @@
 
-<div class="wp-block-columns has-3-columns is-layout-flex wp-container-1 wp-block-columns-is-layout-flex">
+<div class="wp-block-columns has-3-columns is-layout-flex wp-container-1d6595d7 wp-block-columns-is-layout-flex">
     
     <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">

trunk/tests/phpunit/data/blocks/fixtures/core__columns__deprecated.server.html

@@ -1 +1 @@
 
-<div class="wp-block-columns has-3-columns is-layout-flex wp-container-1 wp-block-columns-is-layout-flex">
+<div class="wp-block-columns has-3-columns is-layout-flex wp-container-1d6595d7 wp-block-columns-is-layout-flex">
     
     <p class="layout-column-1">Column One, Paragraph One</p>

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

@@ -273 +273 @@
                     ),
                 ),
-                'expected_output' => '<p class="wp-container-content-1">Some text.</p>', // The generated classname number assumes `wp_unique_prefixed_id( 'wp-container-content-' )` will not have run previously in this test.
+                'expected_output' => '<p class="wp-container-content-b7aa651c">Some text.</p>',
+            ),
+            'single wrapper block layout with flex type'   => array(
+                'args'            => array(
+                    'block_content' => '<div class="wp-block-group"></div>',
+                    'block'         => array(
+                        'blockName'    => 'core/group',
+                        'attrs'        => array(
+                            'layout' => array(
+                                'type'        => 'flex',
+                                'orientation' => 'horizontal',
+                                'flexWrap'    => 'nowrap',
+                            ),
+                        ),
+                        'innerBlocks'  => array(),
+                        'innerHTML'    => '<div class="wp-block-group"></div>',
+                        'innerContent' => array(
+                            '<div class="wp-block-group"></div>',
+                        ),
+                    ),
+                ),
+                'expected_output' => '<div class="wp-block-group is-horizontal is-nowrap is-layout-flex wp-container-core-group-is-layout-67f0b8e2 wp-block-group-is-layout-flex"></div>',
+            ),
+            'single wrapper block layout with grid type'   => array(
+                'args'            => array(
+                    'block_content' => '<div class="wp-block-group"></div>',
+                    'block'         => array(
+                        'blockName'    => 'core/group',
+                        'attrs'        => array(
+                            'layout' => array(
+                                'type' => 'grid',
+                            ),
+                        ),
+                        'innerBlocks'  => array(),
+                        'innerHTML'    => '<div class="wp-block-group"></div>',
+                        'innerContent' => array(
+                            '<div class="wp-block-group"></div>',
+                        ),
+                    ),
+                ),
+                'expected_output' => '<div class="wp-block-group is-layout-grid wp-container-core-group-is-layout-9649a0d9 wp-block-group-is-layout-grid"></div>',
             ),
             'skip classname output if block does not support layout and there are no child layout classes to be output' => array(
@@ -464 +504 @@
         );
     }
+
+    /**
+     * Check that wp_render_layout_support_flag() renders consistent hashes
+     * for the container class when the relevant layout properties are the same.
+     *
+     * @dataProvider data_layout_support_flag_renders_consistent_container_hash
+     *
+     * @covers ::wp_render_layout_support_flag
+     *
+     * @param array $block_attrs     Dataset to test.
+     * @param array $expected_class  Class generated for the passed dataset.
+     */
+    public function test_layout_support_flag_renders_consistent_container_hash( $block_attrs, $expected_class ) {
+        switch_theme( 'default' );
+
+        $block_content = '<div class="wp-block-group"></div>';
+        $block         = array(
+            'blockName'    => 'core/group',
+            'innerBlocks'  => array(),
+            'innerHTML'    => '<div class="wp-block-group"></div>',
+            'innerContent' => array(
+                '<div class="wp-block-group"></div>',
+            ),
+            'attrs'        => $block_attrs,
+        );
+
+        /*
+         * The `appearance-tools` theme support is temporarily added to ensure
+         * that the block gap support is enabled during rendering, which is
+         * necessary to compute styles for layouts with block gap values.
+         */
+        add_theme_support( 'appearance-tools' );
+        $output = wp_render_layout_support_flag( $block_content, $block );
+        remove_theme_support( 'appearance-tools' );
+
+        // Process the output and look for the expected class in the first rendered element.
+        $processor = new WP_HTML_Tag_Processor( $output );
+        $processor->next_tag();
+
+        $this->assertTrue(
+            $processor->has_class( $expected_class ),
+            "Expected class '$expected_class' not found in the rendered output, probably because of a different hash."
+        );
+    }
+
+    /**
+     * Data provider for test_layout_support_flag_renders_consistent_container_hash.
+     *
+     * @return array
+     */
+    public function data_layout_support_flag_renders_consistent_container_hash() {
+        return array(
+            'default type block gap 12px'      => array(
+                'block_attributes' => array(
+                    'layout' => array(
+                        'type' => 'default',
+                    ),
+                    'style'  => array(
+                        'spacing' => array(
+                            'blockGap' => '12px',
+                        ),
+                    ),
+                ),
+                'expected_class'   => 'wp-container-core-group-is-layout-c5c7d83f',
+            ),
+            'default type block gap 24px'      => array(
+                'block_attributes' => array(
+                    'layout' => array(
+                        'type' => 'default',
+                    ),
+                    'style'  => array(
+                        'spacing' => array(
+                            'blockGap' => '24px',
+                        ),
+                    ),
+                ),
+                'expected_class'   => 'wp-container-core-group-is-layout-634f0b9d',
+            ),
+            'constrained type justified left'  => array(
+                'block_attributes' => array(
+                    'layout' => array(
+                        'type'           => 'constrained',
+                        'justifyContent' => 'left',
+                    ),
+                ),
+                'expected_class'   => 'wp-container-core-group-is-layout-12dd3699',
+            ),
+            'constrained type justified right' => array(
+                'block_attributes' => array(
+                    'layout' => array(
+                        'type'           => 'constrained',
+                        'justifyContent' => 'right',
+                    ),
+                ),
+                'expected_class'   => 'wp-container-core-group-is-layout-f1f2ed93',
+            ),
+            'flex type horizontal'             => array(
+                'block_attributes' => array(
+                    'layout' => array(
+                        'type'        => 'flex',
+                        'orientation' => 'horizontal',
+                        'flexWrap'    => 'nowrap',
+                    ),
+                ),
+                'expected_class'   => 'wp-container-core-group-is-layout-2487dcaa',
+            ),
+            'flex type vertical'               => array(
+                'block_attributes' => array(
+                    'layout' => array(
+                        'type'        => 'flex',
+                        'orientation' => 'vertical',
+                    ),
+                ),
+                'expected_class'   => 'wp-container-core-group-is-layout-fe9cc265',
+            ),
+            'grid type'                        => array(
+                'block_attributes' => array(
+                    'layout' => array(
+                        'type' => 'grid',
+                    ),
+                ),
+                'expected_class'   => 'wp-container-core-group-is-layout-478b6e6b',
+            ),
+            'grid type 3 columns'              => array(
+                'block_attributes' => array(
+                    'layout' => array(
+                        'type'        => 'grid',
+                        'columnCount' => 3,
+                    ),
+                ),
+                'expected_class'   => 'wp-container-core-group-is-layout-d3b710ac',
+            ),
+        );
+    }
 }