File "class-wp-theme-json.php"
Full Path: /home/ycoalition/public_html/blog/wp-includes/js/tinymce/plugins/directionality/class-wp-theme-json.php
File size: 108 KB
MIME-type: text/x-php
Charset: utf-8
<?php
/**
* WP_Theme_JSON class
*
* @package WordPress
* @subpackage Theme
* @since 5.8.0
*/
/**
* 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' ),
),
);
/**
* Metadata for style properties.
*
* Each element is a direct mapping from the CSS property name to the
* path to the value in theme.json & block attributes.
*
* @since 5.8.0
* @since 5.9.0 Added the `border-*`, `font-family`, `font-style`, `font-weight`,
* `letter-spacing`, `margin-*`, `padding-*`, `--wp--style--block-gap`,
* `text-decoration`, `text-transform`, and `filter` properties,
* simplified the metadata structure.
* @since 6.1.0 Added the `border-*-color`, `border-*-width`, `border-*-style`,
* `--wp--style--root--padding-*`, and `box-shadow` properties,
* removed the `--wp--style--block-gap` property.
* @since 6.2.0 Added `outline-*`, and `min-height` properties.
* @since 6.3.0 Added `column-count` property.
* @since 6.4.0 Added `writing-mode` property.
* @since 6.5.0 Added `aspect-ratio` property.
* @since 6.6.0 Added `background-[image|position|repeat|size]` properties.
* @since 6.7.0 Added `background-attachment` property.
*
* @var array
*/
const PROPERTIES_METADATA = array(
'aspect-ratio' => array( 'dimensions', 'aspectRatio' ),
'background' => array( 'color', 'gradient' ),
'background-color' => array( 'color', 'background' ),
'background-image' => array( 'background', 'backgroundImage' ),
'background-position' => array( 'background', 'backgroundPosition' ),
'background-repeat' => array( 'background', 'backgroundRepeat' ),
'background-size' => array( 'background', 'backgroundSize' ),
'background-attachment' => array( 'background', 'backgroundAttachment' ),
'border-radius' => array( 'border', 'radius' ),
'border-top-left-radius' => array( 'border', 'radius', 'topLeft' ),
'border-top-right-radius' => array( 'border', 'radius', 'topRight' ),
'border-bottom-left-radius' => array( 'border', 'radius', 'bottomLeft' ),
'border-bottom-right-radius' => array( 'border', 'radius', 'bottomRight' ),
'border-color' => array( 'border', 'color' ),
'border-width' => array( 'border', 'width' ),
'border-style' => array( 'border', 'style' ),
'border-top-color' => array( 'border', 'top', 'color' ),
'border-top-width' => array( 'border', 'top', 'width' ),
'border-top-style' => array( 'border', 'top', 'style' ),
'border-right-color' => array( 'border', 'right', 'color' ),
'border-right-width' => array( 'border', 'right', 'width' ),
'border-right-style' => array( 'border', 'right', 'style' ),
'border-bottom-color' => array( 'border', 'bottom', 'color' ),
'border-bottom-width' => array( 'border', 'bottom', 'width' ),
'border-bottom-style' => array( 'border', 'bottom', 'style' ),
'border-left-color' => array( 'border', 'left', 'color' ),
'border-left-width' => array( 'border', 'left', 'width' ),
'border-left-style' => array( 'border', 'left', 'style' ),
'color' => array( 'color', 'text' ),
'text-align' => array( 'typography', 'textAlign' ),
'column-count' => array( 'typography', 'textColumns' ),
'font-family' => array( 'typography', 'fontFamily' ),
'font-size' => array( 'typography', 'fontSize' ),
'font-style' => array( 'typography', 'fontStyle' ),
'font-weight' => array( 'typography', 'fontWeight' ),
'letter-spacing' => array( 'typography', 'letterSpacing' ),
'line-height' => array( 'typography', 'lineHeight' ),
'margin' => array( 'spacing', 'margin' ),
'margin-top' => array( 'spacing', 'margin', 'top' ),
'margin-right' => array( 'spacing', 'margin', 'right' ),
'margin-bottom' => array( 'spacing', 'margin', 'bottom' ),
'margin-left' => array( 'spacing', 'margin', 'left' ),
'min-height' => array( 'dimensions', 'minHeight' ),
'outline-color' => array( 'outline', 'color' ),
'outline-offset' => array( 'outline', 'offset' ),
'outline-style' => array( 'outline', 'style' ),
'outline-width' => array( 'outline', 'width' ),
'padding' => array( 'spacing', 'padding' ),
'padding-top' => array( 'spacing', 'padding', 'top' ),
'padding-right' => array( 'spacing', 'padding', 'right' ),
'padding-bottom' => array( 'spacing', 'padding', 'bottom' ),
'padding-left' => array( 'spacing', 'padding', 'left' ),
'--wp--style--root--padding' => array( 'spacing', 'padding' ),
'--wp--style--root--padding-top' => array( 'spacing', 'padding', 'top' ),
'--wp--style--root--padding-right' => array( 'spacing', 'padding', 'right' ),
'--wp--style--root--padding-bottom' => array( 'spacing', 'padding', 'bottom' ),
'--wp--style--root--padding-left' => array( 'spacing', 'padding', 'left' ),
'text-decoration' => array( 'typography', 'textDecoration' ),
'text-transform' => array( 'typography', 'textTransform' ),
'filter' => array( 'filter', 'duotone' ),
'box-shadow' => array( 'shadow' ),
'writing-mode' => array( 'typography', 'writingMode' ),
);
/**
* 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',
);
/**
* The valid properties under the settings key.
*
* @since 5.8.0 As `ALLOWED_SETTINGS`.
* @since 5.9.0 Renamed from `ALLOWED_SETTINGS` to `VALID_SETTINGS`,
* added new properties for `border`, `color`, `spacing`,
* and `typography`, and renamed others according to the new schema.
* @since 6.0.0 Added `color.defaultDuotone`.
* @since 6.1.0 Added `layout.definitions` and `useRootPaddingAwareAlignments`.
* @since 6.2.0 Added `dimensions.minHeight`, 'shadow.presets', 'shadow.defaultPresets',
* `position.fixed` and `position.sticky`.
* @since 6.3.0 Added support for `typography.textColumns`, removed `layout.definitions`.
* @since 6.4.0 Added support for `layout.allowEditing`, `background.backgroundImage`,
* `typography.writingMode`, `lightbox.enabled` and `lightbox.allowEditing`.
* @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize`,
* `background.backgroundSize` and `dimensions.aspectRatio`.
* @since 6.6.0 Added support for 'dimensions.aspectRatios', 'dimensions.defaultAspectRatios',
* 'typography.defaultFontSizes', and 'spacing.defaultSpacingSizes'.
* @var array
*/
const VALID_SETTINGS = array(
'appearanceTools' => null,
'useRootPaddingAwareAlignments' => null,
'background' => array(
'backgroundImage' => null,
'backgroundSize' => null,
),
'border' => array(
'color' => null,
'radius' => null,
'style' => null,
'width' => null,
),
'color' => array(
'background' => null,
'custom' => null,
'customDuotone' => null,
'customGradient' => null,
'defaultDuotone' => null,
'defaultGradients' => null,
'defaultPalette' => null,
'duotone' => null,
'gradients' => null,
'link' => null,
'heading' => null,
'button' => null,
'caption' => null,
'palette' => null,
'text' => null,
),
'custom' => null,
'dimensions' => array(
'aspectRatio' => null,
'aspectRatios' => null,
'defaultAspectRatios' => null,
'minHeight' => null,
),
'layout' => array(
'contentSize' => null,
'wideSize' => null,
'allowEditing' => null,
'allowCustomContentAndWideSize' => null,
),
'lightbox' => array(
'enabled' => null,
'allowEditing' => null,
),
'position' => array(
'fixed' => null,
'sticky' => null,
),
'spacing' => array(
'customSpacingSize' => null,
'defaultSpacingSizes' => null,
'spacingSizes' => null,
'spacingScale' => null,
'blockGap' => null,
'margin' => null,
'padding' => null,
'units' => null,
),
'shadow' => array(
'presets' => null,
'defaultPresets' => null,
),
'typography' => array(
'fluid' => null,
'customFontSize' => null,
'defaultFontSizes' => null,
'dropCap' => null,
'fontFamilies' => null,
'fontSizes' => null,
'fontStyle' => null,
'fontWeight' => null,
'letterSpacing' => null,
'lineHeight' => null,
'textAlign' => null,
'textColumns' => null,
'textDecoration' => null,
'textTransform' => null,
'writingMode' => null,
),
);
/*
* The valid properties for fontFamilies under settings key.
*
* @since 6.5.0
*
* @var array
*/
const FONT_FAMILY_SCHEMA = array(
array(
'fontFamily' => null,
'name' => null,
'slug' => null,
'fontFace' => array(
array(
'ascentOverride' => null,
'descentOverride' => null,
'fontDisplay' => null,
'fontFamily' => null,
'fontFeatureSettings' => null,
'fontStyle' => null,
'fontStretch' => null,
'fontVariationSettings' => null,
'fontWeight' => null,
'lineGapOverride' => null,
'sizeAdjust' => null,
'src' => null,
'unicodeRange' => null,
),
),
),
);
/**
* The valid properties under the styles key.
*
* @since 5.8.0 As `ALLOWED_STYLES`.
* @since 5.9.0 Renamed from `ALLOWED_STYLES` to `VALID_STYLES`,
* added new properties for `border`, `filter`, `spacing`,
* and `typography`.
* @since 6.1.0 Added new side properties for `border`,
* added new property `shadow`,
* updated `blockGap` to be allowed at any level.
* @since 6.2.0 Added `outline`, and `minHeight` properties.
* @since 6.3.0 Added support for `typography.textColumns`.
* @since 6.5.0 Added support for `dimensions.aspectRatio`.
* @since 6.6.0 Added `background` sub properties to top-level only.
*
* @var array
*/
const VALID_STYLES = array(
'background' => array(
'backgroundImage' => null,
'backgroundPosition' => null,
'backgroundRepeat' => null,
'backgroundSize' => null,
'backgroundAttachment' => null,
),
'border' => array(
'color' => null,
'radius' => null,
'style' => null,
'width' => null,
'top' => null,
'right' => null,
'bottom' => null,
'left' => null,
),
'color' => array(
'background' => null,
'gradient' => null,
'text' => null,
),
'dimensions' => array(
'aspectRatio' => null,
'minHeight' => null,
),
'filter' => array(
'duotone' => null,
),
'outline' => array(
'color' => null,
'offset' => null,
'style' => null,
'width' => null,
),
'shadow' => null,
'spacing' => array(
'margin' => null,
'padding' => null,
'blockGap' => null,
),
'typography' => array(
'fontFamily' => null,
'fontSize' => null,
'fontStyle' => null,
'fontWeight' => null,
'letterSpacing' => null,
'lineHeight' => null,
'textAlign' => null,
'textColumns' => null,
'textDecoration' => null,
'textTransform' => null,
'writingMode' => null,
),
'css' => null,
);
/**
* 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',
);
const __EXPERIMENTAL_ELEMENT_CLASS_NAMES = array(
'button' => 'wp-element-button',
'caption' => 'wp-element-caption',
);
/**
* 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',
);
/**
* Return the input schema at the root and per origin.
*
* @since 6.5.0
*
* @param array $schema The base schema.
* @return array The schema at the root and per origin.
*
* Example:
* schema_in_root_and_per_origin(
* array(
* 'fontFamily' => null,
* 'slug' => null,
* )
* )
*
* Returns:
* array(
* 'fontFamily' => null,
* 'slug' => null,
* 'default' => array(
* 'fontFamily' => null,
* 'slug' => null,
* ),
* 'blocks' => array(
* 'fontFamily' => null,
* 'slug' => null,
* ),
* 'theme' => array(
* 'fontFamily' => null,
* 'slug' => null,
* ),
* 'custom' => array(
* 'fontFamily' => null,
* 'slug' => null,
* ),
* )
*/
protected static function schema_in_root_and_per_origin( $schema ) {
$schema_in_root_and_per_origin = $schema;
foreach ( static::VALID_ORIGINS as $origin ) {
$schema_in_root_and_per_origin[ $origin ] = $schema;
}
return $schema_in_root_and_per_origin;
}
/**
* 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 = '';
if ( isset( static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES[ $element ] ) ) {
$class_name = static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES[ $element ];
}
return $class_name;
}
/**
* Options that settings.appearanceTools enables.
*
* @since 6.0.0
* @since 6.2.0 Added `dimensions.minHeight` and `position.sticky`.
* @since 6.4.0 Added `background.backgroundImage`.
* @since 6.5.0 Added `background.backgroundSize` and `dimensions.aspectRatio`.
* @var array
*/
const APPEARANCE_TOOLS_OPT_INS = array(
array( 'background', 'backgroundImage' ),
array( 'background', 'backgroundSize' ),
array( 'border', 'color' ),
array( 'border', 'radius' ),
array( 'border', 'style' ),
array( 'border', 'width' ),
array( 'color', 'link' ),
array( 'color', 'heading' ),
array( 'color', 'button' ),
array( 'color', 'caption' ),
array( 'dimensions', 'aspectRatio' ),
array( 'dimensions', 'minHeight' ),
array( 'position', 'sticky' ),
array( 'spacing', 'blockGap' ),
array( 'spacing', 'margin' ),
array( 'spacing', 'padding' ),
array( 'typography', 'lineHeight' ),
);
/**
* 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';
}
$this->theme_json = WP_Theme_JSON_Schema::migrate( $theme_json, $origin );
$valid_block_names = array_keys( static::get_blocks_metadata() );
$valid_element_names = array_keys( static::ELEMENTS );
$valid_variations = static::get_valid_block_style_variations();
$this->theme_json = static::unwrap_shared_block_style_variations( $this->theme_json, $valid_variations );
$this->theme_json = static::sanitize( $this->theme_json, $valid_block_names, $valid_element_names, $valid_variations );
$this->theme_json = static::maybe_opt_in_into_settings( $this->theme_json );
// Internally, presets are keyed by origin.
$nodes = static::get_setting_nodes( $this->theme_json );
foreach ( $nodes as $node ) {
foreach ( static::PRESETS_METADATA as $preset_metadata ) {
$path = $node['path'];
foreach ( $preset_metadata['path'] as $subpath ) {
$path[] = $subpath;
}
$preset = _wp_array_get( $this->theme_json, $path, null );
if ( null !== $preset ) {
// If the preset is not already keyed by origin.
if ( isset( $preset[0] ) || empty( $preset ) ) {
_wp_array_set( $this->theme_json, $path, array( $origin => $preset ) );
}
}
}
}
// In addition to presets, spacingScale (which generates presets) is also keyed by origin.
$scale_path = array( 'settings', 'spacing', 'spacingScale' );
$spacing_scale = _wp_array_get( $this->theme_json, $scale_path, null );
if ( null !== $spacing_scale ) {
// If the spacingScale is not already keyed by origin.
if ( empty( array_intersect( array_keys( $spacing_scale ), static::VALID_ORIGINS ) ) ) {
_wp_array_set( $this->theme_json, $scale_path, array( $origin => $spacing_scale ) );
}
}
// Pre-generate the spacingSizes from spacingScale.
$scale_path = array( 'settings', 'spacing', 'spacingScale', $origin );
$spacing_scale = _wp_array_get( $this->theme_json, $scale_path, null );
if ( isset( $spacing_scale ) ) {
$sizes_path = array( 'settings', 'spacing', 'spacingSizes', $origin );
$spacing_sizes = _wp_array_get( $this->theme_json, $sizes_path, array() );
$spacing_scale_sizes = static::compute_spacing_sizes( $spacing_scale );
$merged_spacing_sizes = static::merge_spacing_sizes( $spacing_scale_sizes, $spacing_sizes );
_wp_array_set( $this->theme_json, $sizes_path, $merged_spacing_sizes );
}
}
/**
* Unwraps shared block style variations.
*
* It takes the shared variations (styles.variations.variationName) and
* applies them to all the blocks that have the given variation registered
* (styles.blocks.blockType.variations.variationName).
*
* For example, given the `core/paragraph` and `core/group` blocks have
* registered the `section-a` style variation, and given the following input:
*
* {
* "styles": {
* "variations": {
* "section-a": { "color": { "background": "backgroundColor" } }
* }
* }
* }
*
* It returns the following output:
*
* {
* "styles": {
* "blocks": {
* "core/paragraph": {
* "variations": {
* "section-a": { "color": { "background": "backgroundColor" } }
* },
* },
* "core/group": {
* "variations": {
* "section-a": { "color": { "background": "backgroundColor" } }
* }
* }
* }
* }
* }
*
* @since 6.6.0
*
* @param array $theme_json A structure that follows the theme.json schema.
* @param array $valid_variations Valid block style variations.
* @return array Theme json data with shared variation definitions unwrapped under appropriate block types.
*/
private static function unwrap_shared_block_style_variations( $theme_json, $valid_variations ) {
if ( empty( $theme_json['styles']['variations'] ) || empty( $valid_variations ) ) {
return $theme_json;
}
$new_theme_json = $theme_json;
$variations = $new_theme_json['styles']['variations'];
foreach ( $valid_variations as $block_type => $registered_variations ) {
foreach ( $registered_variations as $variation_name ) {
$block_level_data = $new_theme_json['styles']['blocks'][ $block_type ]['variations'][ $variation_name ] ?? array();
$top_level_data = $variations[ $variation_name ] ?? array();
$merged_data = array_replace_recursive( $top_level_data, $block_level_data );
if ( ! empty( $merged_data ) ) {
_wp_array_set( $new_theme_json, array( 'styles', 'blocks', $block_type, 'variations', $variation_name ), $merged_data );
}
}
}
unset( $new_theme_json['styles']['variations'] );
return $new_theme_json;
}
/**
* Enables some opt-in settings if theme declared support.
*
* @since 5.9.0
*
* @param array $theme_json A theme.json structure to modify.
* @return array The modified theme.json structure.
*/
protected static function maybe_opt_in_into_settings( $theme_json ) {
$new_theme_json = $theme_json;
if (
isset( $new_theme_json['settings']['appearanceTools'] ) &&
true === $new_theme_json['settings']['appearanceTools']
) {
static::do_opt_in_into_settings( $new_theme_json['settings'] );
}
if ( isset( $new_theme_json['settings']['blocks'] ) && is_array( $new_theme_json['settings']['blocks'] ) ) {
foreach ( $new_theme_json['settings']['blocks'] as &$block ) {
if ( isset( $block['appearanceTools'] ) && ( true === $block['appearanceTools'] ) ) {
static::do_opt_in_into_settings( $block );
}
}
}
return $new_theme_json;
}
/**
* 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;
if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] ) ) {
foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
$schema_styles_elements[ $element ][ $pseudo_selector ] = $styles_non_top_level;
}
}
}
$schema_styles_blocks = array();
$schema_settings_blocks = array();
/*
* Generate a schema for blocks.
* - Block styles can contain `elements` & `variations` definitions.
* - Variations definitions cannot be nested.
* - Variations can contain styles for inner `blocks`.
* - Variation inner `blocks` styles can contain `elements`.
*
* As each variation needs a `blocks` schema but further nested
* inner `blocks`, the overall schema will be generated in multiple passes.
*/
foreach ( $valid_block_names as $block ) {
$schema_settings_blocks[ $block ] = static::VALID_SETTINGS;
$schema_styles_blocks[ $block ] = $styles_non_top_level;
$schema_styles_blocks[ $block ]['elements'] = $schema_styles_elements;
}
$block_style_variation_styles = static::VALID_STYLES;
$block_style_variation_styles['blocks'] = $schema_styles_blocks;
$block_style_variation_styles['elements'] = $schema_styles_elements;
foreach ( $valid_block_names as $block ) {
// Build the schema for each block style variation.
$style_variation_names = array();
if (
! empty( $input['styles']['blocks'][ $block ]['variations'] ) &&
is_array( $input['styles']['blocks'][ $block ]['variations'] ) &&
isset( $valid_variations[ $block ] )
) {
$style_variation_names = array_intersect(
array_keys( $input['styles']['blocks'][ $block ]['variations'] ),
$valid_variations[ $block ]
);
}
$schema_styles_variations = array();
if ( ! empty( $style_variation_names ) ) {
$schema_styles_variations = array_fill_keys( $style_variation_names, $block_style_variation_styles );
}
$schema_styles_blocks[ $block ]['variations'] = $schema_styles_variations;
}
$schema['styles'] = static::VALID_STYLES;
$schema['styles']['blocks'] = $schema_styles_blocks;
$schema['styles']['elements'] = $schema_styles_elements;
$schema['settings'] = static::VALID_SETTINGS;
$schema['settings']['blocks'] = $schema_settings_blocks;
$schema['settings']['typography']['fontFamilies'] = static::schema_in_root_and_per_origin( static::FONT_FAMILY_SCHEMA );
// Remove anything that's not present in the schema.
foreach ( array( 'styles', 'settings' ) as $subtree ) {
if ( ! isset( $input[ $subtree ] ) ) {
continue;
}
if ( ! is_array( $input[ $subtree ] ) ) {
unset( $output[ $subtree ] );
continue;
}
$result = static::remove_keys_not_in_schema( $input[ $subtree ], $schema[ $subtree ] );
if ( empty( $result ) ) {
unset( $output[ $subtree ] );
} else {
$output[ $subtree ] = static::resolve_custom_css_format( $result );
}
}
return $output;
}
/**
* Appends a sub-selector to an existing one.
*
* Given the compounded $selector "h1, h2, h3"
* and the $to_append selector ".some-class" the result will be
* "h1.some-class, h2.some-class, h3.some-class".
*
* @since 5.8.0
* @since 6.1.0 Added append position.
* @since 6.3.0 Removed append position parameter.
*
* @param string $selector Original selector.
* @param string $to_append Selector to append.
* @return string The new selector.
*/
protected static function append_to_selector( $selector, $to_append ) {
if ( ! str_contains( $selector, ',' ) ) {
return $selector . $to_append;
}
$new_selectors = array();
$selectors = explode( ',', $selector );
foreach ( $selectors as $sel ) {
$new_selectors[] = $sel . $to_append;
}
return implode( ',', $new_selectors );
}
/**
* Prepends a sub-selector to an existing one.
*
* Given the compounded $selector "h1, h2, h3"
* and the $to_prepend selector ".some-class " the result will be
* ".some-class h1, .some-class h2, .some-class h3".
*
* @since 6.3.0
*
* @param string $selector Original selector.
* @param string $to_prepend Selector to prepend.
* @return string The new selector.
*/
protected static function prepend_to_selector( $selector, $to_prepend ) {
if ( ! str_contains( $selector, ',' ) ) {
return $to_prepend . $selector;
}
$new_selectors = array();
$selectors = explode( ',', $selector );
foreach ( $selectors as $sel ) {
$new_selectors[] = $to_prepend . $sel;
}
return implode( ',', $new_selectors );
}
/**
* Returns the metadata for each block.
*
* Example:
*
* {
* 'core/paragraph': {
* 'selector': 'p',
* 'elements': {
* 'link' => 'link selector',
* 'etc' => 'element selector'
* }
* },
* 'core/heading': {
* 'selector': 'h1',
* 'elements': {}
* },
* 'core/image': {
* 'selector': '.wp-block-image',
* 'duotone': 'img',
* 'elements': {}
* }
* }
*
* @since 5.8.0
* @since 5.9.0 Added `duotone` key with CSS selector.
* @since 6.1.0 Added `features` key with block support feature level selectors.
* @since 6.3.0 Refactored and stabilized selectors API.
* @since 6.6.0 Updated to include block style variations from the block styles registry.
*
* @return array Block metadata.
*/
protected static function get_blocks_metadata() {
$registry = WP_Block_Type_Registry::get_instance();
$blocks = $registry->get_all_registered();
$style_registry = WP_Block_Styles_Registry::get_instance();
// 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();
foreach ( $registered_styles[ $block_name ] as $block_style ) {
if ( ! isset( $style_selectors[ $block_style['name'] ] ) ) {
$style_selectors[ $block_style['name'] ] = static::get_block_style_variation_selector( $block_style['name'], $block_metadata['selector'] );
}
}
static::$blocks_metadata[ $block_name ]['styleVariations'] = $style_selectors;
}
}
return static::$blocks_metadata;
}
foreach ( $blocks as $block_name => $block_type ) {
$root_selector = wp_get_block_css_selector( $block_type );
static::$blocks_metadata[ $block_name ]['selector'] = $root_selector;
static::$blocks_metadata[ $block_name ]['selectors'] = static::get_block_selectors( $block_type, $root_selector );
$elements = static::get_block_element_selectors( $root_selector );
if ( ! empty( $elements ) ) {
static::$blocks_metadata[ $block_name ]['elements'] = $elements;
}
// The block may or may not have a duotone selector.
$duotone_selector = wp_get_block_css_selector( $block_type, 'filter.duotone' );
// Keep backwards compatibility for support.color.__experimentalDuotone.
if ( null === $duotone_selector ) {
$duotone_support = isset( $block_type->supports['color']['__experimentalDuotone'] )
? $block_type->supports['color']['__experimentalDuotone']
: null;
if ( $duotone_support ) {
$root_selector = wp_get_block_css_selector( $block_type );
$duotone_selector = static::scope_selector( $root_selector, $duotone_support );
}
}
if ( null !== $duotone_selector ) {
static::$blocks_metadata[ $block_name ]['duotone'] = $duotone_selector;
}
// 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'] );
}
if ( ! empty( $style_selectors ) ) {
static::$blocks_metadata[ $block_name ]['styleVariations'] = $style_selectors;
}
}
return static::$blocks_metadata;
}
/**
* 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 ] );
if ( empty( $tree[ $key ] ) ) {
unset( $tree[ $key ] );
}
}
}
}
return $tree;
}
/**
* Returns the existing settings for each block.
*
* Example:
*
* {
* 'root': {
* 'color': {
* 'custom': true
* }
* },
* 'core/paragraph': {
* 'spacing': {
* 'customPadding': true
* }
* }
* }
*
* @since 5.8.0
*
* @return array Settings per block.
*/
public function get_settings() {
if ( ! isset( $this->theme_json['settings'] ) ) {
return array();
} else {
return $this->theme_json['settings'];
}
}
/**
* 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' );
}
}
$blocks_metadata = static::get_blocks_metadata();
$style_nodes = static::get_style_nodes( $this->theme_json, $blocks_metadata, $options );
$setting_nodes = static::get_setting_nodes( $this->theme_json, $blocks_metadata );
$root_style_key = array_search( static::ROOT_BLOCK_SELECTOR, array_column( $style_nodes, 'selector' ), true );
$root_settings_key = array_search( static::ROOT_BLOCK_SELECTOR, array_column( $setting_nodes, 'selector' ), true );
if ( ! empty( $options['scope'] ) ) {
foreach ( $setting_nodes as &$node ) {
$node['selector'] = static::scope_selector( $options['scope'], $node['selector'] );
}
foreach ( $style_nodes as &$node ) {
$node = static::scope_style_node_selectors( $options['scope'], $node );
}
unset( $node );
}
if ( ! empty( $options['root_selector'] ) ) {
if ( false !== $root_settings_key ) {
$setting_nodes[ $root_settings_key ]['selector'] = $options['root_selector'];
}
if ( false !== $root_style_key ) {
$style_nodes[ $root_style_key ]['selector'] = $options['root_selector'];
}
}
$stylesheet = '';
if ( in_array( 'variables', $types, true ) ) {
$stylesheet .= $this->get_css_variables( $setting_nodes, $origins );
}
if ( in_array( 'styles', $types, true ) ) {
if ( false !== $root_style_key && empty( $options['skip_root_layout_styles'] ) ) {
$stylesheet .= $this->get_root_layout_rules( $style_nodes[ $root_style_key ]['selector'], $style_nodes[ $root_style_key ] );
}
$stylesheet .= $this->get_block_classes( $style_nodes );
} elseif ( in_array( 'base-layout-styles', $types, true ) ) {
$root_selector = static::ROOT_BLOCK_SELECTOR;
$columns_selector = '.wp-block-columns';
$post_template_selector = '.wp-block-post-template';
if ( ! empty( $options['scope'] ) ) {
$root_selector = static::scope_selector( $options['scope'], $root_selector );
$columns_selector = static::scope_selector( $options['scope'], $columns_selector );
$post_template_selector = static::scope_selector( $options['scope'], $post_template_selector );
}
if ( ! empty( $options['root_selector'] ) ) {
$root_selector = $options['root_selector'];
}
/*
* Base layout styles are provided as part of `styles`, so only output separately if explicitly requested.
* For backwards compatibility, the Columns block is explicitly included, to support a different default gap value.
*/
$base_styles_nodes = array(
array(
'path' => array( 'styles' ),
'selector' => $root_selector,
),
array(
'path' => array( 'styles', 'blocks', 'core/columns' ),
'selector' => $columns_selector,
'name' => 'core/columns',
),
array(
'path' => array( 'styles', 'blocks', 'core/post-template' ),
'selector' => $post_template_selector,
'name' => 'core/post-template',
),
);
foreach ( $base_styles_nodes as $base_style_node ) {
$stylesheet .= $this->get_layout_styles( $base_style_node, $types );
}
}
if ( in_array( 'presets', $types, true ) ) {
$stylesheet .= $this->get_preset_classes( $setting_nodes, $origins );
}
// 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";
$processed_css .= $final_selector . '{' . trim( $css_value ) . '}';
}
}
return $processed_css;
}
/**
* Returns the global styles custom CSS.
*
* @since 6.2.0
* @deprecated 6.7.0 Use {@see 'get_stylesheet'} instead.
*
* @return string The global styles custom CSS.
*/
public function get_custom_css() {
_deprecated_function( __METHOD__, '6.7.0', 'get_stylesheet' );
// Add the global styles root CSS.
$stylesheet = isset( $this->theme_json['styles']['css'] ) ? $this->theme_json['styles']['css'] : '';
// Add the global styles block CSS.
if ( isset( $this->theme_json['styles']['blocks'] ) ) {
foreach ( $this->theme_json['styles']['blocks'] as $name => $node ) {
$custom_block_css = isset( $this->theme_json['styles']['blocks'][ $name ]['css'] )
? $this->theme_json['styles']['blocks'][ $name ]['css']
: null;
if ( $custom_block_css ) {
$selector = static::$blocks_metadata[ $name ]['selector'];
$stylesheet .= $this->process_blocks_custom_css( $custom_block_css, $selector );
}
}
}
return $stylesheet;
}
/**
* Returns the page templates of the active theme.
*
* @since 5.9.0
*
* @return array
*/
public function get_custom_templates() {
$custom_templates = array();
if ( ! isset( $this->theme_json['customTemplates'] ) || ! is_array( $this->theme_json['customTemplates'] ) ) {
return $custom_templates;
}
foreach ( $this->theme_json['customTemplates'] as $item ) {
if ( isset( $item['name'] ) ) {
$custom_templates[ $item['name'] ] = array(
'title' => isset( $item['title'] ) ? $item['title'] : '',
'postTypes' => isset( $item['postTypes'] ) ? $item['postTypes'] : array( 'page' ),
);
}
}
return $custom_templates;
}
/**
* Returns the template part data of active theme.
*
* @since 5.9.0
*
* @return array
*/
public function get_template_parts() {
$template_parts = array();
if ( ! isset( $this->theme_json['templateParts'] ) || ! is_array( $this->theme_json['templateParts'] ) ) {
return $template_parts;
}
foreach ( $this->theme_json['templateParts'] as $item ) {
if ( isset( $item['name'] ) ) {
$template_parts[ $item['name'] ] = array(
'title' => isset( $item['title'] ) ? $item['title'] : '',
'area' => isset( $item['area'] ) ? $item['area'] : '',
);
}
}
return $template_parts;
}
/**
* 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 = '';
foreach ( $style_nodes as $metadata ) {
if ( null === $metadata['selector'] ) {
continue;
}
$block_rules .= static::get_styles_for_block( $metadata );
}
return $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;
}
if ( isset( $block_metadata['name'] ) ) {
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_metadata['name'] );
if ( ! block_has_support( $block_type, 'layout', false ) && ! block_has_support( $block_type, '__experimentalLayout', false ) ) {
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;
}
$class_name = isset( $layout_definition['className'] ) ? $layout_definition['className'] : false;
$spacing_rules = isset( $layout_definition['spacingStyles'] ) ? $layout_definition['spacingStyles'] : array();
if (
! empty( $class_name ) &&
! empty( $spacing_rules )
) {
foreach ( $spacing_rules as $spacing_rule ) {
$declarations = array();
if (
isset( $spacing_rule['selector'] ) &&
preg_match( $layout_selector_pattern, $spacing_rule['selector'] ) &&
! empty( $spacing_rule['rules'] )
) {
// Iterate over each of the styling rules and substitute non-string values such as `null` with the real `blockGap` value.
foreach ( $spacing_rule['rules'] as $css_property => $css_value ) {
$current_css_value = is_string( $css_value ) ? $css_value : $block_gap_value;
if ( static::is_safe_css_declaration( $css_property, $current_css_value ) ) {
$declarations[] = array(
'name' => $css_property,
'value' => $current_css_value,
);
}
}
if ( ! $has_block_gap_support ) {
// For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles.
$format = static::ROOT_BLOCK_SELECTOR === $selector ? ':where(.%2$s%3$s)' : ':where(%1$s.%2$s%3$s)';
$layout_selector = sprintf(
$format,
$selector,
$class_name,
$spacing_rule['selector']
);
} else {
$format = static::ROOT_BLOCK_SELECTOR === $selector ? ':root :where(.%2$s)%3$s' : ':root :where(%1$s-%2$s)%3$s';
$layout_selector = sprintf(
$format,
$selector,
$class_name,
$spacing_rule['selector']
);
}
$block_rules .= static::to_ruleset( $layout_selector, $declarations );
}
}
}
}
}
}
// Output base styles.
if (
static::ROOT_BLOCK_SELECTOR === $selector
) {
$valid_display_modes = array( 'block', 'flex', 'grid' );
foreach ( $layout_definitions as $layout_definition ) {
$class_name = isset( $layout_definition['className'] ) ? $layout_definition['className'] : false;
$base_style_rules = isset( $layout_definition['baseStyles'] ) ? $layout_definition['baseStyles'] : array();
if (
! empty( $class_name ) &&
is_array( $base_style_rules )
) {
// Output display mode. This requires special handling as `display` is not exposed in `safe_style_css_filter`.
if (
! empty( $layout_definition['displayMode'] ) &&
is_string( $layout_definition['displayMode'] ) &&
in_array( $layout_definition['displayMode'], $valid_display_modes, true )
) {
$layout_selector = sprintf(
'%s .%s',
$selector,
$class_name
);
$block_rules .= static::to_ruleset(
$layout_selector,
array(
array(
'name' => 'display',
'value' => $layout_definition['displayMode'],
),
)
);
}
foreach ( $base_style_rules as $base_style_rule ) {
$declarations = array();
// Skip outputting base styles for flow and constrained layout types if theme doesn't support theme.json. The 'base-layout-styles' type flags this.
if ( in_array( 'base-layout-styles', $types, true ) && ( 'default' === $layout_definition['name'] || 'constrained' === $layout_definition['name'] ) ) {
continue;
}
if (
isset( $base_style_rule['selector'] ) &&
preg_match( $layout_selector_pattern, $base_style_rule['selector'] ) &&
! empty( $base_style_rule['rules'] )
) {
foreach ( $base_style_rule['rules'] as $css_property => $css_value ) {
// Skip rules that reference content size or wide size if they are not defined in the theme.json.
if (
is_string( $css_value ) &&
( str_contains( $css_value, '--global--content-size' ) || str_contains( $css_value, '--global--wide-size' ) ) &&
! isset( $this->theme_json['settings']['layout']['contentSize'] ) &&
! isset( $this->theme_json['settings']['layout']['wideSize'] )
) {
continue;
}
if ( static::is_safe_css_declaration( $css_property, $css_value ) ) {
$declarations[] = array(
'name' => $css_property,
'value' => $css_value,
);
}
}
$layout_selector = sprintf(
'.%s%s',
$class_name,
$base_style_rule['selector']
);
$block_rules .= static::to_ruleset( $layout_selector, $declarations );
}
}
}
}
}
return $block_rules;
}
/**
* Creates new rulesets as classes for each preset value such as:
*
* .has-value-color {
* color: value;
* }
*
* .has-value-background-color {
* background-color: value;
* }
*
* .has-value-font-size {
* font-size: value;
* }
*
* .has-value-gradient-background {
* background: value;
* }
*
* p.has-value-gradient-background {
* background: value;
* }
*
* @since 5.9.0
*
* @param array $setting_nodes Nodes with settings.
* @param string[] $origins List of origins to process presets from.
* @return string The new stylesheet.
*/
protected function get_preset_classes( $setting_nodes, $origins ) {
$preset_rules = '';
foreach ( $setting_nodes as $metadata ) {
if ( null === $metadata['selector'] ) {
continue;
}
$selector = $metadata['selector'];
$node = _wp_array_get( $this->theme_json, $metadata['path'], array() );
$preset_rules .= static::compute_preset_classes( $node, $selector, $origins );
}
return $preset_rules;
}
/**
* 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;
}
$selector = $metadata['selector'];
$node = _wp_array_get( $this->theme_json, $metadata['path'], array() );
$declarations = static::compute_preset_vars( $node, $origins );
$theme_vars_declarations = static::compute_theme_vars( $node );
foreach ( $theme_vars_declarations as $theme_vars_declaration ) {
$declarations[] = $theme_vars_declaration;
}
$stylesheet .= static::to_ruleset( $selector, $declarations );
}
return $stylesheet;
}
/**
* Given a selector and a declaration list,
* creates the corresponding ruleset.
*
* @since 5.8.0
*
* @param string $selector CSS selector.
* @param array $declarations List of declarations.
* @return string The resulting CSS ruleset.
*/
protected static function to_ruleset( $selector, $declarations ) {
if ( empty( $declarations ) ) {
return '';
}
$declaration_block = array_reduce(
$declarations,
static function ( $carry, $element ) {
return $carry .= $element['name'] . ': ' . $element['value'] . ';'; },
''
);
return $selector . '{' . $declaration_block . '}';
}
/**
* 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 = '';
}
$stylesheet = '';
foreach ( static::PRESETS_METADATA as $preset_metadata ) {
if ( empty( $preset_metadata['classes'] ) ) {
continue;
}
$slugs = static::get_settings_slugs( $settings, $preset_metadata, $origins );
foreach ( $preset_metadata['classes'] as $class => $property ) {
foreach ( $slugs as $slug ) {
$css_var = static::replace_slug_in_string( $preset_metadata['css_vars'], $slug );
$class_name = static::replace_slug_in_string( $class, $slug );
// $selector is often empty, so we can save ourselves the `append_to_selector()` call then.
$new_selector = '' === $selector ? $class_name : static::append_to_selector( $selector, $class_name );
$stylesheet .= static::to_ruleset(
$new_selector,
array(
array(
'name' => $property,
'value' => 'var(' . $css_var . ') !important',
),
)
);
}
}
}
return $stylesheet;
}
/**
* Function that scopes a selector with another one. This works a bit like
* SCSS nesting except the `&` operator isn't supported.
*
* <code>
* $scope = '.a, .b .c';
* $selector = '> .x, .y';
* $merged = scope_selector( $scope, $selector );
* // $merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'
* </code>
*
* @since 5.9.0
* @since 6.6.0 Added early return if missing scope or selector.
*
* @param string $scope Selector to scope to.
* @param string $selector Original selector.
* @return string Scoped selector.
*/
public static function scope_selector( $scope, $selector ) {
if ( ! $scope || ! $selector ) {
return $selector;
}
$scopes = explode( ',', $scope );
$selectors = explode( ',', $selector );
$selectors_scoped = array();
foreach ( $scopes as $outer ) {
foreach ( $selectors as $inner ) {
$outer = trim( $outer );
$inner = trim( $inner );
if ( ! empty( $outer ) && ! empty( $inner ) ) {
$selectors_scoped[] = $outer . ' ' . $inner;
} elseif ( empty( $outer ) ) {
$selectors_scoped[] = $inner;
} elseif ( empty( $inner ) ) {
$selectors_scoped[] = $outer;
}
}
}
$result = implode( ', ', $selectors_scoped );
return $result;
}
/**
* 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;
}
foreach ( $node['selectors'] as $feature => $selector ) {
if ( is_string( $selector ) ) {
$node['selectors'][ $feature ] = static::scope_selector( $scope, $selector );
}
if ( is_array( $selector ) ) {
foreach ( $selector as $subfeature => $subfeature_selector ) {
$node['selectors'][ $feature ][ $subfeature ] = static::scope_selector( $scope, $subfeature_selector );
}
}
}
return $node;
}
/**
* Gets preset values keyed by slugs based on settings and metadata.
*
* <code>
* $settings = array(
* 'typography' => array(
* 'fontFamilies' => array(
* array(
* 'slug' => 'sansSerif',
* 'fontFamily' => '"Helvetica Neue", sans-serif',
* ),
* array(
* 'slug' => 'serif',
* 'colors' => 'Georgia, serif',
* )
* ),
* ),
* );
* $meta = array(
* 'path' => array( 'typography', 'fontFamilies' ),
* 'value_key' => 'fontFamily',
* );
* $values_by_slug = get_settings_values_by_slug();
* // $values_by_slug === array(
* // 'sans-serif' => '"Helvetica Neue", sans-serif',
* // 'serif' => 'Georgia, serif',
* // );
* </code>
*
* @since 5.9.0
* @since 6.6.0 Passing $settings to the callbacks defined in static::PRESETS_METADATA.
*
* @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 each key is a slug and each value is the preset value.
*/
protected static function get_settings_values_by_slug( $settings, $preset_metadata, $origins ) {
$preset_per_origin = _wp_array_get( $settings, $preset_metadata['path'], array() );
$result = array();
foreach ( $origins as $origin ) {
if ( ! isset( $preset_per_origin[ $origin ] ) ) {
continue;
}
foreach ( $preset_per_origin[ $origin ] as $preset ) {
$slug = _wp_to_kebab_case( $preset['slug'] );
$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;
}
$preset_per_origin = _wp_array_get( $settings, $preset_metadata['path'], array() );
$result = array();
foreach ( $origins as $origin ) {
if ( ! isset( $preset_per_origin[ $origin ] ) ) {
continue;
}
foreach ( $preset_per_origin[ $origin ] as $preset ) {
$slug = _wp_to_kebab_case( $preset['slug'] );
// 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 ) )
);
if ( is_array( $value ) ) {
$new_prefix = $new_key . $token;
$flattened_subtree = static::flatten_tree( $value, $new_prefix, $token );
foreach ( $flattened_subtree as $subtree_key => $subtree_value ) {
$result[ $subtree_key ] = $subtree_value;
}
} else {
$result[ $new_key ] = $value;
}
}
return $result;
}
/**
* Given a styles array, it extracts the style properties
* 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 `$settings` and `$properties` parameters.
* @since 6.1.0 Added `$theme_json`, `$selector`, and `$use_root_padding` parameters.
* @since 6.5.0 Output a `min-height: unset` rule when `aspect-ratio` is set.
* @since 6.6.0 Pass current theme JSON settings to wp_get_typography_font_size_value(), and process background properties.
* @since 6.7.0 `ref` resolution of background properties, and assigning custom default values.
*
* @param array $styles Styles to process.
* @param array $settings Theme settings.
* @param array $properties Properties metadata.
* @param array $theme_json Theme JSON array.
* @param string $selector The style block selector.
* @param boolean $use_root_padding Whether to add custom properties at root level.
* @return array Returns the modified $declarations.
*/
protected static function compute_style_properties( $styles, $settings = array(), $properties = null, $theme_json = null, $selector = null, $use_root_padding = null ) {
if ( empty( $styles ) ) {
return array();
}
if ( null === $properties ) {
$properties = static::PROPERTIES_METADATA;
}
$declarations = array();
$root_variable_duplicates = array();
$root_style_length = strlen( '--wp--style--root--' );
foreach ( $properties as $css_property => $value_path ) {
if ( ! is_array( $value_path ) ) {
continue;
}
$is_root_style = str_starts_with( $css_property, '--wp--style--root--' );
if ( $is_root_style && ( static::ROOT_BLOCK_SELECTOR !== $selector || ! $use_root_padding ) ) {
continue;
}
$value = static::get_property_value( $styles, $value_path, $theme_json );
/*
* Root-level padding styles don't currently support strings with CSS shorthand values.
* This may change: https://github.com/WordPress/gutenberg/issues/40132.
*/
if ( '--wp--style--root--padding' === $css_property && is_string( $value ) ) {
continue;
}
if ( $is_root_style && $use_root_padding ) {
$root_variable_duplicates[] = substr( $css_property, $root_style_length );
}
/*
* 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',
);
}
$declarations[] = array(
'name' => $css_property,
'value' => $value,
);
}
// 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;
}
// Top-level.
$nodes[] = array(
'path' => array( 'settings' ),
'selector' => static::ROOT_CSS_PROPERTIES_SELECTOR,
);
// Calculate paths for blocks.
if ( ! isset( $theme_json['settings']['blocks'] ) ) {
return $nodes;
}
foreach ( $theme_json['settings']['blocks'] as $name => $node ) {
$selector = null;
if ( isset( $selectors[ $name ]['selector'] ) ) {
$selector = $selectors[ $name ]['selector'];
}
$nodes[] = array(
'path' => array( 'settings', 'blocks', $name ),
'selector' => $selector,
);
}
return $nodes;
}
/**
* Builds metadata for the style nodes, which returns in the form of:
*
* [
* [
* 'path' => [ 'path', 'to', 'some', 'node' ],
* 'selector' => 'CSS selector for some node',
* 'duotone' => 'CSS selector for duotone for some node'
* ],
* [
* 'path' => ['path', 'to', 'other', 'node' ],
* 'selector' => 'CSS selector for other node',
* 'duotone' => null
* ],
* ]
*
* @since 5.8.0
* @since 6.6.0 Added options array for modifying generated nodes.
*
* @param array $theme_json The tree to extract style nodes from.
* @param array $selectors 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 Includes style nodes for block style variations. Default false.
* }
* @return array An array of style nodes metadata.
*/
protected static function get_style_nodes( $theme_json, $selectors = array(), $options = array() ) {
$nodes = array();
if ( ! isset( $theme_json['styles'] ) ) {
return $nodes;
}
// Top-level.
$nodes[] = array(
'path' => array( 'styles' ),
'selector' => static::ROOT_BLOCK_SELECTOR,
);
if ( isset( $theme_json['styles']['elements'] ) ) {
foreach ( self::ELEMENTS as $element => $selector ) {
if ( ! isset( $theme_json['styles']['elements'][ $element ] ) ) {
continue;
}
$nodes[] = array(
'path' => array( 'styles', 'elements', $element ),
'selector' => static::ELEMENTS[ $element ],
);
// Handle any pseudo selectors for the element.
if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] ) ) {
foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
if ( isset( $theme_json['styles']['elements'][ $element ][ $pseudo_selector ] ) ) {
$nodes[] = array(
'path' => array( 'styles', 'elements', $element ),
'selector' => static::append_to_selector( static::ELEMENTS[ $element ], $pseudo_selector ),
);
}
}
}
}
}
// Blocks.
if ( ! isset( $theme_json['styles']['blocks'] ) ) {
return $nodes;
}
$block_nodes = static::get_block_nodes( $theme_json, $selectors, $options );
foreach ( $block_nodes as $block_node ) {
$nodes[] = $block_node;
}
/**
* 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;
foreach ( $declarations as $declaration ) {
if ( 'background-color' === $declaration['name'] && ! $background_color && isset( $declaration['value'] ) ) {
$background_color = $declaration['value'];
} elseif ( 'border-color' === $declaration['name'] ) {
$border_color_matches = true;
} elseif ( 'color' === $declaration['name'] ) {
$text_color_matches = true;
}
if ( $background_color && $border_color_matches && $text_color_matches ) {
break;
}
}
if ( $background_color && ! $border_color_matches && ! $text_color_matches ) {
$declarations[] = array(
'name' => 'color',
'value' => $background_color,
);
}
return $declarations;
}
/**
* 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 ( ! isset( $theme_json['styles']['blocks'] ) ) {
return $nodes;
}
$include_variations = $options['include_block_style_variations'] ?? false;
$include_node_paths_only = $options['include_node_paths_only'] ?? false;
// If only node paths are to be returned, skip selector assignment.
if ( ! $include_node_paths_only ) {
$selectors = empty( $selectors ) ? static::get_blocks_metadata() : $selectors;
}
foreach ( $theme_json['styles']['blocks'] as $name => $node ) {
$node_path = array( 'styles', 'blocks', $name );
if ( $include_node_paths_only ) {
$nodes[] = array(
'path' => $node_path,
);
} else {
$selector = null;
if ( isset( $selectors[ $name ]['selector'] ) ) {
$selector = $selectors[ $name ]['selector'];
}
$duotone_selector = null;
if ( isset( $selectors[ $name ]['duotone'] ) ) {
$duotone_selector = $selectors[ $name ]['duotone'];
}
$feature_selectors = null;
if ( isset( $selectors[ $name ]['selectors'] ) ) {
$feature_selectors = $selectors[ $name ]['selectors'];
}
$variation_selectors = array();
if ( $include_variations && isset( $node['variations'] ) ) {
foreach ( $node['variations'] as $variation => $node ) {
$variation_selectors[] = array(
'path' => array( 'styles', 'blocks', $name, 'variations', $variation ),
'selector' => $selectors[ $name ]['styleVariations'][ $variation ],
);
}
}
$nodes[] = array(
'name' => $name,
'path' => $node_path,
'selector' => $selector,
'selectors' => $feature_selectors,
'duotone' => $duotone_selector,
'features' => $feature_selectors,
'variations' => $variation_selectors,
'css' => $selector,
);
}
if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'] ) ) {
foreach ( $theme_json['styles']['blocks'][ $name ]['elements'] as $element => $node ) {
$node_path = array( 'styles', 'blocks', $name, 'elements', $element );
if ( $include_node_paths_only ) {
$nodes[] = array(
'path' => $node_path,
);
continue;
}
$nodes[] = array(
'path' => $node_path,
'selector' => $selectors[ $name ]['elements'][ $element ],
);
// Handle any pseudo selectors for the element.
if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] ) ) {
foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'][ $element ][ $pseudo_selector ] ) ) {
$node_path = array( 'styles', 'blocks', $name, 'elements', $element );
if ( $include_node_paths_only ) {
$nodes[] = array(
'path' => $node_path,
);
continue;
}
$nodes[] = array(
'path' => $node_path,
'selector' => static::append_to_selector( $selectors[ $name ]['elements'][ $element ], $pseudo_selector ),
);
}
}
}
}
}
}
return $nodes;
}
/**
* 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 );
$current_element = $is_processing_element ? $block_metadata['path'][ count( $block_metadata['path'] ) - 1 ] : null;
$element_pseudo_allowed = array();
if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] ) ) {
$element_pseudo_allowed = static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ];
}
/*
* Check for allowed pseudo classes (e.g. ":hover") from the $selector ("a:hover").
* This also resets the array keys.
*/
$pseudo_matches = array_values(
array_filter(
$element_pseudo_allowed,
static function ( $pseudo_selector ) use ( $selector ) {
return str_contains( $selector, $pseudo_selector );
}
)
);
$pseudo_selector = isset( $pseudo_matches[0] ) ? $pseudo_matches[0] : null;
/*
* 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 ( $is_root_selector && ( 'background-image' === $declaration['name'] || 'background' === $declaration['name'] ) ) {
$should_set_root_min_height = true;
}
}
/*
* 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 );
}
// 4. Generate Layout block gap styles.
if (
! $is_root_selector &&
! empty( $block_metadata['name'] )
) {
$block_rules .= $this->get_layout_styles( $block_metadata );
}
// 5. Generate and append the feature level rulesets.
foreach ( $feature_declarations as $feature_selector => $individual_feature_declarations ) {
$block_rules .= static::to_ruleset( ":root :where($feature_selector)", $individual_feature_declarations );
}
// 6. Generate and append the style variation rulesets.
foreach ( $style_variation_declarations as $style_variation_selector => $individual_style_variation_declarations ) {
$block_rules .= static::to_ruleset( ":root :where($style_variation_selector)", $individual_style_variation_declarations );
if ( isset( $style_variation_custom_css[ $style_variation_selector ] ) ) {
$block_rules .= $style_variation_custom_css[ $style_variation_selector ];
}
}
// 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']['wideSiz