Changeset 56005

Timestamp:

06/23/2023 06:59:53 PM (3 years ago)

Author:

flixos90

Message:

Editor: Fix block editor styles being registered with frontend stylesheets.

This changeset fixes a bug where WordPress core's own block editor styles (wp-block-{$block_name}-editor) were referencing the same CSS files as their frontend equivalents (wp-block-{$block_name}). This would result in incorrect frontend styles potentially being loaded in the block editor.

Tests for the related logic have been added.

Props flixos90, joemcgill, mukesh27, spacedmonkey.
Fixes #58605.

Location:

trunk

Files:

• src/wp-includes/blocks.php (modified) (2 diffs)
• tests/phpunit/tests/blocks/register.php (modified) (1 diff)

trunk/src/wp-includes/blocks.php

@@ -220 +220 @@
         $suffix = SCRIPT_DEBUG ? '' : '.min';
         if ( $is_core_block ) {
-                $style_path = "style$suffix.css";
+                $style_path = ( 'editorStyle' === $field_name ) ? "editor{$suffix}.css" : "style{$suffix}.css";
         }
 
@@ -240 +240 @@
                         $style_uri = get_theme_file_uri( str_replace( $theme_path_norm, '', $style_path_norm ) );
                 } elseif ( $is_core_block ) {
-                        $style_uri = includes_url( 'blocks/' . str_replace( 'core/', '', $metadata['name'] ) . "/style$suffix.css" );
+                        // All possible $style_path variants for core blocks are hard-coded above.
+                        $style_uri = includes_url( 'blocks/' . str_replace( 'core/', '', $metadata['name'] ) . '/' . $style_path );
                 }
         } else {

trunk/tests/phpunit/tests/blocks/register.php

@@ -324 +324 @@
 
         /**
+         * @ticket 58605
+         *
+         * @dataProvider data_register_block_style_handle_uses_correct_core_stylesheet
+         *
+         * @param string      $block_json_path Path to the `block.json` file, relative to ABSPATH.
+         * @param string      $style_field     Either 'style' or 'editorStyle'.
+         * @param string|bool $expected_path   Expected path of registered stylesheet, relative to ABSPATH.
+         */
+        public function test_register_block_style_handle_uses_correct_core_stylesheet( $block_json_path, $style_field, $expected_path ) {
+                $metadata_file = ABSPATH . $block_json_path;
+                $metadata      = wp_json_file_decode( $metadata_file, array( 'associative' => true ) );
+
+                $block_name = str_replace( 'core/', '', $metadata['name'] );
+
+                // Normalize metadata similar to `register_block_type_from_metadata()`.
+                $metadata['file'] = wp_normalize_path( realpath( $metadata_file ) );
+                if ( ! isset( $metadata['style'] ) ) {
+                        $metadata['style'] = "wp-block-$block_name";
+                }
+                if ( ! isset( $metadata['editorStyle'] ) ) {
+                        $metadata['editorStyle'] = "wp-block-{$block_name}-editor";
+                }
+
+                // Ensure block assets are separately registered.
+                add_filter( 'should_load_separate_core_block_assets', '__return_true' );
+
+                /*
+                 * Account for minified asset path and ensure the file exists.
+                 * This may not be the case in the testing environment since it requires the build process to place them.
+                 */
+                if ( is_string( $expected_path ) ) {
+                        $expected_path = str_replace( '.css', wp_scripts_get_suffix() . '.css', $expected_path );
+                        self::touch( ABSPATH . $expected_path );
+                }
+
+                $result = register_block_style_handle( $metadata, $style_field );
+                $this->assertSame( $metadata[ $style_field ], $result, 'Core block registration failed' );
+                if ( $expected_path ) {
+                        $this->assertStringEndsWith( $expected_path, wp_styles()->registered[ $result ]->src, 'Core block stylesheet path incorrect' );
+                } else {
+                        $this->assertFalse( wp_styles()->registered[ $result ]->src, 'Core block stylesheet src should be false' );
+                }
+        }
+
+        public function data_register_block_style_handle_uses_correct_core_stylesheet() {
+                return array(
+                        'block with style'           => array(
+                                WPINC . '/blocks/archives/block.json',
+                                'style',
+                                WPINC . '/blocks/archives/style.css',
+                        ),
+                        'block with editor style'    => array(
+                                WPINC . '/blocks/archives/block.json',
+                                'editorStyle',
+                                WPINC . '/blocks/archives/editor.css',
+                        ),
+                        'block without style'        => array(
+                                WPINC . '/blocks/widget-group/block.json',
+                                'style',
+                                false,
+                        ),
+                        'block without editor style' => array(
+                                WPINC . '/blocks/widget-group/block.json',
+                                'editorStyle',
+                                false,
+                        ),
+                );
+        }
+
+        /**
          * @ticket 50263
          */