Skip to content

Commit ccd529d

Browse files
samnajiansamnajian
authored
gutenberg_get_global_styles: resolve custom CSS format (#50366)
Co-authored-by: André <583546+oandregal@users.noreply.github.com> This PR addresses #49693 so the return value for `wp_get_global_styles` given the following theme.json dataset ``` "core/post-terms": { "typography": { "fontSize": "var(--wp--preset--font-size--small)" }, "color":{ "background": "var:preset|color|secondary" } } ``` is: ``` ( [typography] => Array( [fontSize] => var(--wp--preset--font-size--small) ) [color] => Array( [background] => var(--wp--preset--color--secondary) ) ) ```
1 parent 1db3d30 commit ccd529d

File tree

4 files changed

+148
-16
lines changed

4 files changed

+148
-16
lines changed

‎lib/class-wp-theme-json-gutenberg.php‎

Lines changed: 48 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -795,7 +795,7 @@ protected static function sanitize( $input, $valid_block_names, $valid_element_n
795795
if ( empty( $result ) ) {
796796
unset( $output[ $subtree ] );
797797
} else {
798-
$output[ $subtree ] = $result;
798+
$output[ $subtree ] = static::resolve_custom_css_format( $result );
799799
}
800800
}
801801

@@ -1989,20 +1989,6 @@ protected static function get_property_value( $styles, $path, $theme_json = null
19891989
return $value;
19901990
}
19911991

1992-
// Convert custom CSS properties.
1993-
$prefix = 'var:';
1994-
$prefix_len = strlen( $prefix );
1995-
$token_in = '|';
1996-
$token_out = '--';
1997-
if ( 0 === strncmp( $value, $prefix, $prefix_len ) ) {
1998-
$unwrapped_name = str_replace(
1999-
$token_in,
2000-
$token_out,
2001-
substr( $value, $prefix_len )
2002-
);
2003-
$value = "var(--wp--$unwrapped_name)";
2004-
}
2005-
20061992
return $value;
20071993
}
20081994

@@ -3578,4 +3564,51 @@ protected function get_feature_declarations_for_node( $metadata, &$node ) {
35783564

35793565
return $declarations;
35803566
}
3567+
3568+
/**
3569+
* This is used to convert the internal representation of variables to the CSS representation.
3570+
* For example, `var:preset|color|vivid-green-cyan` becomes `var(--wp--preset--color--vivid-green-cyan)`.
3571+
*
3572+
* @since 6.3.0
3573+
* @param string $value The variable such as var:preset|color|vivid-green-cyan to convert.
3574+
* @return string The converted variable.
3575+
*/
3576+
private static function convert_custom_properties( $value ) {
3577+
$prefix = 'var:';
3578+
$prefix_len = strlen( $prefix );
3579+
$token_in = '|';
3580+
$token_out = '--';
3581+
if ( 0 === strpos( $value, $prefix ) ) {
3582+
$unwrapped_name = str_replace(
3583+
$token_in,
3584+
$token_out,
3585+
substr( $value, $prefix_len )
3586+
);
3587+
$value = "var(--wp--$unwrapped_name)";
3588+
}
3589+
3590+
return $value;
3591+
}
3592+
3593+
/**
3594+
* Given a tree, converts the internal representation of variables to the CSS representation.
3595+
* It is recursive and modifies the input in-place.
3596+
*
3597+
* @since 6.3.0
3598+
* @param array $tree Input to process.
3599+
* @return array The modified $tree.
3600+
*/
3601+
private static function resolve_custom_css_format( $tree ) {
3602+
$prefix = 'var:';
3603+
3604+
foreach ( $tree as $key => $data ) {
3605+
if ( is_string( $data ) && 0 === strpos( $data, $prefix ) ) {
3606+
$tree[ $key ] = self::convert_custom_properties( $data );
3607+
} elseif ( is_array( $data ) ) {
3608+
$tree[ $key ] = self::resolve_custom_css_format( $data );
3609+
}
3610+
}
3611+
3612+
return $tree;
3613+
}
35813614
}

