@wordpress/style-engine 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 0.10.0 (2022-06-15)
+
 ## 0.9.0 (2022-06-01)
 
 ## 0.8.0 (2022-05-18)

package/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

package/class-wp-style-engine.php

@@ -34,87 +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.
-	 *                    A value of `true` means the classname should be applied always. Otherwise a valid CSS property
-	 *                    to match the incoming value, e.g., "color" to match var:preset|color|somePresetName.
-	 *  - 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.
+	 *  - 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      => (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_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' ),
-				'classnames'   => array(
-					'has-text-color' => true,
-					'has-%s-color'   => 'color',
+				'property_keys' => array(
+					'default' => 'color',
+				),
+				'path'          => array( 'color', 'text' ),
+				'css_vars'      => array(
+					'--wp--preset--color--$slug' => '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' ),
 			),
 		),
 	);
@@ -137,8 +233,8 @@ class WP_Style_Engine {
 	/**
 	 * Extracts the slug in kebab case from a preset string, e.g., "heavenly-blue" from 'var:preset|color|heavenlyBlue'.
 	 *
-	 * @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.
+	 * @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.
 	 */
@@ -150,6 +246,25 @@ class WP_Style_Engine {
 		return null;
 	}
 
+	/**
+	 * Checks whether an incoming style value is valid.
+	 *
+	 * @param string? $style_value  A single css preset value.
+	 *
+	 * @return boolean
+	 */
+	protected static function is_valid_style_value( $style_value ) {
+		if ( '0' === $style_value ) {
+			return true;
+		}
+
+		if ( empty( $style_value ) ) {
+			return false;
+		}
+
+		return true;
+	}
+
 	/**
 	 * Returns classnames, and generates classname(s) from a CSS preset property pattern, e.g., 'var:preset|color|heavenly-blue'.
 	 *
@@ -160,6 +275,11 @@ class WP_Style_Engine {
 	 */
 	protected static function get_classnames( $style_value, $style_definition ) {
 		$classnames = array();
+
+		if ( empty( $style_value ) ) {
+			return $classnames;
+		}
+
 		if ( ! empty( $style_definition['classnames'] ) ) {
 			foreach ( $style_definition['classnames'] as $classname => $property_key ) {
 				if ( true === $property_key ) {
@@ -173,7 +293,7 @@ class WP_Style_Engine {
 					// 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 ) );
 				}
 			}
 		}
@@ -186,17 +306,53 @@ class WP_Style_Engine {
 	 *
 	 * @param array         $style_value      A single raw style value from the generate() $block_styles array.
 	 * @param array<string> $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.
 	 */
-	protected static function get_css( $style_value, $style_definition ) {
-		// Low-specificity check to see if the value is a CSS preset.
+	protected static function get_css( $style_value, $style_definition, $should_return_css_vars ) {
+		$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.
 		if ( is_string( $style_value ) && strpos( $style_value, 'var:' ) !== false ) {
-			return array();
+			if ( $should_return_css_vars && ! empty( $style_definition['css_vars'] ) ) {
+				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_pattern,
+							array( '$slug' => $slug )
+						);
+						$rules[ $style_properties['default'] ] = "var($css_var)";
+					}
+				}
+			}
+			return $rules;
+		}
+
+		// Default rule builder.
+		// If the input contains an array, assume box model-like properties
+		// 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;
+			}
+		} else {
+			$rules[ $style_properties['default'] ] = $style_value;
 		}
 
-		// If required in the future, style definitions could define a callable `value_func` to generate custom CSS rules.
-		return static::get_css_rules( $style_value, $style_definition['property_key'] );
+		return $rules;
 	}
 
 	/**
@@ -204,53 +360,71 @@ class WP_Style_Engine {
 	 * 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 $options array(
+	 *     'selector' => (string) When a selector is passed, `generate()` will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values.
+	 *     'css_vars' => (boolean) Whether to covert CSS values to var() values. If `true` the style engine will try to parse var:? values and output var( --wp--preset--* ) rules. Default is `false`.
+	 * );.
 	 *
 	 * @return array|null array(
-	 *     'styles'     => (string) A CSS ruleset formatted to be placed in an HTML `style` attribute or tag.
+	 *     'css'        => (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 ) {
+	public function generate( $block_styles, $options ) {
 		if ( empty( $block_styles ) || ! is_array( $block_styles ) ) {
 			return null;
 		}
 
-		$css_rules     = array();
-		$classnames    = array();
-		$styles_output = array();
+		$css_rules              = array();
+		$classnames             = array();
+		$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 ) {
-			foreach ( $definition_group as $style_definition ) {
+		foreach ( self::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group_key => $definition_group_style ) {
+			if ( empty( $block_styles[ $definition_group_key ] ) ) {
+				continue;
+			}
+			foreach ( $definition_group_style as $style_definition ) {
 				$style_value = _wp_array_get( $block_styles, $style_definition['path'], null );
 
-				if ( empty( $style_value ) ) {
+				if ( ! static::is_valid_style_value( $style_value ) ) {
 					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 ) );
+				$css_rules  = array_merge( $css_rules, static::get_css( $style_value, $style_definition, $should_return_css_vars ) );
 			}
 		}
 
 		// Build CSS rules output.
-		$css_output = '';
+		$selector      = isset( $options['selector'] ) ? $options['selector'] : null;
+		$css           = array();
+		$styles_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[] = $filtered_css . ';';
 				}
 			}
 		}
 
-		if ( ! empty( $css_output ) ) {
-			$styles_output['css'] = trim( $css_output );
+		// Return css, if any.
+		if ( ! empty( $css ) ) {
+			// 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;
+			} else {
+				$styles_output['css'] = implode( ' ', $css );
+			}
 		}
 
+		// Return classnames, if any.
 		if ( ! empty( $classnames ) ) {
 			$styles_output['classnames'] = implode( ' ', array_unique( $classnames ) );
 		}
@@ -258,32 +432,55 @@ class WP_Style_Engine {
 		return $styles_output;
 	}
 
+
 	/**
-	 * Default style value parser that returns a CSS ruleset.
-	 * If the input contains an array, it will be treated like a box model
-	 * for styles such as margins and padding
+	 * 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-$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};"
 	 *
-	 * @param string|array $style_value    A single raw Gutenberg style attributes value for a CSS property.
-	 * @param string       $style_property The CSS property for which we're creating a rule.
+	 * @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_rules( $style_value, $style_property ) {
+	protected static function get_css_individual_property_rules( $style_value, $individual_property_definition ) {
 		$rules = array();
 
-		if ( ! $style_value ) {
+		if ( ! is_array( $style_value ) || empty( $style_value ) || empty( $individual_property_definition['path'] ) ) {
 			return $rules;
 		}
 
-		// We assume box model-like properties.
-		if ( is_array( $style_value ) ) {
-			foreach ( $style_value as $key => $value ) {
-				$rules[ "$style_property-$key" ] = $value;
+		// 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;
 			}
-		} else {
-			$rules[ $style_property ] = $style_value;
-		}
 
+			// 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;
 	}
 }
@@ -294,17 +491,25 @@ class WP_Style_Engine {
  * 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.
+ * @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( $block_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( $block_styles, $options );
 	}
 	return null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/style-engine",
-	"version": "0.9.0",
+	"version": "0.10.0",
 	"description": "WordPress Style engine.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -34,5 +34,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a3e0b62091e8a8bdf5e2518e42d60d7098af48cc"
+	"gitHead": "48d5f37dfb52d2e77c8eeb662f9874cf141b8c6b"
 }

package/phpunit/class-wp-style-engine-test.php

@@ -17,8 +17,8 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 	 *
 	 * @dataProvider data_generate_styles_fixtures
 	 */
