Skip to content

Commit

Permalink
Removing blockGap support at the root level after the changes in #40875…
Browse files Browse the repository at this point in the history 
…, which moves things to the layout implementation.
  • Loading branch information
@ramonjd
ramonjd committed Jul 12, 2022
1 parent 31ef9cb commit 5cc7119
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 52 deletions.
22 changes: 1 addition & 21 deletions packages/style-engine/class-wp-style-engine-css-declarations.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down Expand Up @@ -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 . '; ';
}
Expand Down
29 changes: 6 additions & 23 deletions packages/style-engine/class-wp-style-engine.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ class WP_Style_Engine {
),
),
'spacing' => array(
'padding' => array(
'padding' => array(
'property_keys' => array(
'default' => 'padding',
'individual' => 'padding-%s',
Expand All @@ -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',
Expand Down Expand Up @@ -374,16 +364,14 @@ 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.
if ( is_string( $style_value ) && strpos( $style_value, 'var:' ) !== false ) {
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;
Expand All @@ -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'] ) ) {
Expand All @@ -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;
Expand Down Expand Up @@ -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(
Expand Down
15 changes: 7 additions & 8 deletions packages/style-engine/phpunit/class-wp-style-engine-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%',
Expand All @@ -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(
Expand All @@ -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%',
),
),
Expand All @@ -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(
Expand Down

0 comments on commit 5cc7119

Please sign in to comment.