--- a/wp/wp-includes/class-wp-theme-json.php Thu Sep 29 08:06:27 2022 +0200
+++ b/wp/wp-includes/class-wp-theme-json.php Fri Sep 05 18:40:08 2025 +0200
@@ -16,6 +16,7 @@
*
* @access private
*/
+#[AllowDynamicProperties]
class WP_Theme_JSON {
/**
@@ -32,9 +33,18 @@
* process it twice.
*
* @since 5.8.0
+ * @since 6.1.0 Initialize as an empty array.
* @var array
*/
- protected static $blocks_metadata = null;
+ 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.
@@ -48,10 +58,12 @@
* 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',
);
@@ -62,15 +74,13 @@
*
* They are a unkeyed array of values such as:
*
- * ```php
- * array(
- * array(
- * 'slug' => 'unique-name-within-the-set',
- * 'name' => 'Name for the UI',
- * <value_key> => 'value'
- * ),
- * )
- * ```
+ * array(
+ * array(
+ * 'slug' => 'unique-name-within-the-set',
+ * 'name' => 'Name for the UI',
+ * <value_key> => 'value'
+ * ),
+ * )
*
* This contains the necessary metadata to process them:
*
@@ -78,8 +88,8 @@
* - 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 overriden
- * - If defaults are disabled => theme presets should be overriden
+ * - 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,
@@ -110,11 +120,25 @@
* @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_overried` value for `color.duotone` to use `color.defaultDuotone`.
+ * `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,
@@ -140,16 +164,16 @@
'path' => array( 'color', 'duotone' ),
'prevent_override' => array( 'color', 'defaultDuotone' ),
'use_default_names' => false,
- 'value_func' => 'wp_get_duotone_filter_property',
- 'css_vars' => '--wp--preset--duotone--$slug',
+ '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' => false,
+ 'prevent_override' => array( 'typography', 'defaultFontSizes' ),
'use_default_names' => true,
- 'value_key' => 'size',
+ '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' ),
@@ -163,6 +187,24 @@
'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' ),
+ ),
);
/**
@@ -176,40 +218,113 @@
* `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.
+ *
* @var array
*/
const PROPERTIES_METADATA = array(
- 'background' => array( 'color', 'gradient' ),
- 'background-color' => array( 'color', 'background' ),
- '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' ),
- 'color' => array( 'color', 'text' ),
- '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' ),
- '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--block-gap' => array( 'spacing', 'blockGap' ),
- 'text-decoration' => array( 'typography', 'textDecoration' ),
- 'text-transform' => array( 'typography', 'textTransform' ),
- 'filter' => array( 'filter', 'duotone' ),
+ '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' ),
+ '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' ),
+ ),
);
/**
@@ -233,16 +348,21 @@
* @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',
- 'title',
);
/**
@@ -253,17 +373,32 @@
* 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,
- 'border' => array(
+ 'appearanceTools' => null,
+ 'useRootPaddingAwareAlignments' => null,
+ 'background' => array(
+ 'backgroundImage' => null,
+ 'backgroundSize' => null,
+ ),
+ 'border' => array(
'color' => null,
'radius' => null,
'style' => null,
'width' => null,
),
- 'color' => array(
+ 'color' => array(
'background' => null,
'custom' => null,
'customDuotone' => null,
@@ -274,31 +409,95 @@
'duotone' => null,
'gradients' => null,
'link' => null,
+ 'heading' => null,
+ 'button' => null,
+ 'caption' => null,
'palette' => null,
'text' => null,
),
- 'custom' => null,
- 'layout' => array(
- 'contentSize' => null,
- 'wideSize' => 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,
),
- 'spacing' => array(
- 'blockGap' => null,
- 'margin' => null,
- 'padding' => null,
- 'units' => 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(
- 'customFontSize' => null,
- 'dropCap' => null,
- 'fontFamilies' => null,
- 'fontSizes' => null,
- 'fontStyle' => null,
- 'fontWeight' => null,
- 'letterSpacing' => null,
- 'lineHeight' => null,
- 'textDecoration' => null,
- 'textTransform' => 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,
+ ),
+ ),
),
);
@@ -309,27 +508,56 @@
* @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' => 'top',
+ 'backgroundPosition' => 'top',
+ 'backgroundRepeat' => 'top',
+ 'backgroundSize' => 'top',
+ ),
'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' => 'top',
+ 'blockGap' => null,
),
'typography' => array(
'fontFamily' => null,
@@ -338,39 +566,163 @@
'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',
- 'h1' => 'h1',
- 'h2' => 'h2',
- 'h3' => 'h3',
- 'h4' => 'h4',
- 'h5' => 'h5',
- 'h6' => 'h6',
+ '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' ),
@@ -382,35 +734,43 @@
*
* @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 = 2;
+ 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 'default', 'theme', or 'custom'. Default 'theme'.
+ * One of 'blocks', 'default', 'theme', or 'custom'. Default 'theme'.
*/
- public function __construct( $theme_json = array(), $origin = '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 );
+ $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 );
- $theme_json = static::sanitize( $this->theme_json, $valid_block_names, $valid_element_names );
- $this->theme_json = static::maybe_opt_in_into_settings( $theme_json );
+ $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 = array_merge( $node['path'], $preset_metadata['path'] );
+ $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.
@@ -420,6 +780,94 @@
}
}
}
+
+ // 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;
}
/**
@@ -460,8 +908,10 @@
*/
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).
+ /*
+ * 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 );
}
@@ -475,28 +925,39 @@
*
* @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 ) {
+ 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 ) );
- // 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.
+ /*
+ * 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 ) {
- 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 ] );
+ // 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 ] );
+ }
}
}
}
@@ -504,21 +965,75 @@
// 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;
}
- $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;
+
+ $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 ) {
@@ -536,7 +1051,7 @@
if ( empty( $result ) ) {
unset( $output[ $subtree ] );
} else {
- $output[ $subtree ] = $result;
+ $output[ $subtree ] = static::resolve_custom_css_format( $result );
}
}
@@ -544,6 +1059,58 @@
}
/**
+ * 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:
@@ -569,45 +1136,87 @@
*
* @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() {
- if ( null !== static::$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;
}
- static::$blocks_metadata = array();
-
- $registry = WP_Block_Type_Registry::get_instance();
- $blocks = $registry->get_all_registered();
foreach ( $blocks as $block_name => $block_type ) {
- if (
- isset( $block_type->supports['__experimentalSelector'] ) &&
- is_string( $block_type->supports['__experimentalSelector'] )
- ) {
- static::$blocks_metadata[ $block_name ]['selector'] = $block_type->supports['__experimentalSelector'];
- } else {
- static::$blocks_metadata[ $block_name ]['selector'] = '.wp-block-' . str_replace( '/', '-', str_replace( 'core/', '', $block_name ) );
+ $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;
}
- if (
- isset( $block_type->supports['color']['__experimentalDuotone'] ) &&
- is_string( $block_type->supports['color']['__experimentalDuotone'] )
- ) {
- static::$blocks_metadata[ $block_name ]['duotone'] = $block_type->supports['color']['__experimentalDuotone'];
+ // 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;
}
- // Assign defaults, then overwrite those that the block sets by itself.
- // If the block selector is compounded, will append the element to each
- // individual block selector.
- $block_selectors = explode( ',', static::$blocks_metadata[ $block_name ]['selector'] );
- foreach ( static::ELEMENTS as $el_name => $el_selector ) {
- $element_selector = array();
- foreach ( $block_selectors as $selector ) {
- $element_selector[] = $selector . ' ' . $el_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'] );
}
- static::$blocks_metadata[ $block_name ]['elements'][ $el_name ] = implode( ',', $element_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;
}
}
@@ -623,27 +1232,43 @@
*
* @param array $tree Input to process.
* @param array $schema Schema to adhere to.
- * @return array Returns the modified $tree.
+ * @return array The modified $tree.
*/
protected static function remove_keys_not_in_schema( $tree, $schema ) {
- $tree = array_intersect_key( $tree, $schema );
-
- foreach ( $schema as $key => $data ) {
- if ( ! isset( $tree[ $key ] ) ) {
+ 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 ] ) && is_array( $tree[ $key ] ) ) {
- $tree[ $key ] = static::remove_keys_not_in_schema( $tree[ $key ], $schema[ $key ] );
-
- if ( empty( $tree[ $key ] ) ) {
+ 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 ] );
+ }
}
- } elseif ( is_array( $schema[ $key ] ) && ! is_array( $tree[ $key ] ) ) {
- unset( $tree[ $key ] );
}
}
-
return $tree;
}
@@ -682,16 +1307,27 @@
* 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 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 array $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 array $origins A list of origins to include. By default it includes VALID_ORIGINS.
- * @return string Stylesheet.
+ * @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 ) {
+ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' ), $origins = null, $options = array() ) {
if ( null === $origins ) {
$origins = static::VALID_ORIGINS;
}
@@ -709,9 +1345,31 @@
}
$blocks_metadata = static::get_blocks_metadata();
- $style_nodes = static::get_style_nodes( $this->theme_json, $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 ) ) {
@@ -719,7 +1377,46 @@
}
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 ) ) {
@@ -730,6 +1427,91 @@
}
/**
+ * 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
+ *
+ * @return string The global styles custom CSS.
+ */
+ public function get_custom_css() {
+ // 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
@@ -793,6 +1575,7 @@
* @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.
@@ -804,56 +1587,215 @@
if ( null === $metadata['selector'] ) {
continue;
}
-
- $node = _wp_array_get( $this->theme_json, $metadata['path'], array() );
- $selector = $metadata['selector'];
- $settings = _wp_array_get( $this->theme_json, array( 'settings' ) );
- $declarations = static::compute_style_properties( $node, $settings );
-
- // 1. Separate the ones who use the general selector
- // and the ones who use the duotone selector.
- $declarations_duotone = array();
- foreach ( $declarations as $index => $declaration ) {
- if ( 'filter' === $declaration['name'] ) {
- unset( $declarations[ $index ] );
- $declarations_duotone[] = $declaration;
+ $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;
}
}
- /*
- * Reset default browser margin on the root body element.
- * This is set on the root selector **before** generating the ruleset
- * from the `theme.json`. This is to ensure that if the `theme.json` declares
- * `margin` in its `spacing` declaration for the `body` element then these
- * user-generated values take precedence in the CSS cascade.
- * @link https://github.com/WordPress/gutenberg/issues/36147.
- */
- if ( static::ROOT_BLOCK_SELECTOR === $selector ) {
- $block_rules .= 'body { margin: 0; }';
- }
-
- // 2. Generate the rules that use the general selector.
- $block_rules .= static::to_ruleset( $selector, $declarations );
-
- // 3. Generate the rules that use the duotone selector.
- if ( isset( $metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
- $selector_duotone = static::scope_selector( $metadata['selector'], $metadata['duotone'] );
- $block_rules .= static::to_ruleset( $selector_duotone, $declarations_duotone );
- }
-
- if ( static::ROOT_BLOCK_SELECTOR === $selector ) {
- $block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
- $block_rules .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
- $block_rules .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
-
- $has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
- if ( $has_block_gap_support ) {
- $block_rules .= '.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
- $block_rules .= '.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }';
+ // 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;
}
@@ -882,8 +1824,8 @@
*
* @since 5.9.0
*
- * @param array $setting_nodes Nodes with settings.
- * @param array $origins List of origins to process presets from.
+ * @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 ) {
@@ -919,8 +1861,8 @@
* @since 5.8.0
* @since 5.9.0 Added the `$origins` parameter.
*
- * @param array $nodes Nodes with settings.
- * @param array $origins List of origins to process.
+ * @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 ) {
@@ -932,8 +1874,12 @@
$selector = $metadata['selector'];
- $node = _wp_array_get( $this->theme_json, $metadata['path'], array() );
- $declarations = array_merge( static::compute_preset_vars( $node, $origins ), static::compute_theme_vars( $node ) );
+ $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 );
}
@@ -949,7 +1895,7 @@
*
* @param string $selector CSS selector.
* @param array $declarations List of declarations.
- * @return string CSS ruleset.
+ * @return string The resulting CSS ruleset.
*/
protected static function to_ruleset( $selector, $declarations ) {
if ( empty( $declarations ) ) {
@@ -967,56 +1913,42 @@
}
/**
- * Function that appends a sub-selector to a 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
- *
- * @param string $selector Original selector.
- * @param string $to_append Selector to append.
- * @return string
- */
- protected static function append_to_selector( $selector, $to_append ) {
- $new_selectors = array();
- $selectors = explode( ',', $selector );
- foreach ( $selectors as $sel ) {
- $new_selectors[] = $sel . $to_append;
- }
-
- return implode( ',', $new_selectors );
- }
-
- /**
- * Given a settings array, it returns the generated rulesets
+ * 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 array $origins List of origins to process.
+ * @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 ) {
- // Classes at the global level do not need any CSS prefixed,
- // and we don't want to increase its specificity.
+ 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 );
- $stylesheet .= static::to_ruleset(
- static::append_to_selector( $selector, $class_name ),
+ $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,
@@ -1043,23 +1975,70 @@
* </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.
*/
- protected static function scope_selector( $scope, $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 ) {
- $selectors_scoped[] = trim( $outer ) . ' ' . trim( $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;
+ }
}
}
- return implode( ', ', $selectors_scoped );
+ $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;
}
/**
@@ -1092,10 +2071,11 @@
* </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 array $origins List of origins to process.
+ * @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 ) {
@@ -1118,7 +2098,7 @@
is_callable( $preset_metadata['value_func'] )
) {
$value_func = $preset_metadata['value_func'];
- $value = call_user_func( $value_func, $preset );
+ $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;
@@ -1135,9 +2115,9 @@
*
* @since 5.9.0
*
- * @param array $settings Settings to process.
- * @param array $preset_metadata One of the PRESETS_METADATA values.
- * @param array $origins List of origins to process.
+ * @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 ) {
@@ -1163,7 +2143,7 @@
}
/**
- * Transform a slug into a CSS Custom Property.
+ * Transforms a slug into a CSS Custom Property.
*
* @since 5.9.0
*
@@ -1176,7 +2156,7 @@
}
/**
- * Given the block settings, it extracts the CSS Custom Properties
+ * Given the block settings, extracts the CSS Custom Properties
* for the presets and adds them to the $declarations array
* following the format:
*
@@ -1188,13 +2168,16 @@
* @since 5.8.0
* @since 5.9.0 Added the `$origins` parameter.
*
- * @param array $settings Settings to process.
- * @param array $origins List of origins to process.
- * @return array Returns the modified $declarations.
+ * @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(
@@ -1208,7 +2191,7 @@
}
/**
- * Given an array of settings, it extracts the CSS Custom Properties
+ * Given an array of settings, extracts the CSS Custom Properties
* for the custom values and adds them to the $declarations
* array following the format:
*
@@ -1220,11 +2203,11 @@
* @since 5.8.0
*
* @param array $settings Settings to process.
- * @return array Returns the modified $declarations.
+ * @return array The modified $declarations.
*/
protected static function compute_theme_vars( $settings ) {
$declarations = array();
- $custom_values = _wp_array_get( $settings, array( 'custom' ), array() );
+ $custom_values = isset( $settings['custom'] ) ? $settings['custom'] : array();
$css_vars = static::flatten_tree( $custom_values );
foreach ( $css_vars as $key => $value ) {
$declarations[] = array(
@@ -1283,11 +2266,11 @@
);
if ( is_array( $value ) ) {
- $new_prefix = $new_key . $token;
- $result = array_merge(
- $result,
- static::flatten_tree( $value, $new_prefix, $token )
- );
+ $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;
}
@@ -1306,13 +2289,19 @@
*
* @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.
*
- * @param array $styles Styles to process.
- * @param array $settings Theme settings.
- * @param array $properties Properties metadata.
- * @return array Returns the modified $declarations.
+ * @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 ) {
+ protected static function compute_style_properties( $styles, $settings = array(), $properties = null, $theme_json = null, $selector = null, $use_root_padding = null ) {
if ( null === $properties ) {
$properties = static::PROPERTIES_METADATA;
}
@@ -1322,68 +2311,152 @@
return $declarations;
}
+ $root_variable_duplicates = array();
+
foreach ( $properties as $css_property => $value_path ) {
- $value = static::get_property_value( $styles, $value_path );
-
- // Look up protected properties, keyed by value path.
- // Skip protected properties that are explicitly set to `null`.
+ $value = static::get_property_value( $styles, $value_path, $theme_json );
+
+ if ( str_starts_with( $css_property, '--wp--style--root--' ) && ( static::ROOT_BLOCK_SELECTOR !== $selector || ! $use_root_padding ) ) {
+ continue;
+ }
+ /*
+ * 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 ( str_starts_with( $css_property, '--wp--style--root--' ) && $use_root_padding ) {
+ $root_variable_duplicates[] = substr( $css_property, strlen( '--wp--style--root--' ) );
+ }
+
+ /*
+ * Look up protected properties, keyed by value path.
+ * Skip protected properties that are explicitly set to `null`.
+ */
if ( is_array( $value_path ) ) {
$path_string = implode( '.', $value_path );
if (
- array_key_exists( $path_string, static::PROTECTED_PROPERTIES ) &&
+ isset( static::PROTECTED_PROPERTIES[ $path_string ] ) &&
_wp_array_get( $settings, static::PROTECTED_PROPERTIES[ $path_string ], null ) === null
) {
continue;
}
}
+ // Processes background styles.
+ if ( 'background' === $value_path[0] && isset( $styles['background'] ) ) {
+ $background_styles = wp_style_engine_get_styles( array( 'background' => $styles['background'] ) );
+ $value = isset( $background_styles['declarations'][ $css_property ] ) ? $background_styles['declarations'][ $css_property ] : $value;
+ }
+
// 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;
}
+ // 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 CSS Custom Property stored as
- * "var:preset|color|secondary" to the form
- * "--wp--preset--color--secondary".
+ * 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.
*
* @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 ) {
+ protected static function get_property_value( $styles, $path, $theme_json = null ) {
$value = _wp_array_get( $styles, $path, '' );
- if ( '' === $value || is_array( $value ) ) {
- return $value;
+ if ( '' === $value || null === $value ) {
+ // No need to process the value further.
+ return '';
}
- $prefix = 'var:';
- $prefix_len = strlen( $prefix );
- $token_in = '|';
- $token_out = '--';
- if ( 0 === strncmp( $value, $prefix, $prefix_len ) ) {
- $unwrapped_name = str_replace(
- $token_in,
- $token_out,
- substr( $value, $prefix_len )
- );
- $value = "var(--wp--$unwrapped_name)";
+ /*
+ * This converts references to a path to the value at that path
+ * where the values is an array with a "ref" key, pointing to a path.
+ * For example: { "ref": "style.color.background" } => "#fff".
+ */
+ if ( is_array( $value ) && isset( $value['ref'] ) ) {
+ $value_path = explode( '.', $value['ref'] );
+ $ref_value = _wp_array_get( $theme_json, $value_path );
+ // Only use the ref value if we find anything.
+ if ( ! empty( $ref_value ) && is_string( $ref_value ) ) {
+ $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;
@@ -1407,7 +2480,7 @@
*
* @param array $theme_json The tree to extract setting nodes from.
* @param array $selectors List of selectors per block.
- * @return array
+ * @return array An array of setting nodes metadata.
*/
protected static function get_setting_nodes( $theme_json, $selectors = array() ) {
$nodes = array();
@@ -1418,7 +2491,7 @@
// Top-level.
$nodes[] = array(
'path' => array( 'settings' ),
- 'selector' => static::ROOT_BLOCK_SELECTOR,
+ 'selector' => static::ROOT_CSS_PROPERTIES_SELECTOR,
);
// Calculate paths for blocks.
@@ -1458,12 +2531,18 @@
* ]
*
* @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.
- * @return array
+ * @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() ) {
+ protected static function get_style_nodes( $theme_json, $selectors = array(), $options = array() ) {
$nodes = array();
if ( ! isset( $theme_json['styles'] ) ) {
return $nodes;
@@ -1476,11 +2555,27 @@
);
if ( isset( $theme_json['styles']['elements'] ) ) {
- foreach ( $theme_json['styles']['elements'] as $element => $node ) {
+ 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 ),
+ );
+ }
+ }
+ }
}
}
@@ -1489,6 +2584,100 @@
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.
+ *
+ * @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 Includes nodes for block style variations. Default false.
+ * }
+ * @return array The block nodes in theme.json.
+ */
+ private static function get_block_nodes( $theme_json, $selectors = array(), $options = array() ) {
+ $selectors = empty( $selectors ) ? static::get_blocks_metadata() : $selectors;
+ $nodes = array();
+ if ( ! isset( $theme_json['styles'] ) ) {
+ return $nodes;
+ }
+
+ // Blocks.
+ if ( ! isset( $theme_json['styles']['blocks'] ) ) {
+ return $nodes;
+ }
+
foreach ( $theme_json['styles']['blocks'] as $name => $node ) {
$selector = null;
if ( isset( $selectors[ $name ]['selector'] ) ) {
@@ -1500,10 +2689,30 @@
$duotone_selector = $selectors[ $name ]['duotone'];
}
+ $feature_selectors = null;
+ if ( isset( $selectors[ $name ]['selectors'] ) ) {
+ $feature_selectors = $selectors[ $name ]['selectors'];
+ }
+
+ $variation_selectors = array();
+ $include_variations = $options['include_block_style_variations'] ?? false;
+ 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(
- 'path' => array( 'styles', 'blocks', $name ),
- 'selector' => $selector,
- 'duotone' => $duotone_selector,
+ 'name' => $name,
+ 'path' => array( 'styles', 'blocks', $name ),
+ 'selector' => $selector,
+ 'selectors' => $feature_selectors,
+ 'duotone' => $duotone_selector,
+ 'features' => $feature_selectors,
+ 'variations' => $variation_selectors,
);
if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'] ) ) {
@@ -1512,6 +2721,18 @@
'path' => array( 'styles', 'blocks', $name, 'elements', $element ),
'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 ] ) ) {
+ $nodes[] = array(
+ 'path' => array( 'styles', 'blocks', $name, 'elements', $element ),
+ 'selector' => static::append_to_selector( $selectors[ $name ]['elements'][ $element ], $pseudo_selector ),
+ );
+ }
+ }
+ }
}
}
}
@@ -1520,31 +2741,317 @@
}
/**
+ * 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 pertaining to nested block style variations.
+ if ( isset( $node['css'] ) && ! $is_root_selector ) {
+ $block_rules .= $this->process_blocks_custom_css( $node['css'], $selector );
+ }
+
+ return $block_rules;
+ }
+
+ /**
+ * Outputs the CSS for layout rules on the root.
+ *
+ * @since 6.1.0
+ * @since 6.6.0 Use `ROOT_CSS_PROPERTIES_SELECTOR` for CSS custom properties and improved consistency of root padding rules.
+ * Updated specificity of body margin reset and first/last child selectors.
+ *
+ * @param string $selector The root node selector.
+ * @param array $block_metadata The metadata for the root block.
+ * @return string The additional root rules CSS.
+ */
+ public function get_root_layout_rules( $selector, $block_metadata ) {
+ $css = '';
+ $settings = isset( $this->theme_json['settings'] ) ? $this->theme_json['settings'] : array();
+ $use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments'];
+
+ /*
+ * If there are content and wide widths in theme.json, output them
+ * as custom properties on the body element so all blocks can use them.
+ */
+ if ( isset( $settings['layout']['contentSize'] ) || isset( $settings['layout']['wideSize'] ) ) {
+ $content_size = isset( $settings['layout']['contentSize'] ) ? $settings['layout']['contentSize'] : $settings['layout']['wideSize'];
+ $content_size = static::is_safe_css_declaration( 'max-width', $content_size ) ? $content_size : 'initial';
+ $wide_size = isset( $settings['layout']['wideSize'] ) ? $settings['layout']['wideSize'] : $settings['layout']['contentSize'];
+ $wide_size = static::is_safe_css_declaration( 'max-width', $wide_size ) ? $wide_size : 'initial';
+ $css .= static::ROOT_CSS_PROPERTIES_SELECTOR . ' { --wp--style--global--content-size: ' . $content_size . ';';
+ $css .= '--wp--style--global--wide-size: ' . $wide_size . '; }';
+ }
+
+ /*
+ * Reset default browser margin on the body element.
+ * This is set on the body selector **before** generating the ruleset
+ * from the `theme.json`. This is to ensure that if the `theme.json` declares
+ * `margin` in its `spacing` declaration for the `body` element then these
+ * user-generated values take precedence in the CSS cascade.
+ * @link https://github.com/WordPress/gutenberg/issues/36147.
+ */
+ $css .= ':where(body) { margin: 0; }';
+
+ if ( $use_root_padding ) {
+ // Top and bottom padding are applied to the outer block container.
+ $css .= '.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }';
+ // Right and left padding are applied to the first container with `.has-global-padding` class.
+ $css .= '.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
+ // Alignfull children of the container with left and right padding have negative margins so they can still be full width.
+ $css .= '.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';
+ // Nested children of the container with left and right padding that are not full aligned do not get padding, unless they are direct children of an alignfull flow container.
+ $css .= '.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }';
+ // Alignfull direct children of the containers that are targeted by the rule above do not need negative margins.
+ $css .= '.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0; }';
+ }
+
+ $css .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
+ $css .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
+ $css .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
+
+ // Block gap styles will be output unless explicitly set to `null`. See static::PROTECTED_PROPERTIES.
+ if ( isset( $this->theme_json['settings']['spacing']['blockGap'] ) ) {
+ $block_gap_value = static::get_property_value( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ) );
+ $css .= ":where(.wp-site-blocks) > * { margin-block-start: $block_gap_value; margin-block-end: 0; }";
+ $css .= ':where(.wp-site-blocks) > :first-child { margin-block-start: 0; }';
+ $css .= ':where(.wp-site-blocks) > :last-child { margin-block-end: 0; }';
+
+ // For backwards compatibility, ensure the legacy block gap CSS variable is still available.
+ $css .= static::ROOT_CSS_PROPERTIES_SELECTOR . " { --wp--style--block-gap: $block_gap_value; }";
+ }
+ $css .= $this->get_layout_styles( $block_metadata );
+
+ return $css;
+ }
+
+ /**
* For metadata values that can either be booleans or paths to booleans, gets the value.
*
- * ```php
- * $data = array(
- * 'color' => array(
- * 'defaultPalette' => true
- * )
- * );
+ * $data = array(
+ * 'color' => array(
+ * 'defaultPalette' => true
+ * )
+ * );
*
- * static::get_metadata_boolean( $data, false );
- * // => false
+ * static::get_metadata_boolean( $data, false );
+ * // => false
*
- * static::get_metadata_boolean( $data, array( 'color', 'defaultPalette' ) );
- * // => true
- * ```
+ * static::get_metadata_boolean( $data, array( 'color', 'defaultPalette' ) );
+ * // => true
*
* @since 6.0.0
*
- * @param array $data The data to inspect.
- * @param bool|array $path Boolean or path to a boolean.
- * @param bool $default Default value if the referenced path is missing.
- * Default false.
+ * @param array $data The data to inspect.
+ * @param bool|array $path Boolean or path to a boolean.
+ * @param bool $default_value Default value if the referenced path is missing.
+ * Default false.
* @return bool Value of boolean metadata.
*/
- protected static function get_metadata_boolean( $data, $path, $default = false ) {
+ protected static function get_metadata_boolean( $data, $path, $default_value = false ) {
if ( is_bool( $path ) ) {
return $path;
}
@@ -1556,11 +3063,11 @@
}
}
- return $default;
+ return $default_value;
}
/**
- * Merge new incoming data.
+ * Merges new incoming data.
*
* @since 5.8.0
* @since 5.9.0 Duotone preset also has origins.
@@ -1572,6 +3079,40 @@
$this->theme_json = array_replace_recursive( $this->theme_json, $incoming_data );
/*
+ * Recompute all the spacing sizes based on the new hierarchy of data. In the constructor
+ * spacingScale and spacingSizes are both keyed by origin and VALID_ORIGINS is ordered, so
+ * we can allow partial spacingScale data to inherit missing data from earlier layers when
+ * computing the spacing sizes.
+ *
+ * This happens before the presets are merged to ensure that default spacing sizes can be
+ * removed from the theme origin if $prevent_override is true.
+ */
+ $flattened_spacing_scale = array();
+ foreach ( static::VALID_ORIGINS as $origin ) {
+ $scale_path = array( 'settings', 'spacing', 'spacingScale', $origin );
+
+ // Apply the base spacing scale to the current layer.
+ $base_spacing_scale = _wp_array_get( $this->theme_json, $scale_path, array() );
+ $flattened_spacing_scale = array_replace( $flattened_spacing_scale, $base_spacing_scale );
+
+ $spacing_scale = _wp_array_get( $incoming_data, $scale_path, null );
+ if ( ! isset( $spacing_scale ) ) {
+ continue;
+ }
+
+ // Allow partial scale settings by merging with lower layers.
+ $flattened_spacing_scale = array_replace( $flattened_spacing_scale, $spacing_scale );
+
+ // Generate and merge the scales for this layer.
+ $sizes_path = array( 'settings', 'spacing', 'spacingSizes', $origin );
+ $spacing_sizes = _wp_array_get( $incoming_data, $sizes_path, array() );
+ $spacing_scale_sizes = static::compute_spacing_sizes( $flattened_spacing_scale );
+ $merged_spacing_sizes = static::merge_spacing_sizes( $spacing_scale_sizes, $spacing_sizes );
+
+ _wp_array_set( $incoming_data, $sizes_path, $merged_spacing_sizes );
+ }
+
+ /*
* The array_replace_recursive algorithm merges at the leaf level,
* but we don't want leaf arrays to be merged, so we overwrite it.
*
@@ -1596,49 +3137,60 @@
$nodes = static::get_setting_nodes( $incoming_data );
$slugs_global = static::get_default_slugs( $this->theme_json, array( 'settings' ) );
foreach ( $nodes as $node ) {
- $slugs_node = static::get_default_slugs( $this->theme_json, $node['path'] );
- $slugs = array_merge_recursive( $slugs_global, $slugs_node );
-
// Replace the spacing.units.
- $path = array_merge( $node['path'], array( 'spacing', 'units' ) );
+ $path = $node['path'];
+ $path[] = 'spacing';
+ $path[] = 'units';
+
$content = _wp_array_get( $incoming_data, $path, null );
if ( isset( $content ) ) {
_wp_array_set( $this->theme_json, $path, $content );
}
// Replace the presets.
- foreach ( static::PRESETS_METADATA as $preset ) {
- $override_preset = ! static::get_metadata_boolean( $this->theme_json['settings'], $preset['prevent_override'], true );
+ foreach ( static::PRESETS_METADATA as $preset_metadata ) {
+ $prevent_override = $preset_metadata['prevent_override'];
+ if ( is_array( $prevent_override ) ) {
+ $prevent_override = _wp_array_get( $this->theme_json['settings'], $preset_metadata['prevent_override'] );
+ }
foreach ( static::VALID_ORIGINS as $origin ) {
- $base_path = array_merge( $node['path'], $preset['path'] );
- $path = array_merge( $base_path, array( $origin ) );
- $content = _wp_array_get( $incoming_data, $path, null );
+ $base_path = $node['path'];
+ foreach ( $preset_metadata['path'] as $leaf ) {
+ $base_path[] = $leaf;
+ }
+
+ $path = $base_path;
+ $path[] = $origin;
+
+ $content = _wp_array_get( $incoming_data, $path, null );
if ( ! isset( $content ) ) {
continue;
}
- if ( 'theme' === $origin && $preset['use_default_names'] ) {
- foreach ( $content as &$item ) {
- if ( ! array_key_exists( 'name', $item ) ) {
+ // Set names for theme presets based on the slug if they are not set and can use default names.
+ if ( 'theme' === $origin && $preset_metadata['use_default_names'] ) {
+ foreach ( $content as $key => $item ) {
+ if ( ! isset( $item['name'] ) ) {
$name = static::get_name_from_defaults( $item['slug'], $base_path );
if ( null !== $name ) {
- $item['name'] = $name;
+ $content[ $key ]['name'] = $name;
}
}
}
}
- if (
- ( 'theme' !== $origin ) ||
- ( 'theme' === $origin && $override_preset )
- ) {
- _wp_array_set( $this->theme_json, $path, $content );
- } else {
- $slugs_for_preset = _wp_array_get( $slugs, $preset['path'], array() );
- $content = static::filter_slugs( $content, $slugs_for_preset );
- _wp_array_set( $this->theme_json, $path, $content );
+ // Filter out default slugs from theme presets when defaults should not be overridden.
+ if ( 'theme' === $origin && $prevent_override ) {
+ $slugs_node = static::get_default_slugs( $this->theme_json, $node['path'] );
+ $preset_global = _wp_array_get( $slugs_global, $preset_metadata['path'], array() );
+ $preset_node = _wp_array_get( $slugs_node, $preset_metadata['path'], array() );
+ $preset_slugs = array_merge_recursive( $preset_global, $preset_node );
+
+ $content = static::filter_slugs( $content, $preset_slugs );
}
+
+ _wp_array_set( $this->theme_json, $path, $content );
}
}
}
@@ -1679,7 +3231,7 @@
}
/**
- * Returns whether a presets should be overridden or not.
+ * Determines whether a presets should be overridden or not.
*
* @since 5.9.0
* @deprecated 6.0.0 Use {@see 'get_metadata_boolean'} instead.
@@ -1687,7 +3239,7 @@
* @param array $theme_json The theme.json like structure to inspect.
* @param array $path Path to inspect.
* @param bool|array $override Data to compute whether to override the preset.
- * @return boolean
+ * @return bool
*/
protected static function should_override_preset( $theme_json, $path, $override ) {
_deprecated_function( __METHOD__, '6.0.0', 'get_metadata_boolean' );
@@ -1726,16 +3278,16 @@
/**
* Returns the default slugs for all the presets in an associative array
- * whose keys are the preset paths and the leafs is the list of slugs.
+ * whose keys are the preset paths and the leaves is the list of slugs.
*
* For example:
*
- * array(
- * 'color' => array(
- * 'palette' => array( 'slug-1', 'slug-2' ),
- * 'gradients' => array( 'slug-3', 'slug-4' ),
- * ),
- * )
+ * array(
+ * 'color' => array(
+ * 'palette' => array( 'slug-1', 'slug-2' ),
+ * 'gradients' => array( 'slug-3', 'slug-4' ),
+ * ),
+ * )
*
* @since 5.9.0
*
@@ -1747,19 +3299,24 @@
$slugs = array();
foreach ( static::PRESETS_METADATA as $metadata ) {
- $path = array_merge( $node_path, $metadata['path'], array( 'default' ) );
+ $path = $node_path;
+ foreach ( $metadata['path'] as $leaf ) {
+ $path[] = $leaf;
+ }
+ $path[] = 'default';
+
$preset = _wp_array_get( $data, $path, null );
if ( ! isset( $preset ) ) {
continue;
}
$slugs_for_preset = array();
- $slugs_for_preset = array_map(
- static function( $value ) {
- return isset( $value['slug'] ) ? $value['slug'] : null;
- },
- $preset
- );
+ foreach ( $preset as $item ) {
+ if ( isset( $item['slug'] ) ) {
+ $slugs_for_preset[] = $item['slug'];
+ }
+ }
+
_wp_array_set( $slugs, $metadata['path'], $slugs_for_preset );
}
@@ -1767,7 +3324,7 @@
}
/**
- * Get a `default`'s preset name by a provided slug.
+ * Gets a `default`'s preset name by a provided slug.
*
* @since 5.9.0
*
@@ -1776,7 +3333,8 @@
* @return string|null
*/
protected function get_name_from_defaults( $slug, $base_path ) {
- $path = array_merge( $base_path, array( 'default' ) );
+ $path = $base_path;
+ $path[] = 'default';
$default_content = _wp_array_get( $this->theme_json, $path, null );
if ( ! $default_content ) {
return null;
@@ -1817,31 +3375,104 @@
* Removes insecure data from theme.json.
*
* @since 5.9.0
+ * @since 6.3.2 Preserves global styles block variations when securing styles.
+ * @since 6.6.0 Updated to allow variation element styles and $origin parameter.
*
- * @param array $theme_json Structure to sanitize.
+ * @param array $theme_json Structure to sanitize.
+ * @param string $origin Optional. What source of data this object represents.
+ * One of 'blocks', 'default', 'theme', or 'custom'. Default 'theme'.
* @return array Sanitized structure.
*/
- public static function remove_insecure_properties( $theme_json ) {
+ public static function remove_insecure_properties( $theme_json, $origin = 'theme' ) {
+ if ( ! in_array( $origin, static::VALID_ORIGINS, true ) ) {
+ $origin = 'theme';
+ }
+
$sanitized = array();
- $theme_json = WP_Theme_JSON_Schema::migrate( $theme_json );
+ $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 );
- $theme_json = static::sanitize( $theme_json, $valid_block_names, $valid_element_names );
+ $valid_variations = static::get_valid_block_style_variations();
+
+ $theme_json = static::sanitize( $theme_json, $valid_block_names, $valid_element_names, $valid_variations );
$blocks_metadata = static::get_blocks_metadata();
- $style_nodes = static::get_style_nodes( $theme_json, $blocks_metadata );
+ $style_options = array( 'include_block_style_variations' => true ); // Allow variations data.
+ $style_nodes = static::get_style_nodes( $theme_json, $blocks_metadata, $style_options );
+
foreach ( $style_nodes as $metadata ) {
$input = _wp_array_get( $theme_json, $metadata['path'], array() );
if ( empty( $input ) ) {
continue;
}
- $output = static::remove_insecure_styles( $input );
+ // The global styles custom CSS is not sanitized, but can only be edited by users with 'edit_css' capability.
+ if ( isset( $input['css'] ) && current_user_can( 'edit_css' ) ) {
+ $output = $input;
+ } else {
+ $output = static::remove_insecure_styles( $input );
+ }
+
+ /*
+ * Get a reference to element name from path.
+ * $metadata['path'] = array( 'styles', 'elements', 'link' );
+ */
+ $current_element = $metadata['path'][ count( $metadata['path'] ) - 1 ];
+
+ /*
+ * $output is stripped of pseudo selectors. Re-add and process them
+ * or insecure styles here.
+ */
+ if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] ) ) {
+ foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] as $pseudo_selector ) {
+ if ( isset( $input[ $pseudo_selector ] ) ) {
+ $output[ $pseudo_selector ] = static::remove_insecure_styles( $input[ $pseudo_selector ] );
+ }
+ }
+ }
+
if ( ! empty( $output ) ) {
_wp_array_set( $sanitized, $metadata['path'], $output );
}
+
+ if ( isset( $metadata['variations'] ) ) {
+ foreach ( $metadata['variations'] as $variation ) {
+ $variation_input = _wp_array_get( $theme_json, $variation['path'], array() );
+ if ( empty( $variation_input ) ) {
+ continue;
+ }
+
+ $variation_output = static::remove_insecure_styles( $variation_input );
+
+ // Process a variation's elements and element pseudo selector styles.
+ if ( isset( $variation_input['elements'] ) ) {
+ foreach ( $valid_element_names as $element_name ) {
+ $element_input = $variation_input['elements'][ $element_name ] ?? null;
+ if ( $element_input ) {
+ $element_output = static::remove_insecure_styles( $element_input );
+
+ if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element_name ] ) ) {
+ foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element_name ] as $pseudo_selector ) {
+ if ( isset( $element_input[ $pseudo_selector ] ) ) {
+ $element_output[ $pseudo_selector ] = static::remove_insecure_styles( $element_input[ $pseudo_selector ] );
+ }
+ }
+ }
+
+ if ( ! empty( $element_output ) ) {
+ _wp_array_set( $variation_output, array( 'elements', $element_name ), $element_output );
+ }
+ }
+ }
+ }
+
+ if ( ! empty( $variation_output ) ) {
+ _wp_array_set( $sanitized, $variation['path'], $variation_output );
+ }
+ }
+ }
}
$setting_nodes = static::get_setting_nodes( $theme_json );
@@ -1885,8 +3516,9 @@
$output = array();
foreach ( static::PRESETS_METADATA as $preset_metadata ) {
foreach ( static::VALID_ORIGINS as $origin ) {
- $path_with_origin = array_merge( $preset_metadata['path'], array( $origin ) );
- $presets = _wp_array_get( $input, $path_with_origin, null );
+ $path_with_origin = $preset_metadata['path'];
+ $path_with_origin[] = $origin;
+ $presets = _wp_array_get( $input, $path_with_origin, null );
if ( null === $presets ) {
continue;
}
@@ -1926,6 +3558,10 @@
}
}
}
+
+ // Ensure indirect properties not included in any `PRESETS_METADATA` value are allowed.
+ static::remove_indirect_properties( $input, $output );
+
return $output;
}
@@ -1946,14 +3582,20 @@
if ( static::is_safe_css_declaration( $declaration['name'], $declaration['value'] ) ) {
$path = static::PROPERTIES_METADATA[ $declaration['name'] ];
- // Check the value isn't an array before adding so as to not
- // double up shorthand and longhand styles.
+ /*
+ * Check the value isn't an array before adding so as to not
+ * double up shorthand and longhand styles.
+ */
$value = _wp_array_get( $input, $path, array() );
if ( ! is_array( $value ) ) {
_wp_array_set( $output, $path, $value );
}
}
}
+
+ // Ensure indirect properties not handled by `compute_style_properties` are allowed.
+ static::remove_indirect_properties( $input, $output );
+
return $output;
}
@@ -1973,6 +3615,29 @@
}
/**
+ * Removes indirect properties from the given input node and
+ * sets in the given output node.
+ *
+ * @since 6.2.0
+ *
+ * @param array $input Node to process.
+ * @param array $output The processed node. Passed by reference.
+ */
+ private static function remove_indirect_properties( $input, &$output ) {
+ foreach ( static::INDIRECT_PROPERTIES_METADATA as $property => $paths ) {
+ foreach ( $paths as $path ) {
+ $value = _wp_array_get( $input, $path );
+ if (
+ is_string( $value ) &&
+ static::is_safe_css_declaration( $property, $value )
+ ) {
+ _wp_array_set( $output, $path, $value );
+ }
+ }
+ }
+ }
+
+ /**
* Returns the raw data.
*
* @since 5.8.0
@@ -2000,53 +3665,32 @@
// Deprecated theme supports.
if ( isset( $settings['disableCustomColors'] ) ) {
- if ( ! isset( $theme_settings['settings']['color'] ) ) {
- $theme_settings['settings']['color'] = array();
- }
$theme_settings['settings']['color']['custom'] = ! $settings['disableCustomColors'];
}
if ( isset( $settings['disableCustomGradients'] ) ) {
- if ( ! isset( $theme_settings['settings']['color'] ) ) {
- $theme_settings['settings']['color'] = array();
- }
$theme_settings['settings']['color']['customGradient'] = ! $settings['disableCustomGradients'];
}
if ( isset( $settings['disableCustomFontSizes'] ) ) {
- if ( ! isset( $theme_settings['settings']['typography'] ) ) {
- $theme_settings['settings']['typography'] = array();
- }
$theme_settings['settings']['typography']['customFontSize'] = ! $settings['disableCustomFontSizes'];
}
if ( isset( $settings['enableCustomLineHeight'] ) ) {
- if ( ! isset( $theme_settings['settings']['typography'] ) ) {
- $theme_settings['settings']['typography'] = array();
- }
$theme_settings['settings']['typography']['lineHeight'] = $settings['enableCustomLineHeight'];
}
if ( isset( $settings['enableCustomUnits'] ) ) {
- if ( ! isset( $theme_settings['settings']['spacing'] ) ) {
- $theme_settings['settings']['spacing'] = array();
- }
$theme_settings['settings']['spacing']['units'] = ( true === $settings['enableCustomUnits'] ) ?
array( 'px', 'em', 'rem', 'vh', 'vw', '%' ) :
$settings['enableCustomUnits'];
}
if ( isset( $settings['colors'] ) ) {
- if ( ! isset( $theme_settings['settings']['color'] ) ) {
- $theme_settings['settings']['color'] = array();
- }
$theme_settings['settings']['color']['palette'] = $settings['colors'];
}
if ( isset( $settings['gradients'] ) ) {
- if ( ! isset( $theme_settings['settings']['color'] ) ) {
- $theme_settings['settings']['color'] = array();
- }
$theme_settings['settings']['color']['gradients'] = $settings['gradients'];
}
@@ -2058,19 +3702,17 @@
$font_sizes[ $key ]['size'] = $font_size['size'] . 'px';
}
}
- if ( ! isset( $theme_settings['settings']['typography'] ) ) {
- $theme_settings['settings']['typography'] = array();
- }
$theme_settings['settings']['typography']['fontSizes'] = $font_sizes;
}
if ( isset( $settings['enableCustomSpacing'] ) ) {
- if ( ! isset( $theme_settings['settings']['spacing'] ) ) {
- $theme_settings['settings']['spacing'] = array();
- }
$theme_settings['settings']['spacing']['padding'] = $settings['enableCustomSpacing'];
}
+ if ( isset( $settings['spacingSizes'] ) ) {
+ $theme_settings['settings']['spacing']['spacingSizes'] = $settings['spacingSizes'];
+ }
+
return $theme_settings;
}
@@ -2131,7 +3773,10 @@
*/
foreach ( $nodes as $node ) {
foreach ( static::PRESETS_METADATA as $preset_metadata ) {
- $path = array_merge( $node['path'], $preset_metadata['path'] );
+ $path = $node['path'];
+ foreach ( $preset_metadata['path'] as $preset_metadata_path ) {
+ $path[] = $preset_metadata_path;
+ }
$preset = _wp_array_get( $output, $path, null );
if ( null === $preset ) {
continue;
@@ -2154,20 +3799,27 @@
}
$flattened_preset = array();
foreach ( $items as $slug => $value ) {
- $flattened_preset[] = array_merge( array( 'slug' => $slug ), $value );
+ $flattened_preset[] = array_merge( array( 'slug' => (string) $slug ), $value );
}
_wp_array_set( $output, $path, $flattened_preset );
}
}
- // If all of the static::APPEARANCE_TOOLS_OPT_INS are true,
- // this code unsets them and sets 'appearanceTools' instead.
+ /*
+ * If all of the static::APPEARANCE_TOOLS_OPT_INS are true,
+ * this code unsets them and sets 'appearanceTools' instead.
+ */
foreach ( $nodes as $node ) {
$all_opt_ins_are_set = true;
foreach ( static::APPEARANCE_TOOLS_OPT_INS as $opt_in_path ) {
- $full_path = array_merge( $node['path'], $opt_in_path );
- // Use "unset prop" as a marker instead of "null" because
- // "null" can be a valid value for some props (e.g. blockGap).
+ $full_path = $node['path'];
+ foreach ( $opt_in_path as $opt_in_path_item ) {
+ $full_path[] = $opt_in_path_item;
+ }
+ /*
+ * Use "unset prop" as a marker instead of "null" because
+ * "null" can be a valid value for some props (e.g. blockGap).
+ */
$opt_in_value = _wp_array_get( $output, $full_path, 'unset prop' );
if ( 'unset prop' === $opt_in_value ) {
$all_opt_ins_are_set = false;
@@ -2176,21 +3828,30 @@
}
if ( $all_opt_ins_are_set ) {
- _wp_array_set( $output, array_merge( $node['path'], array( 'appearanceTools' ) ), true );
+ $node_path_with_appearance_tools = $node['path'];
+ $node_path_with_appearance_tools[] = 'appearanceTools';
+ _wp_array_set( $output, $node_path_with_appearance_tools, true );
foreach ( static::APPEARANCE_TOOLS_OPT_INS as $opt_in_path ) {
- $full_path = array_merge( $node['path'], $opt_in_path );
- // Use "unset prop" as a marker instead of "null" because
- // "null" can be a valid value for some props (e.g. blockGap).
+ $full_path = $node['path'];
+ foreach ( $opt_in_path as $opt_in_path_item ) {
+ $full_path[] = $opt_in_path_item;
+ }
+ /*
+ * Use "unset prop" as a marker instead of "null" because
+ * "null" can be a valid value for some props (e.g. blockGap).
+ */
$opt_in_value = _wp_array_get( $output, $full_path, 'unset prop' );
if ( true !== $opt_in_value ) {
continue;
}
- // The following could be improved to be path independent.
- // At the moment it relies on a couple of assumptions:
- //
- // - all opt-ins having a path of size 2.
- // - there's two sources of settings: the top-level and the block-level.
+ /*
+ * The following could be improved to be path independent.
+ * At the moment it relies on a couple of assumptions:
+ *
+ * - all opt-ins having a path of size 2.
+ * - there's two sources of settings: the top-level and the block-level.
+ */
if (
( 1 === count( $node['path'] ) ) &&
( 'settings' === $node['path'][0] )
@@ -2221,4 +3882,577 @@
return $output;
}
+ /**
+ * Sets the spacingSizes array based on the spacingScale values from theme.json.
+ *
+ * @since 6.1.0
+ * @deprecated 6.6.0 No longer used as the spacingSizes are automatically
+ * generated in the constructor and merge methods instead
+ * of manually after instantiation.
+ *
+ * @return null|void
+ */
+ public function set_spacing_sizes() {
+ _deprecated_function( __METHOD__, '6.6.0' );
+
+ $spacing_scale = isset( $this->theme_json['settings']['spacing']['spacingScale'] )
+ ? $this->theme_json['settings']['spacing']['spacingScale']
+ : array();
+
+ if ( ! isset( $spacing_scale['steps'] )
+ || ! is_numeric( $spacing_scale['steps'] )
+ || ! isset( $spacing_scale['mediumStep'] )
+ || ! isset( $spacing_scale['unit'] )
+ || ! isset( $spacing_scale['operator'] )
+ || ! isset( $spacing_scale['increment'] )
+ || ! isset( $spacing_scale['steps'] )
+ || ! is_numeric( $spacing_scale['increment'] )
+ || ! is_numeric( $spacing_scale['mediumStep'] )
+ || ( '+' !== $spacing_scale['operator'] && '*' !== $spacing_scale['operator'] ) ) {
+ if ( ! empty( $spacing_scale ) ) {
+ wp_trigger_error(
+ __METHOD__,
+ sprintf(
+ /* translators: 1: theme.json, 2: settings.spacing.spacingScale */
+ __( 'Some of the %1$s %2$s values are invalid' ),
+ 'theme.json',
+ 'settings.spacing.spacingScale'
+ ),
+ E_USER_NOTICE
+ );
+ }
+ return null;
+ }
+
+ // If theme authors want to prevent the generation of the core spacing scale they can set their theme.json spacingScale.steps to 0.
+ if ( 0 === $spacing_scale['steps'] ) {
+ return null;
+ }
+
+ $spacing_sizes = static::compute_spacing_sizes( $spacing_scale );
+
+ // If there are 7 or fewer steps in the scale revert to numbers for labels instead of t-shirt sizes.
+ if ( $spacing_scale['steps'] <= 7 ) {
+ for ( $spacing_sizes_count = 0; $spacing_sizes_count < count( $spacing_sizes ); $spacing_sizes_count++ ) {
+ $spacing_sizes[ $spacing_sizes_count ]['name'] = (string) ( $spacing_sizes_count + 1 );
+ }
+ }
+
+ _wp_array_set( $this->theme_json, array( 'settings', 'spacing', 'spacingSizes', 'default' ), $spacing_sizes );
+ }
+
+ /**
+ * Merges two sets of spacing size presets.
+ *
+ * @since 6.6.0
+ *
+ * @param array $base The base set of spacing sizes.
+ * @param array $incoming The set of spacing sizes to merge with the base. Duplicate slugs will override the base values.
+ * @return array The merged set of spacing sizes.
+ */
+ private static function merge_spacing_sizes( $base, $incoming ) {
+ // Preserve the order if there are no base (spacingScale) values.
+ if ( empty( $base ) ) {
+ return $incoming;
+ }
+ $merged = array();
+ foreach ( $base as $item ) {
+ $merged[ $item['slug'] ] = $item;
+ }
+ foreach ( $incoming as $item ) {
+ $merged[ $item['slug'] ] = $item;
+ }
+ ksort( $merged, SORT_NUMERIC );
+ return array_values( $merged );
+ }
+
+ /**
+ * Generates a set of spacing sizes by starting with a medium size and
+ * applying an operator with an increment value to generate the rest of the
+ * sizes outward from the medium size. The medium slug is '50' with the rest
+ * of the slugs being 10 apart. The generated names use t-shirt sizing.
+ *
+ * Example:
+ *
+ * $spacing_scale = array(
+ * 'steps' => 4,
+ * 'mediumStep' => 16,
+ * 'unit' => 'px',
+ * 'operator' => '+',
+ * 'increment' => 2,
+ * );
+ * $spacing_sizes = static::compute_spacing_sizes( $spacing_scale );
+ * // -> array(
+ * // array( 'name' => 'Small', 'slug' => '40', 'size' => '14px' ),
+ * // array( 'name' => 'Medium', 'slug' => '50', 'size' => '16px' ),
+ * // array( 'name' => 'Large', 'slug' => '60', 'size' => '18px' ),
+ * // array( 'name' => 'X-Large', 'slug' => '70', 'size' => '20px' ),
+ * // )
+ *
+ * @since 6.6.0
+ *
+ * @param array $spacing_scale {
+ * The spacing scale values. All are required.
+ *
+ * @type int $steps The number of steps in the scale. (up to 10 steps are supported.)
+ * @type float $mediumStep The middle value that gets the slug '50'. (For even number of steps, this becomes the first middle value.)
+ * @type string $unit The CSS unit to use for the sizes.
+ * @type string $operator The mathematical operator to apply to generate the other sizes. Either '+' or '*'.
+ * @type float $increment The value used with the operator to generate the other sizes.
+ * }
+ * @return array The spacing sizes presets or an empty array if some spacing scale values are missing or invalid.
+ */
+ private static function compute_spacing_sizes( $spacing_scale ) {
+ /*
+ * This condition is intentionally missing some checks on ranges for the values in order to
+ * keep backwards compatibility with the previous implementation.
+ */
+ if (
+ ! isset( $spacing_scale['steps'] ) ||
+ ! is_numeric( $spacing_scale['steps'] ) ||
+ 0 === $spacing_scale['steps'] ||
+ ! isset( $spacing_scale['mediumStep'] ) ||
+ ! is_numeric( $spacing_scale['mediumStep'] ) ||
+ ! isset( $spacing_scale['unit'] ) ||
+ ! isset( $spacing_scale['operator'] ) ||
+ ( '+' !== $spacing_scale['operator'] && '*' !== $spacing_scale['operator'] ) ||
+ ! isset( $spacing_scale['increment'] ) ||
+ ! is_numeric( $spacing_scale['increment'] )
+ ) {
+ return array();
+ }
+
+ $unit = '%' === $spacing_scale['unit'] ? '%' : sanitize_title( $spacing_scale['unit'] );
+ $current_step = $spacing_scale['mediumStep'];
+ $steps_mid_point = round( $spacing_scale['steps'] / 2, 0 );
+ $x_small_count = null;
+ $below_sizes = array();
+ $slug = 40;
+ $remainder = 0;
+
+ for ( $below_midpoint_count = $steps_mid_point - 1; $spacing_scale['steps'] > 1 && $slug > 0 && $below_midpoint_count > 0; $below_midpoint_count-- ) {
+ if ( '+' === $spacing_scale['operator'] ) {
+ $current_step -= $spacing_scale['increment'];
+ } elseif ( $spacing_scale['increment'] > 1 ) {
+ $current_step /= $spacing_scale['increment'];
+ } else {
+ $current_step *= $spacing_scale['increment'];
+ }
+
+ if ( $current_step <= 0 ) {
+ $remainder = $below_midpoint_count;
+ break;
+ }
+
+ $below_sizes[] = array(
+ /* translators: %s: Digit to indicate multiple of sizing, eg. 2X-Small. */
+ 'name' => $below_midpoint_count === $steps_mid_point - 1 ? __( 'Small' ) : sprintf( __( '%sX-Small' ), (string) $x_small_count ),
+ 'slug' => (string) $slug,
+ 'size' => round( $current_step, 2 ) . $unit,
+ );
+
+ if ( $below_midpoint_count === $steps_mid_point - 2 ) {
+ $x_small_count = 2;
+ }
+
+ if ( $below_midpoint_count < $steps_mid_point - 2 ) {
+ ++$x_small_count;
+ }
+
+ $slug -= 10;
+ }
+
+ $below_sizes = array_reverse( $below_sizes );
+
+ $below_sizes[] = array(
+ 'name' => __( 'Medium' ),
+ 'slug' => '50',
+ 'size' => $spacing_scale['mediumStep'] . $unit,
+ );
+
+ $current_step = $spacing_scale['mediumStep'];
+ $x_large_count = null;
+ $above_sizes = array();
+ $slug = 60;
+ $steps_above = ( $spacing_scale['steps'] - $steps_mid_point ) + $remainder;
+
+ for ( $above_midpoint_count = 0; $above_midpoint_count < $steps_above; $above_midpoint_count++ ) {
+ $current_step = '+' === $spacing_scale['operator']
+ ? $current_step + $spacing_scale['increment']
+ : ( $spacing_scale['increment'] >= 1 ? $current_step * $spacing_scale['increment'] : $current_step / $spacing_scale['increment'] );
+
+ $above_sizes[] = array(
+ /* translators: %s: Digit to indicate multiple of sizing, eg. 2X-Large. */
+ 'name' => 0 === $above_midpoint_count ? __( 'Large' ) : sprintf( __( '%sX-Large' ), (string) $x_large_count ),
+ 'slug' => (string) $slug,
+ 'size' => round( $current_step, 2 ) . $unit,
+ );
+
+ if ( 1 === $above_midpoint_count ) {
+ $x_large_count = 2;
+ }
+
+ if ( $above_midpoint_count > 1 ) {
+ ++$x_large_count;
+ }
+
+ $slug += 10;
+ }
+
+ $spacing_sizes = $below_sizes;
+ foreach ( $above_sizes as $above_sizes_item ) {
+ $spacing_sizes[] = $above_sizes_item;
+ }
+
+ return $spacing_sizes;
+ }
+
+ /**
+ * This is used to convert the internal representation of variables to the CSS representation.
+ * For example, `var:preset|color|vivid-green-cyan` becomes `var(--wp--preset--color--vivid-green-cyan)`.
+ *
+ * @since 6.3.0
+ * @param string $value The variable such as var:preset|color|vivid-green-cyan to convert.
+ * @return string The converted variable.
+ */
+ private static function convert_custom_properties( $value ) {
+ $prefix = 'var:';
+ $prefix_len = strlen( $prefix );
+ $token_in = '|';
+ $token_out = '--';
+ if ( str_starts_with( $value, $prefix ) ) {
+ $unwrapped_name = str_replace(
+ $token_in,
+ $token_out,
+ substr( $value, $prefix_len )
+ );
+ $value = "var(--wp--$unwrapped_name)";
+ }
+
+ return $value;
+ }
+
+ /**
+ * Given a tree, converts the internal representation of variables to the CSS representation.
+ * It is recursive and modifies the input in-place.
+ *
+ * @since 6.3.0
+ * @param array $tree Input to process.
+ * @return array The modified $tree.
+ */
+ private static function resolve_custom_css_format( $tree ) {
+ $prefix = 'var:';
+
+ foreach ( $tree as $key => $data ) {
+ if ( is_string( $data ) && str_starts_with( $data, $prefix ) ) {
+ $tree[ $key ] = self::convert_custom_properties( $data );
+ } elseif ( is_array( $data ) ) {
+ $tree[ $key ] = self::resolve_custom_css_format( $data );
+ }
+ }
+
+ return $tree;
+ }
+
+ /**
+ * Returns the selectors metadata for a block.
+ *
+ * @since 6.3.0
+ *
+ * @param object $block_type The block type.
+ * @param string $root_selector The block's root selector.
+ *
+ * @return array The custom selectors set by the block.
+ */
+ protected static function get_block_selectors( $block_type, $root_selector ) {
+ if ( ! empty( $block_type->selectors ) ) {
+ return $block_type->selectors;
+ }
+
+ $selectors = array( 'root' => $root_selector );
+ foreach ( static::BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS as $key => $feature ) {
+ $feature_selector = wp_get_block_css_selector( $block_type, $key );
+ if ( null !== $feature_selector ) {
+ $selectors[ $feature ] = array( 'root' => $feature_selector );
+ }
+ }
+
+ return $selectors;
+ }
+
+ /**
+ * Generates all the element selectors for a block.
+ *
+ * @since 6.3.0
+ *
+ * @param string $root_selector The block's root CSS selector.
+ * @return array The block's element selectors.
+ */
+ protected static function get_block_element_selectors( $root_selector ) {
+ /*
+ * Assign defaults, then override those that the block sets by itself.
+ * If the block selector is compounded, will append the element to each
+ * individual block selector.
+ */
+ $block_selectors = explode( ',', $root_selector );
+ $element_selectors = array();
+ foreach ( static::ELEMENTS as $el_name => $el_selector ) {
+ $element_selector = array();
+ foreach ( $block_selectors as $selector ) {
+ if ( $selector === $el_selector ) {
+ $element_selector = array( $el_selector );
+ break;
+ }
+ $element_selector[] = static::prepend_to_selector( $el_selector, $selector . ' ' );
+ }
+ $element_selectors[ $el_name ] = implode( ',', $element_selector );
+ }
+
+ return $element_selectors;
+ }
+
+ /**
+ * Generates style declarations for a node's features e.g., color, border,
+ * typography etc. that have custom selectors in their related block's
+ * metadata.
+ *
+ * @since 6.3.0
+ *
+ * @param object $metadata The related block metadata containing selectors.
+ * @param object $node A merged theme.json node for block or variation.
+ *
+ * @return array The style declarations for the node's features with custom
+ * selectors.
+ */
+ protected function get_feature_declarations_for_node( $metadata, &$node ) {
+ $declarations = array();
+
+ if ( ! isset( $metadata['selectors'] ) ) {
+ return $declarations;
+ }
+
+ $settings = isset( $this->theme_json['settings'] )
+ ? $this->theme_json['settings']
+ : array();
+
+ foreach ( $metadata['selectors'] as $feature => $feature_selectors ) {
+ /*
+ * Skip if this is the block's root selector or the block doesn't
+ * have any styles for the feature.
+ */
+ if ( 'root' === $feature || empty( $node[ $feature ] ) ) {
+ continue;
+ }
+
+ if ( is_array( $feature_selectors ) ) {
+ foreach ( $feature_selectors as $subfeature => $subfeature_selector ) {
+ if ( 'root' === $subfeature || empty( $node[ $feature ][ $subfeature ] ) ) {
+ continue;
+ }
+
+ /*
+ * Create temporary node containing only the subfeature data
+ * to leverage existing `compute_style_properties` function.
+ */
+ $subfeature_node = array(
+ $feature => array(
+ $subfeature => $node[ $feature ][ $subfeature ],
+ ),
+ );
+
+ // Generate style declarations.
+ $new_declarations = static::compute_style_properties( $subfeature_node, $settings, null, $this->theme_json );
+
+ // Merge subfeature declarations into feature declarations.
+ if ( isset( $declarations[ $subfeature_selector ] ) ) {
+ foreach ( $new_declarations as $new_declaration ) {
+ $declarations[ $subfeature_selector ][] = $new_declaration;
+ }
+ } else {
+ $declarations[ $subfeature_selector ] = $new_declarations;
+ }
+
+ /*
+ * Remove the subfeature from the block's node now its
+ * styles will be included under its own selector not the
+ * block's.
+ */
+ unset( $node[ $feature ][ $subfeature ] );
+ }
+ }
+
+ /*
+ * Now subfeatures have been processed and removed we can process
+ * feature root selector or simple string selector.
+ */
+ if (
+ is_string( $feature_selectors ) ||
+ ( isset( $feature_selectors['root'] ) && $feature_selectors['root'] )
+ ) {
+ $feature_selector = is_string( $feature_selectors ) ? $feature_selectors : $feature_selectors['root'];
+
+ /*
+ * Create temporary node containing only the feature data
+ * to leverage existing `compute_style_properties` function.
+ */
+ $feature_node = array( $feature => $node[ $feature ] );
+
+ // Generate the style declarations.
+ $new_declarations = static::compute_style_properties( $feature_node, $settings, null, $this->theme_json );
+
+ /*
+ * Merge new declarations with any that already exist for
+ * the feature selector. This may occur when multiple block
+ * support features use the same custom selector.
+ */
+ if ( isset( $declarations[ $feature_selector ] ) ) {
+ foreach ( $new_declarations as $new_declaration ) {
+ $declarations[ $feature_selector ][] = $new_declaration;
+ }
+ } else {
+ $declarations[ $feature_selector ] = $new_declarations;
+ }
+
+ /*
+ * Remove the feature from the block's node now its styles
+ * will be included under its own selector not the block's.
+ */
+ unset( $node[ $feature ] );
+ }
+ }
+
+ return $declarations;
+ }
+
+ /**
+ * Replaces CSS variables with their values in place.
+ *
+ * @since 6.3.0
+ * @since 6.5.0 Check for empty style before processing its value.
+ *
+ * @param array $styles CSS declarations to convert.
+ * @param array $values key => value pairs to use for replacement.
+ * @return array
+ */
+ private static function convert_variables_to_value( $styles, $values ) {
+ foreach ( $styles as $key => $style ) {
+ if ( empty( $style ) ) {
+ continue;
+ }
+
+ if ( is_array( $style ) ) {
+ $styles[ $key ] = self::convert_variables_to_value( $style, $values );
+ continue;
+ }
+
+ if ( 0 <= strpos( $style, 'var(' ) ) {
+ // find all the variables in the string in the form of var(--variable-name, fallback), with fallback in the second capture group.
+
+ $has_matches = preg_match_all( '/var\(([^),]+)?,?\s?(\S+)?\)/', $style, $var_parts );
+
+ if ( $has_matches ) {
+ $resolved_style = $styles[ $key ];
+ foreach ( $var_parts[1] as $index => $var_part ) {
+ $key_in_values = 'var(' . $var_part . ')';
+ $rule_to_replace = $var_parts[0][ $index ]; // the css rule to replace e.g. var(--wp--preset--color--vivid-green-cyan).
+ $fallback = $var_parts[2][ $index ]; // the fallback value.
+ $resolved_style = str_replace(
+ array(
+ $rule_to_replace,
+ $fallback,
+ ),
+ array(
+ isset( $values[ $key_in_values ] ) ? $values[ $key_in_values ] : $rule_to_replace,
+ isset( $values[ $fallback ] ) ? $values[ $fallback ] : $fallback,
+ ),
+ $resolved_style
+ );
+ }
+ $styles[ $key ] = $resolved_style;
+ }
+ }
+ }
+
+ return $styles;
+ }
+
+ /**
+ * Resolves the values of CSS variables in the given styles.
+ *
+ * @since 6.3.0
+ * @param WP_Theme_JSON $theme_json The theme json resolver.
+ *
+ * @return WP_Theme_JSON The $theme_json with resolved variables.
+ */
+ public static function resolve_variables( $theme_json ) {
+ $settings = $theme_json->get_settings();
+ $styles = $theme_json->get_raw_data()['styles'];
+ $preset_vars = static::compute_preset_vars( $settings, static::VALID_ORIGINS );
+ $theme_vars = static::compute_theme_vars( $settings );
+ $vars = array_reduce(
+ array_merge( $preset_vars, $theme_vars ),
+ function ( $carry, $item ) {
+ $name = $item['name'];
+ $carry[ "var({$name})" ] = $item['value'];
+ return $carry;
+ },
+ array()
+ );
+
+ $theme_json->theme_json['styles'] = self::convert_variables_to_value( $styles, $vars );
+ return $theme_json;
+ }
+
+ /**
+ * Generates a selector for a block style variation.
+ *
+ * @since 6.5.0
+ *
+ * @param string $variation_name Name of the block style variation.
+ * @param string $block_selector CSS selector for the block.
+ * @return string Block selector with block style variation selector added to it.
+ */
+ protected static function get_block_style_variation_selector( $variation_name, $block_selector ) {
+ $variation_class = ".is-style-$variation_name";
+
+ if ( ! $block_selector ) {
+ return $variation_class;
+ }
+
+ $limit = 1;
+ $selector_parts = explode( ',', $block_selector );
+ $result = array();
+
+ foreach ( $selector_parts as $part ) {
+ $result[] = preg_replace_callback(
+ '/((?::\([^)]+\))?\s*)([^\s:]+)/',
+ function ( $matches ) use ( $variation_class ) {
+ return $matches[1] . $matches[2] . $variation_class;
+ },
+ $part,
+ $limit
+ );
+ }
+
+ return implode( ',', $result );
+ }
+
+ /**
+ * Collects valid block style variations keyed by block type.
+ *
+ * @since 6.6.0
+ *
+ * @return array Valid block style variations by block type.
+ */
+ protected static function get_valid_block_style_variations() {
+ $valid_variations = array();
+ foreach ( self::get_blocks_metadata() as $block_name => $block_meta ) {
+ if ( ! isset( $block_meta['styleVariations'] ) ) {
+ continue;
+ }
+ $valid_variations[ $block_name ] = array_keys( $block_meta['styleVariations'] );
+ }
+
+ return $valid_variations;
+ }
}