diff --git a/lib/block-supports/elements.php b/lib/block-supports/elements.php index 056275b54a41c8..636534fe4928d1 100644 --- a/lib/block-supports/elements.php +++ b/lib/block-supports/elements.php @@ -107,7 +107,10 @@ function gutenberg_render_elements_support_styles( $pre_render, $block ) { if ( $link_block_styles ) { gutenberg_style_engine_generate( $link_block_styles, - array( 'selector' => ".$class_name a", 'enqueue_block_support_styles' => true ) + array( + 'selector' => ".$class_name a", + 'enqueue_block_support_styles' => true, + ) ); } diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index 378529c76ee89a..a1a807ec03ff5e 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -32,6 +32,8 @@ class WP_Style_Engine { /** * Registered block support styles. + * + * @var WP_Style_Engine|null */ private $registered_block_support_styles = array(); @@ -213,7 +215,7 @@ protected static function get_css( $style_value, $style_definition, $should_retu } // Before default processing, style definitions could define a callable `value_func` to generate custom CSS rules at this point. - $style_property = $style_definition[ 'property_key' ]; + $style_property = $style_definition['property_key']; // 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. @@ -222,7 +224,7 @@ 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 ) ); @@ -235,7 +237,7 @@ protected static function get_css( $style_value, $style_definition, $should_retu // Default rule builder. // If the input contains an array, ee assume box model-like properties - // for styles such as margins and padding + // for styles such as margins and padding. if ( is_array( $style_value ) ) { foreach ( $style_value as $key => $value ) { $rules[ "$style_property-$key" ] = $value; @@ -256,7 +258,7 @@ protected static function get_css( $style_value, $style_definition, $should_retu * 'enqueue_block_support_styles' => (boolean) Whether to register generated styles and output them together in a style block. A `selector` is required. * 'selector' => (string) When a selector is passed, `generate()` will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values. * 'classnames' => (boolean) Whether to return classnames. If `true` var:? values will be parsed to return classnames instead of CSS vars. Default is `false`. - * ); + * );. * * @return array|null array( * 'css' => (string) A CSS ruleset formatted to be placed in an HTML `style` attribute or tag. Default is a string of inline styles. @@ -291,7 +293,7 @@ public function generate( $block_styles, $options ) { $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_generate_classnames_from_presets ) ); + $css_rules = array_merge( $css_rules, static::get_css( $style_value, $style_definition, ! $should_generate_classnames_from_presets ) ); } } @@ -315,7 +317,7 @@ public function generate( $block_styles, $options ) { if ( $selector ) { $style_block = "$selector { "; $style_block .= implode( ' ', $css ); - $style_block .= " }"; + $style_block .= ' }'; $styles_output['css'] = $style_block; // Enqueue block support styles where there is a selector. @@ -325,7 +327,6 @@ public function generate( $block_styles, $options ) { } $this->registered_block_support_styles[ $selector ] = $css; } - } else { $styles_output['css'] = implode( ' ', $css ); } @@ -372,7 +373,6 @@ public function output_registered_block_support_styles() { * the render_block. * * @see gutenberg_enqueue_block_support_styles() - * */ private function enqueue_block_support_styles() { $action_hook_name = 'wp_footer'; 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 f6171ccbf71d5f..306066823cd758 100644 --- a/packages/style-engine/phpunit/class-wp-style-engine-test.php +++ b/packages/style-engine/phpunit/class-wp-style-engine-test.php @@ -31,13 +31,13 @@ public function data_generate_styles_fixtures() { return array( 'default_return_value' => array( 'block_styles' => array(), - 'options' => null, + 'options' => null, 'expected_output' => null, ), 'inline_invalid_block_styles_empty' => array( 'block_styles' => 'hello world!', - 'options' => null, + 'options' => null, 'expected_output' => null, ), @@ -45,7 +45,7 @@ public function data_generate_styles_fixtures() { 'block_styles' => array( 'pageBreakAfter' => 'verso', ), - 'options' => null, + 'options' => null, 'expected_output' => array(), ), @@ -53,7 +53,7 @@ public function data_generate_styles_fixtures() { 'block_styles' => array( 'pageBreakAfter' => 'verso', ), - 'options' => null, + 'options' => null, 'expected_output' => array(), ), @@ -63,7 +63,7 @@ public function data_generate_styles_fixtures() { 'gap' => '1000vw', ), ), - 'options' => null, + 'options' => null, 'expected_output' => array(), ), @@ -76,7 +76,7 @@ public function data_generate_styles_fixtures() { 'margin' => '111px', ), ), - 'options' => array( 'classnames' => true ), + 'options' => array( 'classnames' => true ), 'expected_output' => array( 'css' => 'margin: 111px;', 'classnames' => 'has-text-color has-texas-flood-color', @@ -100,7 +100,7 @@ public function data_generate_styles_fixtures() { ), ), ), - 'options' => null, + '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;', ), @@ -119,13 +119,13 @@ public function data_generate_styles_fixtures() { 'letterSpacing' => '2', ), ), - 'options' => null, + '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( + 'style_block_with_selector' => array( 'block_styles' => array( 'spacing' => array( 'padding' => array( @@ -136,31 +136,31 @@ public function data_generate_styles_fixtures() { ), ), ), - 'options' => array( 'selector' => '.wp-selector > p' ), + '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( + 'elements_with_css_var_value' => array( 'block_styles' => array( - 'color' => array( + 'color' => array( 'text' => 'var:preset|color|my-little-pony', ), ), - 'options' => array( 'selector' => '.wp-selector' ), + 'options' => array( 'selector' => '.wp-selector' ), 'expected_output' => array( 'css' => '.wp-selector { color: var(--wp--preset--color--my-little-pony); }', ), ), - 'elements_with_invalid_preset_style_property' => array( + 'elements_with_invalid_preset_style_property' => array( 'block_styles' => array( - 'color' => array( + 'color' => array( 'text' => 'var:preset|invalid_property|my-little-pony', ), ), - 'options' => array( 'selector' => '.wp-selector' ), + 'options' => array( 'selector' => '.wp-selector' ), 'expected_output' => array(), ), @@ -176,7 +176,7 @@ public function data_generate_styles_fixtures() { 'fontFamily' => 'var:preset|font-family|totally-awesome', ), ), - 'options' => array( 'classnames' => true ), + 'options' => array( 'classnames' => true ), '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', ), @@ -189,7 +189,7 @@ public function data_generate_styles_fixtures() { 'background' => null, ), ), - 'options' => array( 'classnames' => true ), + 'options' => array( 'classnames' => true ), 'expected_output' => array( 'css' => 'color: #fff;', 'classnames' => 'has-text-color', @@ -207,7 +207,7 @@ public function data_generate_styles_fixtures() { 'padding' => 'var:preset|spacing|padding', ), ), - 'options' => array( 'classnames' => true ), + 'options' => array( 'classnames' => true ), 'expected_output' => array( 'classnames' => 'has-text-color has-background', ), @@ -224,7 +224,7 @@ public function data_generate_styles_fixtures() { ), ), ), - 'options' => array( 'classnames' => true ), + 'options' => array( 'classnames' => true ), 'expected_output' => array(), ), );