Testing rendering using elements

lib/block-supports/elements.php

@@ -105,17 +105,17 @@ function gutenberg_render_elements_support_styles( $pre_render, $block ) {
 	$link_block_styles = isset( $element_block_styles['link'] ) ? $element_block_styles['link'] : null;
 
 	if ( $link_block_styles ) {
-		$styles = gutenberg_style_engine_generate(
+		gutenberg_style_engine_enqueue_block_support_styles(
 			$link_block_styles,
 			array(
 				'selector' => ".$class_name a",
 				'css_vars' => true,
 			)
 		);
 
-		if ( ! empty( $styles['css'] ) ) {
-			gutenberg_enqueue_block_support_styles( $styles['css'] );
-		}
+//		if ( ! empty( $styles['css'] ) ) {
+//			gutenberg_enqueue_block_support_styles( $styles['css'] );
+//		}
 	}
 
 	return null;

lib/load.php

@@ -157,6 +157,14 @@ function gutenberg_is_experiment_enabled( $name ) {
 	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-gutenberg.php';
 }
 
+if ( file_exists( __DIR__ . '/../build/style-engine/class-wp-style-engine-store-gutenberg.php' ) ) {
+	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-store-gutenberg.php';
+}
+
+if ( file_exists( __DIR__ . '/../build/style-engine/class-wp-style-engine-renderer-gutenberg.php' ) ) {
+	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-renderer-gutenberg.php';
+}
+
 // Block supports overrides.
 require __DIR__ . '/block-supports/utils.php';
 require __DIR__ . '/block-supports/elements.php';

packages/style-engine/class-wp-style-engine-renderer.php

@@ -19,33 +19,25 @@
  * @access private
  */
 class WP_Style_Engine_Renderer {
-	/**
-	 * Constructor.
-	 *
-	 * @return void
-	 */
-	public function __construct() {
-		// @TODO some argument to determine how/where the styles are rendered.
-		// For example, we could enqueue specific inline styles like global styles, see: gutenberg_enqueue_global_styles().
-		//
-	}
-
 	/**
 	 * Prints registered styles in the page head or footer.
 	 *
+	 * @TODO this shares code with the styles engine class in generate(). Centralize.
+	 *
 	 * @see $this->enqueue_block_support_styles
 	 */
-	public function render_registered_styles( $styles ) {
-		if ( empty( $styles ) ) {
+	public static function render_registered_block_supports_styles() {
+		$style_engine         = WP_Style_Engine::get_instance();
+		$block_support_styles = $style_engine->get_block_support_styles();
+
+		if ( empty( $block_support_styles ) ) {
 			return;
 		}
 
 		$output = '';
 
-		foreach ( $styles as $selector => $rules ) {
-				$output .= "\t$selector { ";
-				$output .= implode( ' ', $rules );
-				$output .= " }\n";
+		foreach ( $block_support_styles as $style ) {
+				$output .= "{$style['sanitized_output']}\n";
 		}
 
 		echo "<style>\n$output</style>\n";
@@ -64,14 +56,14 @@ public function render_registered_styles( $styles ) {
 	 *
 	 * @see gutenberg_enqueue_block_support_styles()
 	 */
-	private function enqueue_block_support_styles() {
+	public static function enqueue_block_support_styles() {
 		$action_hook_name = 'wp_footer';
 		if ( wp_is_block_theme() ) {
 			$action_hook_name = 'wp_head';
 		}
 		add_action(
 			$action_hook_name,
-			array( $this, 'render_registered_styles' )
+			array( __CLASS__, 'render_registered_block_supports_styles' )
 		);
 	}
 }

packages/style-engine/class-wp-style-engine-store.php

@@ -45,6 +45,9 @@ public function __construct( $store_key = null ) {
 		if ( ! empty( $store_key ) ) {
 			$this->store_key = $store_key;
 		}
+
+		// Render engine for styles.
+		WP_Style_Engine_Renderer::enqueue_block_support_styles();
 	}
 
 	/**

packages/style-engine/class-wp-style-engine.php

@@ -257,6 +257,17 @@ public function register_block_support_styles( $key, $style_data ) {
 		$this->block_supports_store->register( $key, $style_data );
 	}
 
+	/**
+	 * Returns all registered block supports styles
+	 *
+	 * @access private
+	 *
+	 * @return array All registered block support styles.
+	 */
+	public function get_block_support_styles() {
+		return $this->block_supports_store->get();
+	}
+
 	/**
 	 * Extracts the slug in kebab case from a preset string, e.g., "heavenly-blue" from 'var:preset|color|heavenlyBlue'.
 	 *
@@ -402,9 +413,10 @@ public function generate( $block_styles, $options ) {
 			return null;
 		}
 
-		$css_rules              = array();
-		$classnames             = array();
-		$should_return_css_vars = isset( $options['css_vars'] ) && true === $options['css_vars'];
+		$css_rules                   = array();
+		$classnames                  = array();
+		$should_return_css_vars      = isset( $options['css_vars'] ) && true === $options['css_vars'];
+		$should_register_and_enqueue = isset( $options['enqueue'] ) ? $options['enqueue'] : null;
 
 		// Collect CSS and classnames.
 		foreach ( self::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group_key => $definition_group_style ) {
@@ -446,6 +458,19 @@ public function generate( $block_styles, $options ) {
 				$style_block         .= implode( ' ', $css );
 				$style_block         .= ' }';
 				$styles_output['css'] = $style_block;
+
+				if ( $should_register_and_enqueue ) {
+					// @TODO this could all change. Maybe we'd want to sanitize and build the rules later.
+					// Or return $css_rules here so another method can register.
+					// Just doing it all here for convenience while testing.
+					$this->register_block_support_styles(
+						$selector,
+						array(
+							'rules'            => $css_rules,
+							'sanitized_output' => $styles_output['css'],
+						)
+					);
+				}
 			} else {
 				$styles_output['css'] = implode( ' ', $css );
 			}
@@ -543,18 +568,20 @@ function wp_style_engine_generate( $block_styles, $options = array() ) {
 
 // @TODO Just testing!
 /**
- * Global public interface to register block support styles support.
+ * Global public interface to register block support styles support to be output in the frontend.
  *
  * @access public
  *
- * @param string $key Unique key for a $style_data object.
- * @param array  $style_data Associative array of style information.
+ * @param array $block_styles An array of styles from a block's attributes.
+ * @param array $options An array of options to determine the output.
  * @return void
  */
-function wp_style_engine_register_block_support_styles( $key, $style_data ) {
+function wp_style_engine_enqueue_block_support_styles( $block_styles, $options = array() ) {
 	if ( class_exists( 'WP_Style_Engine' ) ) {
 		$style_engine = WP_Style_Engine::get_instance();
-		$style_engine->register_block_support_styles( $key, $style_data );
+		// Get style rules, then register/enqueue.
+		$new_options = array_merge( $options, array( 'enqueue' => true ) );
+		$style_engine->generate( $block_styles, $new_options );
 	}
 }