From a55525a971b50eb0fa1b14dcb79286cad1dc02e7 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Wed, 22 Jun 2022 11:47:16 +1000 Subject: [PATCH] Testing rendering using elements --- lib/block-supports/elements.php | 8 ++-- lib/load.php | 8 ++++ .../class-wp-style-engine-renderer.php | 30 +++++-------- .../class-wp-style-engine-store.php | 3 ++ .../style-engine/class-wp-style-engine.php | 43 +++++++++++++++---- 5 files changed, 61 insertions(+), 31 deletions(-) diff --git a/lib/block-supports/elements.php b/lib/block-supports/elements.php index 9230fd48b1c102..991459fadd2f45 100644 --- a/lib/block-supports/elements.php +++ b/lib/block-supports/elements.php @@ -105,7 +105,7 @@ 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", @@ -113,9 +113,9 @@ function gutenberg_render_elements_support_styles( $pre_render, $block ) { ) ); - if ( ! empty( $styles['css'] ) ) { - gutenberg_enqueue_block_support_styles( $styles['css'] ); - } +// if ( ! empty( $styles['css'] ) ) { +// gutenberg_enqueue_block_support_styles( $styles['css'] ); +// } } return null; diff --git a/lib/load.php b/lib/load.php index f7cad4597b6928..7d4ee33f4767a7 100644 --- a/lib/load.php +++ b/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'; diff --git a/packages/style-engine/class-wp-style-engine-renderer.php b/packages/style-engine/class-wp-style-engine-renderer.php index fb9d5885f228a7..6998e6191c7c01 100644 --- a/packages/style-engine/class-wp-style-engine-renderer.php +++ b/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 "\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' ) ); } } diff --git a/packages/style-engine/class-wp-style-engine-store.php b/packages/style-engine/class-wp-style-engine-store.php index df0d1d1b657968..5f6687d6591526 100644 --- a/packages/style-engine/class-wp-style-engine-store.php +++ b/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(); } /** diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index 76f0a6989ea97e..d7ed9002a7fb11 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/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 ); } }