Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Style engine: rename 'css_var' option property to 'convert_vars_to_classnames' #42113

Merged
merged 2 commits into from
Jul 4, 2022
Merged

Style engine: rename 'css_var' option property to 'convert_vars_to_classnames' #42113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4e48348
initial commit
ramonjd Jul 4, 2022
716917b
Didn't you know? "Trailing comma's (sic) are not allowed in function …
ramonjd Jul 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion lib/block-supports/border.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {

// Collect classes and styles.
$attributes = array();
$styles = gutenberg_style_engine_generate( array( 'border' => $border_block_styles ), array( 'css_vars' => true ) );
$styles = gutenberg_style_engine_generate( array( 'border' => $border_block_styles ) );

if ( ! empty( $styles['classnames'] ) ) {
$attributes['class'] = $styles['classnames'];
Expand Down
2 changes: 1 addition & 1 deletion lib/block-supports/colors.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ function gutenberg_apply_colors_support( $block_type, $block_attributes ) {
}

$attributes = array();
$styles = gutenberg_style_engine_generate( array( 'color' => $color_block_styles ) );
$styles = gutenberg_style_engine_generate( array( 'color' => $color_block_styles ), array( 'convert_vars_to_classnames' => true ) );

if ( ! empty( $styles['classnames'] ) ) {
$attributes['class'] = $styles['classnames'];
Expand Down
1 change: 0 additions & 1 deletion lib/block-supports/elements.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,6 @@ function gutenberg_render_elements_support_styles( $pre_render, $block ) {
$link_block_styles,
array(
'selector' => ".$class_name a",
'css_vars' => true,
)
);

Expand Down
5 changes: 1 addition & 4 deletions lib/block-supports/spacing.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,7 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) {
$spacing_block_styles = array();
$spacing_block_styles['padding'] = $has_padding_support && ! $skip_padding ? _wp_array_get( $block_styles, array( 'spacing', 'padding' ), null ) : null;
$spacing_block_styles['margin'] = $has_margin_support && ! $skip_margin ? _wp_array_get( $block_styles, array( 'spacing', 'margin' ), null ) : null;
$styles = gutenberg_style_engine_generate(
array( 'spacing' => $spacing_block_styles ),
array( 'css_vars' => true )
);
$styles = gutenberg_style_engine_generate( array( 'spacing' => $spacing_block_styles ) );

if ( ! empty( $styles['css'] ) ) {
$attributes['style'] = $styles['css'];
Expand Down
5 changes: 4 additions & 1 deletion lib/block-supports/typography.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,10 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
}

$attributes = array();
$styles = gutenberg_style_engine_generate( array( 'typography' => $typography_block_styles ) );
$styles = gutenberg_style_engine_generate(
array( 'typography' => $typography_block_styles ),
array( 'convert_vars_to_classnames' => true )
);

if ( ! empty( $styles['classnames'] ) ) {
$attributes['class'] = $styles['classnames'];
Expand Down
36 changes: 18 additions & 18 deletions packages/style-engine/class-wp-style-engine.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,18 +332,18 @@ protected static function get_classnames( $style_value, $style_definition ) {
/**
* Returns an array of CSS declarations based on valid block style values.
*
* @param array $style_value A single raw style value from the generate() $block_styles array.
* @param array<string> $style_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
* @param boolean $should_return_css_vars Whether to try to build and return CSS var values.
* @param array $style_value A single raw style value from the generate() $block_styles array.
* @param array<string> $style_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
* @param boolean $should_skip_css_vars Whether to skip compiling CSS var values.
*
* @return array An array of CSS definitions, e.g., array( "$property" => "$value" ).
*/
protected static function get_css_declarations( $style_value, $style_definition, $should_return_css_vars ) {
protected static function get_css_declarations( $style_value, $style_definition, $should_skip_css_vars = false ) {
if (
isset( $style_definition['value_func'] ) &&
is_callable( $style_definition['value_func'] )
) {
return call_user_func( $style_definition['value_func'], $style_value, $style_definition, $should_return_css_vars );
return call_user_func( $style_definition['value_func'], $style_value, $style_definition, $should_skip_css_vars );
}

$css_declarations = array();
Expand All @@ -352,7 +352,7 @@ protected static function get_css_declarations( $style_value, $style_definition,
// 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_return_css_vars && ! empty( $style_definition['css_vars'] ) ) {
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_declarations[ $style_property_keys['default'] ] = $css_var;
Expand All @@ -366,7 +366,7 @@ protected static function get_css_declarations( $style_value, $style_definition,
// for styles such as margins and padding.
if ( is_array( $style_value ) ) {
foreach ( $style_value as $key => $value ) {
if ( is_string( $value ) && strpos( $value, 'var:' ) !== false && $should_return_css_vars && ! empty( $style_definition['css_vars'] ) ) {
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'] );
}
$individual_property = sprintf( $style_property_keys['individual'], _wp_to_kebab_case( $key ) );
Expand All @@ -387,8 +387,8 @@ protected static function get_css_declarations( $style_value, $style_definition,
*
* @param array $block_styles An array of styles from a block's attributes.
* @param array $options array(
* 'selector' => (string) When a selector is passed, `generate()` will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values.
* 'css_vars' => (boolean) Whether to covert CSS values to var() values. If `true` the style engine will try to parse var:? values and output var( --wp--preset--* ) rules. Default is `false`.
* 'selector' => (string) When a selector is passed, `generate()` will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values.
* 'convert_vars_to_classnames' => (boolean) Whether to skip converting CSS var:? values to var( --wp--preset--* ) values. Default is `false`.
* );.
*
* @return array|null array(
Expand All @@ -401,12 +401,12 @@ public function generate( $block_styles, $options ) {
return null;
}

$css_declarations = array();
$classnames = array();
$should_return_css_vars = isset( $options['css_vars'] ) && true === $options['css_vars'];
$css_declarations = array();
$classnames = array();
$should_skip_css_vars = isset( $options['convert_vars_to_classnames'] ) && true === $options['convert_vars_to_classnames'];

// Collect CSS and classnames.
foreach ( self::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group_key => $definition_group_style ) {
foreach ( static::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group_key => $definition_group_style ) {
if ( empty( $block_styles[ $definition_group_key ] ) ) {
continue;
}
Expand All @@ -418,7 +418,7 @@ public function generate( $block_styles, $options ) {
}

$classnames = array_merge( $classnames, static::get_classnames( $style_value, $style_definition ) );
$css_declarations = array_merge( $css_declarations, static::get_css_declarations( $style_value, $style_definition, $should_return_css_vars ) );
$css_declarations = array_merge( $css_declarations, static::get_css_declarations( $style_value, $style_definition, $should_skip_css_vars ) );
}
}

Expand Down Expand Up @@ -470,11 +470,11 @@ public function generate( $block_styles, $options ) {
*
* @param array $style_value A single raw Gutenberg style attributes value for a CSS property.
* @param array $individual_property_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
* @param boolean $should_return_css_vars Whether to try to build and return CSS var values.
* @param boolean $should_skip_css_vars Whether to skip compiling CSS var values.
*
* @return array An array of CSS definitions, e.g., array( "$property" => "$value" ).
*/
protected static function get_individual_property_css_declarations( $style_value, $individual_property_definition, $should_return_css_vars ) {
protected static function get_individual_property_css_declarations( $style_value, $individual_property_definition, $should_skip_css_vars ) {
$css_declarations = array();

if ( ! is_array( $style_value ) || empty( $style_value ) || empty( $individual_property_definition['path'] ) ) {
Expand All @@ -494,11 +494,11 @@ protected static function get_individual_property_css_declarations( $style_value

// Build a path to the individual rules in definitions.
$style_definition_path = array( $definition_group_key, $css_property );
$style_definition = _wp_array_get( self::BLOCK_STYLE_DEFINITIONS_METADATA, $style_definition_path, null );
$style_definition = _wp_array_get( static::BLOCK_STYLE_DEFINITIONS_METADATA, $style_definition_path, null );

if ( $style_definition && isset( $style_definition['property_keys']['individual'] ) ) {
// Set a CSS var if there is a valid preset value.
if ( is_string( $value ) && strpos( $value, 'var:' ) !== false && $should_return_css_vars && ! empty( $individual_property_definition['css_vars'] ) ) {
if ( is_string( $value ) && strpos( $value, 'var:' ) !== false && ! $should_skip_css_vars && ! empty( $individual_property_definition['css_vars'] ) ) {
$value = static::get_css_var_value( $value, $individual_property_definition['css_vars'] );
}
$individual_css_property = sprintf( $style_definition['property_keys']['individual'], $individual_property_key );
Expand Down
19 changes: 9 additions & 10 deletions packages/style-engine/phpunit/class-wp-style-engine-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ public function data_generate_styles_fixtures() {
'style' => 'dotted',
),
),
'options' => array(),
'options' => array( 'convert_vars_to_classnames' => true ),
'expected_output' => array(
'css' => 'border-style: dotted; border-width: 2rem; padding: 0; margin: 111px;',
'classnames' => 'has-text-color has-texas-flood-color has-border-color has-cool-caramel-border-color',
Expand Down Expand Up @@ -164,7 +164,6 @@ public function data_generate_styles_fixtures() {
),
'options' => array(
'selector' => '.wp-selector',
'css_vars' => true,
),
'expected_output' => array(
'css' => '.wp-selector { color: var(--wp--preset--color--my-little-pony); }',
Expand Down Expand Up @@ -196,7 +195,7 @@ public function data_generate_styles_fixtures() {
'fontFamily' => 'var:preset|font-family|totally-awesome',
),
),
'options' => array(),
'options' => array( 'convert_vars_to_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',
),
Expand All @@ -208,7 +207,7 @@ public function data_generate_styles_fixtures() {
'text' => 'var:preset|color|teal-independents',
),
),
'options' => array( 'css_vars' => true ),
'options' => array(),
'expected_output' => array(
'css' => 'color: var(--wp--preset--color--teal-independents);',
'classnames' => 'has-text-color has-teal-independents-color',
Expand Down Expand Up @@ -240,7 +239,7 @@ public function data_generate_styles_fixtures() {
'padding' => 'var:preset|spacing|padding',
),
),
'options' => array(),
'options' => array( 'convert_vars_to_classnames' => true ),
'expected_output' => array(
'classnames' => 'has-text-color has-background',
),
Expand All @@ -253,7 +252,7 @@ public function data_generate_styles_fixtures() {
'padding' => 'var:preset|spacing|20',
),
),
'options' => array( 'css_vars' => true ),
'options' => array(),
'expected_output' => array(
'css' => 'padding: var(--wp--preset--spacing--20); margin: var(--wp--preset--spacing--10);',
),
Expand All @@ -276,7 +275,7 @@ public function data_generate_styles_fixtures() {
),
),
),
'options' => array( 'css_vars' => true ),
'options' => array(),
'expected_output' => array(
'css' => 'padding-left: var(--wp--preset--spacing--30); padding-right: var(--wp--preset--spacing--40); padding-top: 14px; padding-bottom: 14px; margin-left: var(--wp--preset--spacing--10); margin-right: var(--wp--preset--spacing--20); margin-top: 1rem; margin-bottom: 1rem;',
),
Expand All @@ -293,7 +292,7 @@ public function data_generate_styles_fixtures() {
),
),
),
'options' => array( 'css_vars' => true ),
'options' => array(),
'expected_output' => array(
'css' => 'margin-top: 1rem; margin-bottom: 1rem;',
),
Expand Down Expand Up @@ -338,7 +337,7 @@ public function data_generate_styles_fixtures() {
),
),
),
'options' => array( 'css_vars' => true ),
'options' => array(),
'expected_output' => array(
'css' => 'border-top-color: #fe1; border-top-width: 1.5rem; border-top-style: dashed; border-right-color: #fe2; border-right-width: 1.4rem; border-right-style: solid; border-bottom-color: #fe3; border-bottom-width: 1.3rem; border-left-color: var(--wp--preset--color--swampy-yellow); border-left-width: 0.5rem; border-left-style: dotted;',
),
Expand Down Expand Up @@ -368,7 +367,7 @@ public function data_generate_styles_fixtures() {
),
),
),
'options' => array( 'css_vars' => true ),
'options' => array(),
'expected_output' => array(
'css' => 'border-bottom-color: var(--wp--preset--color--terrible-lizard);',
),
Expand Down