From b9c6d4f0566455b129b2cb49ca58faf0f5967863 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Tue, 10 May 2022 16:03:49 +1000 Subject: [PATCH] initial commit --- .../wordpress-6.0/class-wp-theme-json-6-0.php | 8 +++- .../style-engine/class-wp-style-engine.php | 41 +++++++++++++------ 2 files changed, 35 insertions(+), 14 deletions(-) diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php b/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php index 1a0945b1754223..1973ef6ae15d82 100644 --- a/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php +++ b/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php @@ -330,6 +330,8 @@ protected function get_block_classes( $style_nodes ) { $settings = _wp_array_get( $this->theme_json, array( 'settings' ) ); $declarations = static::compute_style_properties( $node, $settings ); + + // 1. Separate the ones who use the general selector // and the ones who use the duotone selector. $declarations_duotone = array(); @@ -353,7 +355,11 @@ protected function get_block_classes( $style_nodes ) { } // 2. Generate the rules that use the general selector. - $block_rules .= static::to_ruleset( $selector, $declarations ); + $styles = gutenberg_style_engine_generate( $node, array( 'selector' => $selector ) ); + if ( isset( $styles['css'] ) ) { + $block_rules .= $styles['css']; + } + // 3. Generate the rules that use the duotone selector. if ( isset( $metadata['duotone'] ) && ! empty( $declarations_duotone ) ) { diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index 5687a2f422186e..613e5db43ebb23 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -203,15 +203,16 @@ protected static function get_css( $style_value, $style_definition ) { * Returns an CSS ruleset. * Styles are bundled based on the instructions in BLOCK_STYLE_DEFINITIONS_METADATA. * - * @param array $block_styles An array of styles from a block's attributes. + * @param array $styles An array of Gutenberg styles from a block's attributes or theme JSON. + * @param array $options An array of options to determine the output. * * @return array|null array( - * 'styles' => (string) A CSS ruleset formatted to be placed in an HTML `style` attribute or tag. + * 'styles' => (string) A CSS ruleset formatted to be placed in an HTML `style` attribute or tag. Default is a string of inline styles. * 'classnames' => (string) Classnames separated by a space. * ); */ - public function generate( $block_styles ) { - if ( empty( $block_styles ) || ! is_array( $block_styles ) ) { + public function generate( $styles, $options ) { + if ( empty( $styles ) || ! is_array( $styles ) ) { return null; } @@ -222,7 +223,7 @@ public function generate( $block_styles ) { // Collect CSS and classnames. foreach ( self::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group ) { foreach ( $definition_group as $style_definition ) { - $style_value = _wp_array_get( $block_styles, $style_definition['path'], null ); + $style_value = _wp_array_get( $styles, $style_definition['path'], null ); if ( empty( $style_value ) ) { continue; @@ -234,21 +235,34 @@ public function generate( $block_styles ) { } // Build CSS rules output. - $css_output = ''; + $selector = isset( $options['selector'] ) ? $options['selector'] : null; + $css_output = array(); + if ( ! empty( $css_rules ) ) { // Generate inline style rules. - // In the future there might be a flag in the option to output - // inline CSS rules (for HTML style attributes) vs selectors + rules for style tags. foreach ( $css_rules as $rule => $value ) { $filtered_css = esc_html( safecss_filter_attr( "{$rule}: {$value}" ) ); if ( ! empty( $filtered_css ) ) { - $css_output .= $filtered_css . '; '; + $css_output[] = $filtered_css . ';'; } } } if ( ! empty( $css_output ) ) { - $styles_output['css'] = trim( $css_output ); + if ( $selector ) { + $style_block = "$selector {\n"; + $css_output = array_map( + function ( $value ) { + return "\t$value\n"; + }, + $css_output + ); + $style_block .= implode( '', $css_output ); + $style_block .= "}\n"; + $styles_output['css'] = $style_block; + } else { + $styles_output['css'] = implode( ' ', $css_output ); + } } if ( ! empty( $classnames ) ) { @@ -294,17 +308,18 @@ protected static function get_css_rules( $style_value, $style_property ) { * Returns an CSS ruleset. * Styles are bundled based on the instructions in BLOCK_STYLE_DEFINITIONS_METADATA. * - * @param array $block_styles An array of styles from a block's attributes. + * @param array $styles An array of Gutenberg styles from a block's attributes or theme JSON. + * @param array $options An array of options to determine the output. * * @return array|null array( * 'styles' => (string) A CSS ruleset formatted to be placed in an HTML `style` attribute or tag. * 'classnames' => (string) Classnames separated by a space. * ); */ -function wp_style_engine_generate( $block_styles ) { +function wp_style_engine_generate( $styles, $options = array() ) { if ( class_exists( 'WP_Style_Engine' ) ) { $style_engine = WP_Style_Engine::get_instance(); - return $style_engine->generate( $block_styles ); + return $style_engine->generate( $styles, $options ); } return null; }