/** * Class that encapsulates the processing of structures that adhere to the theme.json spec. * * This class is for internal core usage and is not supposed to be used by extenders (plugins and/or themes). * This is a low-level API that may need to do breaking changes. Please, * use get_global_settings, get_global_styles, and get_global_stylesheet instead. * * @access private */ #[AllowDynamicProperties] class WP_Theme_JSON {
/** * Container of data in theme.json format. * * @since 5.8.0 * @var array */ protected $theme_json = null;
/** * Holds block metadata extracted from block.json * to be shared among all instances so we don't * process it twice. * * @since 5.8.0 * @since 6.1.0 Initialize as an empty array. * @var array */ protected static $blocks_metadata = array();
/** * The CSS selector for the top-level preset settings. * * @since 6.6.0 * @var string */ const ROOT_CSS_PROPERTIES_SELECTOR = ':root';
/** * The CSS selector for the top-level styles. * * @since 5.8.0 * @var string */ const ROOT_BLOCK_SELECTOR = 'body';
/** * The sources of data this object can represent. * * @since 5.8.0 * @since 6.1.0 Added 'blocks'. * @var string[] */ const VALID_ORIGINS = array( 'default', 'blocks', 'theme', 'custom', );
/** * Presets are a set of values that serve * to bootstrap some styles: colors, font sizes, etc. * * They are a unkeyed array of values such as: * * array( * array( * 'slug' => 'unique-name-within-the-set', * 'name' => 'Name for the UI', * <value_key> => 'value' * ), * ) * * This contains the necessary metadata to process them: * * - path => Where to find the preset within the settings section. * - prevent_override => Disables override of default presets by theme presets. * The relationship between whether to override the defaults * and whether the defaults are enabled is inverse: * - If defaults are enabled => theme presets should not be overridden * - If defaults are disabled => theme presets should be overridden * For example, a theme sets defaultPalette to false, * making the default palette hidden from the user. * In that case, we want all the theme presets to be present, * so they should override the defaults by setting this false. * - use_default_names => whether to use the default names * - value_key => the key that represents the value * - value_func => optionally, instead of value_key, a function to generate * the value that takes a preset as an argument * (either value_key or value_func should be present) * - css_vars => template string to use in generating the CSS Custom Property. * Example output: "--wp--preset--duotone--blue: <value>" will generate as many CSS Custom Properties as presets defined * substituting the $slug for the slug's value for each preset value. * - classes => array containing a structure with the classes to * generate for the presets, where for each array item * the key is the class name and the value the property name. * The "$slug" substring will be replaced by the slug of each preset. * For example: * 'classes' => array( * '.has-$slug-color' => 'color', * '.has-$slug-background-color' => 'background-color', * '.has-$slug-border-color' => 'border-color', * ) * - properties => array of CSS properties to be used by kses to * validate the content of each preset * by means of the remove_insecure_properties method. * * @since 5.8.0 * @since 5.9.0 Added the `color.duotone` and `typography.fontFamilies` presets, * `use_default_names` preset key, and simplified the metadata structure. * @since 6.0.0 Replaced `override` with `prevent_override` and updated the * `prevent_override` value for `color.duotone` to use `color.defaultDuotone`. * @since 6.2.0 Added 'shadow' presets. * @since 6.3.0 Replaced value_func for duotone with `null`. Custom properties are handled by class-wp-duotone.php. * @since 6.6.0 Added the `dimensions.aspectRatios` and `dimensions.defaultAspectRatios` presets. * Updated the 'prevent_override' value for font size presets to use 'typography.defaultFontSizes' * and spacing size presets to use `spacing.defaultSpacingSizes`. * @var array */ const PRESETS_METADATA = array( array( 'path' => array( 'dimensions', 'aspectRatios' ), 'prevent_override' => array( 'dimensions', 'defaultAspectRatios' ), 'use_default_names' => false, 'value_key' => 'ratio', 'css_vars' => '--wp--preset--aspect-ratio--$slug', 'classes' => array(), 'properties' => array( 'aspect-ratio' ), ), array( 'path' => array( 'color', 'palette' ), 'prevent_override' => array( 'color', 'defaultPalette' ), 'use_default_names' => false, 'value_key' => 'color', 'css_vars' => '--wp--preset--color--$slug', 'classes' => array( '.has-$slug-color' => 'color', '.has-$slug-background-color' => 'background-color', '.has-$slug-border-color' => 'border-color', ), 'properties' => array( 'color', 'background-color', 'border-color' ), ), array( 'path' => array( 'color', 'gradients' ), 'prevent_override' => array( 'color', 'defaultGradients' ), 'use_default_names' => false, 'value_key' => 'gradient', 'css_vars' => '--wp--preset--gradient--$slug', 'classes' => array( '.has-$slug-gradient-background' => 'background' ), 'properties' => array( 'background' ), ), array( 'path' => array( 'color', 'duotone' ), 'prevent_override' => array( 'color', 'defaultDuotone' ), 'use_default_names' => false, 'value_func' => null, // CSS Custom Properties for duotone are handled by block supports in class-wp-duotone.php. 'css_vars' => null, 'classes' => array(), 'properties' => array( 'filter' ), ), array( 'path' => array( 'typography', 'fontSizes' ), 'prevent_override' => array( 'typography', 'defaultFontSizes' ), 'use_default_names' => true, 'value_func' => 'wp_get_typography_font_size_value', 'css_vars' => '--wp--preset--font-size--$slug', 'classes' => array( '.has-$slug-font-size' => 'font-size' ), 'properties' => array( 'font-size' ), ), array( 'path' => array( 'typography', 'fontFamilies' ), 'prevent_override' => false, 'use_default_names' => false, 'value_key' => 'fontFamily', 'css_vars' => '--wp--preset--font-family--$slug', 'classes' => array( '.has-$slug-font-family' => 'font-family' ), 'properties' => array( 'font-family' ), ), array( 'path' => array( 'spacing', 'spacingSizes' ), 'prevent_override' => array( 'spacing', 'defaultSpacingSizes' ), 'use_default_names' => true, 'value_key' => 'size', 'css_vars' => '--wp--preset--spacing--$slug', 'classes' => array(), 'properties' => array( 'padding', 'margin' ), ), array( 'path' => array( 'shadow', 'presets' ), 'prevent_override' => array( 'shadow', 'defaultPresets' ), 'use_default_names' => false, 'value_key' => 'shadow', 'css_vars' => '--wp--preset--shadow--$slug', 'classes' => array(), 'properties' => array( 'box-shadow' ), ), );
/** * Indirect metadata for style properties that are not directly output. * * Each element maps from a CSS property name to an array of * paths to the value in theme.json & block attributes. * * Indirect properties are not output directly by `compute_style_properties`, * but are used elsewhere in the processing of global styles. The indirect * property is used to validate whether a style value is allowed. * * @since 6.2.0 * @since 6.6.0 Added background-image properties. * * @var array */ const INDIRECT_PROPERTIES_METADATA = array( 'gap' => array( array( 'spacing', 'blockGap' ), ), 'column-gap' => array( array( 'spacing', 'blockGap', 'left' ), ), 'row-gap' => array( array( 'spacing', 'blockGap', 'top' ), ), 'max-width' => array( array( 'layout', 'contentSize' ), array( 'layout', 'wideSize' ), ), 'background-image' => array( array( 'background', 'backgroundImage', 'url' ), ), );
/** * Protected style properties. * * These style properties are only rendered if a setting enables it * via a value other than `null`. * * Each element maps the style property to the corresponding theme.json * setting key. * * @since 5.9.0 */ const PROTECTED_PROPERTIES = array( 'spacing.blockGap' => array( 'spacing', 'blockGap' ), );
/** * The top-level keys a theme.json can have. * * @since 5.8.0 As `ALLOWED_TOP_LEVEL_KEYS`. * @since 5.9.0 Renamed from `ALLOWED_TOP_LEVEL_KEYS` to `VALID_TOP_LEVEL_KEYS`, * added the `customTemplates` and `templateParts` values. * @since 6.3.0 Added the `description` value. * @since 6.6.0 Added `blockTypes` to support block style variation theme.json partials. * @var string[] */ const VALID_TOP_LEVEL_KEYS = array( 'blockTypes', 'customTemplates', 'description', 'patterns', 'settings', 'slug', 'styles', 'templateParts', 'title', 'version', );
/** * Defines which pseudo selectors are enabled for which elements. * * The order of the selectors should be: link, any-link, visited, hover, focus, active. * This is to ensure the user action (hover, focus and active) styles have a higher * specificity than the visited styles, which in turn have a higher specificity than * the unvisited styles. * * See https://core.trac.wordpress.org/ticket/56928. * Note: this will affect both top-level and block-level elements. * * @since 6.1.0 * @since 6.2.0 Added support for ':link' and ':any-link'. */ const VALID_ELEMENT_PSEUDO_SELECTORS = array( 'link' => array( ':link', ':any-link', ':visited', ':hover', ':focus', ':active' ), 'button' => array( ':link', ':any-link', ':visited', ':hover', ':focus', ':active' ), );
/** * The valid elements that can be found under styles. * * @since 5.8.0 * @since 6.1.0 Added `heading`, `button`, and `caption` elements. * @var string[] */ const ELEMENTS = array( 'link' => 'a:where(:not(.wp-element-button))', // The `where` is needed to lower the specificity. 'heading' => 'h1, h2, h3, h4, h5, h6', 'h1' => 'h1', 'h2' => 'h2', 'h3' => 'h3', 'h4' => 'h4', 'h5' => 'h5', 'h6' => 'h6', // We have the .wp-block-button__link class so that this will target older buttons that have been serialized. 'button' => '.wp-element-button, .wp-block-button__link', // The block classes are necessary to target older content that won't use the new class names. 'caption' => '.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption', 'cite' => 'cite', );
/** * List of block support features that can have their related styles * generated under their own feature level selector rather than the block's. * * @since 6.1.0 * @var string[] */ const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = array( '__experimentalBorder' => 'border', 'color' => 'color', 'spacing' => 'spacing', 'typography' => 'typography', );
/** * Returns a class name by an element name. * * @since 6.1.0 * * @param string $element The name of the element. * @return string The name of the class. */ public static function get_element_class_name( $element ) { $class_name = '';
/** * The latest version of the schema in use. * * @since 5.8.0 * @since 5.9.0 Changed value from 1 to 2. * @since 6.6.0 Changed value from 2 to 3. * @var int */ const LATEST_SCHEMA = 3;
/** * Constructor. * * @since 5.8.0 * @since 6.6.0 Key spacingScale by origin, and Pre-generate the spacingSizes from spacingScale. * Added unwrapping of shared block style variations into block type variations if registered. * * @param array $theme_json A structure that follows the theme.json schema. * @param string $origin Optional. What source of data this object represents. * One of 'blocks', 'default', 'theme', or 'custom'. Default 'theme'. */ public function __construct( $theme_json = array( 'version' => self::LATEST_SCHEMA ), $origin = 'theme' ) { if ( ! in_array( $origin, static::VALID_ORIGINS, true ) ) { $origin = 'theme'; }
/** * Enables some settings. * * @since 5.9.0 * * @param array $context The context to which the settings belong. */ protected static function do_opt_in_into_settings( &$context ) { foreach ( static::APPEARANCE_TOOLS_OPT_INS as $path ) { /* * Use "unset prop" as a marker instead of "null" because * "null" can be a valid value for some props (e.g. blockGap). */ if ( 'unset prop' === _wp_array_get( $context, $path, 'unset prop' ) ) { _wp_array_set( $context, $path, true ); } }
unset( $context['appearanceTools'] ); }
/** * Sanitizes the input according to the schemas. * * @since 5.8.0 * @since 5.9.0 Added the `$valid_block_names` and `$valid_element_name` parameters. * @since 6.3.0 Added the `$valid_variations` parameter. * @since 6.6.0 Updated schema to allow extended block style variations. * * @param array $input Structure to sanitize. * @param array $valid_block_names List of valid block names. * @param array $valid_element_names List of valid element names. * @param array $valid_variations List of valid variations per block. * @return array The sanitized output. */ protected static function sanitize( $input, $valid_block_names, $valid_element_names, $valid_variations ) {
$output = array();
if ( ! is_array( $input ) ) { return $output; }
// Preserve only the top most level keys. $output = array_intersect_key( $input, array_flip( static::VALID_TOP_LEVEL_KEYS ) );
/* * Remove any rules that are annotated as "top" in VALID_STYLES constant. * Some styles are only meant to be available at the top-level (e.g.: blockGap), * hence, the schema for blocks & elements should not have them. */ $styles_non_top_level = static::VALID_STYLES; foreach ( array_keys( $styles_non_top_level ) as $section ) { // array_key_exists() needs to be used instead of isset() because the value can be null. if ( array_key_exists( $section, $styles_non_top_level ) && is_array( $styles_non_top_level[ $section ] ) ) { foreach ( array_keys( $styles_non_top_level[ $section ] ) as $prop ) { if ( 'top' === $styles_non_top_level[ $section ][ $prop ] ) { unset( $styles_non_top_level[ $section ][ $prop ] ); } } } }
// Build the schema based on valid block & element names. $schema = array(); $schema_styles_elements = array();
/* * Set allowed element pseudo selectors based on per element allow list. * Target data structure in schema: * e.g. * - top level elements: `$schema['styles']['elements']['link'][':hover']`. * - block level elements: `$schema['styles']['blocks']['core/button']['elements']['link'][':hover']`. */ foreach ( $valid_element_names as $element ) { $schema_styles_elements[ $element ] = $styles_non_top_level;
// Is there metadata for all currently registered blocks? $blocks = array_diff_key( $blocks, static::$blocks_metadata ); if ( empty( $blocks ) ) { /* * New block styles may have been registered within WP_Block_Styles_Registry. * Update block metadata for any new block style variations. */ $registered_styles = $style_registry->get_all_registered(); foreach ( static::$blocks_metadata as $block_name => $block_metadata ) { if ( ! empty( $registered_styles[ $block_name ] ) ) { $style_selectors = $block_metadata['styleVariations'] ?? array();
// If the block has style variations, append their selectors to the block metadata. $style_selectors = array(); if ( ! empty( $block_type->styles ) ) { foreach ( $block_type->styles as $style ) { $style_selectors[ $style['name'] ] = static::get_block_style_variation_selector( $style['name'], static::$blocks_metadata[ $block_name ]['selector'] ); } }
// Block style variations can be registered through the WP_Block_Styles_Registry as well as block.json. $registered_styles = $style_registry->get_registered_styles_for_block( $block_name ); foreach ( $registered_styles as $style ) { $style_selectors[ $style['name'] ] = static::get_block_style_variation_selector( $style['name'], static::$blocks_metadata[ $block_name ]['selector'] ); }
/** * Given a tree, removes the keys that are not present in the schema. * * It is recursive and modifies the input in-place. * * @since 5.8.0 * * @param array $tree Input to process. * @param array $schema Schema to adhere to. * @return array The modified $tree. */ protected static function remove_keys_not_in_schema( $tree, $schema ) { if ( ! is_array( $tree ) ) { return $tree; }
foreach ( $tree as $key => $value ) { // Remove keys not in the schema or with null/empty values. if ( ! array_key_exists( $key, $schema ) ) { unset( $tree[ $key ] ); continue; }
if ( is_array( $schema[ $key ] ) ) { if ( ! is_array( $value ) ) { unset( $tree[ $key ] ); } elseif ( wp_is_numeric_array( $value ) ) { // If indexed, process each item in the array. foreach ( $value as $item_key => $item_value ) { if ( isset( $schema[ $key ][0] ) && is_array( $schema[ $key ][0] ) ) { $tree[ $key ][ $item_key ] = self::remove_keys_not_in_schema( $item_value, $schema[ $key ][0] ); } else { // If the schema does not define a further structure, keep the value as is. $tree[ $key ][ $item_key ] = $item_value; } } } else { // If associative, process as a single object. $tree[ $key ] = self::remove_keys_not_in_schema( $value, $schema[ $key ] );
/** * Returns the stylesheet that results of processing * the theme.json structure this object represents. * * @since 5.8.0 * @since 5.9.0 Removed the `$type` parameter, added the `$types` and `$origins` parameters. * @since 6.3.0 Add fallback layout styles for Post Template when block gap support isn't available. * @since 6.6.0 Added boolean `skip_root_layout_styles` and `include_block_style_variations` options * to control styles output as desired. * * @param string[] $types Types of styles to load. Will load all by default. It accepts: * - `variables`: only the CSS Custom Properties for presets & custom ones. * - `styles`: only the styles section in theme.json. * - `presets`: only the classes for the presets. * @param string[] $origins A list of origins to include. By default it includes VALID_ORIGINS. * @param array $options { * Optional. An array of options for now used for internal purposes only (may change without notice). * * @type string $scope Makes sure all style are scoped to a given selector * @type string $root_selector Overwrites and forces a given selector to be used on the root node * @type bool $skip_root_layout_styles Omits root layout styles from the generated stylesheet. Default false. * @type bool $include_block_style_variations Includes styles for block style variations in the generated stylesheet. Default false. * } * @return string The resulting stylesheet. */ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' ), $origins = null, $options = array() ) { if ( null === $origins ) { $origins = static::VALID_ORIGINS; }
if ( is_string( $types ) ) { // Dispatch error and map old arguments to new ones. _deprecated_argument( __FUNCTION__, '5.9.0' ); if ( 'block_styles' === $types ) { $types = array( 'styles', 'presets' ); } elseif ( 'css_variables' === $types ) { $types = array( 'variables' ); } else { $types = array( 'variables', 'styles', 'presets' ); } }
// Load the custom CSS last so it has the highest specificity. if ( in_array( 'custom-css', $types, true ) ) { // Add the global styles root CSS. $stylesheet .= _wp_array_get( $this->theme_json, array( 'styles', 'css' ) ); }
return $stylesheet; }
/** * Processes the CSS, to apply nesting. * * @since 6.2.0 * @since 6.6.0 Enforced 0-1-0 specificity for block custom CSS selectors. * * @param string $css The CSS to process. * @param string $selector The selector to nest. * @return string The processed CSS. */ protected function process_blocks_custom_css( $css, $selector ) { $processed_css = '';
if ( empty( $css ) ) { return $processed_css; }
// Split CSS nested rules. $parts = explode( '&', $css ); foreach ( $parts as $part ) { if ( empty( $part ) ) { continue; } $is_root_css = ( ! str_contains( $part, '{' ) ); if ( $is_root_css ) { // If the part doesn't contain braces, it applies to the root level. $processed_css .= ':root :where(' . trim( $selector ) . '){' . trim( $part ) . '}'; } else { // If the part contains braces, it's a nested CSS rule. $part = explode( '{', str_replace( '}', '', $part ) ); if ( count( $part ) !== 2 ) { continue; } $nested_selector = $part[0]; $css_value = $part[1];
/* * Handle pseudo elements such as ::before, ::after etc. Regex will also * capture any leading combinator such as >, +, or ~, as well as spaces. * This allows pseudo elements as descendants e.g. `.parent ::before`. */ $matches = array(); $has_pseudo_element = preg_match( '/([>+~\s]*::[a-zA-Z-]+)/', $nested_selector, $matches ); $pseudo_part = $has_pseudo_element ? $matches[1] : ''; $nested_selector = $has_pseudo_element ? str_replace( $pseudo_part, '', $nested_selector ) : $nested_selector;
// Finalize selector and re-append pseudo element if required. $part_selector = str_starts_with( $nested_selector, ' ' ) ? static::scope_selector( $selector, $nested_selector ) : static::append_to_selector( $selector, $nested_selector ); $final_selector = ":root :where($part_selector)$pseudo_part";
/** * Converts each style section into a list of rulesets * containing the block styles to be appended to the stylesheet. * * See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax * * For each section this creates a new ruleset such as: * * block-selector { * style-property-one: value; * } * * @since 5.8.0 As `get_block_styles()`. * @since 5.9.0 Renamed from `get_block_styles()` to `get_block_classes()` * and no longer returns preset classes. * Removed the `$setting_nodes` parameter. * @since 6.1.0 Moved most internal logic to `get_styles_for_block()`. * * @param array $style_nodes Nodes with styles. * @return string The new stylesheet. */ protected function get_block_classes( $style_nodes ) { $block_rules = '';
/** * Gets the CSS layout rules for a particular block from theme.json layout definitions. * * @since 6.1.0 * @since 6.3.0 Reduced specificity for layout margin rules. * @since 6.5.1 Only output rules referencing content and wide sizes when values exist. * @since 6.5.3 Add types parameter to check if only base layout styles are needed. * @since 6.6.0 Updated layout style specificity to be compatible with overall 0-1-0 specificity in global styles. * * @param array $block_metadata Metadata about the block to get styles for. * @param array $types Optional. Types of styles to output. If empty, all styles will be output. * @return string Layout styles for the block. */ protected function get_layout_styles( $block_metadata, $types = array() ) { $block_rules = ''; $block_type = null;
// Skip outputting layout styles if explicitly disabled. if ( current_theme_supports( 'disable-layout-styles' ) ) { return $block_rules; }
$selector = isset( $block_metadata['selector'] ) ? $block_metadata['selector'] : ''; $has_block_gap_support = isset( $this->theme_json['settings']['spacing']['blockGap'] ); $has_fallback_gap_support = ! $has_block_gap_support; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback gap styles support. $node = _wp_array_get( $this->theme_json, $block_metadata['path'], array() ); $layout_definitions = wp_get_layout_definitions(); $layout_selector_pattern = '/^[a-zA-Z0-9\-\.\,\ *+>:\(\)]*$/'; // Allow alphanumeric classnames, spaces, wildcard, sibling, child combinator and pseudo class selectors.
/* * Gap styles will only be output if the theme has block gap support, or supports a fallback gap. * Default layout gap styles will be skipped for themes that do not explicitly opt-in to blockGap with a `true` or `false` value. */ if ( $has_block_gap_support || $has_fallback_gap_support ) { $block_gap_value = null; // Use a fallback gap value if block gap support is not available. if ( ! $has_block_gap_support ) { $block_gap_value = static::ROOT_BLOCK_SELECTOR === $selector ? '0.5em' : null; if ( ! empty( $block_type ) ) { $block_gap_value = isset( $block_type->supports['spacing']['blockGap']['__experimentalDefault'] ) ? $block_type->supports['spacing']['blockGap']['__experimentalDefault'] : null; } } else { $block_gap_value = static::get_property_value( $node, array( 'spacing', 'blockGap' ) ); }
// Support split row / column values and concatenate to a shorthand value. if ( is_array( $block_gap_value ) ) { if ( isset( $block_gap_value['top'] ) && isset( $block_gap_value['left'] ) ) { $gap_row = static::get_property_value( $node, array( 'spacing', 'blockGap', 'top' ) ); $gap_column = static::get_property_value( $node, array( 'spacing', 'blockGap', 'left' ) ); $block_gap_value = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column; } else { // Skip outputting gap value if not all sides are provided. $block_gap_value = null; } }
// If the block should have custom gap, add the gap styles. if ( null !== $block_gap_value && false !== $block_gap_value && '' !== $block_gap_value ) { foreach ( $layout_definitions as $layout_definition_key => $layout_definition ) { // Allow outputting fallback gap styles for flex and grid layout types when block gap support isn't available. if ( ! $has_block_gap_support && 'flex' !== $layout_definition_key && 'grid' !== $layout_definition_key ) { continue; }
/** * Converts each styles section into a list of rulesets * to be appended to the stylesheet. * These rulesets contain all the css variables (custom variables and preset variables). * * See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax * * For each section this creates a new ruleset such as: * * block-selector { * --wp--preset--category--slug: value; * --wp--custom--variable: value; * } * * @since 5.8.0 * @since 5.9.0 Added the `$origins` parameter. * * @param array $nodes Nodes with settings. * @param string[] $origins List of origins to process. * @return string The new stylesheet. */ protected function get_css_variables( $nodes, $origins ) { $stylesheet = ''; foreach ( $nodes as $metadata ) { if ( null === $metadata['selector'] ) { continue; }
/** * Given a settings array, returns the generated rulesets * for the preset classes. * * @since 5.8.0 * @since 5.9.0 Added the `$origins` parameter. * @since 6.6.0 Added check for root CSS properties selector. * * @param array $settings Settings to process. * @param string $selector Selector wrapping the classes. * @param string[] $origins List of origins to process. * @return string The result of processing the presets. */ protected static function compute_preset_classes( $settings, $selector, $origins ) { if ( static::ROOT_BLOCK_SELECTOR === $selector || static::ROOT_CSS_PROPERTIES_SELECTOR === $selector ) { /* * Classes at the global level do not need any CSS prefixed, * and we don't want to increase its specificity. */ $selector = ''; }
/** * Scopes the selectors for a given style node. * * This includes the primary selector, i.e. `$node['selector']`, as well as any custom * selectors for features and subfeatures, e.g. `$node['selectors']['border']` etc. * * @since 6.6.0 * * @param string $scope Selector to scope to. * @param array $node Style node with selectors to scope. * @return array Node with updated selectors. */ protected static function scope_style_node_selectors( $scope, $node ) { $node['selector'] = static::scope_selector( $scope, $node['selector'] );
if ( empty( $node['selectors'] ) ) { return $node; }
$value = ''; if ( isset( $preset_metadata['value_key'], $preset[ $preset_metadata['value_key'] ] ) ) { $value_key = $preset_metadata['value_key']; $value = $preset[ $value_key ]; } elseif ( isset( $preset_metadata['value_func'] ) && is_callable( $preset_metadata['value_func'] ) ) { $value_func = $preset_metadata['value_func']; $value = call_user_func( $value_func, $preset, $settings ); } else { // If we don't have a value, then don't add it to the result. continue; }
$result[ $slug ] = $value; } } return $result; }
/** * Similar to get_settings_values_by_slug, but doesn't compute the value. * * @since 5.9.0 * * @param array $settings Settings to process. * @param array $preset_metadata One of the PRESETS_METADATA values. * @param string[] $origins List of origins to process. * @return array Array of presets where the key and value are both the slug. */ protected static function get_settings_slugs( $settings, $preset_metadata, $origins = null ) { if ( null === $origins ) { $origins = static::VALID_ORIGINS; }
// Use the array as a set so we don't get duplicates. $result[ $slug ] = $slug; } } return $result; }
/** * Transforms a slug into a CSS Custom Property. * * @since 5.9.0 * * @param string $input String to replace. * @param string $slug The slug value to use to generate the custom property. * @return string The CSS Custom Property. Something along the lines of `--wp--preset--color--black`. */ protected static function replace_slug_in_string( $input, $slug ) { return strtr( $input, array( '$slug' => $slug ) ); }
/** * Given the block settings, extracts the CSS Custom Properties * for the presets and adds them to the $declarations array * following the format: * * array( * 'name' => 'property_name', * 'value' => 'property_value, * ) * * @since 5.8.0 * @since 5.9.0 Added the `$origins` parameter. * * @param array $settings Settings to process. * @param string[] $origins List of origins to process. * @return array The modified $declarations. */ protected static function compute_preset_vars( $settings, $origins ) { $declarations = array(); foreach ( static::PRESETS_METADATA as $preset_metadata ) { if ( empty( $preset_metadata['css_vars'] ) ) { continue; } $values_by_slug = static::get_settings_values_by_slug( $settings, $preset_metadata, $origins ); foreach ( $values_by_slug as $slug => $value ) { $declarations[] = array( 'name' => static::replace_slug_in_string( $preset_metadata['css_vars'], $slug ), 'value' => $value, ); } }
return $declarations; }
/** * Given an array of settings, extracts the CSS Custom Properties * for the custom values and adds them to the $declarations * array following the format: * * array( * 'name' => 'property_name', * 'value' => 'property_value, * ) * * @since 5.8.0 * * @param array $settings Settings to process. * @return array The modified $declarations. */ protected static function compute_theme_vars( $settings ) { $declarations = array(); $custom_values = isset( $settings['custom'] ) ? $settings['custom'] : array(); $css_vars = static::flatten_tree( $custom_values ); foreach ( $css_vars as $key => $value ) { $declarations[] = array( 'name' => '--wp--custom--' . $key, 'value' => $value, ); }
return $declarations; }
/** * Given a tree, it creates a flattened one * by merging the keys and binding the leaf values * to the new keys. * * It also transforms camelCase names into kebab-case * and substitutes '/' by '-'. * * This is thought to be useful to generate * CSS Custom Properties from a tree, * although there's nothing in the implementation * of this function that requires that format. * * For example, assuming the given prefix is '--wp' * and the token is '--', for this input tree: * * { * 'some/property': 'value', * 'nestedProperty': { * 'sub-property': 'value' * } * } * * it'll return this output: * * { * '--wp--some-property': 'value', * '--wp--nested-property--sub-property': 'value' * } * * @since 5.8.0 * * @param array $tree Input tree to process. * @param string $prefix Optional. Prefix to prepend to each variable. Default empty string. * @param string $token Optional. Token to use between levels. Default '--'. * @return array The flattened tree. */ protected static function flatten_tree( $tree, $prefix = '', $token = '--' ) { $result = array(); foreach ( $tree as $property => $value ) { $new_key = $prefix . str_replace( '/', '-', strtolower( _wp_to_kebab_case( $property ) ) );
/* * Processes background image styles. * If the value is a URL, it will be converted to a CSS `url()` value. * For uploaded image (images with a database ID), apply size and position defaults, * equal to those applied in block supports in lib/background.php. */ if ( 'background-image' === $css_property && ! empty( $value ) ) { $background_styles = wp_style_engine_get_styles( array( 'background' => array( 'backgroundImage' => $value ) ) ); $value = $background_styles['declarations'][ $css_property ]; } if ( empty( $value ) && static::ROOT_BLOCK_SELECTOR !== $selector && ! empty( $styles['background']['backgroundImage']['id'] ) ) { if ( 'background-size' === $css_property ) { $value = 'cover'; } // If the background size is set to `contain` and no position is set, set the position to `center`. if ( 'background-position' === $css_property ) { $background_size = $styles['background']['backgroundSize'] ?? null; $value = 'contain' === $background_size ? '50% 50%' : null; } }
// Skip if empty and not "0" or value represents array of longhand values. $has_missing_value = empty( $value ) && ! is_numeric( $value ); if ( $has_missing_value || is_array( $value ) ) { continue; }
/* * Look up protected properties, keyed by value path. * Skip protected properties that are explicitly set to `null`. */ $path_string = implode( '.', $value_path ); if ( isset( static::PROTECTED_PROPERTIES[ $path_string ] ) && _wp_array_get( $settings, static::PROTECTED_PROPERTIES[ $path_string ], null ) === null ) { continue; }
// Calculates fluid typography rules where available. if ( 'font-size' === $css_property ) { /* * wp_get_typography_font_size_value() will check * if fluid typography has been activated and also * whether the incoming value can be converted to a fluid value. * Values that already have a clamp() function will not pass the test, * and therefore the original $value will be returned. * Pass the current theme_json settings to override any global settings. */ $value = wp_get_typography_font_size_value( array( 'size' => $value ), $settings ); }
if ( 'aspect-ratio' === $css_property ) { // For aspect ratio to work, other dimensions rules must be unset. // This ensures that a fixed height does not override the aspect ratio. $declarations[] = array( 'name' => 'min-height', 'value' => 'unset', ); }
// If a variable value is added to the root, the corresponding property should be removed. foreach ( $root_variable_duplicates as $duplicate ) { $discard = array_search( $duplicate, array_column( $declarations, 'name' ), true ); if ( is_numeric( $discard ) ) { array_splice( $declarations, $discard, 1 ); } }
return $declarations; }
/** * Returns the style property for the given path. * * It also converts references to a path to the value * stored at that location, e.g. * { "ref": "style.color.background" } => "#fff". * * @since 5.8.0 * @since 5.9.0 Added support for values of array type, which are returned as is. * @since 6.1.0 Added the `$theme_json` parameter. * @since 6.3.0 It no longer converts the internal format "var:preset|color|secondary" * to the standard form "--wp--preset--color--secondary". * This is already done by the sanitize method, * so every property will be in the standard form. * @since 6.7.0 Added support for background image refs. * * @param array $styles Styles subtree. * @param array $path Which property to process. * @param array $theme_json Theme JSON array. * @return string|array Style property value. */ protected static function get_property_value( $styles, $path, $theme_json = null ) { $value = _wp_array_get( $styles, $path, '' );
if ( '' === $value || null === $value ) { // No need to process the value further. return ''; }
/* * This converts references to a path to the value at that path * where the value is an array with a "ref" key, pointing to a path. * For example: { "ref": "style.color.background" } => "#fff". * In the case of backgroundImage, if both a ref and a URL are present in the value, * the URL takes precedence and the ref is ignored. */ if ( is_array( $value ) && isset( $value['ref'] ) ) { $value_path = explode( '.', $value['ref'] ); $ref_value = _wp_array_get( $theme_json, $value_path ); // Background Image refs can refer to a string or an array containing a URL string. $ref_value_url = $ref_value['url'] ?? null; // Only use the ref value if we find anything. if ( ! empty( $ref_value ) && ( is_string( $ref_value ) || is_string( $ref_value_url ) ) ) { $value = $ref_value; }
if ( is_array( $ref_value ) && isset( $ref_value['ref'] ) ) { $path_string = json_encode( $path ); $ref_value_string = json_encode( $ref_value ); _doing_it_wrong( 'get_property_value', sprintf( /* translators: 1: theme.json, 2: Value name, 3: Value path, 4: Another value name. */ __( 'Your %1$s file uses a dynamic value (%2$s) for the path at %3$s. However, the value at %3$s is also a dynamic value (pointing to %4$s) and pointing to another dynamic value is not supported. Please update %3$s to point directly to %4$s.' ), 'theme.json', $ref_value_string, $path_string, $ref_value['ref'] ), '6.1.0' ); } }
if ( is_array( $value ) ) { return $value; }
return $value; }
/** * Builds metadata for the setting nodes, which returns in the form of: * * [ * [ * 'path' => ['path', 'to', 'some', 'node' ], * 'selector' => 'CSS selector for some node' * ], * [ * 'path' => [ 'path', 'to', 'other', 'node' ], * 'selector' => 'CSS selector for other node' * ], * ] * * @since 5.8.0 * * @param array $theme_json The tree to extract setting nodes from. * @param array $selectors List of selectors per block. * @return array An array of setting nodes metadata. */ protected static function get_setting_nodes( $theme_json, $selectors = array() ) { $nodes = array(); if ( ! isset( $theme_json['settings'] ) ) { return $nodes; }
/** * Filters the list of style nodes with metadata. * * This allows for things like loading block CSS independently. * * @since 6.1.0 * * @param array $nodes Style nodes with metadata. */ return apply_filters( 'wp_theme_json_get_style_nodes', $nodes ); }
/** * A public helper to get the block nodes from a theme.json file. * * @since 6.1.0 * * @return array The block nodes in theme.json. */ public function get_styles_block_nodes() { return static::get_block_nodes( $this->theme_json ); }
/** * Returns a filtered declarations array if there is a separator block with only a background * style defined in theme.json by adding a color attribute to reflect the changes in the front. * * @since 6.1.1 * * @param array $declarations List of declarations. * @return array $declarations List of declarations filtered. */ private static function update_separator_declarations( $declarations ) { $background_color = ''; $border_color_matches = false; $text_color_matches = false;
/** * An internal method to get the block nodes from a theme.json file. * * @since 6.1.0 * @since 6.3.0 Refactored and stabilized selectors API. * @since 6.6.0 Added optional selectors and options for generating block nodes. * @since 6.7.0 Added $include_node_paths_only option. * * @param array $theme_json The theme.json converted to an array. * @param array $selectors Optional list of selectors per block. * @param array $options { * Optional. An array of options for now used for internal purposes only (may change without notice). * * @type bool $include_block_style_variations Include nodes for block style variations. Default false. * @type bool $include_node_paths_only Return only block nodes node paths. Default false. * } * @return array The block nodes in theme.json. */ private static function get_block_nodes( $theme_json, $selectors = array(), $options = array() ) { $nodes = array();
// If only node paths are to be returned, skip selector assignment. if ( ! $include_node_paths_only ) { $selectors = empty( $selectors ) ? static::get_blocks_metadata() : $selectors; }
/** * Gets the CSS rules for a particular block from theme.json. * * @since 6.1.0 * @since 6.6.0 Setting a min-height of HTML when root styles have a background gradient or image. * Updated general global styles specificity to 0-1-0. * Fixed custom CSS output in block style variations. * * @param array $block_metadata Metadata about the block to get styles for. * * @return string Styles for the block. */ public function get_styles_for_block( $block_metadata ) { $node = _wp_array_get( $this->theme_json, $block_metadata['path'], array() ); $use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments']; $selector = $block_metadata['selector']; $settings = isset( $this->theme_json['settings'] ) ? $this->theme_json['settings'] : array(); $feature_declarations = static::get_feature_declarations_for_node( $block_metadata, $node ); $is_root_selector = static::ROOT_BLOCK_SELECTOR === $selector;
// If there are style variations, generate the declarations for them, including any feature selectors the block may have. $style_variation_declarations = array(); $style_variation_custom_css = array(); if ( ! empty( $block_metadata['variations'] ) ) { foreach ( $block_metadata['variations'] as $style_variation ) { $style_variation_node = _wp_array_get( $this->theme_json, $style_variation['path'], array() ); $clean_style_variation_selector = trim( $style_variation['selector'] );
// Generate any feature/subfeature style declarations for the current style variation. $variation_declarations = static::get_feature_declarations_for_node( $block_metadata, $style_variation_node );
// Combine selectors with style variation's selector and add to overall style variation declarations. foreach ( $variation_declarations as $current_selector => $new_declarations ) { // If current selector includes block classname, remove it but leave the whitespace in. $shortened_selector = str_replace( $block_metadata['selector'] . ' ', ' ', $current_selector );
// Prepend the variation selector to the current selector. $split_selectors = explode( ',', $shortened_selector ); $updated_selectors = array_map( static function ( $split_selector ) use ( $clean_style_variation_selector ) { return $clean_style_variation_selector . $split_selector; }, $split_selectors ); $combined_selectors = implode( ',', $updated_selectors );
// Add the new declarations to the overall results under the modified selector. $style_variation_declarations[ $combined_selectors ] = $new_declarations; }
// Compute declarations for remaining styles not covered by feature level selectors. $style_variation_declarations[ $style_variation['selector'] ] = static::compute_style_properties( $style_variation_node, $settings, null, $this->theme_json ); // Store custom CSS for the style variation. if ( isset( $style_variation_node['css'] ) ) { $style_variation_custom_css[ $style_variation['selector'] ] = $this->process_blocks_custom_css( $style_variation_node['css'], $style_variation['selector'] ); } } } /* * Get a reference to element name from path. * $block_metadata['path'] = array( 'styles','elements','link' ); * Make sure that $block_metadata['path'] describes an element node, like [ 'styles', 'element', 'link' ]. * Skip non-element paths like just ['styles']. */ $is_processing_element = in_array( 'elements', $block_metadata['path'], true );
/* * If the current selector is a pseudo selector that's defined in the allow list for the current * element then compute the style properties for it. * Otherwise just compute the styles for the default selector as normal. */ if ( $pseudo_selector && isset( $node[ $pseudo_selector ] ) && isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] ) && in_array( $pseudo_selector, static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ], true ) ) { $declarations = static::compute_style_properties( $node[ $pseudo_selector ], $settings, null, $this->theme_json, $selector, $use_root_padding ); } else { $declarations = static::compute_style_properties( $node, $settings, null, $this->theme_json, $selector, $use_root_padding ); }
$block_rules = '';
/* * 1. Bespoke declaration modifiers: * - 'filter': Separate the declarations that use the general selector * from the ones using the duotone selector. * - 'background|background-image': set the html min-height to 100% * to ensure the background covers the entire viewport. */ $declarations_duotone = array(); $should_set_root_min_height = false;
foreach ( $declarations as $index => $declaration ) { if ( 'filter' === $declaration['name'] ) { /* * 'unset' filters happen when a filter is unset * in the site-editor UI. Because the 'unset' value * in the user origin overrides the value in the * theme origin, we can skip rendering anything * here as no filter needs to be applied anymore. * So only add declarations to with values other * than 'unset'. */ if ( 'unset' !== $declaration['value'] ) { $declarations_duotone[] = $declaration; } unset( $declarations[ $index ] ); }
/* * If root styles has a background-image or a background (gradient) set, * set the min-height to '100%'. Minus `--wp-admin--admin-bar--height` for logged-in view. * Setting the CSS rule on the HTML tag ensures background gradients and images behave similarly, * and matches the behavior of the site editor. */ if ( $should_set_root_min_height ) { $block_rules .= static::to_ruleset( 'html', array( array( 'name' => 'min-height', 'value' => 'calc(100% - var(--wp-admin--admin-bar--height, 0px))', ), ) ); }
// Update declarations if there are separators with only background color defined. if ( '.wp-block-separator' === $selector ) { $declarations = static::update_separator_declarations( $declarations ); }
/* * Root selector (body) styles should not be wrapped in `:root where()` to keep * specificity at (0,0,1) and maintain backwards compatibility. * * Top-level element styles using element-only specificity selectors should * not get wrapped in `:root :where()` to maintain backwards compatibility. * * Pseudo classes, e.g. :hover, :focus etc., are a class-level selector so * still need to be wrapped in `:root :where` to cap specificity for nested * variations etc. Pseudo selectors won't match the ELEMENTS selector exactly. */ $element_only_selector = $is_root_selector || ( $current_element && isset( static::ELEMENTS[ $current_element ] ) && // buttons, captions etc. still need `:root :where()` as they are class based selectors. ! isset( static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES[ $current_element ] ) && static::ELEMENTS[ $current_element ] === $selector );
// 2. Generate and append the rules that use the general selector. $general_selector = $element_only_selector ? $selector : ":root :where($selector)"; $block_rules .= static::to_ruleset( $general_selector, $declarations );
// 3. Generate and append the rules that use the duotone selector. if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) { $block_rules .= static::to_ruleset( $block_metadata['duotone'], $declarations_duotone ); }
// 7. Generate and append any custom CSS rules. if ( isset( $node['css'] ) && ! $is_root_selector ) { $block_rules .= $this->process_blocks_custom_css( $node['css'], $selector ); }
return $block_rules; }
/** * Outputs the CSS for layout rules on the root. * * @since 6.1.0 * @since 6.6.0 Use `ROOT_CSS_PROPERTIES_SELECTOR` for CSS custom properties and improved consistency of root padding rules. * Updated specificity of body margin reset and first/last child selectors. * * @param string $selector The root node selector. * @param array $block_metadata The metadata for the root block. * @return string The additional root rules CSS. */ public function get_root_layout_rules( $selector, $block_metadata ) { $css = ''; $settings = isset( $this->theme_json['settings'] ) ? $this->theme_json['settings'] : array(); $use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments'];
/* * If there are content and wide widths in theme.json, output them * as custom properties on the body element so all blocks can use them. */ if ( isset( $settings['layout']['contentSize'] ) || isset( $settings['layout']['wideSize'] ) ) { $content_size = isset( $settings['layout']['contentSize'] ) ? $settings['layout']['contentSize'] : $settings['layout']['wideSize']; $content_size = static::is_safe_css_declaration( 'max-width', $content_size ) ? $content_size : 'initial'; $wide_size = isset( $settings['layout']['wideSize'] ) ? $settings['layout']['wideSize'] : $settings['layout']['contentSize']; $wide_size = static::is_safe_css_declaration( 'max-width', $wide_size ) ? $wide_size : 'initial'; $css .= static::ROOT_CSS_PROPERTIES_SELECTOR . ' { --wp--style--global--content-size: ' . $content_size . ';'; $css .= '--wp--style--global--wide-size: ' . $wide_size . '; }'; }
/* * Reset default browser margin on the body element. * This is set on the body selector **before** generating the ruleset * from the `theme.json`. This is to ensure that if the `theme.json` declares * `margin` in its `spacing` declaration for the `body` element then these * user-generated values take precedence in the CSS cascade. * @link https://github.com/WordPress/gutenberg/issues/36147. */ $css .= ':where(body) { margin: 0; }';
if ( $use_root_padding ) { // Top and bottom padding are applied to the outer block container. $css .= '.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }'; // Right and left padding are applied to the first container with `.has-global-padding` class. $css .= '.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }'; // Alignfull children of the container with left and right padding have negative margins so they can still be full width. $css .= '.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }'; // Nested children of the container with left and right padding that are not full aligned do not get padding, unless they are direct children of an alignfull flow container. $css .= '.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }'; // Alignfull direct children of the containers that are targeted by the rule above do not need negative margins. $css .= '.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0; }'; }
/** * Merges new incoming data. * * @since 5.8.0 * @since 5.9.0 Duotone preset also has origins. * @since 6.7.0 Replace background image objects during merge. * * @param WP_Theme_JSON $incoming Data to merge. */ public function merge( $incoming ) { $incoming_data = $incoming->get_raw_data(); $this->theme_json = array_replace_recursive( $this->theme_json, $incoming_data );
/* * Recompute all the spacing sizes based on the new hierarchy of data. In the constructor * spacingScale and spacingSizes are both keyed by origin and VALID_ORIGINS is ordered, so * we can allow partial spacingScale data to inherit missing data from earlier layers when * computing the spacing sizes. * * This happens before the presets are merged to ensure that default spacing sizes can be * removed from the theme origin if $prevent_override is true. */ $flattened_spacing_scale = array(); foreach ( static::VALID_ORIGINS as $origin ) { $scale_path = array( 'settings', 'spacing', 'spacingScale', $origin );
// Apply the base spacing scale to the current layer. $base_spacing_scale = _wp_array_get( $this->theme_json, $scale_path, array() ); $flattened_spacing_scale = array_replace( $flattened_spacing_scale, $base_spacing_scale );
/* * The array_replace_recursive algorithm merges at the leaf level, * but we don't want leaf arrays to be merged, so we overwrite it. * * For leaf values that are sequential arrays it will use the numeric indexes for replacement. * We rather replace the existing with the incoming value, if it exists. * This is the case of spacing.units. * * For leaf values that are associative arrays it will merge them as expected. * This is also not the behavior we want for the current associative arrays (presets). * We rather replace the existing with the incoming value, if it exists. * This happens, for example, when we merge data from theme.json upon existing * theme supports or when we merge anything coming from the same source twice. * This is the case of color.palette, color.gradients, color.duotone, * typography.fontSizes, or typography.fontFamilies. * * Additionally, for some preset types, we also want to make sure the * values they introduce don't conflict with default values. We do so * by checking the incoming slugs for theme presets and compare them * with the equivalent default presets: if a slug is present as a default * we remove it from the theme presets. */ $nodes = static::get_setting_nodes( $incoming_data ); $slugs_global = static::get_default_slugs( $this->theme_json, array( 'settings' ) ); foreach ( $nodes as $node ) { // Replace the spacing.units. $path = $node['path']; $path[] = 'spacing'; $path[] = 'units';
// Set names for theme presets based on the slug if they are not set and can use default names. if ( 'theme' === $origin && $preset_metadata['use_default_names'] ) { foreach ( $content as $key => $item ) { if ( ! isset( $item['name'] ) ) { $name = static::get_name_from_defaults( $item['slug'], $base_path ); if ( null !== $name ) { $content[ $key ]['name'] = $name; } } } }
// Filter out default slugs from theme presets when defaults should not be overridden. if ( 'theme' === $origin && $prevent_override ) { $slugs_node = static::get_default_slugs( $this->theme_json, $node['path'] ); $preset_global = _wp_array_get( $slugs_global, $preset_metadata['path'], array() ); $preset_node = _wp_array_get( $slugs_node, $preset_metadata['path'], array() ); $preset_slugs = array_merge_recursive( $preset_global, $preset_node );
/* * Style values are merged at the leaf level, however * some values provide exceptions, namely style values that are * objects and represent unique definitions for the style. */ $style_nodes = static::get_block_nodes( $this->theme_json, array(), array( 'include_node_paths_only' => true ) ); foreach ( $style_nodes as $style_node ) { $path = $style_node['path']; /* * Background image styles should be replaced, not merged, * as they themselves are specific object definitions for the style. */ $background_image_path = array_merge( $path, static::PROPERTIES_METADATA['background-image'] ); $content = _wp_array_get( $incoming_data, $background_image_path, null ); if ( isset( $content ) ) { _wp_array_set( $this->theme_json, $background_image_path, $content ); } } }
/** * Converts all filter (duotone) presets into SVGs. * * @since 5.9.1 * * @param array $origins List of origins to process. * @return string SVG filters. */ public function get_svg_filters( $origins ) { $blocks_metadata = static::get_blocks_metadata(); $setting_nodes = static::get_setting_nodes( $this->theme_json, $blocks_metadata );
/** * Determines whether a presets should be overridden or not. * * @since 5.9.0 * @deprecated 6.0.0 Use {@see 'get_metadata_boolean'} instead. * * @param array $theme_json The theme.json like structure to inspect. * @param array $path Path to inspect. * @param bool|array $override Data to compute whether to override the preset. * @return bool */ protected static function should_override_preset( $theme_json, $path, $override ) { _deprecated_function( __METHOD__, '6.0.0', 'get_metadata_boolean' );
if ( is_bool( $override ) ) { return $override; }
/* * The relationship between whether to override the defaults * and whether the defaults are enabled is inverse: * * - If defaults are enabled => theme presets should not be overridden * - If defaults are disabled => theme presets should be overridden * * For example, a theme sets defaultPalette to false, * making the default palette hidden from the user. * In that case, we want all the theme presets to be present, * so they should override the defaults. */ if ( is_array( $override ) ) { $value = _wp_array_get( $theme_json, array_merge( $path, $override ) ); if ( isset( $value ) ) { return ! $value; }
// Search the top-level key if none was found for this node. $value = _wp_array_get( $theme_json, array_merge( array( 'settings' ), $override ) ); if ( isset( $value ) ) { return ! $value; }
return true; } }
/** * Returns the default slugs for all the presets in an associative array * whose keys are the preset paths and the leaves is the list of slugs. * * For example: * * array( * 'color' => array( * 'palette' => array( 'slug-1', 'slug-2' ), * 'gradients' => array( 'slug-3', 'slug-4' ), * ), * ) * * @since 5.9.0 * * @param array $data A theme.json like structure. * @param array $node_path The path to inspect. It's 'settings' by default. * @return array */ protected static function get_default_slugs( $data, $node_path ) { $slugs = array();
/** * Gets a `default`'s preset name by a provided slug. * * @since 5.9.0 * * @param string $slug The slug we want to find a match from default presets. * @param array $base_path The path to inspect. It's 'settings' by default. * @return string|null */ protected function get_name_from_defaults( $slug, $base_path ) { $path = $base_path; $path[] = 'default'; $default_content = _wp_array_get( $this->theme_json, $path, null ); if ( ! $default_content ) { return null; } foreach ( $default_content as $item ) { if ( $slug === $item['slug'] ) { return $item['name']; } } return null; }
/** * Removes the preset values whose slug is equal to any of given slugs. * * @since 5.9.0 * * @param array $node The node with the presets to validate. * @param array $slugs The slugs that should not be overridden. * @return array The new node. */ protected static function filter_slugs( $node, $slugs ) { if ( empty( $slugs ) ) { return $node; }
// The global styles custom CSS is not sanitized, but can only be edited by users with 'edit_css' capability. if ( isset( $input['css'] ) && current_user_can( 'edit_css' ) ) { $output = $input; } else { $output = static::remove_insecure_styles( $input ); }
/* * Get a reference to element name from path. * $metadata['path'] = array( 'styles', 'elements', 'link' ); */ $current_element = $metadata['path'][ count( $metadata['path'] ) - 1 ];
/* * $output is stripped of pseudo selectors. Re-add and process them * or insecure styles here. */ if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] ) ) { foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] as $pseudo_selector ) { if ( isset( $input[ $pseudo_selector ] ) ) { $output[ $pseudo_selector ] = static::remove_insecure_styles( $input[ $pseudo_selector ] ); } } }
// Ensure indirect properties not included in any `PRESETS_METADATA` value are allowed. static::remove_indirect_properties( $input, $output );
return $output; }
/** * Processes a style node and returns the same node * without the insecure styles. * * @since 5.9.0 * * @param array $input Node to process. * @return array */ protected static function remove_insecure_styles( $input ) { $output = array(); $declarations = static::compute_style_properties( $input );
foreach ( $declarations as $declaration ) { if ( static::is_safe_css_declaration( $declaration['name'], $declaration['value'] ) ) { $path = static::PROPERTIES_METADATA[ $declaration['name'] ];
/* * Check the value isn't an array before adding so as to not * double up shorthand and longhand styles. */ $value = _wp_array_get( $input, $path, array() ); if ( ! is_array( $value ) ) { _wp_array_set( $output, $path, $value ); } } }
// Ensure indirect properties not handled by `compute_style_properties` are allowed. static::remove_indirect_properties( $input, $output );
return $output; }
/** * Checks that a declaration provided by the user is safe. * * @since 5.9.0 * * @param string $property_name Property name in a CSS declaration, i.e. the `color` in `color: red`. * @param string $property_value Value in a CSS declaration, i.e. the `red` in `color: red`. * @return bool */ protected static function is_safe_css_declaration( $property_name, $property_value ) { $style_to_validate = $property_name . ': ' . $property_value; $filtered = esc_html( safecss_filter_attr( $style_to_validate ) ); return ! empty( trim( $filtered ) ); }
/** * Removes indirect properties from the given input node and * sets in the given output node. * * @since 6.2.0 * * @param array $input Node to process. * @param array $output The processed node. Passed by reference. */ private static function remove_indirect_properties( $input, &$output ) { foreach ( static::INDIRECT_PROPERTIES_METADATA as $property => $paths ) { foreach ( $paths as $path ) { $value = _wp_array_get( $input, $path ); if ( is_string( $value ) && static::is_safe_css_declaration( $property, $value ) ) { _wp_array_set( $output, $path, $value ); } } } }
/** * Returns the raw data. * * @since 5.8.0 * * @return array Raw data. */ public function get_raw_data() { return $this->theme_json; }
/** * Transforms the given editor settings according the * add_theme_support format to the theme.json format. * * @since 5.8.0 * * @param array $settings Existing editor settings. * @return array Config that adheres to the theme.json schema. */ public static function get_from_editor_settings( $settings ) { $theme_settings = array( 'version' => static::LATEST_SCHEMA, 'settings' => array(), );
/** * Returns the current theme's wanted patterns(slugs) to be * registered from Pattern Directory. * * @since 6.0.0 * * @return string[] */ public function get_patterns() { if ( isset( $this->theme_json['patterns'] ) && is_array( $this->theme_json['patterns'] ) ) { return $this->theme_json['patterns']; } return array(); }
/** * Returns a valid theme.json as provided by a theme. * * Unlike get_raw_data() this returns the presets flattened, as provided by a theme. * This also uses appearanceTools instead of their opt-ins if all of them are true. * * @since 6.0.0 * * @return array */ public function get_data() { $output = $this->theme_json; $nodes = static::get_setting_nodes( $output );
/** * Flatten the theme & custom origins into a single one. * * For example, the following: * * { * "settings": { * "color": { * "palette": { * "theme": [ {} ], * "custom": [ {} ] * } * } * } * } * * will be converted to: * * { * "settings": { * "color": { * "palette": [ {} ] * } * } * } */ foreach ( $nodes as $node ) { foreach ( static::PRESETS_METADATA as $preset_metadata ) { $path = $node['path']; foreach ( $preset_metadata['path'] as $preset_metadata_path ) { $path[] = $preset_metadata_path; } $preset = _wp_array_get( $output, $path, null ); if ( null === $preset ) { continue; }
/* * If all of the static::APPEARANCE_TOOLS_OPT_INS are true, * this code unsets them and sets 'appearanceTools' instead. */ foreach ( $nodes as $node ) { $all_opt_ins_are_set = true; foreach ( static::APPEARANCE_TOOLS_OPT_INS as $opt_in_path ) { $full_path = $node['path']; foreach ( $opt_in_path as $opt_in_path_item ) { $full_path[] = $opt_in_path_item; } /* * Use "unset prop" as a marker instead of "null" because * "null" can be a valid value for some props (e.g. blockGap). */ $opt_in_value = _wp_array_get( $output, $full_path, 'unset prop' ); if ( 'unset prop' === $opt_in_value ) { $all_opt_ins_are_set = false; break; } }
if ( $all_opt_ins_are_set ) { $node_path_with_appearance_tools = $node['path']; $node_path_with_appearance_tools[] = 'appearanceTools'; _wp_array_set( $output, $node_path_with_appearance_tools, true ); foreach ( static::APPEARANCE_TOOLS_OPT_INS as $opt_in_path ) { $full_path = $node['path']; foreach ( $opt_in_path as $opt_in_path_item ) { $full_path[] = $opt_in_path_item; } /* * Use "unset prop" as a marker instead of "null" because * "null" can be a valid value for some props (e.g. blockGap). */ $opt_in_value = _wp_array_get( $output, $full_path, 'unset prop' ); if ( true !== $opt_in_value ) { continue; }
/* * The following could be improved to be path independent. * At the moment it relies on a couple of assumptions: * * - all opt-ins having a path of size 2. * - there's two sources of settings: the top-level and the block-level. */ if ( ( 1 === count( $node['path'] ) ) && ( 'settings' === $node['path'][0] ) ) { // Top-level settings. unset( $output['settings'][ $opt_in_path[0] ][ $opt_in_path[1] ] ); if ( empty( $output['settings'][ $opt_in_path[0] ] ) ) { unset( $output['settings'][ $opt_in_path[0] ] ); } } elseif ( ( 3 === count( $node['path'] ) ) && ( 'settings' === $node['path'][0] ) && ( 'blocks' === $node['path'][1] ) ) { // Block-level settings. $block_name = $node['path'][2]; unset( $output['settings']['blocks'][ $block_name ][ $opt_in_path[0] ][ $opt_in_path[1] ] ); if ( empty( $output['settings']['blocks'][ $block_name ][ $opt_in_path[0] ] ) ) { unset( $output['settings']['blocks'][ $block_name ][ $opt_in_path[0] ] ); } } } } }
wp_recursive_ksort( $output );
return $output; }
/** * Sets the spacingSizes array based on the spacingScale values from theme.json. * * @since 6.1.0 * @deprecated 6.6.0 No longer used as the spacingSizes are automatically * generated in the constructor and merge methods instead * of manually after instantiation. * * @return null|void */ public function set_spacing_sizes() { _deprecated_function( __METHOD__, '6.6.0' );
// If theme authors want to prevent the generation of the core spacing scale they can set their theme.json spacingScale.steps to 0. if ( 0 === $spacing_scale['steps'] ) { return null; }
// If there are 7 or fewer steps in the scale revert to numbers for labels instead of t-shirt sizes. if ( $spacing_scale['steps'] <= 7 ) { for ( $spacing_sizes_count = 0; $spacing_sizes_count < count( $spacing_sizes ); $spacing_sizes_count++ ) { $spacing_sizes[ $spacing_sizes_count ]['name'] = (string) ( $spacing_sizes_count + 1 ); } }
/** * Merges two sets of spacing size presets. * * @since 6.6.0 * * @param array $base The base set of spacing sizes. * @param array $incoming The set of spacing sizes to merge with the base. Duplicate slugs will override the base values. * @return array The merged set of spacing sizes. */ private static function merge_spacing_sizes( $base, $incoming ) { // Preserve the order if there are no base (spacingScale) values. if ( empty( $base ) ) { return $incoming; } $merged = array(); foreach ( $base as $item ) { $merged[ $item['slug'] ] = $item; } foreach ( $incoming as $item ) { $merged[ $item['slug'] ] = $item; } ksort( $merged, SORT_NUMERIC ); return array_values( $merged ); }
/** * Generates a set of spacing sizes by starting with a medium size and * applying an operator with an increment value to generate the rest of the * sizes outward from the medium size. The medium slug is '50' with the rest * of the slugs being 10 apart. The generated names use t-shirt sizing. * * Example: * * $spacing_scale = array( * 'steps' => 4, * 'mediumStep' => 16, * 'unit' => 'px', * 'operator' => '+', * 'increment' => 2, * ); * $spacing_sizes = static::compute_spacing_sizes( $spacing_scale ); * // -> array( * // array( 'name' => 'Small', 'slug' => '40', 'size' => '14px' ), * // array( 'name' => 'Medium', 'slug' => '50', 'size' => '16px' ), * // array( 'name' => 'Large', 'slug' => '60', 'size' => '18px' ), * // array( 'name' => 'X-Large', 'slug' => '70', 'size' => '20px' ), * // ) * * @since 6.6.0 * * @param array $spacing_scale { * The spacing scale values. All are required. * * @type int $steps The number of steps in the scale. (up to 10 steps are supported.) * @type float $mediumStep The middle value that gets the slug '50'. (For even number of steps, this becomes the first middle value.) * @type string $unit The CSS unit to use for the sizes. * @type string $operator The mathematical operator to apply to generate the other sizes. Either '+' or '*'. * @type float $increment The value used with the operator to generate the other sizes. * } * @return array The spacing sizes presets or an empty array if some spacing scale values are missing or invalid. */ private static function compute_spacing_sizes( $spacing_scale ) { /* * This condition is intentionally missing some checks on ranges for the values in order to * keep backwards compatibility with the previous implementation. */ if ( ! isset( $spacing_scale['steps'] ) || ! is_numeric( $spacing_scale['steps'] ) || 0 === $spacing_scale['steps'] || ! isset( $spacing_scale['mediumStep'] ) || ! is_numeric( $spacing_scale['mediumStep'] ) || ! isset( $spacing_scale['unit'] ) || ! isset( $spacing_scale['operator'] ) || ( '+' !== $spacing_scale['operator'] && '*' !== $spacing_scale['operator'] ) || ! isset( $spacing_scale['increment'] ) || ! is_numeric( $spacing_scale['increment'] ) ) { return array(); }
/** * This is used to convert the internal representation of variables to the CSS representation. * For example, `var:preset|color|vivid-green-cyan` becomes `var(--wp--preset--color--vivid-green-cyan)`. * * @since 6.3.0 * @param string $value The variable such as var:preset|color|vivid-green-cyan to convert. * @return string The converted variable. */ private static function convert_custom_properties( $value ) { $prefix = 'var:'; $prefix_len = strlen( $prefix ); $token_in = '|'; $token_out = '--'; if ( str_starts_with( $value, $prefix ) ) { $unwrapped_name = str_replace( $token_in, $token_out, substr( $value, $prefix_len ) ); $value = "var(--wp--$unwrapped_name)"; }
return $value; }
/** * Given a tree, converts the internal representation of variables to the CSS representation. * It is recursive and modifies the input in-place. * * @since 6.3.0 * @param array $tree Input to process. * @return array The modified $tree. */ private static function resolve_custom_css_format( $tree ) { $prefix = 'var:';
/** * Generates all the element selectors for a block. * * @since 6.3.0 * * @param string $root_selector The block's root CSS selector. * @return array The block's element selectors. */ protected static function get_block_element_selectors( $root_selector ) { /* * Assign defaults, then override those that the block sets by itself. * If the block selector is compounded, will append the element to each * individual block selector. */ $block_selectors = explode( ',', $root_selector ); $element_selectors = array(); foreach ( static::ELEMENTS as $el_name => $el_selector ) { $element_selector = array(); foreach ( $block_selectors as $selector ) { if ( $selector === $el_selector ) { $element_selector = array( $el_selector ); break; } $element_selector[] = static::prepend_to_selector( $el_selector, $selector . ' ' ); } $element_selectors[ $el_name ] = implode( ',', $element_selector ); }
return $element_selectors; }
/** * Generates style declarations for a node's features e.g., color, border, * typography etc. that have custom selectors in their related block's * metadata. * * @since 6.3.0 * * @param object $metadata The related block metadata containing selectors. * @param object $node A merged theme.json node for block or variation. * * @return array The style declarations for the node's features with custom * selectors. */ protected function get_feature_declarations_for_node( $metadata, &$node ) { $declarations = array();
foreach ( $metadata['selectors'] as $feature => $feature_selectors ) { /* * Skip if this is the block's root selector or the block doesn't * have any styles for the feature. */ if ( 'root' === $feature || empty( $node[ $feature ] ) ) { continue; }
/* * Remove the subfeature from the block's node now its * styles will be included under its own selector not the * block's. */ unset( $node[ $feature ][ $subfeature ] ); } }
/* * Now subfeatures have been processed and removed we can process * feature root selector or simple string selector. */ if ( is_string( $feature_selectors ) || ( isset( $feature_selectors['root'] ) && $feature_selectors['root'] ) ) { $feature_selector = is_string( $feature_selectors ) ? $feature_selectors : $feature_selectors['root'];
/* * Create temporary node containing only the feature data * to leverage existing `compute_style_properties` function. */ $feature_node = array( $feature => $node[ $feature ] );
/* * Merge new declarations with any that already exist for * the feature selector. This may occur when multiple block * support features use the same custom selector. */ if ( isset( $declarations[ $feature_selector ] ) ) { foreach ( $new_declarations as $new_declaration ) { $declarations[ $feature_selector ][] = $new_declaration; } } else { $declarations[ $feature_selector ] = $new_declarations; }
/* * Remove the feature from the block's node now its styles * will be included under its own selector not the block's. */ unset( $node[ $feature ] ); } }
return $declarations; }
/** * Replaces CSS variables with their values in place. * * @since 6.3.0 * @since 6.5.0 Check for empty style before processing its value. * * @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 ( 0 <= strpos( $style, 'var(' ) ) { // find all the variables in the string in the form of var(--variable-name, fallback), with fallback in the second capture group.
/** * Generates a selector for a block style variation. * * @since 6.5.0 * * @param string $variation_name Name of the block style variation. * @param string $block_selector CSS selector for the block. * @return string Block selector with block style variation selector added to it. */ protected static function get_block_style_variation_selector( $variation_name, $block_selector ) { $variation_class = ".is-style-$variation_name";
if ( ! $block_selector ) { return $variation_class; }