[wp-trac] [WordPress Trac] #58467: `wp_get_global_styles`: return the standard format for CSS Custom Properties

[WordPress Trac]

#58467: `wp_get_global_styles`: return the standard format for CSS Custom
Properties
--------------------------+------------------------------
 Reporter:  oandregal     |       Owner:  oandregal
     Type:  defect (bug)  |      Status:  assigned
 Priority:  normal        |   Milestone:  Awaiting Review
Component:  General       |     Version:
 Severity:  normal        |  Resolution:
 Keywords:                |     Focuses:
--------------------------+------------------------------
Changes (by oandregal):

 * keywords:  has-patch has-unit-tests =>


Old description:

> The `wp_get_global_styles` functions returns an internal format for CSS
> Custom Properties instead of the proper CSS format.
>
> === Step-by-step reproduction instructions
>
> - Use a theme that has a `theme.json`.
> - Paste the following under `styles.blocks`:
>
> ```json
> "core/post-terms": {
>     "typography": { "fontSize": "var(--wp--preset--font-size--small)" },
>     "color":{ "background": "var:preset|color|secondary" }
> }
> ```
> - Use the `wp_get_global_styles` functions to retrieve those styles. For
> example, paste the following in `functions.php` of the theme:
>
> ```php
> add_action( 'init', function(){
>         error_log( print_r( wp_get_global_styles( array(),
> array('block_name'=>'core/post-terms') ), true ) );
> } );
> ```
>
> The result will be:
>
> ```php
> (
>     [typography] => Array( [fontSize] => var(--wp--preset--font-size--
> small) )
>     [color] => Array( [background] => var:preset|color|secondary )
> )
> ```
>
> when it should have been
>
> ```php
> (
>     [typography] => Array( [fontSize] => var(--wp--preset--font-size--
> small) )
>     [color] => Array( [background] => var(--wp--preset--color--secondary)
> )
> )
> ```
>
> Note the `color.background` value. It should return the value in the
> standard CSS Custom Property format, not the shortened internal format.

New description:

 The `wp_get_global_styles` functions returns an internal format for CSS
 Custom Properties instead of the proper CSS format.

 === Step-by-step reproduction instructions

 - Use a theme that has a `theme.json`.
 - Paste the following under `styles.blocks`:


 {{{
 "core/post-terms": {
     "typography": { "fontSize": "var(--wp--preset--font-size--small)" },
     "color":{ "background": "var:preset|color|secondary" }
 }
 }}}
 - Use the `wp_get_global_styles` functions to retrieve those styles. For
 example, paste the following in `functions.php` of the theme:


 {{{#!php
 <?php
 add_action( 'init', function(){
         error_log( print_r( wp_get_global_styles( array(),
 array('block_name'=>'core/post-terms') ), true ) );
 } );

 }}}


 The result will be:


 {{{#!php
 <?php
 (
     [typography] => Array( [fontSize] => var(--wp--preset--font-size--
 small) )
     [color] => Array( [background] => var:preset|color|secondary )
 )

 }}}


 when it should have been


 {{{#!php
 <?php
 (
     [typography] => Array( [fontSize] => var(--wp--preset--font-size--
 small) )
     [color] => Array( [background] => var(--wp--preset--color--secondary)
 )
 )

 }}}

 Note the `color.background` value. It should return the value in the
 standard CSS Custom Property format, not the shortened internal format.

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/58467#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform