From 443dfc85cea2b4f4a7f22676f6d53ade8ff24c6f Mon Sep 17 00:00:00 2001 From: ramonjd Date: Wed, 23 Mar 2022 10:34:14 +1100 Subject: [PATCH] Rename public method to `generate` to reflect current frontend API Add optional options array Explicitly tell `generate()` to return styles so we can open it up to further functionality Update tests --- lib/block-supports/spacing.php | 14 +- .../class-wp-style-engine-gutenberg.php | 49 +++-- .../class-wp-style-engine-gutenberg-test.php | 172 ++++++++++++++---- 3 files changed, 180 insertions(+), 55 deletions(-) diff --git a/lib/block-supports/spacing.php b/lib/block-supports/spacing.php index 69a65516842c62..b2c8d47a4d224c 100644 --- a/lib/block-supports/spacing.php +++ b/lib/block-supports/spacing.php @@ -51,9 +51,12 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) { $style_engine = WP_Style_Engine_Gutenberg::get_instance(); if ( $has_padding_support ) { - $padding_styles = $style_engine->get_inline_css_from_block_styles( + $padding_styles = $style_engine->generate( $block_styles, - array( 'spacing', 'padding' ) + array( + 'path' => array( 'spacing', 'padding' ), + 'inline' => true, + ) ); if ( $padding_styles ) { @@ -63,9 +66,12 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) { if ( $has_margin_support ) { // As with padding above. - $margin_styles = $style_engine->get_inline_css_from_block_styles( + $margin_styles = $style_engine->generate( $block_styles, - array( 'spacing', 'margin' ) + array( + 'path' => array( 'spacing', 'margin' ), + 'inline' => true, + ) ); if ( $margin_styles ) { diff --git a/lib/style-engine/class-wp-style-engine-gutenberg.php b/lib/style-engine/class-wp-style-engine-gutenberg.php index 615315ae148971..0ab72dee1d884a 100644 --- a/lib/style-engine/class-wp-style-engine-gutenberg.php +++ b/lib/style-engine/class-wp-style-engine-gutenberg.php @@ -37,10 +37,12 @@ class WP_Style_Engine_Gutenberg { 'spacing' => array( 'padding' => array( 'property_key' => 'padding', + 'path' => array( 'spacing', 'padding' ), 'value_func' => 'gutenberg_get_style_engine_css_box_rules', ), 'margin' => array( 'property_key' => 'margin', + 'path' => array( 'spacing', 'margin' ), 'value_func' => 'gutenberg_get_style_engine_css_box_rules', ), ), @@ -85,32 +87,55 @@ protected function get_block_style_css_rules( $style_value, $path ) { } /** - * Returns an CSS ruleset destined to be inserted in an HTML `style` attribute. + * Returns an CSS ruleset. * 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 $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. + * @param array $options = array( + * 'inline' => (boolean) Whether to return inline CSS rules destined to be inserted in an HTML `style` attribute. + * 'path' => (array) Specify a block style to generate, otherwise it'll try all in BLOCK_STYLE_DEFINITIONS_METADATA. + * );. * * @return string A CSS ruleset formatted to be placed in an HTML `style` attribute. */ - public function get_inline_css_from_block_styles( $block_styles, $path ) { + public function generate( $block_styles, $options = array() ) { $output = ''; - if ( empty( $block_styles ) || empty( $path ) ) { + if ( empty( $block_styles ) ) { return $output; } - $style_value = _wp_array_get( $block_styles, $path, null ); + $rules = array(); - if ( empty( $style_value ) ) { - return $output; + // 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'] ) ); + // Otherwise build them all. + } else { + 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'] ) ); + } + } } - $rules = $this->get_block_style_css_rules( $style_value, $path ); - - foreach ( $rules as $rule => $value ) { - $output .= "{$rule}:{$value};"; + if ( ! empty( $rules ) ) { + // Generate inline style rules. + if ( isset( $options['inline'] ) && true === $options['inline'] ) { + foreach ( $rules as $rule => $value ) { + $output .= "{$rule}:{$value};"; + } + } } + return $output; } } diff --git a/phpunit/style-engine/class-wp-style-engine-gutenberg-test.php b/phpunit/style-engine/class-wp-style-engine-gutenberg-test.php index a2bbd83a9fe984..3c3a297c09fe3e 100644 --- a/phpunit/style-engine/class-wp-style-engine-gutenberg-test.php +++ b/phpunit/style-engine/class-wp-style-engine-gutenberg-test.php @@ -10,53 +10,147 @@ * Tests for registering, storing and generating styles. */ class WP_Style_Engine_Gutenberg_Test extends WP_UnitTestCase { - function test_returns_inline_styles_from_string() { - $style_engine = WP_Style_Engine_Gutenberg::get_instance(); - $block_styles = array( - 'spacing' => array( - 'padding' => '111px', - ), - ); - $padding_styles = $style_engine->get_inline_css_from_block_styles( + /** + * Tests various manifestations of the $block_styles argument. + * + * @dataProvider data_block_styles_fixtures + */ + function test_generate_css( $block_styles, $options, $expected_output ) { + $style_engine = WP_Style_Engine_Gutenberg::get_instance(); + $generated_styles = $style_engine->generate( $block_styles, - array( 'spacing', 'padding' ) + $options ); - $expected = 'padding:111px;'; - $this->assertSame( $expected, $padding_styles ); + $this->assertSame( $expected_output, $generated_styles ); } - function test_returns_inline_styles_from_box_rules() { - $style_engine = WP_Style_Engine_Gutenberg::get_instance(); - $block_styles = array( - 'spacing' => array( - 'padding' => array( - 'top' => '42px', - 'left' => '2%', - 'bottom' => '44px', - 'right' => '5rem', + /** + * Data provider. + * + * @return array + */ + public function data_block_styles_fixtures() { + return array( + 'default_return_value' => array( + 'block_styles' => array(), + 'options' => null, + 'expected_output' => '', + ), + + 'inline_invalid_block_styles_empty' => array( + 'block_styles' => array(), + 'options' => array( + 'path' => array( 'spacing', 'padding' ), + 'inline' => true, ), + 'expected_output' => '', + ), + + 'inline_invalid_block_styles_unknown_style' => array( + 'block_styles' => array( + 'pageBreakAfter' => 'verso', + ), + 'options' => array( + 'inline' => true, + ), + 'expected_output' => '', ), - ); - $padding_styles = $style_engine->get_inline_css_from_block_styles( - $block_styles, - array( 'spacing', 'padding' ) - ); - $expected = 'padding-top:42px;padding-left:2%;padding-bottom:44px;padding-right:5rem;'; - $this->assertSame( $expected, $padding_styles ); - } - function test_returns_empty_string_when_invalid_path_passed() { - $style_engine = WP_Style_Engine_Gutenberg::get_instance(); - $block_styles = array( - 'spacing' => array( - 'padding' => '111px', + 'inline_invalid_block_styles_unknown_definition' => array( + 'block_styles' => array( + 'pageBreakAfter' => 'verso', + ), + 'options' => array( + 'path' => array( 'pageBreakAfter', 'verso' ), + 'inline' => true, + ), + 'expected_output' => '', + ), + + 'inline_invalid_block_styles_unknown_property' => array( + 'block_styles' => array( + 'spacing' => array( + 'gavin' => '1000vw', + ), + ), + '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( + '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_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( + 'inline' => true, + ), + '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;', ), ); - $padding_styles = $style_engine->get_inline_css_from_block_styles( - $block_styles, - null - ); - $expected = ''; - $this->assertSame( $expected, $padding_styles ); } }