Changeset 54214

Timestamp:

09/19/2022 08:54:20 PM (2 years ago)

Author:

audrasjb

Message:

Editor: Backport block supports filter callback, registrations and tests to 6.1.

This changeset backports the following changes:

• Implement ​gutenberg#42880: Backport script loader: enqueue stored block supports styles
• Allow a way to bypass SCRIPT_DEBUG in tests. See ​comment and the related ​Gutenberg pull request

Props ramonopoly, gziolo, bernhard-reiter, audrasjb, costdev.
See #56467.

Location:

trunk

Files:

• src/wp-includes/default-filters.php (modified) (1 diff)
• src/wp-includes/script-loader.php (modified) (1 diff)
• tests/phpunit/tests/theme/wpGetGlobalStylesheet.php (modified) (2 diffs)

trunk/src/wp-includes/default-filters.php

@@ -576 +576 @@
 add_action( 'wp_footer', 'wp_enqueue_global_styles', 1 );
 
+// Block supports, and other styles parsed and stored in the Style Engine.
+add_action( 'wp_enqueue_scripts', 'wp_enqueue_stored_styles' );
+add_action( 'wp_footer', 'wp_enqueue_stored_styles', 1 );
+
 // SVG filters like duotone have to be loaded at the beginning of the body in both admin and the front-end.
 add_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );

trunk/src/wp-includes/script-loader.php

@@ -2968 +2968 @@
 
 /**
+ * Fetches, processes and compiles stored core styles, then combines and renders them to the page.
+ * Styles are stored via the style engine API.
+ *
+ * @link https://developer.wordpress.org/block-editor/reference-guides/packages/packages-style-engine/
+ *
+ * @since 6.1.0
+ *
+ * @param array $options {
+ *     Optional. An array of options to pass to wp_style_engine_get_stylesheet_from_context(). Default empty array.
+ *
+ *     @type bool $optimize Whether to optimize the CSS output, e.g., combine rules. Default is `false`.
+ *     @type bool $prettify Whether to add new lines and indents to output. Default is the test of whether the global constant `SCRIPT_DEBUG` is defined.
+ * }
+ *
+ * @return void
+ */
+function wp_enqueue_stored_styles( $options = array() ) {
+    $is_block_theme   = wp_is_block_theme();
+    $is_classic_theme = ! $is_block_theme;
+
+    /*
+     * For block themes, this function prints stored styles in the header.
+     * For classic themes, in the footer.
+     */
+    if (
+        ( $is_block_theme && doing_action( 'wp_footer' ) ) ||
+        ( $is_classic_theme && doing_action( 'wp_enqueue_scripts' ) )
+    ) {
+        return;
+    }
+
+    $core_styles_keys         = array( 'block-supports' );
+    $compiled_core_stylesheet = '';
+    $style_tag_id             = 'core';
+    // Adds comment if code is prettified to identify core styles sections in debugging.
+    $should_prettify          = isset( $options['prettify'] ) ? true === $options['prettify'] : defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG;
+    foreach ( $core_styles_keys as $style_key ) {
+        if ( $should_prettify ) {
+            $compiled_core_stylesheet .= "/**\n * Core styles: $style_key\n */\n";
+        }
+        // Chains core store ids to signify what the styles contain.
+        $style_tag_id             .= '-' . $style_key;
+        $compiled_core_stylesheet .= wp_style_engine_get_stylesheet_from_context( $style_key, $options );
+    }
+
+    // Combines Core styles.
+    if ( ! empty( $compiled_core_stylesheet ) ) {
+        wp_register_style( $style_tag_id, false, array(), true, true );
+        wp_add_inline_style( $style_tag_id, $compiled_core_stylesheet );
+        wp_enqueue_style( $style_tag_id );
+    }
+
+    // Prints out any other stores registered by themes or otherwise.
+    $additional_stores = WP_Style_Engine_CSS_Rules_Store::get_stores();
+    foreach ( array_keys( $additional_stores ) as $store_name ) {
+        if ( in_array( $store_name, $core_styles_keys, true ) ) {
+            continue;
+        }
+        $styles = wp_style_engine_get_stylesheet_from_context( $store_name, $options );
+        if ( ! empty( $styles ) ) {
+            $key = "wp-style-engine-$store_name";
+            wp_register_style( $key, false, array(), true, true );
+            wp_add_inline_style( $key, $styles );
+            wp_enqueue_style( $key );
+        }
+    }
+}
+
+/**
  * Enqueues a stylesheet for a specific block.
  *

trunk/tests/phpunit/tests/theme/wpGetGlobalStylesheet.php

@@ -55 +55 @@
     }
 
+    /**
+     * Cleans up global scope.
+     *
+     * @global WP_Styles $wp_styles
+     */
+    public function clean_up_global_scope() {
+        global $wp_styles;
+        parent::clean_up_global_scope();
+        $wp_styles = null;
+    }
+
     public function filter_set_theme_root() {
         return $this->theme_root;
@@ -200 +211 @@
     }
 
+    /**
+     * Tests that stored CSS is enqueued.
+     *
+     * @ticket 56467
+     *
+     * @covers ::wp_enqueue_stored_styles
+     */
+    public function test_should_enqueue_stored_styles() {
+        $core_styles_to_enqueue = array(
+            array(
+                'selector'     => '.saruman',
+                'declarations' => array(
+                    'color'        => 'white',
+                    'height'       => '100px',
+                    'border-style' => 'solid',
+                ),
+            ),
+        );
+
+        // Enqueues a block supports (core styles).
+        wp_style_engine_get_stylesheet_from_css_rules(
+            $core_styles_to_enqueue,
+            array(
+                'context' => 'block-supports',
+            )
+        );
+
+        $my_styles_to_enqueue = array(
+            array(
+                'selector'     => '.gandalf',
+                'declarations' => array(
+                    'color'        => 'grey',
+                    'height'       => '90px',
+                    'border-style' => 'dotted',
+                ),
+            ),
+        );
+
+        // Enqueues some other styles.
+        wp_style_engine_get_stylesheet_from_css_rules(
+            $my_styles_to_enqueue,
+            array(
+                'context' => 'my-styles',
+            )
+        );
+
+        wp_enqueue_stored_styles( array( 'prettify' => false ) );
+
+        $this->assertSame(
+            array( '.saruman{color:white;height:100px;border-style:solid;}' ),
+            wp_styles()->registered['core-block-supports']->extra['after'],
+            'Registered styles with handle of "core-block-supports" do not match expected value from Style Engine store.'
+        );
+
+        $this->assertSame(
+            array( '.gandalf{color:grey;height:90px;border-style:dotted;}' ),
+            wp_styles()->registered['wp-style-engine-my-styles']->extra['after'],
+            'Registered styles with handle of "wp-style-engine-my-styles" do not match expected value from the Style Engine store.'
+        );
+    }
 }