From 3a130540037d2cb2114fafbf8f8243783bcc4211 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Wed, 27 Apr 2022 15:50:25 +1000 Subject: [PATCH 1/4] Building on work in #40082 and #40332 by adding border support. Allowing for border side styles, e.g., border.top.width et. al. --- lib/block-supports/border.php | 116 ++------ .../style-engine/class-wp-style-engine.php | 266 ++++++++++++++---- .../phpunit/class-wp-style-engine-test.php | 79 +++++- phpunit/block-supports/border-test.php | 8 +- 4 files changed, 314 insertions(+), 155 deletions(-) diff --git a/lib/block-supports/border.php b/lib/block-supports/border.php index d4d18fd6cb687e..9f9053cf970052 100644 --- a/lib/block-supports/border.php +++ b/lib/block-supports/border.php @@ -48,9 +48,8 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) { return array(); } - $classes = array(); - $styles = array(); - $sides = array( 'top', 'right', 'bottom', 'left' ); + $sides = array( 'top', 'right', 'bottom', 'left' ); + $border_block_styles = array(); $has_border_color_support = gutenberg_has_border_feature_support( $block_type, 'color' ); $has_border_width_support = gutenberg_has_border_feature_support( $block_type, 'width' ); @@ -63,21 +62,11 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) { ) { $border_radius = $block_attributes['style']['border']['radius']; - if ( is_array( $border_radius ) ) { - // We have individual border radius corner values. - foreach ( $border_radius as $key => $radius ) { - // Convert CamelCase corner name to kebab-case. - $corner = strtolower( preg_replace( '/(? isset( $border['width'] ) && ! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'width' ) ? $border['width'] : null, + 'color' => isset( $border['color'] ) && ! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'color' ) ? $border['color'] : null, + 'style' => isset( $border['style'] ) && ! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'style' ) ? $border['style'] : null, + ); + $border_block_styles[ $side ] = $border_side_values; } } // Collect classes and styles. $attributes = array(); + $styles = gutenberg_style_engine_generate( array( 'border' => $border_block_styles ) ); - if ( ! empty( $classes ) ) { - $attributes['class'] = implode( ' ', $classes ); + if ( ! empty( $styles['classnames'] ) ) { + $attributes['class'] = $styles['classnames']; } - if ( ! empty( $styles ) ) { - $attributes['style'] = implode( ' ', $styles ); + if ( ! empty( $styles['css'] ) ) { + $attributes['style'] = $styles['css']; } return $attributes; } -/** - * Generates longhand CSS styles for an individual side border. - * - * If some values are omitted from the border configuration, using shorthand - * styles would lead to `initial` values being used instead of the more - * desirable inherited values. This could also lead to browser inconsistencies. - * - * @param string $side The side the styles are being generated for. - * @param array $border Array containing border color, style, and width values. - * @param WP_Block_Type $block_type Block type. - * - * @return array Longhand CSS border styles for a single side. - */ -function gutenberg_generate_individual_border_classes_and_styles( $side, $border, $block_type ) { - $styles = array(); - - if ( - isset( $border['width'] ) && - null !== $border['width'] && - ! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'width' ) - ) { - $styles[] = sprintf( 'border-%s-width: %s;', $side, $border['width'] ); - } - - if ( - isset( $border['style'] ) && - null !== $border['style'] && - ! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'style' ) - ) { - $styles[] = sprintf( 'border-%s-style: %s;', $side, $border['style'] ); - } - - $border_color = _wp_array_get( $border, array( 'color' ), null ); - - if ( - $border_color && - ! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'color' ) - ) { - $has_color_preset = strpos( $border_color, 'var:preset|color|' ) !== false; - if ( $has_color_preset ) { - $named_color_slug = substr( $border_color, strrpos( $border_color, '|' ) + 1 ); - $styles [] = sprintf( 'border-%s-color: var(--wp--preset--color--%s);', $side, $named_color_slug ); - } else { - $styles [] = sprintf( 'border-%s-color: %s;', $side, $border['color'] ); - } - } - - return $styles; -} - /** * Checks whether the current block type supports the border feature requested. * diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index db93e2500e5396..051464d028f918 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -34,92 +34,183 @@ class WP_Style_Engine { * Style definitions that contain the instructions to * parse/output valid Gutenberg styles from a block's attributes. * For every style definition, the follow properties are valid: - * - classnames => an array of classnames to be returned for block styles. The key is a classname or pattern. + * - classnames => (array) an array of classnames to be returned for block styles. The key is a classname or pattern. * A value of `true` means the classname should be applied always. Otherwise, a valid CSS property (string) * to match the incoming value, e.g., "color" to match var:preset|color|somePresetSlug. - * - css_vars => an array of key value pairs used to generate CSS var values. The key is a CSS var pattern, whose `$slug` fragment will be replaced with a preset slug. + * - css_vars => (array) an array of key value pairs used to generate CSS var values. The key is a CSS var pattern, whose `$slug` fragment will be replaced with a preset slug. * The value should be a valid CSS property (string) to match the incoming value, e.g., "color" to match var:preset|color|somePresetSlug. - * - property_key => the key that represents a valid CSS property, e.g., "margin" or "border". - * - path => a path that accesses the corresponding style value in the block style object. + * - 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. */ const BLOCK_STYLE_DEFINITIONS_METADATA = array( 'color' => array( 'text' => array( - 'property_key' => 'color', - 'path' => array( 'color', 'text' ), - 'css_vars' => array( + 'property_keys' => array( + 'default' => 'color', + ), + 'path' => array( 'color', 'text' ), + 'css_vars' => array( '--wp--preset--color--$slug' => 'color', ), - 'classnames' => array( - 'has-text-color' => true, - 'has-%s-color' => 'color', + 'classnames' => array( + 'has-text-color' => true, + 'has-$slug-color' => 'color', ), ), 'background' => array( - 'property_key' => 'background-color', - 'path' => array( 'color', 'background' ), - 'classnames' => array( - 'has-background' => true, - 'has-%s-background-color' => 'color', + 'property_keys' => array( + 'default' => 'background-color', + ), + 'path' => array( 'color', 'background' ), + 'classnames' => array( + 'has-background' => true, + 'has-$slug-background-color' => 'color', ), ), 'gradient' => array( - 'property_key' => 'background', - 'path' => array( 'color', 'gradient' ), - 'classnames' => array( - 'has-background' => true, - 'has-%s-gradient-background' => 'gradient', + 'property_keys' => array( + 'default' => 'background', + ), + 'path' => array( 'color', 'gradient' ), + 'classnames' => array( + 'has-background' => true, + 'has-$slug-gradient-background' => 'gradient', + ), + ), + ), + 'border' => array( + 'color' => array( + 'property_keys' => array( + 'default' => 'border-color', + 'individual' => 'border-%s-color', + ), + 'path' => array( 'border', 'color' ), + 'classnames' => array( + 'has-border-color' => true, + 'has-$slug-border-color' => 'color', + ), + ), + 'radius' => array( + 'property_keys' => array( + 'default' => 'border-radius', + 'individual' => 'border-%s-radius', + ), + 'path' => array( 'border', 'radius' ), + ), + 'style' => array( + 'property_keys' => array( + 'default' => 'border-style', + 'individual' => 'border-%s-style', + ), + 'path' => array( 'border', 'style' ), + ), + 'width' => array( + 'property_keys' => array( + 'default' => 'border-width', + 'individual' => 'border-%s-width', + ), + 'path' => array( 'border', 'width' ), + ), + 'top' => array( + 'value_func' => 'static::get_css_individual_property_rules', + 'path' => array( 'border', 'top' ), + 'css_vars' => array( + 'color' => '--wp--preset--color--$slug', + ), + ), + 'right' => array( + 'value_func' => 'static::get_css_individual_property_rules', + 'path' => array( 'border', 'right' ), + 'css_vars' => array( + 'color' => '--wp--preset--color--$slug', + ), + ), + 'bottom' => array( + 'value_func' => 'static::get_css_individual_property_rules', + 'path' => array( 'border', 'bottom' ), + 'css_vars' => array( + 'color' => '--wp--preset--color--$slug', + ), + ), + 'left' => array( + 'value_func' => 'static::get_css_individual_property_rules', + 'path' => array( 'border', 'left' ), + 'css_vars' => array( + 'color' => '--wp--preset--color--$slug', ), ), ), 'spacing' => array( 'padding' => array( - 'property_key' => 'padding', - 'path' => array( 'spacing', 'padding' ), + 'property_keys' => array( + 'default' => 'padding', + 'individual' => 'padding-%s', + ), + 'path' => array( 'spacing', 'padding' ), ), 'margin' => array( - 'property_key' => 'margin', - 'path' => array( 'spacing', 'margin' ), + 'property_keys' => array( + 'default' => 'margin', + 'individual' => 'margin-%s', + ), + 'path' => array( 'spacing', 'margin' ), ), ), 'typography' => array( 'fontSize' => array( - 'property_key' => 'font-size', - 'path' => array( 'typography', 'fontSize' ), - 'classnames' => array( - 'has-%s-font-size' => 'font-size', + 'property_keys' => array( + 'default' => 'font-size', + ), + 'path' => array( 'typography', 'fontSize' ), + 'classnames' => array( + 'has-$slug-font-size' => 'font-size', ), ), 'fontFamily' => array( - 'property_key' => 'font-family', - 'path' => array( 'typography', 'fontFamily' ), - 'classnames' => array( - 'has-%s-font-family' => 'font-family', + 'property_keys' => array( + 'default' => 'font-family', + ), + 'path' => array( 'typography', 'fontFamily' ), + 'classnames' => array( + 'has-$slug-font-family' => 'font-family', ), ), 'fontStyle' => array( - 'property_key' => 'font-style', - 'path' => array( 'typography', 'fontStyle' ), + 'property_keys' => array( + 'default' => 'font-style', + ), + 'path' => array( 'typography', 'fontStyle' ), ), 'fontWeight' => array( - 'property_key' => 'font-weight', - 'path' => array( 'typography', 'fontWeight' ), + 'property_keys' => array( + 'default' => 'font-weight', + ), + 'path' => array( 'typography', 'fontWeight' ), ), 'lineHeight' => array( - 'property_key' => 'line-height', - 'path' => array( 'typography', 'lineHeight' ), + 'property_keys' => array( + 'default' => 'line-height', + ), + 'path' => array( 'typography', 'lineHeight' ), ), 'textDecoration' => array( - 'property_key' => 'text-decoration', - 'path' => array( 'typography', 'textDecoration' ), + 'property_keys' => array( + 'default' => 'text-decoration', + ), + 'path' => array( 'typography', 'textDecoration' ), ), 'textTransform' => array( - 'property_key' => 'text-transform', - 'path' => array( 'typography', 'textTransform' ), + 'property_keys' => array( + 'default' => 'text-transform', + ), + 'path' => array( 'typography', 'textTransform' ), ), 'letterSpacing' => array( - 'property_key' => 'letter-spacing', - 'path' => array( 'typography', 'letterSpacing' ), + 'property_keys' => array( + 'default' => 'letter-spacing', + ), + 'path' => array( 'typography', 'letterSpacing' ), ), ), ); @@ -202,7 +293,7 @@ protected static function get_classnames( $style_value, $style_definition ) { // One day, if there are no stored schemata, we could allow custom patterns or // generate classnames based on other properties // such as a path or a value or a prefix passed in options. - $classnames[] = sprintf( $classname, $slug ); + $classnames[] = strtr( $classname, array( '$slug' => $slug ) ); } } } @@ -220,8 +311,16 @@ protected static function get_classnames( $style_value, $style_definition ) { * @return array An array of CSS rules. */ protected static function get_css( $style_value, $style_definition, $should_return_css_vars ) { - $rules = array(); - $style_property = $style_definition['property_key']; + $rules = array(); + + if ( + isset( $style_definition['value_func'] ) && + is_callable( $style_definition['value_func'] ) + ) { + return call_user_func( $style_definition['value_func'], $style_value, $style_definition ); + } + + $style_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. @@ -230,11 +329,11 @@ 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_property ] = "var($css_var)"; + $rules[ $style_properties['default'] ] = "var($css_var)"; } } } @@ -246,10 +345,11 @@ 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 ) { - $rules[ "$style_property-$key" ] = $value; + $individual_property = sprintf( $style_properties['individual'], _wp_to_kebab_case( $key ) ); + $rules[ $individual_property ] = $value; } } else { - $rules[ $style_property ] = $style_value; + $rules[ $style_properties['default'] ] = $style_value; } return $rules; @@ -280,12 +380,11 @@ public function generate( $block_styles, $options ) { $should_return_css_vars = isset( $options['css_vars'] ) && true === $options['css_vars']; // Collect CSS and classnames. - foreach ( self::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group ) { - if ( ! $definition_group ) { + foreach ( self::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group_key => $definition_group_style ) { + if ( empty( $block_styles[ $definition_group_key ] ) ) { continue; } - - foreach ( $definition_group as $style_definition ) { + foreach ( $definition_group_style as $style_definition ) { $style_value = _wp_array_get( $block_styles, $style_definition['path'], null ); if ( ! static::is_valid_style_value( $style_value ) ) { @@ -332,6 +431,58 @@ public function generate( $block_styles, $options ) { return $styles_output; } + + + /** + * Style value parser that returns a CSS ruleset of style properties for style definition groups + * that have keys representing individual style properties, otherwise known as longhand CSS properties. + * e.g., "$style_property-$individua_feature: $value;", which could represent the following: + * "border-{top|right|bottom|left}-{color|width|style}: {value};" or, + * "border-image-{outset|source|width|repeat|slice}: {value};" + * + * @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. + */ + protected static function get_css_individual_property_rules( $style_value, $individual_property_definition ) { + $rules = array(); + + if ( ! is_array( $style_value ) || empty( $style_value ) || empty( $individual_property_definition['path'] ) ) { + return $rules; + } + + // The first item in $individual_property_definition['path'] array tells us the style property, e.g., "border". + // We use this to get a corresponding CSS style definition such as "color" or "width" from the same group. + // The second item in $individual_property_definition['path'] array refers to the individual property marker, e.g., "top". + $definition_group_key = $individual_property_definition['path'][0]; + $individual_property_key = $individual_property_definition['path'][1]; + + foreach ( $style_value as $css_property => $value ) { + if ( empty( $value ) ) { + continue; + } + + // Build a path to the individual rules in definitions. + $style_definition_path = array( $definition_group_key, $css_property ); + $style_definition = _wp_array_get( self::BLOCK_STYLE_DEFINITIONS_METADATA, $style_definition_path, null ); + + if ( $style_definition && isset( $style_definition['property_keys']['individual'] ) ) { + // Set a CSS var if there is a valid preset value. + $slug = isset( $individual_property_definition['css_vars'][ $css_property ] ) ? static::get_slug_from_preset_value( $value, $css_property ) : null; + if ( $slug ) { + $css_var = strtr( + $individual_property_definition['css_vars'][ $css_property ], + array( '$slug' => $slug ) + ); + $value = "var($css_var)"; + } + $individual_css_property = sprintf( $style_definition['property_keys']['individual'], $individual_property_key ); + $rules[ $individual_css_property ] = $value; + } + } + return $rules; + } } /** @@ -340,6 +491,11 @@ public function generate( $block_styles, $options ) { * Returns an CSS ruleset. * Styles are bundled based on the instructions in BLOCK_STYLE_DEFINITIONS_METADATA. * + * Example usage: + * + * $styles = wp_style_engine_generate( array( 'color' => array( 'text' => '#cccccc' ) ) ); + * // Returns `'color: #cccccc'`. + * * @access public * * @param array $block_styles An array of styles from a block's attributes. diff --git a/packages/style-engine/phpunit/class-wp-style-engine-test.php b/packages/style-engine/phpunit/class-wp-style-engine-test.php index c7b436d6c6e026..e8274e85425fa3 100644 --- a/packages/style-engine/phpunit/class-wp-style-engine-test.php +++ b/packages/style-engine/phpunit/class-wp-style-engine-test.php @@ -76,11 +76,16 @@ public function data_generate_styles_fixtures() { 'margin' => '111px', 'padding' => '0', ), + 'border' => array( + 'color' => 'var:preset|color|cool-caramel', + 'width' => '2rem', + 'style' => 'dotted', + ), ), 'options' => array(), 'expected_output' => array( - 'css' => 'padding: 0; margin: 111px;', - 'classnames' => 'has-text-color has-texas-flood-color', + 'css' => 'border-style: dotted; border-width: 2rem; padding: 0; margin: 111px;', + 'classnames' => 'has-text-color has-texas-flood-color has-border-color has-cool-caramel-border-color', ), ), @@ -100,10 +105,18 @@ public function data_generate_styles_fixtures() { 'right' => '10em', ), ), + 'border' => array( + 'radius' => array( + 'topLeft' => '99px', + 'topRight' => '98px', + 'bottomLeft' => '97px', + 'bottomRight' => '96px', + ), + ), ), 'options' => null, 'expected_output' => array( - 'css' => 'padding-top: 42px; padding-left: 2%; padding-bottom: 44px; padding-right: 5rem; margin-top: 12rem; margin-left: 2vh; margin-bottom: 2px; margin-right: 10em;', + 'css' => 'border-top-left-radius: 99px; border-top-right-radius: 98px; border-bottom-left-radius: 97px; border-bottom-right-radius: 96px; padding-top: 42px; padding-left: 2%; padding-bottom: 44px; padding-right: 5rem; margin-top: 12rem; margin-left: 2vh; margin-bottom: 2px; margin-right: 10em;', ), ), @@ -247,6 +260,66 @@ public function data_generate_styles_fixtures() { 'options' => array(), 'expected_output' => array(), ), + + 'inline_valid_box_model_style_with_sides' => array( + 'block_styles' => array( + 'border' => array( + 'top' => array( + 'color' => '#fe1', + 'width' => '1.5rem', + 'style' => 'dashed', + ), + 'right' => array( + 'color' => '#fe2', + 'width' => '1.4rem', + 'style' => 'solid', + ), + 'bottom' => array( + 'color' => '#fe3', + 'width' => '1.3rem', + ), + 'left' => array( + 'color' => 'var:preset|color|swampy-yellow', + 'width' => '0.5rem', + 'style' => 'dotted', + ), + ), + ), + 'options' => array(), + 'expected_output' => array( + 'css' => 'border-top-color: #fe1; border-top-width: 1.5rem; border-top-style: dashed; border-right-color: #fe2; border-right-width: 1.4rem; border-right-style: solid; border-bottom-color: #fe3; border-bottom-width: 1.3rem; border-left-color: var(--wp--preset--color--swampy-yellow); border-left-width: 0.5rem; border-left-style: dotted;', + ), + ), + + 'inline_invalid_box_model_style_with_sides' => array( + 'block_styles' => array( + 'border' => array( + 'top' => array( + 'top' => '#fe1', + 'right' => '1.5rem', + 'cheese' => 'dashed', + ), + 'right' => array( + 'right' => '#fe2', + 'top' => '1.4rem', + 'bacon' => 'solid', + ), + 'bottom' => array( + 'color' => 'var:preset|color|terrible-lizard', + 'bottom' => '1.3rem', + ), + 'left' => array( + 'left' => null, + 'width' => null, + 'top' => 'dotted', + ), + ), + ), + 'options' => array(), + 'expected_output' => array( + 'css' => 'border-bottom-color: var(--wp--preset--color--terrible-lizard);', + ), + ), ); } } diff --git a/phpunit/block-supports/border-test.php b/phpunit/block-supports/border-test.php index 3ec9bbe4f53874..b139f83452a0a3 100644 --- a/phpunit/block-supports/border-test.php +++ b/phpunit/block-supports/border-test.php @@ -237,7 +237,7 @@ function test_flat_border_with_custom_color() { $actual = gutenberg_apply_border_support( $block_type, $block_attrs ); $expected = array( 'class' => 'has-border-color', - 'style' => 'border-style: dashed; border-width: 2px; border-color: #72aee6;', + 'style' => 'border-color: #72aee6; border-style: dashed; border-width: 2px;', ); $this->assertSame( $expected, $actual ); @@ -282,7 +282,7 @@ function test_split_borders_with_custom_colors() { ); $actual = gutenberg_apply_border_support( $block_type, $block_attrs ); $expected = array( - 'style' => 'border-top-width: 2px; border-top-style: dashed; border-top-color: #72aee6; border-right-width: 0.25rem; border-right-style: dotted; border-right-color: #e65054; border-bottom-width: 0.5em; border-bottom-style: solid; border-bottom-color: #007017; border-left-width: 1px; border-left-style: solid; border-left-color: #f6f7f7;', + 'style' => 'border-top-width: 2px; border-top-color: #72aee6; border-top-style: dashed; border-right-width: 0.25rem; border-right-color: #e65054; border-right-style: dotted; border-bottom-width: 0.5em; border-bottom-color: #007017; border-bottom-style: solid; border-left-width: 1px; border-left-color: #f6f7f7; border-left-style: solid;', ); $this->assertSame( $expected, $actual ); @@ -409,7 +409,7 @@ function test_partial_split_borders() { ); $actual = gutenberg_apply_border_support( $block_type, $block_attrs ); $expected = array( - 'style' => 'border-top-width: 2px; border-top-style: dashed; border-top-color: #72aee6; border-right-width: 0.25rem; border-right-color: #e65054; border-left-style: solid;', + 'style' => 'border-top-width: 2px; border-top-color: #72aee6; border-top-style: dashed; border-right-width: 0.25rem; border-right-color: #e65054; border-left-style: solid;', ); $this->assertSame( $expected, $actual ); @@ -454,7 +454,7 @@ function test_split_borders_with_named_colors() { ); $actual = gutenberg_apply_border_support( $block_type, $block_attrs ); $expected = array( - 'style' => 'border-top-width: 2px; border-top-style: dashed; border-top-color: var(--wp--preset--color--red); border-right-width: 0.25rem; border-right-style: dotted; border-right-color: var(--wp--preset--color--green); border-bottom-width: 0.5em; border-bottom-style: solid; border-bottom-color: var(--wp--preset--color--blue); border-left-width: 1px; border-left-style: solid; border-left-color: var(--wp--preset--color--yellow);', + 'style' => 'border-top-width: 2px; border-top-color: var(--wp--preset--color--red); border-top-style: dashed; border-right-width: 0.25rem; border-right-color: var(--wp--preset--color--green); border-right-style: dotted; border-bottom-width: 0.5em; border-bottom-color: var(--wp--preset--color--blue); border-bottom-style: solid; border-left-width: 1px; border-left-color: var(--wp--preset--color--yellow); border-left-style: solid;', ); $this->assertSame( $expected, $actual ); From dc1783808efddce9250dca8c9b2c66c3587dfcbf Mon Sep 17 00:00:00 2001 From: ramonjd Date: Thu, 2 Jun 2022 10:59:42 +1000 Subject: [PATCH 2/4] Update docs and comments --- packages/style-engine/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/style-engine/README.md b/packages/style-engine/README.md index 612097cc497350..b414a4bc5370f8 100644 --- a/packages/style-engine/README.md +++ b/packages/style-engine/README.md @@ -2,7 +2,7 @@ The Style Engine powering global styles and block customizations. -## Installation +## Installation (JS only) Install the module @@ -22,9 +22,9 @@ Currently it's not a package that generates a wp.styleEngine global because it's - 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. -- Support generating styles in the backend (block supports and theme.json stylesheet). -- Refactor all block styles to use the style engine server side. +- 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 14caddd791047508088ca2c4c1207fa8e1c5dfad Mon Sep 17 00:00:00 2001 From: ramonjd Date: Fri, 3 Jun 2022 15:55:24 +1000 Subject: [PATCH 3/4] The linter strikes again. Be gone, thou flinty, fermented scallion! --- packages/style-engine/class-wp-style-engine.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index 051464d028f918..4c919ddaf59770 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -54,8 +54,8 @@ class WP_Style_Engine { '--wp--preset--color--$slug' => 'color', ), 'classnames' => array( - 'has-text-color' => true, - 'has-$slug-color' => 'color', + 'has-text-color' => true, + 'has-$slug-color' => 'color', ), ), 'background' => array( From 27803741d6951168787ecb5e47f8deb366801a42 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Wed, 8 Jun 2022 16:31:22 +1000 Subject: [PATCH 4/4] Addressing nitpickers :D --- packages/style-engine/class-wp-style-engine.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index 4c919ddaf59770..a1961241047213 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -436,7 +436,7 @@ public function generate( $block_styles, $options ) { /** * Style value parser that returns a CSS ruleset of style properties for style definition groups * that have keys representing individual style properties, otherwise known as longhand CSS properties. - * e.g., "$style_property-$individua_feature: $value;", which could represent the following: + * e.g., "$style_property-$individual_feature: $value;", which could represent the following: * "border-{top|right|bottom|left}-{color|width|style}: {value};" or, * "border-image-{outset|source|width|repeat|slice}: {value};" *