Splitting wp_style_engine_enqueue_block_supports_styles and `wp_sty…

…le_engine_get_block_supports_styles` so we can enqueue styles that don't need parsing, e.g., layout
WordPress · Jul 19, 2022 · 2a6a226 · 2a6a226
1 parent 33eb74e
commit 2a6a226
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 18 deletions.
diff --git a/lib/block-supports/elements.php b/lib/block-supports/elements.php
@@ -104,7 +104,13 @@ function gutenberg_render_elements_support_styles( $pre_render, $block ) {
 	$class_name        = gutenberg_get_elements_class_name( $block );
 	$link_block_styles = isset( $element_block_styles['link'] ) ? $element_block_styles['link'] : null;
 
-	gutenberg_style_engine_enqueue_block_supports_styles( ".$class_name a", $link_block_styles );
+	gutenberg_style_engine_get_block_supports_styles(
+		$link_block_styles,
+		array(
+			'selector' => ".$class_name a",
+			'enqueue'  => true,
+		)
+	);
 
 	return null;
 }

diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
@@ -625,10 +625,14 @@ protected static function get_individual_property_css_declarations( $style_value
  *
  * @access public
  *
- * @param array         $block_styles The value of a block's attributes.style.
- * @param array<string> $options      An array of options to determine the output.
+ * @param array $block_styles The value of a block's attributes.style.
+ * @param array $options      array(
+ *     'selector'                   => (string) When a selector is passed, `generate()` will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values.
+ *     'convert_vars_to_classnames' => (boolean) Whether to skip converting CSS var:? values to var( --wp--preset--* ) values. Default is `false`.
+ *     'enqueue'                    => (boolean) When `true`, will enqueue the parsed styles for rendering on the frontend in a block-supports inline style tag. Default is `false`.
+ * );.
  *
- * @return array<string>|null array(
+ * @return array<string> array(
  *     'css'           => (string) A CSS ruleset or declarations block formatted to be placed in an HTML `style` attribute or tag.
  *     'declarations'  => (array) An array of property/value pairs representing parsed CSS declarations.
  *     'classnames'    => (string) Classnames separated by a space.
@@ -639,17 +643,26 @@ function wp_style_engine_get_block_supports_styles( $block_styles, $options = ar
 		$defaults = array(
 			'selector'                   => null,
 			'convert_vars_to_classnames' => false,
+			'enqueue'                    => false,
 		);
 
 		$options       = wp_parse_args( $options, $defaults );
 		$style_engine  = WP_Style_Engine::get_instance();
 		$parsed_styles = $style_engine->parse_block_supports_styles( $block_styles, $options );
 
 		// Output.
-		$styles_output                 = array();
-		$styles_output['css']          = $style_engine->compile_css( $parsed_styles['css_declarations'], $options['selector'] );
-		$styles_output['declarations'] = $parsed_styles['css_declarations'];
-		$styles_output['classnames']   = $style_engine->compile_classnames( $parsed_styles['classnames'] );
+		$styles_output = array();
+		if ( ! empty( $parsed_styles['css_declarations'] ) ) {
+			$styles_output['css']          = $style_engine->compile_css( $parsed_styles['css_declarations'], $options['selector'] );
+			$styles_output['declarations'] = $parsed_styles['css_declarations'];
+			if ( true === $options['enqueue'] ) {
+				$style_engine->store_css_rule( $options['selector'], $parsed_styles['css_declarations'], 'block-supports' );
+			}
+		}
+
+		if ( ! empty( $parsed_styles['classnames'] ) ) {
+			$styles_output['classnames'] = $style_engine->compile_classnames( $parsed_styles['classnames'] );
+		}
 
 		return array_filter( $styles_output );
 	}
@@ -662,22 +675,17 @@ function wp_style_engine_get_block_supports_styles( $block_styles, $options = ar
  *
  * @access public
  *
- * @param string $selector     A CSS selector.
- * @param array  $block_styles The value of a block's attributes.style.
+ * @param string $selector         A CSS selector.
+ * @param array  $css_declarations An array of CSS definitions, e.g., array( "$property" => "$value" ).
  *
  * @return boolean Whether the storage process was successful.
  */
-function wp_style_engine_enqueue_block_supports_styles( $selector, $block_styles ) {
-	if ( empty( $selector ) || empty( $block_styles ) ) {
+function wp_style_engine_enqueue_block_supports_styles( $selector, $css_declarations ) {
+	if ( empty( $selector ) || empty( $css_declarations ) ) {
 		return false;
 	}
 	if ( class_exists( 'WP_Style_Engine' ) ) {
-		$options       = array(
-			'selector' => $selector,
-		);
-		$style_engine  = WP_Style_Engine::get_instance();
-		$parsed_styles = $style_engine->parse_block_supports_styles( $block_styles, $options );
-		return $style_engine->store_css_rule( $selector, $parsed_styles['css_declarations'], 'block-supports' );
+		return WP_Style_Engine::get_instance()->store_css_rule( $selector, $css_declarations, 'block-supports' );
 	}
 	return false;
 }