-	function test_generate_styles( $block_styles, $expected_output ) {
-		$generated_styles = wp_style_engine_generate( $block_styles );
+	function test_generate_styles( $block_styles, $options, $expected_output ) {
+		$generated_styles = wp_style_engine_generate( $block_styles, $options );
 		$this->assertSame( $expected_output, $generated_styles );
 	}
 
@@ -31,11 +31,13 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 		return array(
 			'default_return_value'                         => array(
 				'block_styles'    => array(),
+				'options'         => null,
 				'expected_output' => null,
 			),
 
 			'inline_invalid_block_styles_empty'            => array(
 				'block_styles'    => 'hello world!',
+				'options'         => null,
 				'expected_output' => null,
 			),
 
@@ -43,6 +45,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				'block_styles'    => array(
 					'pageBreakAfter' => 'verso',
 				),
+				'options'         => null,
 				'expected_output' => array(),
 			),
 
@@ -50,6 +53,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				'block_styles'    => array(
 					'pageBreakAfter' => 'verso',
 				),
+				'options'         => null,
 				'expected_output' => array(),
 			),
 
@@ -59,6 +63,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						'gap' => '1000vw',
 					),
 				),
+				'options'         => null,
 				'expected_output' => array(),
 			),
 
@@ -68,12 +73,19 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						'text' => 'var:preset|color|texas-flood',
 					),
 					'spacing' => array(
-						'margin' => '111px',
+						'margin'  => '111px',
+						'padding' => '0',
+					),
+					'border'  => array(
+						'color' => 'var:preset|color|cool-caramel',
+						'width' => '2rem',
+						'style' => 'dotted',
 					),
 				),