‎lib/compat/wordpress-6.3/get-global-styles-and-settings.php‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,3 +124,37 @@ function wp_get_block_css_selector( $block_type, $target = 'root', $fallback = f
124124
function gutenberg_get_remote_theme_patterns() {
125125
return WP_Theme_JSON_Resolver_Gutenberg::get_theme_data( array(), array( 'with_supports' => false ) )->get_patterns();
126126
}
127+
128+
/**
129+
* Gets the styles resulting of merging core, theme, and user data.
130+
*
131+
* @since 5.9.0
132+
* @since 6.3.0 the internal link format "var:preset|color|secondary" is resolved
133+
* to "var(--wp--preset--font-size--small)" so consumers don't have to.
134+
*
135+
* @param array $path Path to the specific style to retrieve. Optional.
136+
* If empty, will return all styles.
137+
* @param array $context {
138+
* Metadata to know where to retrieve the $path from. Optional.
139+
*
140+
* @type string $block_name Which block to retrieve the styles from.
141+
* If empty, it'll return the styles for the global context.
142+
* @type string $origin Which origin to take data from.
143+
* Valid values are 'all' (core, theme, and user) or 'base' (core and theme).
144+
* If empty or unknown, 'all' is used.
145+
* }
146+
* @return array The styles to retrieve.
147+
*/
148+
function gutenberg_get_global_styles( $path = array(), $context = array() ) {
149+
if ( ! empty( $context['block_name'] ) ) {
150+
$path = array_merge( array( 'blocks', $context['block_name'] ), $path );
151+
}
152+
153+
$origin = 'custom';
154+
if ( isset( $context['origin'] ) && 'base' === $context['origin'] ) {
155+
$origin = 'theme';
156+
}
157+
$styles = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( $origin )->get_raw_data()['styles'];
158+
159+
return _wp_array_get( $styles, $path, $styles );
160+
}

‎lib/experimental/block-editor-settings-mobile.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ function gutenberg_get_block_editor_settings_mobile( $settings ) {
2323
'mobile' === $_GET['context']
2424
) {
2525
if ( wp_theme_has_theme_json() ) {
26-
$settings['__experimentalStyles'] = wp_get_global_styles();
26+
$settings['__experimentalStyles'] = gutenberg_get_global_styles();
2727
}
2828

2929
// To tell mobile that the site uses quote v2 (inner blocks).

‎phpunit/class-wp-theme-json-test.php‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2071,4 +2071,69 @@ public function data_process_blocks_custom_css() {
20712071
),
20722072
);
20732073
}
2074+
2075+
public function test_internal_syntax_is_converted_to_css_variables() {
2076+
$result = new WP_Theme_JSON_Gutenberg(
2077+
array(
2078+
'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
2079+
'styles' => array(
2080+
'color' => array(
2081+
'background' => 'var:preset|color|primary',
2082+
'text' => 'var(--wp--preset--color--secondary)',
2083+
),
2084+
'elements' => array(
2085+
'link' => array(
2086+
'color' => array(
2087+
'background' => 'var:preset|color|pri',
2088+
'text' => 'var(--wp--preset--color--sec)',
2089+
),
2090+
),
2091+
),
2092+
'blocks' => array(
2093+
'core/post-terms' => array(
2094+
'typography' => array( 'fontSize' => 'var(--wp--preset--font-size--small)' ),
2095+
'color' => array( 'background' => 'var:preset|color|secondary' ),
2096+
),
2097+
'core/navigation' => array(
2098+
'elements' => array(
2099+
'link' => array(
2100+
'color' => array(
2101+
'background' => 'var:preset|color|p',
2102+
'text' => 'var(--wp--preset--color--s)',
2103+
),
2104+
),
2105+
),
2106+
),
2107+
'core/quote' => array(
2108+
'typography' => array( 'fontSize' => 'var(--wp--preset--font-size--d)' ),
2109+
'color' => array( 'background' => 'var:preset|color|d' ),
2110+
'variations' => array(
2111+
'plain' => array(
2112+
'typography' => array( 'fontSize' => 'var(--wp--preset--font-size--s)' ),
2113+
'color' => array( 'background' => 'var:preset|color|s' ),
2114+
),
2115+
),
2116+
),
2117+
),
2118+
),
2119+
)
2120+
);
2121+
$styles = $result->get_raw_data()['styles'];
2122+
2123+
$this->assertEquals( 'var(--wp--preset--color--primary)', $styles['color']['background'], 'Top level: Assert the originally correct values are still correct.' );
2124+
$this->assertEquals( 'var(--wp--preset--color--secondary)', $styles['color']['text'], 'Top level: Assert the originally correct values are still correct.' );
2125+
2126+
$this->assertEquals( 'var(--wp--preset--color--pri)', $styles['elements']['link']['color']['background'], 'Element top level: Assert the originally correct values are still correct.' );
2127+
$this->assertEquals( 'var(--wp--preset--color--sec)', $styles['elements']['link']['color']['text'], 'Element top level: Assert the originally correct values are still correct.' );
2128+
2129+
$this->assertEquals( 'var(--wp--preset--font-size--small)', $styles['blocks']['core/post-terms']['typography']['fontSize'], 'Top block level: Assert the originally correct values are still correct.' );
2130+
$this->assertEquals( 'var(--wp--preset--color--secondary)', $styles['blocks']['core/post-terms']['color']['background'], 'Top block level: Assert the internal variables are convert to CSS custom variables.' );
2131+
2132+
$this->assertEquals( 'var(--wp--preset--color--p)', $styles['blocks']['core/navigation']['elements']['link']['color']['background'], 'Elements block level: Assert the originally correct values are still correct.' );
2133+
$this->assertEquals( 'var(--wp--preset--color--s)', $styles['blocks']['core/navigation']['elements']['link']['color']['text'], 'Elements block level: Assert the originally correct values are still correct.' );
2134+
2135+
$this->assertEquals( 'var(--wp--preset--font-size--s)', $styles['blocks']['core/quote']['variations']['plain']['typography']['fontSize'], 'Style variations: Assert the originally correct values are still correct.' );
2136+
$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.' );
2137+
2138+
}
20742139
}

0 commit comments

Comments
 (0)