From 33f614dd2e55a67b68f1f306c15605d88e145842 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Thu, 18 Aug 2022 03:18:09 +0300 Subject: [PATCH] Style engine tweaks (#43303) * tweaks for the main Style Engine class * allow chaining methods in the processor * better structure, easier to understand * allow chaining methods * inline docs * fix for vars * revert --- ...class-wp-style-engine-css-declarations.php | 17 ++-- .../class-wp-style-engine-css-rule.php | 8 +- .../class-wp-style-engine-processor.php | 8 ++ .../style-engine/class-wp-style-engine.php | 85 +++++++++---------- 4 files changed, 62 insertions(+), 56 deletions(-) diff --git a/packages/style-engine/class-wp-style-engine-css-declarations.php b/packages/style-engine/class-wp-style-engine-css-declarations.php index ad633e469c893..17448a3486c79 100644 --- a/packages/style-engine/class-wp-style-engine-css-declarations.php +++ b/packages/style-engine/class-wp-style-engine-css-declarations.php @@ -43,7 +43,7 @@ public function __construct( $declarations = array() ) { * @param string $property The CSS property. * @param string $value The CSS value. * - * @return void + * @return WP_Style_Engine_CSS_Declarations Returns the object to allow chaining methods. */ public function add_declaration( $property, $value ) { @@ -51,17 +51,19 @@ public function add_declaration( $property, $value ) { $property = $this->sanitize_property( $property ); // Bail early if the property is empty. if ( empty( $property ) ) { - return; + return $this; } // Trim the value. If empty, bail early. $value = trim( $value ); if ( '' === $value ) { - return; + return $this; } // Add the declaration property/value pair. $this->declarations[ $property ] = $value; + + return $this; } /** @@ -69,10 +71,11 @@ public function add_declaration( $property, $value ) { * * @param string $property The CSS property. * - * @return void + * @return WP_Style_Engine_CSS_Declarations Returns the object to allow chaining methods. */ public function remove_declaration( $property ) { unset( $this->declarations[ $property ] ); + return $this; } /** @@ -80,12 +83,13 @@ public function remove_declaration( $property ) { * * @param array $declarations An array of declarations. * - * @return void + * @return WP_Style_Engine_CSS_Declarations Returns the object to allow chaining methods. */ public function add_declarations( $declarations ) { foreach ( $declarations as $property => $value ) { $this->add_declaration( $property, $value ); } + return $this; } /** @@ -93,12 +97,13 @@ public function add_declarations( $declarations ) { * * @param array $properties An array of properties. * - * @return void + * @return WP_Style_Engine_CSS_Declarations Returns the object to allow chaining methods. */ public function remove_declarations( $properties = array() ) { foreach ( $properties as $property ) { $this->remove_declaration( $property ); } + return $this; } /** diff --git a/packages/style-engine/class-wp-style-engine-css-rule.php b/packages/style-engine/class-wp-style-engine-css-rule.php index dbaf027057b3d..220bf1850e54a 100644 --- a/packages/style-engine/class-wp-style-engine-css-rule.php +++ b/packages/style-engine/class-wp-style-engine-css-rule.php @@ -70,11 +70,11 @@ public function add_declarations( $declarations ) { $is_declarations_object = ! is_array( $declarations ); $declarations_array = $is_declarations_object ? $declarations->get_declarations() : $declarations; - if ( null === $this->declarations && $is_declarations_object ) { - $this->declarations = $declarations; - return $this; - } if ( null === $this->declarations ) { + if ( $is_declarations_object ) { + $this->declarations = $declarations; + return $this; + } $this->declarations = new WP_Style_Engine_CSS_Declarations( $declarations_array ); } $this->declarations->add_declarations( $declarations_array ); diff --git a/packages/style-engine/class-wp-style-engine-processor.php b/packages/style-engine/class-wp-style-engine-processor.php index fe2309b55f4c0..d2d8e80ac6093 100644 --- a/packages/style-engine/class-wp-style-engine-processor.php +++ b/packages/style-engine/class-wp-style-engine-processor.php @@ -36,15 +36,21 @@ class WP_Style_Engine_Processor { * Add a store to the processor. * * @param WP_Style_Engine_CSS_Rules_Store $store The store to add. + * + * @return WP_Style_Engine_Processor Returns the object to allow chaining methods. */ public function add_store( WP_Style_Engine_CSS_Rules_Store $store ) { $this->stores[ $store->get_name() ] = $store; + + return $this; } /** * Adds rules to be processed. * * @param WP_Style_Engine_CSS_Rule|WP_Style_Engine_CSS_Rule[] $css_rules A single, or an array of, WP_Style_Engine_CSS_Rule objects from a store or otherwise. + * + * @return WP_Style_Engine_Processor Returns the object to allow chaining methods. */ public function add_rules( $css_rules ) { if ( ! is_array( $css_rules ) ) { @@ -58,6 +64,8 @@ public function add_rules( $css_rules ) { } $this->css_rules[ $rule->get_selector() ] = $rule; } + + return $this; } /** diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index 9b6b45feeb495..9698ce4f8796a 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -220,14 +220,14 @@ class WP_Style_Engine { * @param string? $style_value A single css preset value. * @param string $property_key The CSS property that is the second element of the preset string. Used for matching. * - * @return string|null The slug, or null if not found. + * @return string The slug, or empty string if not found. */ protected static function get_slug_from_preset_value( $style_value, $property_key ) { if ( is_string( $style_value ) && strpos( $style_value, "var:preset|{$property_key}|" ) !== false ) { $index_to_splice = strrpos( $style_value, '|' ) + 1; return _wp_to_kebab_case( substr( $style_value, $index_to_splice ) ); } - return null; + return ''; } /** @@ -236,12 +236,12 @@ protected static function get_slug_from_preset_value( $style_value, $property_ke * @param string $style_value A single css preset value. * @param array $css_vars The css var patterns used to generate the var string. * - * @return string|null The css var, or null if no match for slug found. + * @return string The css var, or an empty string if no match for slug found. */ protected static function get_css_var_value( $style_value, $css_vars ) { foreach ( $css_vars as $property_key => $css_var_pattern ) { $slug = static::get_slug_from_preset_value( $style_value, $property_key ); - if ( $slug ) { + if ( static::is_valid_style_value( $slug ) ) { $var = strtr( $css_var_pattern, array( '$slug' => $slug ) @@ -249,7 +249,7 @@ protected static function get_css_var_value( $style_value, $css_vars ) { return "var($var)"; } } - return null; + return ''; } /** @@ -260,11 +260,7 @@ protected static function get_css_var_value( $style_value, $css_vars ) { * @return boolean */ protected static function is_valid_style_value( $style_value ) { - if ( '0' === $style_value ) { - return true; - } - - return ! empty( $style_value ); + return '0' === $style_value || ! empty( $style_value ); } /** @@ -310,12 +306,14 @@ public static function get_store( $store_name ) { * ); */ public static function parse_block_styles( $block_styles, $options ) { + $parsed_styles = array( + 'classnames' => array(), + 'declarations' => array(), + ); if ( empty( $block_styles ) || ! is_array( $block_styles ) ) { - return array(); + return $parsed_styles; } - $css_declarations = array(); - $classnames = array(); $should_skip_css_vars = isset( $options['convert_vars_to_classnames'] ) && true === $options['convert_vars_to_classnames']; // Collect CSS and classnames. @@ -330,15 +328,12 @@ public static function parse_block_styles( $block_styles, $options ) { continue; } - $classnames = array_merge( $classnames, static::get_classnames( $style_value, $style_definition ) ); - $css_declarations = array_merge( $css_declarations, static::get_css_declarations( $style_value, $style_definition, $should_skip_css_vars ) ); + $parsed_styles['classnames'] = array_merge( $parsed_styles['classnames'], static::get_classnames( $style_value, $style_definition ) ); + $parsed_styles['declarations'] = array_merge( $parsed_styles['declarations'], static::get_css_declarations( $style_value, $style_definition, $should_skip_css_vars ) ); } } - return array( - 'classnames' => $classnames, - 'declarations' => $css_declarations, - ); + return $parsed_styles; } /** @@ -350,12 +345,11 @@ public static function parse_block_styles( $block_styles, $options ) { * @return array An array of CSS classnames. */ protected static function get_classnames( $style_value, $style_definition ) { - $classnames = array(); - if ( empty( $style_value ) ) { - return $classnames; + return array(); } + $classnames = array(); if ( ! empty( $style_definition['classnames'] ) ) { foreach ( $style_definition['classnames'] as $classname => $property_key ) { if ( true === $property_key ) { @@ -399,7 +393,7 @@ protected static function get_css_declarations( $style_value, $style_definition, if ( is_string( $style_value ) && strpos( $style_value, 'var:' ) !== false ) { if ( ! $should_skip_css_vars && ! empty( $style_definition['css_vars'] ) ) { $css_var = static::get_css_var_value( $style_value, $style_definition['css_vars'] ); - if ( $css_var ) { + if ( static::is_valid_style_value( $css_var ) ) { $css_declarations[ $style_property_keys['default'] ] = $css_var; } } @@ -426,10 +420,11 @@ protected static function get_css_declarations( $style_value, $style_definition, $css_declarations[ $individual_property ] = $value; } } - } else { - $css_declarations[ $style_property_keys['default'] ] = $style_value; + + return $css_declarations; } + $css_declarations[ $style_property_keys['default'] ] = $style_value; return $css_declarations; } @@ -447,10 +442,8 @@ protected static function get_css_declarations( $style_value, $style_definition, * @return array An array of CSS definitions, e.g., array( "$property" => "$value" ). */ protected static function get_individual_property_css_declarations( $style_value, $individual_property_definition, $should_skip_css_vars ) { - $css_declarations = array(); - if ( ! is_array( $style_value ) || empty( $style_value ) || empty( $individual_property_definition['path'] ) ) { - return $css_declarations; + return array(); } // The first item in $individual_property_definition['path'] array tells us the style property, e.g., "border". @@ -459,6 +452,7 @@ protected static function get_individual_property_css_declarations( $style_value $definition_group_key = $individual_property_definition['path'][0]; $individual_property_key = $individual_property_definition['path'][1]; + $css_declarations = array(); foreach ( $style_value as $css_property => $value ) { if ( empty( $value ) ) { continue; @@ -498,8 +492,8 @@ public static function compile_css( $css_declarations, $css_selector ) { $css_rule = new WP_Style_Engine_CSS_Rule( $css_selector, $css_declarations ); return $css_rule->get_css(); } - $css_declarations = new WP_Style_Engine_CSS_Declarations( $css_declarations ); + $css_declarations = new WP_Style_Engine_CSS_Declarations( $css_declarations ); return $css_declarations->get_declarations_string(); } @@ -538,7 +532,7 @@ public static function compile_stylesheet_from_css_rules( $css_rules ) { * 'selector' => (string) When a selector is passed, `generate()` will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values. * );. * - * @return array|null array( + * @return array 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. @@ -548,22 +542,21 @@ function wp_style_engine_get_styles( $block_styles, $options = array() ) { if ( ! class_exists( 'WP_Style_Engine' ) ) { return array(); } - $defaults = array( - 'selector' => null, - 'context' => null, - 'convert_vars_to_classnames' => false, + + $options = wp_parse_args( + $options, + array( + 'selector' => null, + 'context' => null, + 'convert_vars_to_classnames' => false, + ) ); - $options = wp_parse_args( $options, $defaults ); $parsed_styles = WP_Style_Engine::parse_block_styles( $block_styles, $options ); // Output. $styles_output = array(); - if ( ! $parsed_styles ) { - return $styles_output; - } - if ( ! empty( $parsed_styles['declarations'] ) ) { $styles_output['css'] = WP_Style_Engine::compile_css( $parsed_styles['declarations'], $options['selector'] ); $styles_output['declarations'] = $parsed_styles['declarations']; @@ -603,12 +596,14 @@ function wp_style_engine_get_stylesheet_from_css_rules( $css_rules, $options = a return ''; } - $defaults = array( - 'context' => null, + $options = wp_parse_args( + $options, + array( + 'context' => null, + ) ); - $options = wp_parse_args( $options, $defaults ); - $css_rule_objects = array(); + $css_rule_objects = array(); foreach ( $css_rules as $css_rule ) { if ( empty( $css_rule['selector'] ) || empty( $css_rule['declarations'] ) || ! is_array( $css_rule['declarations'] ) ) { continue; @@ -642,7 +637,5 @@ function wp_style_engine_get_stylesheet_from_store( $store_name ) { return ''; } - $store = WP_Style_Engine::get_store( $store_name ); - - return WP_Style_Engine::compile_stylesheet_from_css_rules( $store->get_all_rules() ); + return WP_Style_Engine::compile_stylesheet_from_css_rules( WP_Style_Engine::get_store( $store_name )->get_all_rules() ); }