WordPress.org
Get WordPress

Make WordPress Core

Changeset 50973


Ignore:
Timestamp:
05/24/2021 05:38:59 PM (5 years ago)
Author:
jorgefilipecosta
Message:

Block Editor: Add Global Styles support using theme.json file.

This is the second piece of landing the theme.json processing in WordPress core.
It includes the mechanism that outputs the CSS styles of a theme.json file.

Props nosolosw, youknowriad.
See #53175.

Location:
trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/block-editor.php

    r50963 r50973  
    244244        );
    245245
    246         $editor_settings['__experimentalFeatures'] = WP_Theme_JSON_Resolver::get_merged_data( $editor_settings )->get_settings();
    247 
     246        $theme_json = WP_Theme_JSON_Resolver::get_merged_data( $editor_settings );
     247
     248        if ( WP_Theme_JSON_Resolver::theme_has_support() ) {
     249                $editor_settings['styles'][] = array( 'css' => $theme_json->get_stylesheet( 'block_styles' ) );
     250                $editor_settings['styles'][] = array(
     251                        'css'                     => $theme_json->get_stylesheet( 'css_variables' ),
     252                        '__experimentalNoWrapper' => true,
     253                );
     254        }
     255
     256        $editor_settings['__experimentalFeatures'] = $theme_json->get_settings();
    248257        // These settings may need to be updated based on data coming from theme.json sources.
    249258        if ( isset( $editor_settings['__experimentalFeatures']['color']['palette'] ) ) {

  • trunk/src/wp-includes/class-wp-theme-json.php

    r50967 r50973  
    2424
    2525        /**
    26          * Holds the allowed block names extracted from block.json.
    27          * Shared among all instances so we only process it once.
     26         * Holds block metadata extracted from block.json
     27         * to be shared among all instances so we don't
     28         * process it twice.
    2829         *
    2930         * @since 5.8.0
    3031         * @var array
    3132         */
    32         private static $allowed_block_names = null;
    33 
     33        private static $blocks_metadata = null;
     34
     35        /**
     36         * The CSS selector for the top-level styles.
     37         *
     38         * @since 5.8.0
     39         * @var string
     40         */
     41        const ROOT_BLOCK_SELECTOR = 'body';
     42
     43        /**
     44         * Presets are a set of values that serve
     45         * to bootstrap some styles: colors, font sizes, etc.
     46         *
     47         * They are a unkeyed array of values such as:
     48         *
     49         * ```php
     50         * array(
     51         *   array(
     52         *     'slug'      => 'unique-name-within-the-set',
     53         *     'name'      => 'Name for the UI',
     54         *     <value_key> => 'value'
     55         *   ),
     56         * )
     57         * ```
     58         *
     59         * This contains the necessary metadata to process them:
     60         *
     61         * - path          => where to find the preset within the settings section
     62         *
     63         * - value_key     => the key that represents the value
     64         *
     65         * - css_var_infix => infix to use in generating the CSS Custom Property. Example:
     66         *                   --wp--preset--<preset_infix>--<slug>: <preset_value>
     67         *
     68         * - classes      => array containing a structure with the classes to
     69         *                   generate for the presets. Each class should have
     70         *                   the class suffix and the property name. Example:
     71         *
     72         *                   .has-<slug>-<class_suffix> {
     73         *                       <property_name>: <preset_value>
     74         *                   }
     75         *
     76         * @since 5.8.0
     77         * @var array
     78         */
     79        const PRESETS_METADATA = array(
     80                array(
     81                        'path'          => array( 'color', 'palette' ),
     82                        'value_key'     => 'color',
     83                        'css_var_infix' => 'color',
     84                        'classes'       => array(
     85                                array(
     86                                        'class_suffix'  => 'color',
     87                                        'property_name' => 'color',
     88                                ),
     89                                array(
     90                                        'class_suffix'  => 'background-color',
     91                                        'property_name' => 'background-color',
     92                                ),
     93                        ),
     94                ),
     95                array(
     96                        'path'          => array( 'color', 'gradients' ),
     97                        'value_key'     => 'gradient',
     98                        'css_var_infix' => 'gradient',
     99                        'classes'       => array(
     100                                array(
     101                                        'class_suffix'  => 'gradient-background',
     102                                        'property_name' => 'background',
     103                                ),
     104                        ),
     105                ),
     106                array(
     107                        'path'          => array( 'typography', 'fontSizes' ),
     108                        'value_key'     => 'size',
     109                        'css_var_infix' => 'font-size',
     110                        'classes'       => array(
     111                                array(
     112                                        'class_suffix'  => 'font-size',
     113                                        'property_name' => 'font-size',
     114                                ),
     115                        ),
     116                ),
     117        );
     118
     119        /**
     120         * Metadata for style properties.
     121         *
     122         * Each property declares:
     123         *
     124         * - 'value': path to the value in theme.json and block attributes.
     125         *
     126         * @since 5.8.0
     127         * @var array
     128         */
     129        const PROPERTIES_METADATA = array(
     130                'background'       => array(
     131                        'value' => array( 'color', 'gradient' ),
     132                ),
     133                'background-color' => array(
     134                        'value' => array( 'color', 'background' ),
     135                ),
     136                'color'            => array(
     137                        'value' => array( 'color', 'text' ),
     138                ),
     139                'font-size'        => array(
     140                        'value' => array( 'typography', 'fontSize' ),
     141                ),
     142                'line-height'      => array(
     143                        'value' => array( 'typography', 'lineHeight' ),
     144                ),
     145                'margin'           => array(
     146                        'value'      => array( 'spacing', 'margin' ),
     147                        'properties' => array( 'top', 'right', 'bottom', 'left' ),
     148                ),
     149                'padding'          => array(
     150                        'value'      => array( 'spacing', 'padding' ),
     151                        'properties' => array( 'top', 'right', 'bottom', 'left' ),
     152                ),
     153        );
     154
     155        /**
     156         * @since 5.8.0
     157         * @var array
     158         */
    34159        const ALLOWED_TOP_LEVEL_KEYS = array(
     160                'settings',
     161                'styles',
    35162                'version',
    36                 'settings',
    37163        );
    38164
     165        /**
     166         * @since 5.8.0
     167         * @var array
     168         */
    39169        const ALLOWED_SETTINGS = array(
    40170                'color'      => array(
    … …  
    61191        );
    62192
     193        /**
     194         * @since 5.8.0
     195         * @var array
     196         */
     197        const ALLOWED_STYLES = array(
     198                'color'      => array(
     199                        'background' => null,
     200                        'gradient'   => null,
     201                        'text'       => null,
     202                ),
     203                'spacing'    => array(
     204                        'margin'  => array(
     205                                'top'    => null,
     206                                'right'  => null,
     207                                'bottom' => null,
     208                                'left'   => null,
     209                        ),
     210                        'padding' => array(
     211                                'bottom' => null,
     212                                'left'   => null,
     213                                'right'  => null,
     214                                'top'    => null,
     215                        ),
     216                ),
     217                'typography' => array(
     218                        'fontSize'   => null,
     219                        'lineHeight' => null,
     220                ),
     221        );
     222
     223        /**
     224         * @since 5.8.0
     225         * @var array
     226         */
     227        const ELEMENTS = array(
     228                'link' => 'a',
     229                'h1'   => 'h1',
     230                'h2'   => 'h2',
     231                'h3'   => 'h3',
     232                'h4'   => 'h4',
     233                'h5'   => 'h5',
     234                'h6'   => 'h6',
     235        );
     236
     237        /**
     238         * @since 5.8.0
     239         * @var int
     240         */
    63241        const LATEST_SCHEMA = 1;
    64242
    … …  
    80258
    81259        /**
    82          * Returns the allowed block names.
    83          *
    84          * @since 5.8.0
    85          *
    86          * @return array
    87          */
    88         private static function get_allowed_block_names() {
    89                 if ( null !== self::$allowed_block_names ) {
    90                         return self::$allowed_block_names;
    91                 }
    92 
    93                 self::$allowed_block_names = array_keys( WP_Block_Type_Registry::get_instance()->get_all_registered() );
    94 
    95                 return self::$allowed_block_names;
    96         }
    97 
    98         /**
    99260         * Sanitizes the input according to the schemas.
    100261         *
    … …  
    111272                }
    112273
    113                 $allowed_blocks = self::get_allowed_block_names();
    114 
    115                 $output = array_intersect_key( $input, array_flip( self::ALLOWED_TOP_LEVEL_KEYS ) );
     274                $allowed_top_level_keys = self::ALLOWED_TOP_LEVEL_KEYS;
     275                $allowed_settings       = self::ALLOWED_SETTINGS;
     276                $allowed_styles         = self::ALLOWED_STYLES;
     277                $allowed_blocks         = array_keys( self::get_blocks_metadata() );
     278                $allowed_elements       = array_keys( self::ELEMENTS );
     279
     280                $output = array_intersect_key( $input, array_flip( $allowed_top_level_keys ) );
    116281
    117282                // Build the schema.
    118283                $schema                 = array();
     284                $schema_styles_elements = array();
     285                foreach ( $allowed_elements as $element ) {
     286                        $schema_styles_elements[ $element ] = $allowed_styles;
     287                }
     288                $schema_styles_blocks   = array();
    119289                $schema_settings_blocks = array();
    120290                foreach ( $allowed_blocks as $block ) {
    121                         $schema_settings_blocks[ $block ] = self::ALLOWED_SETTINGS;
    122                 }
    123                 $schema['settings']           = self::ALLOWED_SETTINGS;
     291                        $schema_settings_blocks[ $block ]           = $allowed_settings;
     292                        $schema_styles_blocks[ $block ]             = $allowed_styles;
     293                        $schema_styles_blocks[ $block ]['elements'] = $schema_styles_elements;
     294                }
     295                $schema['styles']             = $allowed_styles;
     296                $schema['styles']['blocks']   = $schema_styles_blocks;
     297                $schema['styles']['elements'] = $schema_styles_elements;
     298                $schema['settings']           = $allowed_settings;
    124299                $schema['settings']['blocks'] = $schema_settings_blocks;
    125300
    126301                // Remove anything that's not present in the schema.
    127                 foreach ( array( 'settings' ) as $subtree ) {
     302                foreach ( array( 'styles', 'settings' ) as $subtree ) {
    128303                        if ( ! isset( $input[ $subtree ] ) ) {
    129304                                continue;
    … …  
    148323
    149324        /**
     325         * Returns the metadata for each block.
     326         *
     327         * Example:
     328         *
     329         * {
     330         *   'core/paragraph': {
     331         *     'selector': 'p',
     332         *     'elements': {
     333         *       'link' => 'link selector',
     334         *       'etc'  => 'element selector'
     335         *     }
     336         *   },
     337         *   'core/heading': {
     338         *     'selector': 'h1',
     339         *     'elements': {}
     340         *   }
     341         *   'core/group': {
     342         *     'selector': '.wp-block-group',
     343         *     'elements': {}
     344         *   }
     345         * }
     346         *
     347         * @since 5.8.0
     348         *
     349         * @return array Block metadata.
     350         */
     351        private static function get_blocks_metadata() {
     352                if ( null !== self::$blocks_metadata ) {
     353                        return self::$blocks_metadata;
     354                }
     355
     356                self::$blocks_metadata = array();
     357
     358                $registry = WP_Block_Type_Registry::get_instance();
     359                $blocks   = $registry->get_all_registered();
     360                foreach ( $blocks as $block_name => $block_type ) {
     361                        if (
     362                                isset( $block_type->supports['__experimentalSelector'] ) &&
     363                                is_string( $block_type->supports['__experimentalSelector'] )
     364                        ) {
     365                                self::$blocks_metadata[ $block_name ]['selector'] = $block_type->supports['__experimentalSelector'];
     366                        } else {
     367                                self::$blocks_metadata[ $block_name ]['selector'] = '.wp-block-' . str_replace( '/', '-', str_replace( 'core/', '', $block_name ) );
     368                        }
     369
     370                        // Assign defaults, then overwrite those that the block sets by itself.
     371                        // If the block selector is compounded, will append the element to each
     372                        // individual block selector.
     373                        $block_selectors = explode( ',', self::$blocks_metadata[ $block_name ]['selector'] );
     374                        foreach ( self::ELEMENTS as $el_name => $el_selector ) {
     375                                $element_selector = array();
     376                                foreach ( $block_selectors as $selector ) {
     377                                        $element_selector[] = $selector . ' ' . $el_selector;
     378                                }
     379                                self::$blocks_metadata[ $block_name ]['elements'][ $el_name ] = implode( ',', $element_selector );
     380                        }
     381                }
     382
     383                return self::$blocks_metadata;
     384        }
     385
     386        /**
    150387         * Given a tree, removes the keys that are not present in the schema.
    151388         *
    … …  
    156393         * @param array $tree Input to process.
    157394         * @param array $schema Schema to adhere to.
     395         *
    158396         * @return array Returns the modified $tree.
    159397         */
    … …  
    211449
    212450        /**
     451         * Returns the stylesheet that results of processing
     452         * the theme.json structure this object represents.
     453         *
     454         * @since 5.8.0
     455         *
     456         * @param string $type Type of stylesheet we want accepts 'all', 'block_styles', and 'css_variables'.
     457         *
     458         * @return string Stylesheet.
     459         */
     460        public function get_stylesheet( $type = 'all' ) {
     461                $blocks_metadata = self::get_blocks_metadata();
     462                $style_nodes     = self::get_style_nodes( $this->theme_json, $blocks_metadata );
     463                $setting_nodes   = self::get_setting_nodes( $this->theme_json, $blocks_metadata );
     464
     465                switch ( $type ) {
     466                        case 'block_styles':
     467                                return $this->get_block_styles( $style_nodes, $setting_nodes );
     468                        case 'css_variables':
     469                                return $this->get_css_variables( $setting_nodes );
     470                        default:
     471                                return $this->get_css_variables( $setting_nodes ) . $this->get_block_styles( $style_nodes, $setting_nodes );
     472                }
     473
     474        }
     475
     476        /**
     477         * Converts each style section into a list of rulesets
     478         * containing the block styles to be appended to the stylesheet.
     479         *
     480         * See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
     481         *
     482         * For each section this creates a new ruleset such as:
     483         *
     484         *   block-selector {
     485         *     style-property-one: value;
     486         *   }
     487         *
     488         * Additionally, it'll also create new rulesets
     489         * as classes for each preset value such as:
     490         *
     491         *   .has-value-color {
     492         *     color: value;
     493         *   }
     494         *
     495         *   .has-value-background-color {
     496         *     background-color: value;
     497         *   }
     498         *
     499         *   .has-value-font-size {
     500         *     font-size: value;
     501         *   }
     502         *
     503         *   .has-value-gradient-background {
     504         *     background: value;
     505         *   }
     506         *
     507         *   p.has-value-gradient-background {
     508         *     background: value;
     509         *   }
     510         *
     511         * @since 5.8.0
     512         *
     513         * @param array $style_nodes Nodes with styles.
     514         * @param array $setting_nodes Nodes with settings.
     515         *
     516         * @return string The new stylesheet.
     517         */
     518        private function get_block_styles( $style_nodes, $setting_nodes ) {
     519                $block_rules = '';
     520                foreach ( $style_nodes as $metadata ) {
     521                        if ( null === $metadata['selector'] ) {
     522                                continue;
     523                        }
     524
     525                        $node         = _wp_array_get( $this->theme_json, $metadata['path'], array() );
     526                        $selector     = $metadata['selector'];
     527                        $declarations = self::compute_style_properties( $node );
     528                        $block_rules .= self::to_ruleset( $selector, $declarations );
     529                }
     530
     531                $preset_rules = '';
     532                foreach ( $setting_nodes as $metadata ) {
     533                        if ( null === $metadata['selector'] ) {
     534                                continue;
     535                        }
     536
     537                        $selector      = $metadata['selector'];
     538                        $node          = _wp_array_get( $this->theme_json, $metadata['path'], array() );
     539                        $preset_rules .= self::compute_preset_classes( $node, $selector );
     540                }
     541
     542                return $block_rules . $preset_rules;
     543        }
     544
     545        /**
     546         * Converts each styles section into a list of rulesets
     547         * to be appended to the stylesheet.
     548         * These rulesets contain all the css variables (custom variables and preset variables).
     549         *
     550         * See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
     551         *
     552         * For each section this creates a new ruleset such as:
     553         *
     554         *   block-selector {
     555         *     --wp--preset--category--slug: value;
     556         *     --wp--custom--variable: value;
     557         *   }
     558         *
     559         * @since 5.8.0
     560         *
     561         * @param array $nodes Nodes with settings.
     562         *
     563         * @return string The new stylesheet.
     564         */
     565        private function get_css_variables( $nodes ) {
     566                $stylesheet = '';
     567                foreach ( $nodes as $metadata ) {
     568                        if ( null === $metadata['selector'] ) {
     569                                continue;
     570                        }
     571
     572                        $selector = $metadata['selector'];
     573
     574                        $node         = _wp_array_get( $this->theme_json, $metadata['path'], array() );
     575                        $declarations = array_merge( self::compute_preset_vars( $node ), self::compute_theme_vars( $node ) );
     576
     577                        $stylesheet .= self::to_ruleset( $selector, $declarations );
     578                }
     579
     580                return $stylesheet;
     581        }
     582
     583        /**
     584         * Given a selector and a declaration list,
     585         * creates the corresponding ruleset.
     586         *
     587         * To help debugging, will add some space
     588         * if SCRIPT_DEBUG is defined and true.
     589         *
     590         * @since 5.8.0
     591         *
     592         * @param string $selector CSS selector.
     593         * @param array  $declarations List of declarations.
     594         *
     595         * @return string CSS ruleset.
     596         */
     597        private static function to_ruleset( $selector, $declarations ) {
     598                if ( empty( $declarations ) ) {
     599                        return '';
     600                }
     601
     602                $declaration_block = array_reduce(
     603                        $declarations,
     604                        function ( $carry, $element ) {
     605                                return $carry .= $element['name'] . ': ' . $element['value'] . ';'; },
     606                        ''
     607                );
     608
     609                return $selector . '{' . $declaration_block . '}';
     610        }
     611
     612        /**
     613         * Given a settings array, it returns the generated rulesets
     614         * for the preset classes.
     615         *
     616         * @since 5.8.0
     617         *
     618         * @param array  $settings Settings to process.
     619         * @param string $selector Selector wrapping the classes.
     620         *
     621         * @return string The result of processing the presets.
     622         */
     623        private static function compute_preset_classes( $settings, $selector ) {
     624                if ( self::ROOT_BLOCK_SELECTOR === $selector ) {
     625                        // Classes at the global level do not need any CSS prefixed,
     626                        // and we don't want to increase its specificity.
     627                        $selector = '';
     628                }
     629
     630                $stylesheet = '';
     631                foreach ( self::PRESETS_METADATA as $preset ) {
     632                        $values = _wp_array_get( $settings, $preset['path'], array() );
     633                        foreach ( $values as $value ) {
     634                                foreach ( $preset['classes'] as $class ) {
     635                                        $stylesheet .= self::to_ruleset(
     636                                                $selector . '.has-' . $value['slug'] . '-' . $class['class_suffix'],
     637                                                array(
     638                                                        array(
     639                                                                'name'  => $class['property_name'],
     640                                                                'value' => $value[ $preset['value_key'] ] . ' !important',
     641                                                        ),
     642                                                )
     643                                        );
     644                                }
     645                        }
     646                }
     647
     648                return $stylesheet;
     649        }
     650
     651        /**
     652         * Given the block settings, it extracts the CSS Custom Properties
     653         * for the presets and adds them to the $declarations array
     654         * following the format:
     655         *
     656         * ```php
     657         * array(
     658         *   'name'  => 'property_name',
     659         *   'value' => 'property_value,
     660         * )
     661         * ```
     662         *
     663         * @since 5.8.0
     664         *
     665         * @param array $settings Settings to process.
     666         *
     667         * @return array Returns the modified $declarations.
     668         */
     669        private static function compute_preset_vars( $settings ) {
     670                $declarations = array();
     671                foreach ( self::PRESETS_METADATA as $preset ) {
     672                        $values = _wp_array_get( $settings, $preset['path'], array() );
     673                        foreach ( $values as $value ) {
     674                                $declarations[] = array(
     675                                        'name'  => '--wp--preset--' . $preset['css_var_infix'] . '--' . $value['slug'],
     676                                        'value' => $value[ $preset['value_key'] ],
     677                                );
     678                        }
     679                }
     680
     681                return $declarations;
     682        }
     683
     684        /**
     685         * Given an array of settings, it extracts the CSS Custom Properties
     686         * for the custom values and adds them to the $declarations
     687         * array following the format:
     688         *
     689         * ```php
     690         * array(
     691         *   'name'  => 'property_name',
     692         *   'value' => 'property_value,
     693         * )
     694         * ```
     695         *
     696         * @since 5.8.0
     697         *
     698         * @param array $settings Settings to process.
     699         *
     700         * @return array Returns the modified $declarations.
     701         */
     702        private static function compute_theme_vars( $settings ) {
     703                $declarations  = array();
     704                $custom_values = _wp_array_get( $settings, array( 'custom' ), array() );
     705                $css_vars      = self::flatten_tree( $custom_values );
     706                foreach ( $css_vars as $key => $value ) {
     707                        $declarations[] = array(
     708                                'name'  => '--wp--custom--' . $key,
     709                                'value' => $value,
     710                        );
     711                }
     712
     713                return $declarations;
     714        }
     715
     716        /**
     717         * Given a tree, it creates a flattened one
     718         * by merging the keys and binding the leaf values
     719         * to the new keys.
     720         *
     721         * It also transforms camelCase names into kebab-case
     722         * and substitutes '/' by '-'.
     723         *
     724         * This is thought to be useful to generate
     725         * CSS Custom Properties from a tree,
     726         * although there's nothing in the implementation
     727         * of this function that requires that format.
     728         *
     729         * For example, assuming the given prefix is '--wp'
     730         * and the token is '--', for this input tree:
     731         *
     732         * {
     733         *   'some/property': 'value',
     734         *   'nestedProperty': {
     735         *     'sub-property': 'value'
     736         *   }
     737         * }
     738         *
     739         * it'll return this output:
     740         *
     741         * {
     742         *   '--wp--some-property': 'value',
     743         *   '--wp--nested-property--sub-property': 'value'
     744         * }
     745         *
     746         * @since 5.8.0
     747         *
     748         * @param array  $tree Input tree to process.
     749         * @param string $prefix Prefix to prepend to each variable. '' by default.
     750         * @param string $token Token to use between levels. '--' by default.
     751         *
     752         * @return array The flattened tree.
     753         */
     754        private static function flatten_tree( $tree, $prefix = '', $token = '--' ) {
     755                $result = array();
     756                foreach ( $tree as $property => $value ) {
     757                        $new_key = $prefix . str_replace(
     758                                '/',
     759                                '-',
     760                                strtolower( preg_replace( '/(?<!^)[A-Z]/', '-$0', $property ) ) // CamelCase to kebab-case.
     761                        );
     762
     763                        if ( is_array( $value ) ) {
     764                                $new_prefix = $new_key . $token;
     765                                $result     = array_merge(
     766                                        $result,
     767                                        self::flatten_tree( $value, $new_prefix, $token )
     768                                );
     769                        } else {
     770                                $result[ $new_key ] = $value;
     771                        }
     772                }
     773                return $result;
     774        }
     775
     776        /**
     777         * Given a styles array, it extracts the style properties
     778         * and adds them to the $declarations array following the format:
     779         *
     780         * ```php
     781         * array(
     782         *   'name'  => 'property_name',
     783         *   'value' => 'property_value,
     784         * )
     785         * ```
     786         *
     787         * @since 5.8.0
     788         *
     789         * @param array $styles Styles to process.
     790         *
     791         * @return array Returns the modified $declarations.
     792         */
     793        private static function compute_style_properties( $styles ) {
     794                $declarations = array();
     795                if ( empty( $styles ) ) {
     796                        return $declarations;
     797                }
     798
     799                $properties = array();
     800                foreach ( self::PROPERTIES_METADATA as $name => $metadata ) {
     801                        // Some properties can be shorthand properties, meaning that
     802                        // they contain multiple values instead of a single one.
     803                        // An example of this is the padding property.
     804                        if ( self::has_properties( $metadata ) ) {
     805                                foreach ( $metadata['properties'] as $property ) {
     806                                        $properties[] = array(
     807                                                'name'  => $name . '-' . $property,
     808                                                'value' => array_merge( $metadata['value'], array( $property ) ),
     809                                        );
     810                                }
     811                        } else {
     812                                $properties[] = array(
     813                                        'name'  => $name,
     814                                        'value' => $metadata['value'],
     815                                );
     816                        }
     817                }
     818
     819                foreach ( $properties as $prop ) {
     820                        $value = self::get_property_value( $styles, $prop['value'] );
     821                        if ( empty( $value ) ) {
     822                                continue;
     823                        }
     824
     825                        $declarations[] = array(
     826                                'name'  => $prop['name'],
     827                                'value' => $value,
     828                        );
     829                }
     830
     831                return $declarations;
     832        }
     833
     834        /**
     835         * Whether the metadata contains a key named properties.
     836         *
     837         * @since 5.8.0
     838         *
     839         * @param array $metadata Description of the style property.
     840         *
     841         * @return boolean True if properties exists, false otherwise.
     842         */
     843        private static function has_properties( $metadata ) {
     844                if ( array_key_exists( 'properties', $metadata ) ) {
     845                        return true;
     846                }
     847
     848                return false;
     849        }
     850
     851        /**
     852         * Returns the style property for the given path.
     853         *
     854         * It also converts CSS Custom Property stored as
     855         * "var:preset|color|secondary" to the form
     856         * "--wp--preset--color--secondary".
     857         *
     858         * @since 5.8.0
     859         *
     860         * @param array $styles Styles subtree.
     861         * @param array $path Which property to process.
     862         *
     863         * @return string Style property value.
     864         */
     865        private static function get_property_value( $styles, $path ) {
     866                $value = _wp_array_get( $styles, $path, '' );
     867
     868                if ( '' === $value ) {
     869                        return $value;
     870                }
     871
     872                $prefix     = 'var:';
     873                $prefix_len = strlen( $prefix );
     874                $token_in   = '|';
     875                $token_out  = '--';
     876                if ( 0 === strncmp( $value, $prefix, $prefix_len ) ) {
     877                        $unwrapped_name = str_replace(
     878                                $token_in,
     879                                $token_out,
     880                                substr( $value, $prefix_len )
     881                        );
     882                        $value          = "var(--wp--$unwrapped_name)";
     883                }
     884
     885                return $value;
     886        }
     887
     888        /**
    213889         * Builds metadata for the setting nodes, which returns in the form of:
    214890         *
    215          *     [
    216          *       [
    217          *         'path' => ['path', 'to', 'some', 'node' ]
    218          *       ],
    219          *       [
    220          *         'path' => [ 'path', 'to', 'other', 'node' ]
    221          *       ],
    222          *     ]
     891         * [
     892         *   [
     893         *     'path'     => ['path', 'to', 'some', 'node' ],
     894         *     'selector' => 'CSS selector for some node'
     895         *   ],
     896         *   [
     897         *     'path'     => [ 'path', 'to', 'other', 'node' ],
     898         *     'selector' => 'CSS selector for other node'
     899         *   ],
     900         * ]
    223901         *
    224902         * @since 5.8.0
    225903         *
    226904         * @param array $theme_json The tree to extract setting nodes from.
     905         * @param array $selectors List of selectors per block.
     906         *
    227907         * @return array
    228908         */
    229         private static function get_setting_nodes( $theme_json ) {
     909        private static function get_setting_nodes( $theme_json, $selectors = array() ) {
    230910                $nodes = array();
    231911                if ( ! isset( $theme_json['settings'] ) ) {
    … …  
    235915                // Top-level.
    236916                $nodes[] = array(
    237                         'path' => array( 'settings' ),
     917                        'path'     => array( 'settings' ),
     918                        'selector' => self::ROOT_BLOCK_SELECTOR,
    238919                );
    239920
    … …  
    244925
    245926                foreach ( $theme_json['settings']['blocks'] as $name => $node ) {
     927                        $selector = null;
     928                        if ( isset( $selectors[ $name ]['selector'] ) ) {
     929                                $selector = $selectors[ $name ]['selector'];
     930                        }
     931
    246932                        $nodes[] = array(
    247                                 'path' => array( 'settings', 'blocks', $name ),
     933                                'path'     => array( 'settings', 'blocks', $name ),
     934                                'selector' => $selector,
    248935                        );
     936                }
     937
     938                return $nodes;
     939        }
     940
     941
     942        /**
     943         * Builds metadata for the style nodes, which returns in the form of:
     944         *
     945         * [
     946         *   [
     947         *     'path'     => [ 'path', 'to', 'some', 'node' ],
     948         *     'selector' => 'CSS selector for some node'
     949         *   ],
     950         *   [
     951         *     'path'     => ['path', 'to', 'other', 'node' ],
     952         *     'selector' => 'CSS selector for other node'
     953         *   ],
     954         * ]
     955         *
     956         * @since 5.8.0
     957         *
     958         * @param array $theme_json The tree to extract style nodes from.
     959         * @param array $selectors List of selectors per block.
     960         *
     961         * @return array
     962         */
     963        private static function get_style_nodes( $theme_json, $selectors = array() ) {
     964                $nodes = array();
     965                if ( ! isset( $theme_json['styles'] ) ) {
     966                        return $nodes;
     967                }
     968
     969                // Top-level.
     970                $nodes[] = array(
     971                        'path'     => array( 'styles' ),
     972                        'selector' => self::ROOT_BLOCK_SELECTOR,
     973                );
     974
     975                if ( isset( $theme_json['styles']['elements'] ) ) {
     976                        foreach ( $theme_json['styles']['elements'] as $element => $node ) {
     977                                $nodes[] = array(
     978                                        'path'     => array( 'styles', 'elements', $element ),
     979                                        'selector' => self::ELEMENTS[ $element ],
     980                                );
     981                        }
     982                }
     983
     984                // Blocks.
     985                if ( ! isset( $theme_json['styles']['blocks'] ) ) {
     986                        return $nodes;
     987                }
     988
     989                foreach ( $theme_json['styles']['blocks'] as $name => $node ) {
     990                        $selector = null;
     991                        if ( isset( $selectors[ $name ]['selector'] ) ) {
     992                                $selector = $selectors[ $name ]['selector'];
     993                        }
     994
     995                        $nodes[] = array(
     996                                'path'     => array( 'styles', 'blocks', $name ),
     997                                'selector' => $selector,
     998                        );
     999
     1000                        if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'] ) ) {
     1001                                foreach ( $theme_json['styles']['blocks'][ $name ]['elements'] as $element => $node ) {
     1002                                        $nodes[] = array(
     1003                                                'path'     => array( 'styles', 'blocks', $name, 'elements', $element ),
     1004                                                'selector' => $selectors[ $name ]['elements'][ $element ],
     1005                                        );
     1006                                }
     1007                        }
    2491008                }
    2501009

  • trunk/src/wp-includes/default-filters.php

    r50836 r50973  
    536536add_action( 'wp_enqueue_scripts', 'wp_localize_jquery_ui_datepicker', 1000 );
    537537add_action( 'wp_enqueue_scripts', 'wp_common_block_scripts_and_styles' );
     538add_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
    538539add_action( 'admin_enqueue_scripts', 'wp_localize_jquery_ui_datepicker', 1000 );
    539540add_action( 'admin_enqueue_scripts', 'wp_common_block_scripts_and_styles' );

  • trunk/src/wp-includes/script-loader.php

    r50934 r50973  
    22342234
    22352235/**
     2236 * Enqueues the global styles defined via theme.json.
     2237 *
     2238 * @since 5.8.0
     2239 *
     2240 * @return void
     2241 */
     2242function wp_enqueue_global_styles() {
     2243        if ( ! WP_Theme_JSON_Resolver::theme_has_support() ) {
     2244                return;
     2245        }
     2246
     2247        $can_use_cache = (
     2248                ( ! defined( 'WP_DEBUG' ) || ! WP_DEBUG ) &&
     2249                ( ! defined( 'SCRIPT_DEBUG' ) || ! SCRIPT_DEBUG ) &&
     2250                ( ! defined( 'REST_REQUEST' ) || ! REST_REQUEST ) &&
     2251                ! is_admin()
     2252        );
     2253
     2254        $stylesheet = null;
     2255        if ( $can_use_cache ) {
     2256                $cache = get_transient( 'global_styles' );
     2257                if ( $cache ) {
     2258                        $stylesheet = $cache;
     2259                }
     2260        }
     2261
     2262        if ( null === $stylesheet ) {
     2263                $settings   = get_default_block_editor_settings();
     2264                $theme_json = WP_Theme_JSON_Resolver::get_merged_data( $settings );
     2265                $stylesheet = $theme_json->get_stylesheet();
     2266
     2267                if ( $can_use_cache ) {
     2268                        set_transient( 'global_styles', $stylesheet, MINUTE_IN_SECONDS );
     2269                }
     2270        }
     2271
     2272        if ( empty( $stylesheet ) ) {
     2273                return;
     2274        }
     2275
     2276        wp_register_style( 'global-styles', false, array(), true, true );
     2277        wp_add_inline_style( 'global-styles', $stylesheet );
     2278        wp_enqueue_style( 'global-styles' );
     2279}
     2280
     2281/**
    22362282 * Checks if the editor scripts and styles for all registered block types
    22372283 * should be enqueued on the current screen.

  • trunk/tests/phpunit/tests/theme/wpThemeJson.php

    r50967 r50973  
    3535                                ),
    3636                                'styles'   => array(
    37                                         'color' => array(
    38                                                 'link' => 'blue',
     37                                        'elements' => array(
     38                                                'link' => array(
     39                                                        'color' => array(
     40                                                                'text' => '#111',
     41                                                        ),
     42                                                ),
    3943                                        ),
    4044                                ),
    … …  
    5862
    5963                $this->assertEqualSetsWithIndex( $expected, $actual );
     64        }
     65
     66        function test_get_stylesheet() {
     67                $theme_json = new WP_Theme_JSON(
     68                        array(
     69                                'version'  => WP_Theme_JSON::LATEST_SCHEMA,
     70                                'settings' => array(
     71                                        'color'  => array(
     72                                                'text'    => 'value',
     73                                                'palette' => array(
     74                                                        array(
     75                                                                'slug'  => 'grey',
     76                                                                'color' => 'grey',
     77                                                        ),
     78                                                ),
     79                                        ),
     80                                        'misc'   => 'value',
     81                                        'blocks' => array(
     82                                                'core/group' => array(
     83                                                        'custom' => array(
     84                                                                'base-font'   => 16,
     85                                                                'line-height' => array(
     86                                                                        'small'  => 1.2,
     87                                                                        'medium' => 1.4,
     88                                                                        'large'  => 1.8,
     89                                                                ),
     90                                                        ),
     91                                                ),
     92                                        ),
     93                                ),
     94                                'styles'   => array(
     95                                        'color'    => array(
     96                                                'text' => 'var:preset|color|grey',
     97                                        ),
     98                                        'misc'     => 'value',
     99                                        'elements' => array(
     100                                                'link' => array(
     101                                                        'color' => array(
     102                                                                'text'       => '#111',
     103                                                                'background' => '#333',
     104                                                        ),
     105                                                ),
     106                                        ),
     107                                        'blocks'   => array(
     108                                                'core/group'     => array(
     109                                                        'elements' => array(
     110                                                                'link' => array(
     111                                                                        'color' => array(
     112                                                                                'text' => '#111',
     113                                                                        ),
     114                                                                ),
     115                                                        ),
     116                                                        'spacing'  => array(
     117                                                                'padding' => array(
     118                                                                        'top'    => '12px',
     119                                                                        'bottom' => '24px',
     120                                                                ),
     121                                                        ),
     122                                                ),
     123                                                'core/heading'   => array(
     124                                                        'color'    => array(
     125                                                                'text' => '#123456',
     126                                                        ),
     127                                                        'elements' => array(
     128                                                                'link' => array(
     129                                                                        'color'      => array(
     130                                                                                'text'       => '#111',
     131                                                                                'background' => '#333',
     132                                                                        ),
     133                                                                        'typography' => array(
     134                                                                                'fontSize' => '60px',
     135                                                                        ),
     136                                                                ),
     137                                                        ),
     138                                                ),
     139                                                'core/post-date' => array(
     140                                                        'color'    => array(
     141                                                                'text' => '#123456',
     142                                                        ),
     143                                                        'elements' => array(
     144                                                                'link' => array(
     145                                                                        'color' => array(
     146                                                                                'background' => '#777',
     147                                                                                'text'       => '#555',
     148                                                                        ),
     149                                                                ),
     150                                                        ),
     151                                                ),
     152                                        ),
     153                                ),
     154                                'misc'     => 'value',
     155                        )
     156                );
     157
     158                $this->assertEquals(
     159                        'body{--wp--preset--color--grey: grey;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}body{color: var(--wp--preset--color--grey);}a{background-color: #333;color: #111;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}',
     160                        $theme_json->get_stylesheet()
     161                );
     162                $this->assertEquals(
     163                        'body{color: var(--wp--preset--color--grey);}a{background-color: #333;color: #111;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}',
     164                        $theme_json->get_stylesheet( 'block_styles' )
     165                );
     166                $this->assertEquals(
     167                        'body{--wp--preset--color--grey: grey;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}',
     168                        $theme_json->get_stylesheet( 'css_variables' )
     169                );
     170        }
     171
     172        function test_get_stylesheet_preset_rules_come_after_block_rules() {
     173                $theme_json = new WP_Theme_JSON(
     174                        array(
     175                                'version'  => WP_Theme_JSON::LATEST_SCHEMA,
     176                                'settings' => array(
     177                                        'blocks' => array(
     178                                                'core/group' => array(
     179                                                        'color' => array(
     180                                                                'palette' => array(
     181                                                                        array(
     182                                                                                'slug'  => 'grey',
     183                                                                                'color' => 'grey',
     184                                                                        ),
     185                                                                ),
     186                                                        ),
     187                                                ),
     188                                        ),
     189                                ),
     190                                'styles'   => array(
     191                                        'blocks' => array(
     192                                                'core/group' => array(
     193                                                        'color' => array(
     194                                                                'text' => 'red',
     195                                                        ),
     196                                                ),
     197                                        ),
     198                                ),
     199                        )
     200                );
     201
     202                $this->assertEquals(
     203                        '.wp-block-group{--wp--preset--color--grey: grey;}.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: grey !important;}.wp-block-group.has-grey-background-color{background-color: grey !important;}',
     204                        $theme_json->get_stylesheet()
     205                );
     206                $this->assertEquals(
     207                        '.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: grey !important;}.wp-block-group.has-grey-background-color{background-color: grey !important;}',
     208                        $theme_json->get_stylesheet( 'block_styles' )
     209                );
     210        }
     211
     212        public function test_get_stylesheet_preset_values_are_marked_as_important() {
     213                $theme_json = new WP_Theme_JSON(
     214                        array(
     215                                'version'  => WP_Theme_JSON::LATEST_SCHEMA,
     216                                'settings' => array(
     217                                        'color' => array(
     218                                                'palette' => array(
     219                                                        array(
     220                                                                'slug'  => 'grey',
     221                                                                'color' => 'grey',
     222                                                        ),
     223                                                ),
     224                                        ),
     225                                ),
     226                                'styles'   => array(
     227                                        'blocks' => array(
     228                                                'core/paragraph' => array(
     229                                                        'color'      => array(
     230                                                                'text'       => 'red',
     231                                                                'background' => 'blue',
     232                                                        ),
     233                                                        'typography' => array(
     234                                                                'fontSize'   => '12px',
     235                                                                'lineHeight' => '1.3',
     236                                                        ),
     237                                                ),
     238                                        ),
     239                                ),
     240                        )
     241                );
     242
     243                $this->assertEquals(
     244                        'body{--wp--preset--color--grey: grey;}p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}',
     245                        $theme_json->get_stylesheet()
     246                );
    60247        }
    61248
    … …  
    251438                                                'color' => array(
    252439                                                        'custom' => false,
     440                                                ),
     441                                        ),
     442                                ),
     443                        ),
     444                        'styles'   => array(
     445                                'typography' => array(
     446                                        'fontSize' => '12',
     447                                ),
     448                                'blocks'     => array(
     449                                        'core/group' => array(
     450                                                'spacing' => array(
     451                                                        'padding' => array(
     452                                                                'top'    => '12px',
     453                                                                'bottom' => '12px',
     454                                                        ),
     455                                                ),
     456                                        ),
     457                                        'core/list'  => array(
     458                                                'typography' => array(
     459                                                        'fontSize' => '12',
     460                                                ),
     461                                                'color'      => array(
     462                                                        'background' => 'brown',
    253463                                                ),
    254464                                        ),
Note: See TracChangeset for help on using the changeset viewer.