From 3b1b2d989365a1de37d98fe761a6f1f37bf3a572 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Mon, 27 Jun 2022 16:32:47 +1000 Subject: [PATCH 1/7] Initial commit. Gathering a list of terms. --- packages/style-engine/README.md | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/packages/style-engine/README.md b/packages/style-engine/README.md index b414a4bc5370f8..3ae3d782f8f68e 100644 --- a/packages/style-engine/README.md +++ b/packages/style-engine/README.md @@ -12,6 +12,36 @@ npm install @wordpress/style-engine --save _This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._ +## Glossary + +A guide to the terms and variable names referenced by the Style Engine package. + +
+
Block style
+
An object from a block's style attribute that contains a block's style values. E.g., { spacing: { margin: '10px' }, color: { ... }, ... }
+
Global styles
+
A merged block styles object containing values from a theme's theme.json and user styles settings.
+
CSS declaration or (CSS property declaration)
+
When a CSS property is paired with a CSS value, this pairing is called a CSS declaration.
+
CSS declarations block
+
A set of CSS declarations usually paired with CSS selectors to create a CSS rule.
+
CSS property
+
+
CSS rule
+
A CSS selector followed by a CSS declarations block inside a set of curly braces
+
CSS selector
+
+
CSS value
+
+
CSS var
+
+
Inline styles
+
Inline styles are CSS declarations that affect a single HTML element, contained within a style attribute
+
+ +### Block style + + ## Important This Package is considered experimental at the moment. The idea is to have a package used to generate styles based on a style object that is consistent between: backend, frontend, block style object and theme.json. From 6ce25d166015a8c58e523526a090b14d3ee628dd Mon Sep 17 00:00:00 2001 From: ramonjd Date: Tue, 28 Jun 2022 11:24:25 +1000 Subject: [PATCH 2/7] Tidying up glossary --- packages/style-engine/README.md | 58 +++++++++++++++++---------------- 1 file changed, 30 insertions(+), 28 deletions(-) diff --git a/packages/style-engine/README.md b/packages/style-engine/README.md index 3ae3d782f8f68e..cde9676ad0a892 100644 --- a/packages/style-engine/README.md +++ b/packages/style-engine/README.md @@ -12,51 +12,53 @@ npm install @wordpress/style-engine --save _This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._ +## Important + +This Package is considered experimental at the moment. The idea is to have a package used to generate styles based on a style object that is consistent between: backend, frontend, block style object and theme.json. + +Because this package is experimental and still in development it does not yet generate a `wp.styleEngine` global. To get there, the following tasks need to be completed: + +**TODO List:** + +- Add style definitions for all the currently supported styles in blocks and theme.json. +- The CSS variable shortcuts for values (for presets...) +- Support generating styles in the frontend. (Ongoing) +- Support generating styles in the backend (block supports and theme.json stylesheet). (Ongoing) +- Refactor all block styles to use the style engine server side. (Ongoing) +- Consolidate global and block style rendering and enqueuing +- Refactor all blocks to consistently use the "style" attribute for all customizations (get rid of the preset specific attributes). + +See [Tracking: Add a Style Engine to manage rendering block styles #38167](https://github.com/WordPress/gutenberg/issues/38167) + ## Glossary A guide to the terms and variable names referenced by the Style Engine package.
-
Block style
-
An object from a block's style attribute that contains a block's style values. E.g., { spacing: { margin: '10px' }, color: { ... }, ... }
-
Global styles
+
Block style (Gutenberg internal)
+
An object comprising a block's style attribute that contains a block's style values. E.g., { spacing: { margin: '10px' }, color: { ... }, ... }
+
Global styles (Gutenberg internal)
A merged block styles object containing values from a theme's theme.json and user styles settings.
CSS declaration or (CSS property declaration)
-
When a CSS property is paired with a CSS value, this pairing is called a CSS declaration.
+
A CSS property paired with a CSS value. E.g., color: pink
CSS declarations block
-
A set of CSS declarations usually paired with CSS selectors to create a CSS rule.
+
A set of CSS declarations usually paired with a CSS selector to create a CSS rule.
CSS property
-
+
Identifiers that describe stylistic, modifiable features of an HTML element. E.g., border, font-size, width...
CSS rule
-
A CSS selector followed by a CSS declarations block inside a set of curly braces
+
A CSS selector followed by a CSS declarations block inside a set of curly braces. Usually found in a CSS stylesheet.
CSS selector
+
CSS stylesheet
+
A collection of CSS rules contained within a file or within an HTML style tag.
CSS value
-
-
CSS var
-
+
The value of a CSS property. The value determines how the property is modified. E.g., the 10vw in height: 10vw.
+
CSS variables (vars) or CSS custom properties
+
Properties, whose values can be reused in other CSS declarations. Set using custom property notation (e.g., --wp--preset--olive: #808000;) and accessed using the var() function (e.g., color: var( --wp--preset--olive );). See MDN article on CSS custom properties.
Inline styles
Inline styles are CSS declarations that affect a single HTML element, contained within a style attribute
-### Block style - - -## Important - -This Package is considered experimental at the moment. The idea is to have a package used to generate styles based on a style object that is consistent between: backend, frontend, block style object and theme.json. - -Currently it's not a package that generates a wp.styleEngine global because it's not ready yet, it's still a bundled package but ultimately, we want it to be so, once the roadmap is finished: - -**TODO List:** - -- Add style definitions for all the currently supported styles in blocks and theme.json. -- the CSS variable shortcuts for values (for presets...) -- Support generating styles in the frontend. (Ongoing) -- Support generating styles in the backend (block supports and theme.json stylesheet). (Ongoing) -- Refactor all block styles to use the style engine server side. (Ongoing) -- Refactor all blocks to consistently use the "style" attribute for all customizations (get rid of the preset specific attributes). - ## Usage From 1773366c519ed90d8e8f1a674f4a4c1429b1e15e Mon Sep 17 00:00:00 2001 From: ramonjd Date: Tue, 28 Jun 2022 11:42:32 +1000 Subject: [PATCH 3/7] updating var names to be consistent with the glossary --- .../style-engine/class-wp-style-engine.php | 90 ++++++++++--------- 1 file changed, 46 insertions(+), 44 deletions(-) diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index a1961241047213..07a85c197974b6 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -41,7 +41,7 @@ class WP_Style_Engine { * The value should be a valid CSS property (string) to match the incoming value, e.g., "color" to match var:preset|color|somePresetSlug. * - property_keys => (array) array of keys whose values represent a valid CSS property, e.g., "margin" or "border". * - path => (array) a path that accesses the corresponding style value in the block style object. - * - value_func => (string) the name of a function to generate an array of valid CSS rules for a particular style object. + * - value_func => (string) the name of a function to generate a CSS definition array for a particular style object. The output of this function should be `array( "$property" => "$value", ... )`. */ const BLOCK_STYLE_DEFINITIONS_METADATA = array( 'color' => array( @@ -113,28 +113,28 @@ class WP_Style_Engine { 'path' => array( 'border', 'width' ), ), 'top' => array( - 'value_func' => 'static::get_css_individual_property_rules', + 'value_func' => 'static::get_css_individual_property_definitions', 'path' => array( 'border', 'top' ), 'css_vars' => array( 'color' => '--wp--preset--color--$slug', ), ), 'right' => array( - 'value_func' => 'static::get_css_individual_property_rules', + 'value_func' => 'static::get_css_individual_property_definitions', 'path' => array( 'border', 'right' ), 'css_vars' => array( 'color' => '--wp--preset--color--$slug', ), ), 'bottom' => array( - 'value_func' => 'static::get_css_individual_property_rules', + 'value_func' => 'static::get_css_individual_property_definitions', 'path' => array( 'border', 'bottom' ), 'css_vars' => array( 'color' => '--wp--preset--color--$slug', ), ), 'left' => array( - 'value_func' => 'static::get_css_individual_property_rules', + 'value_func' => 'static::get_css_individual_property_definitions', 'path' => array( 'border', 'left' ), 'css_vars' => array( 'color' => '--wp--preset--color--$slug', @@ -247,7 +247,7 @@ protected static function get_slug_from_preset_value( $style_value, $property_ke } /** - * Checks whether an incoming style value is valid. + * Checks whether an incoming block style value is valid. * * @param string? $style_value A single css preset value. * @@ -308,10 +308,10 @@ protected static function get_classnames( $style_value, $style_definition ) { * @param array $style_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA. * @param boolean $should_return_css_vars Whether to try to build and return CSS var values. * - * @return array An array of CSS rules. + * @return array An array of CSS definitions, e.g., array( "$property" => "$value" ). */ - protected static function get_css( $style_value, $style_definition, $should_return_css_vars ) { - $rules = array(); + protected static function get_css_definitions( $style_value, $style_definition, $should_return_css_vars ) { + $css_declarations_array = array(); if ( isset( $style_definition['value_func'] ) && @@ -320,7 +320,7 @@ protected static function get_css( $style_value, $style_definition, $should_retu return call_user_func( $style_definition['value_func'], $style_value, $style_definition ); } - $style_properties = $style_definition['property_keys']; + $css_properties = $style_definition['property_keys']; // Build CSS var values from var:? values, e.g, `var(--wp--css--rule-slug )` // Check if the value is a CSS preset and there's a corresponding css_var pattern in the style definition. @@ -329,15 +329,15 @@ protected static function get_css( $style_value, $style_definition, $should_retu foreach ( $style_definition['css_vars'] as $css_var_pattern => $property_key ) { $slug = static::get_slug_from_preset_value( $style_value, $property_key ); if ( $slug ) { - $css_var = strtr( + $css_var = strtr( $css_var_pattern, array( '$slug' => $slug ) ); - $rules[ $style_properties['default'] ] = "var($css_var)"; + $css_declarations_array[ $css_properties['default'] ] = "var($css_var)"; } } } - return $rules; + return $css_declarations_array; } // Default rule builder. @@ -345,19 +345,19 @@ protected static function get_css( $style_value, $style_definition, $should_retu // for styles such as margins and padding. if ( is_array( $style_value ) ) { foreach ( $style_value as $key => $value ) { - $individual_property = sprintf( $style_properties['individual'], _wp_to_kebab_case( $key ) ); - $rules[ $individual_property ] = $value; + $individual_property = sprintf( $css_properties['individual'], _wp_to_kebab_case( $key ) ); + $css_declarations_array[ $individual_property ] = $value; } } else { - $rules[ $style_properties['default'] ] = $style_value; + $css_declarations_array[ $css_properties['default'] ] = $style_value; } - return $rules; + return $css_declarations_array; } /** - * Returns an CSS ruleset. - * Styles are bundled based on the instructions in BLOCK_STYLE_DEFINITIONS_METADATA. + * Returns classname and CSS from a block styles object. + * Return values are parsed based on the instructions in BLOCK_STYLE_DEFINITIONS_METADATA. * * @param array $block_styles An array of styles from a block's attributes. * @param array $options array( @@ -375,7 +375,7 @@ public function generate( $block_styles, $options ) { return null; } - $css_rules = array(); + $css_declarations_array = array(); $classnames = array(); $should_return_css_vars = isset( $options['css_vars'] ) && true === $options['css_vars']; @@ -391,36 +391,38 @@ public function generate( $block_styles, $options ) { continue; } - $classnames = array_merge( $classnames, static::get_classnames( $style_value, $style_definition ) ); - $css_rules = array_merge( $css_rules, static::get_css( $style_value, $style_definition, $should_return_css_vars ) ); + $classnames = array_merge( $classnames, static::get_classnames( $style_value, $style_definition ) ); + $css_declarations_array = array_merge( $css_declarations_array, static::get_css_definitions( $style_value, $style_definition, $should_return_css_vars ) ); } } // Build CSS rules output. - $selector = isset( $options['selector'] ) ? $options['selector'] : null; - $css = array(); - $styles_output = array(); + $css_selector = isset( $options['selector'] ) ? $options['selector'] : null; + $css_declarations = array(); - if ( ! empty( $css_rules ) ) { + if ( ! empty( $css_declarations_array ) ) { // Generate inline style rules. - foreach ( $css_rules as $rule => $value ) { - $filtered_css = esc_html( safecss_filter_attr( "{$rule}: {$value}" ) ); + foreach ( $css_declarations_array as $css_property => $css_value ) { + $filtered_css = esc_html( safecss_filter_attr( "{$css_property}: {$css_value}" ) ); if ( ! empty( $filtered_css ) ) { - $css[] = $filtered_css . ';'; + $css_declarations[] = $filtered_css . ';'; } } } + // The return object. + $styles_output = array(); + // Return css, if any. - if ( ! empty( $css ) ) { + if ( ! empty( $css_declarations ) ) { // Return an entire rule if there is a selector. - if ( $selector ) { - $style_block = "$selector { "; - $style_block .= implode( ' ', $css ); - $style_block .= ' }'; - $styles_output['css'] = $style_block; + if ( $css_selector ) { + $css_rule = "$css_selector { "; + $css_rule .= implode( ' ', $css_declarations ); + $css_rule .= ' }'; + $styles_output['css'] = $css_rule; } else { - $styles_output['css'] = implode( ' ', $css ); + $styles_output['css'] = implode( ' ', $css_declarations ); } } @@ -434,7 +436,7 @@ public function generate( $block_styles, $options ) { /** - * Style value parser that returns a CSS ruleset of style properties for style definition groups + * Style value parser that returns a CSS definition array comprising style properties * that have keys representing individual style properties, otherwise known as longhand CSS properties. * e.g., "$style_property-$individual_feature: $value;", which could represent the following: * "border-{top|right|bottom|left}-{color|width|style}: {value};" or, @@ -443,13 +445,13 @@ public function generate( $block_styles, $options ) { * @param array $style_value A single raw Gutenberg style attributes value for a CSS property. * @param array $individual_property_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA. * - * @return array The class name for the added style. + * @return array An array of CSS definitions, e.g., array( "$property" => "$value" ). */ - protected static function get_css_individual_property_rules( $style_value, $individual_property_definition ) { - $rules = array(); + protected static function get_css_individual_property_definitions( $style_value, $individual_property_definition ) { + $css_declarations_array = array(); if ( ! is_array( $style_value ) || empty( $style_value ) || empty( $individual_property_definition['path'] ) ) { - return $rules; + return $css_declarations_array; } // The first item in $individual_property_definition['path'] array tells us the style property, e.g., "border". @@ -477,11 +479,11 @@ protected static function get_css_individual_property_rules( $style_value, $indi ); $value = "var($css_var)"; } - $individual_css_property = sprintf( $style_definition['property_keys']['individual'], $individual_property_key ); - $rules[ $individual_css_property ] = $value; + $individual_css_property = sprintf( $style_definition['property_keys']['individual'], $individual_property_key ); + $css_declarations_array[ $individual_css_property ] = $value; } } - return $rules; + return $css_declarations_array; } } From c9d68738f68fab432842ff4f0d4289871ae989c0 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Tue, 28 Jun 2022 11:51:26 +1000 Subject: [PATCH 4/7] Add missing CSS selector definition. --- packages/style-engine/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/style-engine/README.md b/packages/style-engine/README.md index cde9676ad0a892..f4a275dd2c2e56 100644 --- a/packages/style-engine/README.md +++ b/packages/style-engine/README.md @@ -48,7 +48,7 @@ A guide to the terms and variable names referenced by the Style Engine package.
CSS rule
A CSS selector followed by a CSS declarations block inside a set of curly braces. Usually found in a CSS stylesheet.
CSS selector
-
+
The first component of a CSS rule, a CSS selector is a pattern of elements, classnames or other terms that define the element to which the rule's CSS definitions apply. E.g., p.my-cool-classname > span. See MDN CSS selectors article.
CSS stylesheet
A collection of CSS rules contained within a file or within an HTML style tag.
CSS value
From 7b6f2924e4574516ba7a73cd6bb12ba957716533 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Tue, 28 Jun 2022 12:12:26 +1000 Subject: [PATCH 5/7] Updated css_declarations terminology. --- .../style-engine/class-wp-style-engine.php | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index 07a85c197974b6..2dbee2dceea6b6 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -311,7 +311,7 @@ protected static function get_classnames( $style_value, $style_definition ) { * @return array An array of CSS definitions, e.g., array( "$property" => "$value" ). */ protected static function get_css_definitions( $style_value, $style_definition, $should_return_css_vars ) { - $css_declarations_array = array(); + $css_declarations = array(); if ( isset( $style_definition['value_func'] ) && @@ -329,15 +329,15 @@ protected static function get_css_definitions( $style_value, $style_definition, foreach ( $style_definition['css_vars'] as $css_var_pattern => $property_key ) { $slug = static::get_slug_from_preset_value( $style_value, $property_key ); if ( $slug ) { - $css_var = strtr( + $css_var = strtr( $css_var_pattern, array( '$slug' => $slug ) ); - $css_declarations_array[ $css_properties['default'] ] = "var($css_var)"; + $css_declarations[ $css_properties['default'] ] = "var($css_var)"; } } } - return $css_declarations_array; + return $css_declarations; } // Default rule builder. @@ -345,14 +345,14 @@ protected static function get_css_definitions( $style_value, $style_definition, // for styles such as margins and padding. if ( is_array( $style_value ) ) { foreach ( $style_value as $key => $value ) { - $individual_property = sprintf( $css_properties['individual'], _wp_to_kebab_case( $key ) ); - $css_declarations_array[ $individual_property ] = $value; + $individual_property = sprintf( $css_properties['individual'], _wp_to_kebab_case( $key ) ); + $css_declarations[ $individual_property ] = $value; } } else { - $css_declarations_array[ $css_properties['default'] ] = $style_value; + $css_declarations[ $css_properties['default'] ] = $style_value; } - return $css_declarations_array; + return $css_declarations; } /** @@ -375,7 +375,7 @@ public function generate( $block_styles, $options ) { return null; } - $css_declarations_array = array(); + $css_declarations = array(); $classnames = array(); $should_return_css_vars = isset( $options['css_vars'] ) && true === $options['css_vars']; @@ -391,21 +391,21 @@ public function generate( $block_styles, $options ) { continue; } - $classnames = array_merge( $classnames, static::get_classnames( $style_value, $style_definition ) ); - $css_declarations_array = array_merge( $css_declarations_array, static::get_css_definitions( $style_value, $style_definition, $should_return_css_vars ) ); + $classnames = array_merge( $classnames, static::get_classnames( $style_value, $style_definition ) ); + $css_declarations = array_merge( $css_declarations, static::get_css_definitions( $style_value, $style_definition, $should_return_css_vars ) ); } } // Build CSS rules output. - $css_selector = isset( $options['selector'] ) ? $options['selector'] : null; - $css_declarations = array(); + $css_selector = isset( $options['selector'] ) ? $options['selector'] : null; + $filtered_css_declarations = array(); - if ( ! empty( $css_declarations_array ) ) { - // Generate inline style rules. - foreach ( $css_declarations_array as $css_property => $css_value ) { - $filtered_css = esc_html( safecss_filter_attr( "{$css_property}: {$css_value}" ) ); + if ( ! empty( $css_declarations ) ) { + // Generate inline style declarations. + foreach ( $css_declarations as $css_property => $css_value ) { + $filtered_css_declaration = esc_html( safecss_filter_attr( "{$css_property}: {$css_value}" ) ); if ( ! empty( $filtered_css ) ) { - $css_declarations[] = $filtered_css . ';'; + $filtered_css_declarations[] = $filtered_css_declaration . ';'; } } } @@ -414,15 +414,15 @@ public function generate( $block_styles, $options ) { $styles_output = array(); // Return css, if any. - if ( ! empty( $css_declarations ) ) { + if ( ! empty( $filtered_css_declarations ) ) { // Return an entire rule if there is a selector. if ( $css_selector ) { $css_rule = "$css_selector { "; - $css_rule .= implode( ' ', $css_declarations ); + $css_rule .= implode( ' ', $filtered_css_declarations ); $css_rule .= ' }'; $styles_output['css'] = $css_rule; } else { - $styles_output['css'] = implode( ' ', $css_declarations ); + $styles_output['css'] = implode( ' ', $filtered_css_declarations ); } } From 3ba4489d5b32bb4401e9f679ab753f1499157fdf Mon Sep 17 00:00:00 2001 From: ramonjd Date: Tue, 28 Jun 2022 12:38:17 +1000 Subject: [PATCH 6/7] Fixing linting errors on md file Cleaning up a few loose ends. Definition should have been declaration :D --- packages/style-engine/README.md | 16 ++++---- .../style-engine/class-wp-style-engine.php | 41 +++++++++---------- 2 files changed, 28 insertions(+), 29 deletions(-) diff --git a/packages/style-engine/README.md b/packages/style-engine/README.md index f4a275dd2c2e56..9f2d0a8b16fbb6 100644 --- a/packages/style-engine/README.md +++ b/packages/style-engine/README.md @@ -20,13 +20,13 @@ Because this package is experimental and still in development it does not yet ge **TODO List:** -- Add style definitions for all the currently supported styles in blocks and theme.json. -- The CSS variable shortcuts for values (for presets...) -- Support generating styles in the frontend. (Ongoing) -- Support generating styles in the backend (block supports and theme.json stylesheet). (Ongoing) -- Refactor all block styles to use the style engine server side. (Ongoing) -- Consolidate global and block style rendering and enqueuing -- Refactor all blocks to consistently use the "style" attribute for all customizations (get rid of the preset specific attributes). +- Add style definitions for all the currently supported styles in blocks and theme.json. +- The CSS variable shortcuts for values (for presets...) +- Support generating styles in the frontend. (Ongoing) +- Support generating styles in the backend (block supports and theme.json stylesheet). (Ongoing) +- Refactor all block styles to use the style engine server side. (Ongoing) +- Consolidate global and block style rendering and enqueuing +- Refactor all blocks to consistently use the "style" attribute for all customizations (get rid of the preset specific attributes). See [Tracking: Add a Style Engine to manage rendering block styles #38167](https://github.com/WordPress/gutenberg/issues/38167) @@ -48,7 +48,7 @@ A guide to the terms and variable names referenced by the Style Engine package.
CSS rule
A CSS selector followed by a CSS declarations block inside a set of curly braces. Usually found in a CSS stylesheet.
CSS selector
-
The first component of a CSS rule, a CSS selector is a pattern of elements, classnames or other terms that define the element to which the rule's CSS definitions apply. E.g., p.my-cool-classname > span. See MDN CSS selectors article.
+
The first component of a CSS rule, a CSS selector is a pattern of elements, classnames or other terms that define the element to which the rule’s CSS definitions apply. E.g., p.my-cool-classname > span. See MDN CSS selectors article.
CSS stylesheet
A collection of CSS rules contained within a file or within an HTML style tag.
CSS value
diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index 2dbee2dceea6b6..c4cdd0c19419cb 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -113,28 +113,28 @@ class WP_Style_Engine { 'path' => array( 'border', 'width' ), ), 'top' => array( - 'value_func' => 'static::get_css_individual_property_definitions', + 'value_func' => 'static::get_individual_property_css_declarations', 'path' => array( 'border', 'top' ), 'css_vars' => array( 'color' => '--wp--preset--color--$slug', ), ), 'right' => array( - 'value_func' => 'static::get_css_individual_property_definitions', + 'value_func' => 'static::get_individual_property_css_declarations', 'path' => array( 'border', 'right' ), 'css_vars' => array( 'color' => '--wp--preset--color--$slug', ), ), 'bottom' => array( - 'value_func' => 'static::get_css_individual_property_definitions', + 'value_func' => 'static::get_individual_property_css_declarations', 'path' => array( 'border', 'bottom' ), 'css_vars' => array( 'color' => '--wp--preset--color--$slug', ), ), 'left' => array( - 'value_func' => 'static::get_css_individual_property_definitions', + 'value_func' => 'static::get_individual_property_css_declarations', 'path' => array( 'border', 'left' ), 'css_vars' => array( 'color' => '--wp--preset--color--$slug', @@ -302,7 +302,7 @@ protected static function get_classnames( $style_value, $style_definition ) { } /** - * Returns CSS rules based on valid block style values. + * Returns an array of CSS declarations based on valid block style values. * * @param array $style_value A single raw style value from the generate() $block_styles array. * @param array $style_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA. @@ -310,9 +310,7 @@ protected static function get_classnames( $style_value, $style_definition ) { * * @return array An array of CSS definitions, e.g., array( "$property" => "$value" ). */ - protected static function get_css_definitions( $style_value, $style_definition, $should_return_css_vars ) { - $css_declarations = array(); - + protected static function get_css_declarations( $style_value, $style_definition, $should_return_css_vars ) { if ( isset( $style_definition['value_func'] ) && is_callable( $style_definition['value_func'] ) @@ -320,7 +318,8 @@ protected static function get_css_definitions( $style_value, $style_definition, return call_user_func( $style_definition['value_func'], $style_value, $style_definition ); } - $css_properties = $style_definition['property_keys']; + $css_declarations = array(); + $style_property_keys = $style_definition['property_keys']; // Build CSS var values from var:? values, e.g, `var(--wp--css--rule-slug )` // Check if the value is a CSS preset and there's a corresponding css_var pattern in the style definition. @@ -329,11 +328,11 @@ protected static function get_css_definitions( $style_value, $style_definition, foreach ( $style_definition['css_vars'] as $css_var_pattern => $property_key ) { $slug = static::get_slug_from_preset_value( $style_value, $property_key ); if ( $slug ) { - $css_var = strtr( + $css_var = strtr( $css_var_pattern, array( '$slug' => $slug ) ); - $css_declarations[ $css_properties['default'] ] = "var($css_var)"; + $css_declarations[ $style_property_keys['default'] ] = "var($css_var)"; } } } @@ -345,11 +344,11 @@ protected static function get_css_definitions( $style_value, $style_definition, // for styles such as margins and padding. if ( is_array( $style_value ) ) { foreach ( $style_value as $key => $value ) { - $individual_property = sprintf( $css_properties['individual'], _wp_to_kebab_case( $key ) ); + $individual_property = sprintf( $style_property_keys['individual'], _wp_to_kebab_case( $key ) ); $css_declarations[ $individual_property ] = $value; } } else { - $css_declarations[ $css_properties['default'] ] = $style_value; + $css_declarations[ $style_property_keys['default'] ] = $style_value; } return $css_declarations; @@ -392,7 +391,7 @@ public function generate( $block_styles, $options ) { } $classnames = array_merge( $classnames, static::get_classnames( $style_value, $style_definition ) ); - $css_declarations = array_merge( $css_declarations, static::get_css_definitions( $style_value, $style_definition, $should_return_css_vars ) ); + $css_declarations = array_merge( $css_declarations, static::get_css_declarations( $style_value, $style_definition, $should_return_css_vars ) ); } } @@ -404,7 +403,7 @@ public function generate( $block_styles, $options ) { // Generate inline style declarations. foreach ( $css_declarations as $css_property => $css_value ) { $filtered_css_declaration = esc_html( safecss_filter_attr( "{$css_property}: {$css_value}" ) ); - if ( ! empty( $filtered_css ) ) { + if ( ! empty( $filtered_css_declaration ) ) { $filtered_css_declarations[] = $filtered_css_declaration . ';'; } } @@ -447,11 +446,11 @@ public function generate( $block_styles, $options ) { * * @return array An array of CSS definitions, e.g., array( "$property" => "$value" ). */ - protected static function get_css_individual_property_definitions( $style_value, $individual_property_definition ) { - $css_declarations_array = array(); + protected static function get_individual_property_css_declarations( $style_value, $individual_property_definition ) { + $css_declarations = array(); if ( ! is_array( $style_value ) || empty( $style_value ) || empty( $individual_property_definition['path'] ) ) { - return $css_declarations_array; + return $css_declarations; } // The first item in $individual_property_definition['path'] array tells us the style property, e.g., "border". @@ -479,11 +478,11 @@ protected static function get_css_individual_property_definitions( $style_value, ); $value = "var($css_var)"; } - $individual_css_property = sprintf( $style_definition['property_keys']['individual'], $individual_property_key ); - $css_declarations_array[ $individual_css_property ] = $value; + $individual_css_property = sprintf( $style_definition['property_keys']['individual'], $individual_property_key ); + $css_declarations[ $individual_css_property ] = $value; } } - return $css_declarations_array; + return $css_declarations; } } From dd2ce1eaf294f28a5e5b34d7d82dfb89ed5d91c9 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Tue, 28 Jun 2022 13:02:20 +1000 Subject: [PATCH 7/7] Fixing linting errors on md file --- packages/style-engine/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/style-engine/README.md b/packages/style-engine/README.md index 9f2d0a8b16fbb6..4a2990c6b5f669 100644 --- a/packages/style-engine/README.md +++ b/packages/style-engine/README.md @@ -25,7 +25,7 @@ Because this package is experimental and still in development it does not yet ge - Support generating styles in the frontend. (Ongoing) - Support generating styles in the backend (block supports and theme.json stylesheet). (Ongoing) - Refactor all block styles to use the style engine server side. (Ongoing) -- Consolidate global and block style rendering and enqueuing +- Consolidate global and block style rendering and enqueuing - Refactor all blocks to consistently use the "style" attribute for all customizations (get rid of the preset specific attributes). See [Tracking: Add a Style Engine to manage rendering block styles #38167](https://github.com/WordPress/gutenberg/issues/38167)