Editor: Backport block supports filter callback, registrations and te…

…sts to 6.1.

This changeset backports the following changes:

- Implement [WordPress/gutenberg#42880 gutenberg#42880]: Backport script loader: enqueue stored block supports styles
- Allow a way to bypass `SCRIPT_DEBUG` in tests. See [WordPress#3259 (comment) comment] and the related [WordPress/gutenberg#44248 Gutenberg pull request]

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


git-svn-id: https://develop.svn.wordpress.org/trunk@54214 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-includes/default-filters.php

@@ -575,6 +575,10 @@
 add_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
 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' );
 add_action( 'in_admin_header', 'wp_global_styles_render_svg_filters' );

src/wp-includes/script-loader.php

@@ -2966,6 +2966,75 @@ static function () use ( $style ) {
 	);
 }
 
+/**
+ * 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.
  *

tests/phpunit/tests/theme/wpGetGlobalStylesheet.php

@@ -54,6 +54,17 @@ public function tear_down() {
 		parent::tear_down();
 	}
 
+	/**
+	 * 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;
 	}
@@ -199,4 +210,64 @@ public function test_variables_in_classic_theme_with_presets_using_defaults() {
 		remove_theme_support( 'editor-font-sizes' );
 	}
 
+	/**
+	 * 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.'
+		);
+	}
 }