From 6edbfa4d3ad84c93cd02ea896e5f79e4ea3836be Mon Sep 17 00:00:00 2001 From: ramonjd Date: Thu, 7 Apr 2022 15:39:36 +1000 Subject: [PATCH] Removing generating styles based on an options path since we're not using it yet. Adding a new public function to generate_classnames. Updated tests. --- lib/block-supports/spacing.php | 2 +- lib/block-supports/typography.php | 6 +- .../style-engine/class-wp-style-engine.php | 92 ++++++++---------- .../phpunit/class-wp-style-engine-test.php | 95 ++++++++++--------- 4 files changed, 94 insertions(+), 101 deletions(-) diff --git a/lib/block-supports/spacing.php b/lib/block-supports/spacing.php index 86bb96598af446..d2530293d24537 100644 --- a/lib/block-supports/spacing.php +++ b/lib/block-supports/spacing.php @@ -52,7 +52,7 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) { return $attributes; } - $style_engine = WP_Style_Engine_Gutenberg::get_instance(); + $style_engine = gutenberg_get_style_engine(); $skip_padding = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'padding' ); $skip_margin = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'margin' ); $spacing_block_styles = array(); diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 8b930cd7bd28ca..63b841fb0558d8 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -175,7 +175,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { } } - $style_engine = WP_Style_Engine_Gutenberg::get_instance(); + $style_engine = gutenberg_get_style_engine(); $inline_styles = $style_engine->generate( array( 'typography' => $styles ), array( @@ -183,10 +183,10 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { ) ); - $classnames = $style_engine->generate( + $classnames = $style_engine->get_classnames( array( 'typography' => $classes ), array( - 'classnames' => true, + 'use_schema' => true, ) ); diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index e441d4dc1f9d74..44054d4291eb48 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -50,16 +50,16 @@ class WP_Style_Engine { ), 'typography' => array( 'fontSize' => array( - 'property_key' => 'font-size', - 'path' => array( 'typography', 'fontSize' ), - 'value_func' => 'static::get_css_rules', - 'classname_pattern' => 'has-%s-font-size', + 'property_key' => 'font-size', + 'path' => array( 'typography', 'fontSize' ), + 'value_func' => 'static::get_css_rules', + 'classname_schema' => 'has-%s-font-size', ), 'fontFamily' => array( - 'property_key' => 'font-family', - 'path' => array( 'typography', 'fontFamily' ), - 'value_func' => 'static::get_css_rules', - 'classname_pattern' => 'has-%s-font-family', + 'property_key' => 'font-family', + 'path' => array( 'typography', 'fontFamily' ), + 'value_func' => 'static::get_css_rules', + 'classname_schema' => 'has-%s-font-family', ), 'fontStyle' => array( 'property_key' => 'font-style', @@ -133,23 +133,42 @@ protected function get_block_style_css_rules( $style_value, $path ) { } /** - * Returns a classname built using the classname_pattern in BLOCK_STYLE_DEFINITIONS_METADATA. + * Returns a classname built using a provided schema. * - * @param string $classname_slug A single slug to be inserted into the classname pattern. - * @param array $path An array of strings representing a path to the style value. + * @param array $block_styles An array of styles from a block's attributes. + * Some of the values may contain slugs that need to be parsed using a schema. + * @param array $options = array( + * 'use_schema' => (boolean) Whether to use the internal classname schema in BLOCK_STYLE_DEFINITIONS_METADATA. + * );. * * @return string A CSS classname. */ - protected function get_block_classname( $classname_slug, $path ) { - $style_definition = _wp_array_get( static::BLOCK_STYLE_DEFINITIONS_METADATA, $path, null ); + public function get_classnames( $block_styles, $options = array() ) { + $output = ''; - if ( ! empty( $style_definition ) ) { - if ( isset( $style_definition['classname_pattern'] ) ) { - return sprintf( $style_definition['classname_pattern'], $classname_slug ); + if ( empty( $block_styles ) ) { + return $output; + } + + $classnames = array(); + $use_schema = isset( $options['use_schema'] ) ? $options['use_schema'] : false; + + foreach ( self::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group ) { + foreach ( $definition_group as $style_definition ) { + $classname_value = _wp_array_get( $block_styles, $style_definition['path'], null ); + + if ( empty( $classname_value ) ) { + continue; + } + + $style_definition = _wp_array_get( static::BLOCK_STYLE_DEFINITIONS_METADATA, $style_definition['path'], null ); + // If there is no stored schema we could generate classnames based on other properties such as the path or value or other prefix passed to options. + $schema = $use_schema ? $style_definition['classname_schema'] : ''; + $classnames[] = sprintf( $schema, $classname_value ); } } - return ''; + return implode( ' ', $classnames ); } /** @@ -171,42 +190,15 @@ public function generate( $block_styles, $options = array() ) { return $output; } - if ( isset( $options['classnames'] ) && true === $options['classnames'] ) { - - $classnames = array(); - foreach ( self::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group ) { - foreach ( $definition_group as $style_definition ) { - $classname_value = _wp_array_get( $block_styles, $style_definition['path'], null ); - - if ( empty( $classname_value ) ) { - continue; - } - - $classnames[] = $this->get_block_classname( $classname_value, $style_definition['path'] ); - } - } - return implode( ' ', $classnames ); - } - $rules = array(); - // If a path to a specific block style is defined, only return rules for that style. - if ( isset( $options['path'] ) && is_array( $options['path'] ) ) { - $style_value = _wp_array_get( $block_styles, $options['path'], null ); - if ( empty( $style_value ) ) { - return $output; - } - $rules = array_merge( $rules, $this->get_block_style_css_rules( $style_value, $options['path'] ) ); - } else { - // Otherwise build them all. - foreach ( self::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group ) { - foreach ( $definition_group as $style_definition ) { - $style_value = _wp_array_get( $block_styles, $style_definition['path'], null ); - if ( empty( $style_value ) ) { - continue; - } - $rules = array_merge( $rules, $this->get_block_style_css_rules( $style_value, $style_definition['path'] ) ); + foreach ( self::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group ) { + foreach ( $definition_group as $style_definition ) { + $style_value = _wp_array_get( $block_styles, $style_definition['path'], null ); + if ( empty( $style_value ) ) { + continue; } + $rules = array_merge( $rules, $this->get_block_style_css_rules( $style_value, $style_definition['path'] ) ); } } 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 9fd262d49ced73..be3c7630013d67 100644 --- a/packages/style-engine/phpunit/class-wp-style-engine-test.php +++ b/packages/style-engine/phpunit/class-wp-style-engine-test.php @@ -13,12 +13,12 @@ */ class WP_Style_Engine_Test extends WP_UnitTestCase { /** - * Tests various manifestations of the $block_styles argument. + * Tests generating styles based on various manifestations of the $block_styles argument. * - * @dataProvider data_block_styles_fixtures + * @dataProvider data_generate_css_fixtures */ function test_generate_css( $block_styles, $options, $expected_output ) { - $style_engine = WP_Style_Engine::get_instance(); + $style_engine = wp_get_style_engine(); $generated_styles = $style_engine->generate( $block_styles, $options @@ -31,7 +31,7 @@ function test_generate_css( $block_styles, $options, $expected_output ) { * * @return array */ - public function data_block_styles_fixtures() { + public function data_generate_css_fixtures() { return array( 'default_return_value' => array( 'block_styles' => array(), @@ -42,7 +42,6 @@ public function data_block_styles_fixtures() { 'inline_invalid_block_styles_empty' => array( 'block_styles' => array(), 'options' => array( - 'path' => array( 'spacing', 'padding' ), 'inline' => true, ), 'expected_output' => '', @@ -63,7 +62,6 @@ public function data_block_styles_fixtures() { 'pageBreakAfter' => 'verso', ), 'options' => array( - 'path' => array( 'pageBreakAfter', 'verso' ), 'inline' => true, ), 'expected_output' => '', @@ -76,62 +74,24 @@ public function data_block_styles_fixtures() { ), ), 'options' => array( - 'path' => array( 'spacing', 'padding' ), 'inline' => true, ), 'expected_output' => '', ), - 'inline_invalid_multiple_style_unknown_property' => array( - 'block_styles' => array( - 'spacing' => array( - 'gavin' => '1000vw', - ), - ), - 'options' => array( - 'inline' => true, - ), - 'expected_output' => '', - ), - - 'inline_valid_single_style_string' => array( + 'inline_valid_style_string' => array( 'block_styles' => array( 'spacing' => array( 'margin' => '111px', ), ), 'options' => array( - 'path' => array( 'spacing', 'margin' ), 'inline' => true, ), 'expected_output' => 'margin: 111px;', ), - 'inline_valid_single_style' => array( - 'block_styles' => array( - 'spacing' => array( - 'padding' => array( - 'top' => '42px', - 'left' => '2%', - 'bottom' => '44px', - 'right' => '5rem', - ), - 'margin' => array( - 'top' => '12rem', - 'left' => '2vh', - 'bottom' => '2px', - 'right' => '10em', - ), - ), - ), - 'options' => array( - 'path' => array( 'spacing', 'padding' ), - 'inline' => true, - ), - 'expected_output' => 'padding-top: 42px; padding-left: 2%; padding-bottom: 44px; padding-right: 5rem;', - ), - - 'inline_valid_multiple_spacing_style' => array( + 'inline_valid_box_model_style' => array( 'block_styles' => array( 'spacing' => array( 'padding' => array( @@ -154,7 +114,7 @@ public function data_block_styles_fixtures() { 'expected_output' => 'padding-top: 42px; padding-left: 2%; padding-bottom: 44px; padding-right: 5rem; margin-top: 12rem; margin-left: 2vh; margin-bottom: 2px; margin-right: 10em;', ), - 'inline_valid_multiple_typography_style' => array( + 'inline_valid_typography_style' => array( 'block_styles' => array( 'typography' => array( 'fontSize' => 'clamp(2em, 2vw, 4em)', @@ -174,4 +134,45 @@ public function data_block_styles_fixtures() { ), ); } + + /** + * Tests generating classnames based on various manifestations of the $block_styles argument. + * + * @dataProvider data_get_classnames_fixtures + */ + function test_get_classnames( $block_styles, $options, $expected_output ) { + $style_engine = wp_get_style_engine(); + $generated_styles = $style_engine->get_classnames( + $block_styles, + $options + ); + $this->assertSame( $expected_output, $generated_styles ); + } + + /** + * Data provider. + * + * @return array + */ + public function data_get_classnames_fixtures() { + return array( + 'default_return_value' => array( + 'block_styles' => array(), + 'options' => null, + 'expected_output' => '', + ), + 'valid_classnames_use_schema' => array( + 'block_styles' => array( + 'typography' => array( + 'fontSize' => 'fantastic', + 'fontFamily' => 'totally-awesome', + ), + ), + 'options' => array( + 'use_schema' => true, + ), + 'expected_output' => 'has-fantastic-font-size has-totally-awesome-font-family', + ), + ); + } }