+				'options'         => array(),
 				'expected_output' => array(
-					'css'        => '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',
 				),
 			),
 
@@ -93,9 +105,18 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 							'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;',
 				),
 			),
 
@@ -112,10 +133,57 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						'letterSpacing'  => '2',
 					),
 				),
+				'options'         => null,
 				'expected_output' => array(
 					'css' => 'font-family: Roboto,Oxygen-Sans,Ubuntu,sans-serif; font-style: italic; font-weight: 800; line-height: 1.3; text-decoration: underline; text-transform: uppercase; letter-spacing: 2;',
 				),
 			),
+
+			'style_block_with_selector'                    => array(
+				'block_styles'    => array(
+					'spacing' => array(
+						'padding' => array(
+							'top'    => '42px',
+							'left'   => '2%',
+							'bottom' => '44px',
+							'right'  => '5rem',
+						),
+					),
+				),
+				'options'         => array( 'selector' => '.wp-selector > p' ),
+				'expected_output' => array(
+					'css' => '.wp-selector > p { padding-top: 42px; padding-left: 2%; padding-bottom: 44px; padding-right: 5rem; }',
+				),
+			),
+
+			'elements_with_css_var_value'                  => array(
+				'block_styles'    => array(
+					'color' => array(
+						'text' => 'var:preset|color|my-little-pony',
+					),
+				),
+				'options'         => array(
+					'selector' => '.wp-selector',
+					'css_vars' => true,
+				),
+				'expected_output' => array(
+					'css'        => '.wp-selector { color: var(--wp--preset--color--my-little-pony); }',
+					'classnames' => 'has-text-color has-my-little-pony-color',
+				),
+			),
+
+			'elements_with_invalid_preset_style_property'  => array(
+				'block_styles'    => array(
+					'color' => array(
+						'text' => 'var:preset|invalid_property|my-little-pony',
+					),
+				),
+				'options'         => array( 'selector' => '.wp-selector' ),
+				'expected_output' => array(
+					'classnames' => 'has-text-color',
+				),
+			),
+
 			'valid_classnames_deduped'                     => array(
 				'block_styles'    => array(
 					'color'      => array(
@@ -128,10 +196,25 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						'fontFamily' => 'var:preset|font-family|totally-awesome',
 					),
 				),
+				'options'         => array(),
 				'expected_output' => array(
 					'classnames' => 'has-text-color has-copper-socks-color has-background has-splendid-carrot-background-color has-like-wow-dude-gradient-background has-fantastic-font-size has-totally-awesome-font-family',
 				),
 			),
+
+			'valid_classnames_and_css_vars'                => array(
+				'block_styles'    => array(
+					'color' => array(
+						'text' => 'var:preset|color|teal-independents',
+					),
+				),
+				'options'         => array( 'css_vars' => true ),
+				'expected_output' => array(
+					'css'        => 'color: var(--wp--preset--color--teal-independents);',
+					'classnames' => 'has-text-color has-teal-independents-color',
+				),
+			),
+
 			'valid_classnames_with_null_style_values'      => array(
 				'block_styles'    => array(
 					'color' => array(
@@ -139,11 +222,13 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						'background' => null,
 					),
 				),
+				'options'         => array(),
 				'expected_output' => array(
 					'css'        => 'color: #fff;',
 					'classnames' => 'has-text-color',
 				),
 			),
+
 			'invalid_classnames_preset_value'              => array(
 				'block_styles'    => array(
 					'color'   => array(
@@ -155,10 +240,12 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						'padding' => 'var:preset|spacing|padding',
 					),
 				),
+				'options'         => array(),
 				'expected_output' => array(
 					'classnames' => 'has-text-color has-background',
 				),
 			),
+
 			'invalid_classnames_options'                   => array(
 				'block_styles'    => array(
 					'typography' => array(
@@ -170,8 +257,69 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						),
 					),
 				),
+				'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);',
+				),
+			),
 		);
 	}
 }