diff --git a/packages/style-engine/class-wp-style-engine-css-declarations.php b/packages/style-engine/class-wp-style-engine-css-declarations.php index 092b4e204647b..13ec0d5142bf5 100644 --- a/packages/style-engine/class-wp-style-engine-css-declarations.php +++ b/packages/style-engine/class-wp-style-engine-css-declarations.php @@ -40,22 +40,6 @@ public function __construct( $declarations = array() ) { $this->add_declarations( $declarations ); } - /** - * Checks a CSS property string to see whether it is a valid CSS custom property. - * In conjuction with static:sanitize_property it only allows `--wp--${slug}--{$kebab_case_css_property}`. - * - * This explicit checks is required because - * safecss_filter_attr_allow_css filter in safecss_filter_attr (kses.php) - * does not let through CSS custom variables. - * - * @param string $css_property The CSS property. - * - * @return boolean - */ - protected function is_valid_custom_property( $css_property ) { - return 1 === preg_match( '/^--wp--[a-z]+--[a-z0-9-]+$/', $css_property ); - } - /** * Add a single declaration. * @@ -115,11 +99,7 @@ public function get_declarations_string() { $declarations_output = ''; foreach ( $declarations_array as $property => $value ) { - $declaration = "{$property}: {$value}"; - if ( ! static::is_valid_custom_property( $property ) ) { - $declaration = safecss_filter_attr( $declaration ); - } - $filtered_declaration = esc_html( $declaration ); + $filtered_declaration = esc_html( safecss_filter_attr( "{$property}: {$value}" ) ); if ( $filtered_declaration ) { $declarations_output .= $filtered_declaration . '; '; } diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index 70bde74efe34f..9524fff044b35 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -142,7 +142,7 @@ class WP_Style_Engine { ), ), 'spacing' => array( - 'padding' => array( + 'padding' => array( 'property_keys' => array( 'default' => 'padding', 'individual' => 'padding-%s', @@ -152,17 +152,7 @@ class WP_Style_Engine { 'spacing' => '--wp--preset--spacing--$slug', ), ), - 'blockGap' => array( - 'property_keys' => array( - // @TODO 'grid-gap' has been deprecated in favor of 'gap'. - // See: https://developer.mozilla.org/en-US/docs/Web/CSS/gap. - // Update the white list in safecss_filter_attr (kses.php). - // See: https://core.trac.wordpress.org/ticket/56122 - 'default' => 'grid-gap', - ), - 'path' => array( 'spacing', 'blockGap' ), - ), - 'margin' => array( + 'margin' => array( 'property_keys' => array( 'default' => 'margin', 'individual' => 'margin-%s', @@ -374,7 +364,6 @@ protected static function get_css_declarations( $style_value, $style_definition, $css_declarations = array(); $style_property_keys = $style_definition['property_keys']; $should_skip_css_vars = isset( $options['convert_vars_to_classnames'] ) && true === $options['convert_vars_to_classnames']; - $custom_css_property = isset( $options['custom_properties'] ) && is_array( $options['custom_properties'] ) ? _wp_array_get( $options['custom_properties'], $style_definition['path'], null ) : null; // 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. @@ -382,8 +371,7 @@ protected static function get_css_declarations( $style_value, $style_definition, if ( ! $should_skip_css_vars && ! empty( $style_definition['css_vars'] ) ) { $css_var = static::get_css_var_value( $style_value, $style_definition['css_vars'] ); if ( $css_var ) { - $css_property = $custom_css_property ? $custom_css_property : $style_property_keys['default']; - $css_declarations[ $css_property ] = $css_var; + $css_declarations[ $style_property_keys['default'] ] = $css_var; } } return $css_declarations; @@ -397,8 +385,7 @@ protected static function get_css_declarations( $style_value, $style_definition, if ( is_string( $value ) && strpos( $value, 'var:' ) !== false && ! $should_skip_css_vars && ! empty( $style_definition['css_vars'] ) ) { $value = static::get_css_var_value( $value, $style_definition['css_vars'] ); } - $css_property = $custom_css_property ? $custom_css_property : $style_property_keys['individual']; - $individual_property = sprintf( $css_property, _wp_to_kebab_case( $key ) ); + $individual_property = sprintf( $style_property_keys['individual'], _wp_to_kebab_case( $key ) ); // If the style value contains a reference to another value in the tree. if ( isset( $value['ref'] ) ) { @@ -410,8 +397,7 @@ protected static function get_css_declarations( $style_value, $style_definition, } } } else { - $css_property = $custom_css_property ? $custom_css_property : $style_property_keys['default']; - $css_declarations[ $css_property ] = $style_value; + $css_declarations[ $style_property_keys['default'] ] = $style_value; } return $css_declarations; @@ -508,10 +494,7 @@ public function generate_global_styles( $global_styles, $options ) { // Layer 0: Root. $root_level_options_defaults = array( - 'selector' => 'body', - 'custom_properties' => array( - 'spacing' => array( 'blockGap' => '--wp--style--block-gap' ), - ), + 'selector' => 'body', ); $root_level_options = wp_parse_args( $options, $root_level_options_defaults ); $root_level_styles = $this->get_block_supports_styles( 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 25ccf7561813c..2cbe2ef62d449 100644 --- a/packages/style-engine/phpunit/class-wp-style-engine-test.php +++ b/packages/style-engine/phpunit/class-wp-style-engine-test.php @@ -488,8 +488,7 @@ public function data_generate_global_styles_fixtures() { 'background' => 'var(--wp--preset--color--background)', ), 'spacing' => array( - 'blockGap' => '2rem', - 'padding' => array( + 'padding' => array( 'top' => '10%', 'right' => '20%', 'bottom' => '10%', @@ -503,7 +502,7 @@ public function data_generate_global_styles_fixtures() { ), ), 'options' => null, - 'expected_output' => 'body { color: var(--wp--preset--color--foreground); background-color: var(--wp--preset--color--background); padding-top: 10%; padding-right: 20%; padding-bottom: 10%; padding-left: 20%; --wp--style--block-gap: 2rem; font-size: 1rem; font-family: var(--wp--preset--font-family--system-font); line-height: 2; }', + 'expected_output' => 'body { color: var(--wp--preset--color--foreground); background-color: var(--wp--preset--color--background); padding-top: 10%; padding-right: 20%; padding-bottom: 10%; padding-left: 20%; font-size: 1rem; font-family: var(--wp--preset--font-family--system-font); line-height: 2; }', ), 'compiles_with_ref_pointers' => array( 'global_styles' => array( @@ -512,11 +511,11 @@ public function data_generate_global_styles_fixtures() { 'text' => array( 'ref' => 'styles.color.background' ), ), 'spacing' => array( - 'blockGap' => '2rem', - 'padding' => array( - 'top' => array( 'ref' => 'styles.spacing.blockGap' ), + 'margin' => '2rem', + 'padding' => array( + 'top' => array( 'ref' => 'styles.spacing.margin' ), 'right' => '20%', - 'bottom' => array( 'ref' => 'styles.spacing.blockGap' ), + 'bottom' => array( 'ref' => 'styles.spacing.margin' ), 'left' => '20%', ), ), @@ -528,7 +527,7 @@ public function data_generate_global_styles_fixtures() { ), ), 'options' => null, - 'expected_output' => 'body { color: #ffffff; background-color: #ffffff; border-top-width: 20%; border-top-style: dashed; padding-top: 2rem; padding-right: 20%; padding-bottom: 2rem; padding-left: 20%; --wp--style--block-gap: 2rem; }', + 'expected_output' => 'body { color: #ffffff; background-color: #ffffff; border-top-width: 20%; border-top-style: dashed; padding-top: 2rem; padding-right: 20%; padding-bottom: 2rem; padding-left: 20%; margin: 2rem; }', ), 'ignores_other_top_level_keys' => array( 'global_styles' => array(