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

Theme JSON: Check for null values to cater for blockGap #59258

Merged
merged 3 commits into from
Feb 22, 2024
Merged

Theme JSON: Check for null values to cater for blockGap #59258

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c99de46
Check for null values to cater for blockGap
ramonjd Feb 22, 2024
48d279d
El LINTO DEL DIABLO
ramonjd Feb 22, 2024
ece1a4d
Added test to check resolution of spacing presets
ramonjd Feb 22, 2024
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
6 changes: 6 additions & 0 deletions lib/class-wp-theme-json-gutenberg.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3807,12 +3807,18 @@ private static function resolve_custom_css_format( $tree ) {
* Replaces CSS variables with their values in place.
*
* @since 6.3.0
* @since 6.6.0 Check for empty style before processing.
*
* @param array $styles CSS declarations to convert.
* @param array $values key => value pairs to use for replacement.
* @return array
*/
private static function convert_variables_to_value( $styles, $values ) {
foreach ( $styles as $key => $style ) {
if ( empty( $style ) ) {
continue;
}

if ( is_array( $style ) ) {
$styles[ $key ] = self::convert_variables_to_value( $style, $values );
continue;
Expand Down
34 changes: 34 additions & 0 deletions phpunit/class-wp-theme-json-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4954,13 +4954,22 @@ public function test_internal_syntax_is_converted_to_css_variables() {
$this->assertEquals( 'var(--wp--preset--color--s)', $styles['blocks']['core/quote']['variations']['plain']['color']['background'], 'Style variations: Assert the internal variables are convert to CSS custom variables.' );
}

/*
* Tests that the theme.json file is correctly parsed and the variables are resolved.
*
* @ticket 58588
*
* @covers WP_Theme_JSON_Gutenberg::resolve_variables
* @covers WP_Theme_JSON_Gutenberg::convert_variables_to_value
*/
public function test_resolve_variables() {
$primary_color = '#9DFF20';
$secondary_color = '#9DFF21';
$contrast_color = '#000';
$raw_color_value = '#efefef';
$large_font = '18px';
$small_font = '12px';
$spacing = 'clamp(1.5rem, 5vw, 2rem)';
$theme_json = new WP_Theme_JSON_Gutenberg(
array(
'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
Expand Down Expand Up @@ -5000,6 +5009,15 @@ public function test_resolve_variables() {
),
),
),
'spacing' => array(
'spacingSizes' => array(
array(
'size' => $spacing,
'name' => '100',
'slug' => '100',
),
),
),
),
'styles' => array(
'color' => array(
Expand Down Expand Up @@ -5062,6 +5080,16 @@ public function test_resolve_variables() {
),
),
),
'core/post-template' => array(
'spacing' => array(
'blockGap' => null,
),
),
'core/columns' => array(
'spacing' => array(
'blockGap' => 'var(--wp--preset--spacing--100)',
),
),
),
),
)
Expand Down Expand Up @@ -5105,6 +5133,12 @@ public function test_resolve_variables() {

$this->assertEquals( $small_font, $styles['blocks']['core/quote']['variations']['plain']['typography']['fontSize'], 'Block variations: font-size' );
$this->assertEquals( $secondary_color, $styles['blocks']['core/quote']['variations']['plain']['color']['background'], 'Block variations: color' );
/*
* WP_Theme_JSON_Gutenberg::resolve_variables may be called with merged data from WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()
* WP_Theme_JSON_Resolver_Gutenberg::get_block_data() sets blockGap for supported blocks to `null` if the value is not defined.
*/
$this->assertNull( $styles['blocks']['core/post-template']['spacing']['blockGap'], 'core/post-template block: blockGap' );
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i added this test to check the happy path, e.g., resolution of spacing presets when those presets are applied to blockGap values.

$this->assertEquals( $spacing, $styles['blocks']['core/columns']['spacing']['blockGap'], 'core/columns block: blockGap' );
}

/**
Expand Down
Loading