2890 lines
96 KiB
PHP
2890 lines
96 KiB
PHP
<?php
|
|
/**
|
|
* WP_Theme_JSON class
|
|
*
|
|
* @package WordPress
|
|
* @subpackage Theme
|
|
* @since 5.8.0
|
|
*/
|
|
|
|
/**
|
|
* Class that encapsulates the processing of structures that adhere to the theme.json spec.
|
|
*
|
|
* This class is for internal core usage and is not supposed to be used by extenders (plugins and/or themes).
|
|
* This is a low-level API that may need to do breaking changes. Please,
|
|
* use get_global_settings, get_global_styles, and get_global_stylesheet instead.
|
|
*
|
|
* @access private
|
|
*/
|
|
#[AllowDynamicProperties]
|
|
class WP_Theme_JSON {
|
|
|
|
/**
|
|
* Container of data in theme.json format.
|
|
*
|
|
* @since 5.8.0
|
|
* @var array
|
|
*/
|
|
protected $theme_json = null;
|
|
|
|
/**
|
|
* Holds block metadata extracted from block.json
|
|
* to be shared among all instances so we don't
|
|
* process it twice.
|
|
*
|
|
* @since 5.8.0
|
|
* @var array
|
|
*/
|
|
protected static $blocks_metadata = null;
|
|
|
|
/**
|
|
* The CSS selector for the top-level styles.
|
|
*
|
|
* @since 5.8.0
|
|
* @var string
|
|
*/
|
|
const ROOT_BLOCK_SELECTOR = 'body';
|
|
|
|
/**
|
|
* The sources of data this object can represent.
|
|
*
|
|
* @since 5.8.0
|
|
* @var string[]
|
|
*/
|
|
const VALID_ORIGINS = array(
|
|
'default',
|
|
'theme',
|
|
'custom',
|
|
);
|
|
|
|
/**
|
|
* Presets are a set of values that serve
|
|
* to bootstrap some styles: colors, font sizes, etc.
|
|
*
|
|
* They are a unkeyed array of values such as:
|
|
*
|
|
* ```php
|
|
* array(
|
|
* array(
|
|
* 'slug' => 'unique-name-within-the-set',
|
|
* 'name' => 'Name for the UI',
|
|
* <value_key> => 'value'
|
|
* ),
|
|
* )
|
|
* ```
|
|
*
|
|
* This contains the necessary metadata to process them:
|
|
*
|
|
* - path => Where to find the preset within the settings section.
|
|
* - prevent_override => Disables override of default presets by theme presets.
|
|
* The relationship between whether to override the defaults
|
|
* and whether the defaults are enabled is inverse:
|
|
* - If defaults are enabled => theme presets should not be overriden
|
|
* - If defaults are disabled => theme presets should be overriden
|
|
* For example, a theme sets defaultPalette to false,
|
|
* making the default palette hidden from the user.
|
|
* In that case, we want all the theme presets to be present,
|
|
* so they should override the defaults by setting this false.
|
|
* - use_default_names => whether to use the default names
|
|
* - value_key => the key that represents the value
|
|
* - value_func => optionally, instead of value_key, a function to generate
|
|
* the value that takes a preset as an argument
|
|
* (either value_key or value_func should be present)
|
|
* - css_vars => template string to use in generating the CSS Custom Property.
|
|
* Example output: "--wp--preset--duotone--blue: <value>" will generate as many CSS Custom Properties as presets defined
|
|
* substituting the $slug for the slug's value for each preset value.
|
|
* - classes => array containing a structure with the classes to
|
|
* generate for the presets, where for each array item
|
|
* the key is the class name and the value the property name.
|
|
* The "$slug" substring will be replaced by the slug of each preset.
|
|
* For example:
|
|
* 'classes' => array(
|
|
* '.has-$slug-color' => 'color',
|
|
* '.has-$slug-background-color' => 'background-color',
|
|
* '.has-$slug-border-color' => 'border-color',
|
|
* )
|
|
* - properties => array of CSS properties to be used by kses to
|
|
* validate the content of each preset
|
|
* by means of the remove_insecure_properties method.
|
|
*
|
|
* @since 5.8.0
|
|
* @since 5.9.0 Added the `color.duotone` and `typography.fontFamilies` presets,
|
|
* `use_default_names` preset key, and simplified the metadata structure.
|
|
* @since 6.0.0 Replaced `override` with `prevent_override` and updated the
|
|
* `prevent_overried` value for `color.duotone` to use `color.defaultDuotone`.
|
|
* @var array
|
|
*/
|
|
const PRESETS_METADATA = array(
|
|
array(
|
|
'path' => array( 'color', 'palette' ),
|
|
'prevent_override' => array( 'color', 'defaultPalette' ),
|
|
'use_default_names' => false,
|
|
'value_key' => 'color',
|
|
'css_vars' => '--wp--preset--color--$slug',
|
|
'classes' => array(
|
|
'.has-$slug-color' => 'color',
|
|
'.has-$slug-background-color' => 'background-color',
|
|
'.has-$slug-border-color' => 'border-color',
|
|
),
|
|
'properties' => array( 'color', 'background-color', 'border-color' ),
|
|
),
|
|
array(
|
|
'path' => array( 'color', 'gradients' ),
|
|
'prevent_override' => array( 'color', 'defaultGradients' ),
|
|
'use_default_names' => false,
|
|
'value_key' => 'gradient',
|
|
'css_vars' => '--wp--preset--gradient--$slug',
|
|
'classes' => array( '.has-$slug-gradient-background' => 'background' ),
|
|
'properties' => array( 'background' ),
|
|
),
|
|
array(
|
|
'path' => array( 'color', 'duotone' ),
|
|
'prevent_override' => array( 'color', 'defaultDuotone' ),
|
|
'use_default_names' => false,
|
|
'value_func' => 'wp_get_duotone_filter_property',
|
|
'css_vars' => '--wp--preset--duotone--$slug',
|
|
'classes' => array(),
|
|
'properties' => array( 'filter' ),
|
|
),
|
|
array(
|
|
'path' => array( 'typography', 'fontSizes' ),
|
|
'prevent_override' => false,
|
|
'use_default_names' => true,
|
|
'value_key' => 'size',
|
|
'css_vars' => '--wp--preset--font-size--$slug',
|
|
'classes' => array( '.has-$slug-font-size' => 'font-size' ),
|
|
'properties' => array( 'font-size' ),
|
|
),
|
|
array(
|
|
'path' => array( 'typography', 'fontFamilies' ),
|
|
'prevent_override' => false,
|
|
'use_default_names' => false,
|
|
'value_key' => 'fontFamily',
|
|
'css_vars' => '--wp--preset--font-family--$slug',
|
|
'classes' => array( '.has-$slug-font-family' => 'font-family' ),
|
|
'properties' => array( 'font-family' ),
|
|
),
|
|
);
|
|
|
|
/**
|
|
* Metadata for style properties.
|
|
*
|
|
* Each element is a direct mapping from the CSS property name to the
|
|
* path to the value in theme.json & block attributes.
|
|
*
|
|
* @since 5.8.0
|
|
* @since 5.9.0 Added the `border-*`, `font-family`, `font-style`, `font-weight`,
|
|
* `letter-spacing`, `margin-*`, `padding-*`, `--wp--style--block-gap`,
|
|
* `text-decoration`, `text-transform`, and `filter` properties,
|
|
* simplified the metadata structure.
|
|
* @since 6.1.0 Added the `border-*-color`, `border-*-width`, `border-*-style`,
|
|
* `--wp--style--root--padding-*`, and `box-shadow` properties,
|
|
* removed the `--wp--style--block-gap` property.
|
|
* @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' ),
|
|
'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' ),
|
|
'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--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' ),
|
|
);
|
|
|
|
/**
|
|
* Protected style properties.
|
|
*
|
|
* These style properties are only rendered if a setting enables it
|
|
* via a value other than `null`.
|
|
*
|
|
* Each element maps the style property to the corresponding theme.json
|
|
* setting key.
|
|
*
|
|
* @since 5.9.0
|
|
*/
|
|
const PROTECTED_PROPERTIES = array(
|
|
'spacing.blockGap' => array( 'spacing', 'blockGap' ),
|
|
);
|
|
|
|
/**
|
|
* The top-level keys a theme.json can have.
|
|
*
|
|
* @since 5.8.0 As `ALLOWED_TOP_LEVEL_KEYS`.
|
|
* @since 5.9.0 Renamed from `ALLOWED_TOP_LEVEL_KEYS` to `VALID_TOP_LEVEL_KEYS`,
|
|
* added the `customTemplates` and `templateParts` values.
|
|
* @var string[]
|
|
*/
|
|
const VALID_TOP_LEVEL_KEYS = array(
|
|
'customTemplates',
|
|
'patterns',
|
|
'settings',
|
|
'styles',
|
|
'templateParts',
|
|
'version',
|
|
'title',
|
|
);
|
|
|
|
/**
|
|
* The valid properties under the settings key.
|
|
*
|
|
* @since 5.8.0 As `ALLOWED_SETTINGS`.
|
|
* @since 5.9.0 Renamed from `ALLOWED_SETTINGS` to `VALID_SETTINGS`,
|
|
* added new properties for `border`, `color`, `spacing`,
|
|
* and `typography`, and renamed others according to the new schema.
|
|
* @since 6.0.0 Added `color.defaultDuotone`.
|
|
* @since 6.1.0 Added `layout.definitions` and `useRootPaddingAwareAlignments`.
|
|
* @var array
|
|
*/
|
|
const VALID_SETTINGS = array(
|
|
'appearanceTools' => null,
|
|
'useRootPaddingAwareAlignments' => null,
|
|
'border' => array(
|
|
'color' => null,
|
|
'radius' => null,
|
|
'style' => null,
|
|
'width' => null,
|
|
),
|
|
'color' => array(
|
|
'background' => null,
|
|
'custom' => null,
|
|
'customDuotone' => null,
|
|
'customGradient' => null,
|
|
'defaultDuotone' => null,
|
|
'defaultGradients' => null,
|
|
'defaultPalette' => null,
|
|
'duotone' => null,
|
|
'gradients' => null,
|
|
'link' => null,
|
|
'palette' => null,
|
|
'text' => null,
|
|
),
|
|
'custom' => null,
|
|
'layout' => array(
|
|
'contentSize' => null,
|
|
'definitions' => null,
|
|
'wideSize' => null,
|
|
),
|
|
'spacing' => array(
|
|
'blockGap' => null,
|
|
'margin' => null,
|
|
'padding' => null,
|
|
'units' => null,
|
|
),
|
|
'typography' => array(
|
|
'customFontSize' => null,
|
|
'dropCap' => null,
|
|
'fontFamilies' => null,
|
|
'fontSizes' => null,
|
|
'fontStyle' => null,
|
|
'fontWeight' => null,
|
|
'letterSpacing' => null,
|
|
'lineHeight' => null,
|
|
'textDecoration' => null,
|
|
'textTransform' => null,
|
|
),
|
|
);
|
|
|
|
/**
|
|
* The valid properties under the styles key.
|
|
*
|
|
* @since 5.8.0 As `ALLOWED_STYLES`.
|
|
* @since 5.9.0 Renamed from `ALLOWED_STYLES` to `VALID_STYLES`,
|
|
* added new properties for `border`, `filter`, `spacing`,
|
|
* and `typography`.
|
|
* @since 6.1.0 Added new side properties for `border`,
|
|
* updated `blockGap` to be allowed at any level.
|
|
* @var array
|
|
*/
|
|
const VALID_STYLES = array(
|
|
'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,
|
|
),
|
|
'filter' => array(
|
|
'duotone' => null,
|
|
),
|
|
'spacing' => array(
|
|
'margin' => null,
|
|
'padding' => null,
|
|
'blockGap' => null,
|
|
),
|
|
'typography' => array(
|
|
'fontFamily' => null,
|
|
'fontSize' => null,
|
|
'fontStyle' => null,
|
|
'fontWeight' => null,
|
|
'letterSpacing' => null,
|
|
'lineHeight' => null,
|
|
'textDecoration' => null,
|
|
'textTransform' => null,
|
|
),
|
|
);
|
|
|
|
/**
|
|
* Defines which pseudo selectors are enabled for which elements.
|
|
*
|
|
* Note: this will affect both top-level and block-level elements.
|
|
*
|
|
* @since 6.1.0
|
|
*/
|
|
const VALID_ELEMENT_PSEUDO_SELECTORS = array(
|
|
'link' => array( ':hover', ':focus', ':active', ':visited' ),
|
|
'button' => array( ':hover', ':focus', ':active', ':visited' ),
|
|
);
|
|
|
|
/**
|
|
* The valid elements that can be found under styles.
|
|
*
|
|
* @since 5.8.0
|
|
* @since 6.1.0 Added `heading`, `button`. and `caption` elements.
|
|
* @var string[]
|
|
*/
|
|
const ELEMENTS = array(
|
|
'link' => 'a:where(:not(.wp-element-button))', // The `where` is needed to lower the specificity.
|
|
'heading' => 'h1, h2, h3, h4, h5, h6',
|
|
'h1' => 'h1',
|
|
'h2' => 'h2',
|
|
'h3' => 'h3',
|
|
'h4' => 'h4',
|
|
'h5' => 'h5',
|
|
'h6' => 'h6',
|
|
// We have the .wp-block-button__link class so that this will target older buttons that have been serialized.
|
|
'button' => '.wp-element-button, .wp-block-button__link',
|
|
// The block classes are necessary to target older content that won't use the new class names.
|
|
'caption' => '.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption',
|
|
);
|
|
|
|
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',
|
|
);
|
|
|
|
/**
|
|
* 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 ( array_key_exists( $element, static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES ) ) {
|
|
$class_name = static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES[ $element ];
|
|
}
|
|
|
|
return $class_name;
|
|
}
|
|
|
|
/**
|
|
* Options that settings.appearanceTools enables.
|
|
*
|
|
* @since 6.0.0
|
|
* @var array
|
|
*/
|
|
const APPEARANCE_TOOLS_OPT_INS = array(
|
|
array( 'border', 'color' ),
|
|
array( 'border', 'radius' ),
|
|
array( 'border', 'style' ),
|
|
array( 'border', 'width' ),
|
|
array( 'color', 'link' ),
|
|
array( 'spacing', 'blockGap' ),
|
|
array( 'spacing', 'margin' ),
|
|
array( 'spacing', 'padding' ),
|
|
array( 'typography', 'lineHeight' ),
|
|
);
|
|
|
|
/**
|
|
* The latest version of the schema in use.
|
|
*
|
|
* @since 5.8.0
|
|
* @since 5.9.0 Changed value from 1 to 2.
|
|
* @var int
|
|
*/
|
|
const LATEST_SCHEMA = 2;
|
|
|
|
/**
|
|
* Constructor.
|
|
*
|
|
* @since 5.8.0
|
|
*
|
|
* @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'.
|
|
*/
|
|
public function __construct( $theme_json = array(), $origin = 'theme' ) {
|
|
if ( ! in_array( $origin, static::VALID_ORIGINS, true ) ) {
|
|
$origin = 'theme';
|
|
}
|
|
|
|
$this->theme_json = WP_Theme_JSON_Schema::migrate( $theme_json );
|
|
$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 );
|
|
|
|
// 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'] );
|
|
$preset = _wp_array_get( $this->theme_json, $path, null );
|
|
if ( null !== $preset ) {
|
|
// If the preset is not already keyed by origin.
|
|
if ( isset( $preset[0] ) || empty( $preset ) ) {
|
|
_wp_array_set( $this->theme_json, $path, array( $origin => $preset ) );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Enables some opt-in settings if theme declared support.
|
|
*
|
|
* @since 5.9.0
|
|
*
|
|
* @param array $theme_json A theme.json structure to modify.
|
|
* @return array The modified theme.json structure.
|
|
*/
|
|
protected static function maybe_opt_in_into_settings( $theme_json ) {
|
|
$new_theme_json = $theme_json;
|
|
|
|
if (
|
|
isset( $new_theme_json['settings']['appearanceTools'] ) &&
|
|
true === $new_theme_json['settings']['appearanceTools']
|
|
) {
|
|
static::do_opt_in_into_settings( $new_theme_json['settings'] );
|
|
}
|
|
|
|
if ( isset( $new_theme_json['settings']['blocks'] ) && is_array( $new_theme_json['settings']['blocks'] ) ) {
|
|
foreach ( $new_theme_json['settings']['blocks'] as &$block ) {
|
|
if ( isset( $block['appearanceTools'] ) && ( true === $block['appearanceTools'] ) ) {
|
|
static::do_opt_in_into_settings( $block );
|
|
}
|
|
}
|
|
}
|
|
|
|
return $new_theme_json;
|
|
}
|
|
|
|
/**
|
|
* Enables some settings.
|
|
*
|
|
* @since 5.9.0
|
|
*
|
|
* @param array $context The context to which the settings belong.
|
|
*/
|
|
protected static function do_opt_in_into_settings( &$context ) {
|
|
foreach ( static::APPEARANCE_TOOLS_OPT_INS as $path ) {
|
|
// Use "unset prop" as a marker instead of "null" because
|
|
// "null" can be a valid value for some props (e.g. blockGap).
|
|
if ( 'unset prop' === _wp_array_get( $context, $path, 'unset prop' ) ) {
|
|
_wp_array_set( $context, $path, true );
|
|
}
|
|
}
|
|
|
|
unset( $context['appearanceTools'] );
|
|
}
|
|
|
|
/**
|
|
* Sanitizes the input according to the schemas.
|
|
*
|
|
* @since 5.8.0
|
|
* @since 5.9.0 Added the `$valid_block_names` and `$valid_element_name` parameters.
|
|
*
|
|
* @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.
|
|
* @return array The sanitized output.
|
|
*/
|
|
protected static function sanitize( $input, $valid_block_names, $valid_element_names ) {
|
|
|
|
$output = array();
|
|
|
|
if ( ! is_array( $input ) ) {
|
|
return $output;
|
|
}
|
|
|
|
// Preserve only the top most level keys.
|
|
$output = array_intersect_key( $input, array_flip( static::VALID_TOP_LEVEL_KEYS ) );
|
|
|
|
/*
|
|
* Remove any rules that are annotated as "top" in VALID_STYLES constant.
|
|
* Some styles are only meant to be available at the top-level (e.g.: blockGap),
|
|
* hence, the schema for blocks & elements should not have them.
|
|
*/
|
|
$styles_non_top_level = static::VALID_STYLES;
|
|
foreach ( array_keys( $styles_non_top_level ) as $section ) {
|
|
foreach ( array_keys( $styles_non_top_level[ $section ] ) as $prop ) {
|
|
if ( 'top' === $styles_non_top_level[ $section ][ $prop ] ) {
|
|
unset( $styles_non_top_level[ $section ][ $prop ] );
|
|
}
|
|
}
|
|
}
|
|
|
|
// Build the schema based on valid block & element names.
|
|
$schema = array();
|
|
$schema_styles_elements = array();
|
|
|
|
/*
|
|
* Set allowed element pseudo selectors based on per element allow list.
|
|
* Target data structure in schema:
|
|
* e.g.
|
|
* - top level elements: `$schema['styles']['elements']['link'][':hover']`.
|
|
* - block level elements: `$schema['styles']['blocks']['core/button']['elements']['link'][':hover']`.
|
|
*/
|
|
foreach ( $valid_element_names as $element ) {
|
|
$schema_styles_elements[ $element ] = $styles_non_top_level;
|
|
|
|
if ( array_key_exists( $element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
|
|
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();
|
|
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;
|
|
|
|
// Remove anything that's not present in the schema.
|
|
foreach ( array( 'styles', 'settings' ) as $subtree ) {
|
|
if ( ! isset( $input[ $subtree ] ) ) {
|
|
continue;
|
|
}
|
|
|
|
if ( ! is_array( $input[ $subtree ] ) ) {
|
|
unset( $output[ $subtree ] );
|
|
continue;
|
|
}
|
|
|
|
$result = static::remove_keys_not_in_schema( $input[ $subtree ], $schema[ $subtree ] );
|
|
|
|
if ( empty( $result ) ) {
|
|
unset( $output[ $subtree ] );
|
|
} else {
|
|
$output[ $subtree ] = $result;
|
|
}
|
|
}
|
|
|
|
return $output;
|
|
}
|
|
|
|
/**
|
|
* Appends a sub-selector to an existing one.
|
|
*
|
|
* Given the compounded $selector "h1, h2, h3"
|
|
* and the $to_append selector ".some-class" the result will be
|
|
* "h1.some-class, h2.some-class, h3.some-class".
|
|
*
|
|
* @since 5.8.0
|
|
* @since 6.1.0 Added append position.
|
|
*
|
|
* @param string $selector Original selector.
|
|
* @param string $to_append Selector to append.
|
|
* @param string $position A position sub-selector should be appended. Default 'right'.
|
|
* @return string
|
|
*/
|
|
protected static function append_to_selector( $selector, $to_append, $position = 'right' ) {
|
|
$new_selectors = array();
|
|
$selectors = explode( ',', $selector );
|
|
foreach ( $selectors as $sel ) {
|
|
$new_selectors[] = 'right' === $position ? $sel . $to_append : $to_append . $sel;
|
|
}
|
|
return implode( ',', $new_selectors );
|
|
}
|
|
|
|
/**
|
|
* Returns the metadata for each block.
|
|
*
|
|
* Example:
|
|
*
|
|
* {
|
|
* 'core/paragraph': {
|
|
* 'selector': 'p',
|
|
* 'elements': {
|
|
* 'link' => 'link selector',
|
|
* 'etc' => 'element selector'
|
|
* }
|
|
* },
|
|
* 'core/heading': {
|
|
* 'selector': 'h1',
|
|
* 'elements': {}
|
|
* },
|
|
* 'core/image': {
|
|
* 'selector': '.wp-block-image',
|
|
* 'duotone': 'img',
|
|
* 'elements': {}
|
|
* }
|
|
* }
|
|
*
|
|
* @since 5.8.0
|
|
* @since 5.9.0 Added `duotone` key with CSS selector.
|
|
* @since 6.1.0 Added `features` key with block support feature level selectors.
|
|
*
|
|
* @return array Block metadata.
|
|
*/
|
|
protected static function get_blocks_metadata() {
|
|
if ( null !== static::$blocks_metadata ) {
|
|
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 ) );
|
|
}
|
|
|
|
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'];
|
|
}
|
|
|
|
// Generate block support feature level selectors if opted into
|
|
// for the current block.
|
|
$features = array();
|
|
foreach ( static::BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS as $key => $feature ) {
|
|
if (
|
|
isset( $block_type->supports[ $key ]['__experimentalSelector'] ) &&
|
|
$block_type->supports[ $key ]['__experimentalSelector']
|
|
) {
|
|
$features[ $feature ] = static::scope_selector(
|
|
static::$blocks_metadata[ $block_name ]['selector'],
|
|
$block_type->supports[ $key ]['__experimentalSelector']
|
|
);
|
|
}
|
|
}
|
|
|
|
if ( ! empty( $features ) ) {
|
|
static::$blocks_metadata[ $block_name ]['features'] = $features;
|
|
}
|
|
|
|
// 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 ) {
|
|
if ( $selector === $el_selector ) {
|
|
$element_selector = array( $el_selector );
|
|
break;
|
|
}
|
|
$element_selector[] = static::append_to_selector( $el_selector, $selector . ' ', 'left' );
|
|
}
|
|
static::$blocks_metadata[ $block_name ]['elements'][ $el_name ] = implode( ',', $element_selector );
|
|
}
|
|
}
|
|
|
|
return static::$blocks_metadata;
|
|
}
|
|
|
|
/**
|
|
* Given a tree, removes the keys that are not present in the schema.
|
|
*
|
|
* It is recursive and modifies the input in-place.
|
|
*
|
|
* @since 5.8.0
|
|
*
|
|
* @param array $tree Input to process.
|
|
* @param array $schema Schema to adhere to.
|
|
* @return array Returns 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 ] ) ) {
|
|
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 ] ) ) {
|
|
unset( $tree[ $key ] );
|
|
}
|
|
} elseif ( is_array( $schema[ $key ] ) && ! is_array( $tree[ $key ] ) ) {
|
|
unset( $tree[ $key ] );
|
|
}
|
|
}
|
|
|
|
return $tree;
|
|
}
|
|
|
|
/**
|
|
* Returns the existing settings for each block.
|
|
*
|
|
* Example:
|
|
*
|
|
* {
|
|
* 'root': {
|
|
* 'color': {
|
|
* 'custom': true
|
|
* }
|
|
* },
|
|
* 'core/paragraph': {
|
|
* 'spacing': {
|
|
* 'customPadding': true
|
|
* }
|
|
* }
|
|
* }
|
|
*
|
|
* @since 5.8.0
|
|
*
|
|
* @return array Settings per block.
|
|
*/
|
|
public function get_settings() {
|
|
if ( ! isset( $this->theme_json['settings'] ) ) {
|
|
return array();
|
|
} else {
|
|
return $this->theme_json['settings'];
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Returns the stylesheet that results of processing
|
|
* the theme.json structure this object represents.
|
|
*
|
|
* @since 5.8.0
|
|
* @since 5.9.0 Removed the `$type` parameter`, added the `$types` and `$origins` parameters.
|
|
*
|
|
* @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.
|
|
*/
|
|
public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' ), $origins = null ) {
|
|
if ( null === $origins ) {
|
|
$origins = static::VALID_ORIGINS;
|
|
}
|
|
|
|
if ( is_string( $types ) ) {
|
|
// Dispatch error and map old arguments to new ones.
|
|
_deprecated_argument( __FUNCTION__, '5.9.0' );
|
|
if ( 'block_styles' === $types ) {
|
|
$types = array( 'styles', 'presets' );
|
|
} elseif ( 'css_variables' === $types ) {
|
|
$types = array( 'variables' );
|
|
} else {
|
|
$types = array( 'variables', 'styles', 'presets' );
|
|
}
|
|
}
|
|
|
|
$blocks_metadata = static::get_blocks_metadata();
|
|
$style_nodes = static::get_style_nodes( $this->theme_json, $blocks_metadata );
|
|
$setting_nodes = static::get_setting_nodes( $this->theme_json, $blocks_metadata );
|
|
|
|
$stylesheet = '';
|
|
|
|
if ( in_array( 'variables', $types, true ) ) {
|
|
$stylesheet .= $this->get_css_variables( $setting_nodes, $origins );
|
|
}
|
|
|
|
if ( in_array( 'styles', $types, true ) ) {
|
|
$root_block_key = array_search( static::ROOT_BLOCK_SELECTOR, array_column( $style_nodes, 'selector' ), true );
|
|
|
|
if ( false !== $root_block_key ) {
|
|
$stylesheet .= $this->get_root_layout_rules( static::ROOT_BLOCK_SELECTOR, $style_nodes[ $root_block_key ] );
|
|
}
|
|
$stylesheet .= $this->get_block_classes( $style_nodes );
|
|
} elseif ( in_array( 'base-layout-styles', $types, true ) ) {
|
|
// 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' => static::ROOT_BLOCK_SELECTOR,
|
|
),
|
|
array(
|
|
'path' => array( 'styles', 'blocks', 'core/columns' ),
|
|
'selector' => '.wp-block-columns',
|
|
'name' => 'core/columns',
|
|
),
|
|
);
|
|
|
|
foreach ( $base_styles_nodes as $base_style_node ) {
|
|
$stylesheet .= $this->get_layout_styles( $base_style_node );
|
|
}
|
|
}
|
|
|
|
if ( in_array( 'presets', $types, true ) ) {
|
|
$stylesheet .= $this->get_preset_classes( $setting_nodes, $origins );
|
|
}
|
|
|
|
return $stylesheet;
|
|
}
|
|
|
|
/**
|
|
* Returns the page templates of the active theme.
|
|
*
|
|
* @since 5.9.0
|
|
*
|
|
* @return array
|
|
*/
|
|
public function get_custom_templates() {
|
|
$custom_templates = array();
|
|
if ( ! isset( $this->theme_json['customTemplates'] ) || ! is_array( $this->theme_json['customTemplates'] ) ) {
|
|
return $custom_templates;
|
|
}
|
|
|
|
foreach ( $this->theme_json['customTemplates'] as $item ) {
|
|
if ( isset( $item['name'] ) ) {
|
|
$custom_templates[ $item['name'] ] = array(
|
|
'title' => isset( $item['title'] ) ? $item['title'] : '',
|
|
'postTypes' => isset( $item['postTypes'] ) ? $item['postTypes'] : array( 'page' ),
|
|
);
|
|
}
|
|
}
|
|
return $custom_templates;
|
|
}
|
|
|
|
/**
|
|
* Returns the template part data of active theme.
|
|
*
|
|
* @since 5.9.0
|
|
*
|
|
* @return array
|
|
*/
|
|
public function get_template_parts() {
|
|
$template_parts = array();
|
|
if ( ! isset( $this->theme_json['templateParts'] ) || ! is_array( $this->theme_json['templateParts'] ) ) {
|
|
return $template_parts;
|
|
}
|
|
|
|
foreach ( $this->theme_json['templateParts'] as $item ) {
|
|
if ( isset( $item['name'] ) ) {
|
|
$template_parts[ $item['name'] ] = array(
|
|
'title' => isset( $item['title'] ) ? $item['title'] : '',
|
|
'area' => isset( $item['area'] ) ? $item['area'] : '',
|
|
);
|
|
}
|
|
}
|
|
return $template_parts;
|
|
}
|
|
|
|
/**
|
|
* Converts each style section into a list of rulesets
|
|
* containing the block styles to be appended to the stylesheet.
|
|
*
|
|
* See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
|
|
*
|
|
* For each section this creates a new ruleset such as:
|
|
*
|
|
* block-selector {
|
|
* style-property-one: value;
|
|
* }
|
|
*
|
|
* @since 5.8.0 As `get_block_styles()`.
|
|
* @since 5.9.0 Renamed from `get_block_styles()` to `get_block_classes()`
|
|
* and no longer returns preset classes.
|
|
* Removed the `$setting_nodes` parameter.
|
|
* @since 6.1.0 Moved most internal logic to `get_styles_for_block()`.
|
|
*
|
|
* @param array $style_nodes Nodes with styles.
|
|
* @return string The new stylesheet.
|
|
*/
|
|
protected function get_block_classes( $style_nodes ) {
|
|
$block_rules = '';
|
|
|
|
foreach ( $style_nodes as $metadata ) {
|
|
if ( null === $metadata['selector'] ) {
|
|
continue;
|
|
}
|
|
$block_rules .= static::get_styles_for_block( $metadata );
|
|
}
|
|
|
|
return $block_rules;
|
|
}
|
|
|
|
/**
|
|
* Get the CSS layout rules for a particular block from theme.json layout definitions.
|
|
*
|
|
* @since 6.1.0
|
|
*
|
|
* @param array $block_metadata Metadata about the block to get styles for.
|
|
*
|
|
* @return string Layout styles for the block.
|
|
*/
|
|
protected function get_layout_styles( $block_metadata ) {
|
|
$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, array( '__experimentalLayout' ), false ) ) {
|
|
return $block_rules;
|
|
}
|
|
}
|
|
|
|
$selector = isset( $block_metadata['selector'] ) ? $block_metadata['selector'] : '';
|
|
$has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
|
|
$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_array_get( $this->theme_json, array( 'settings', 'layout', 'definitions' ), array() );
|
|
$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 = _wp_array_get( $block_type->supports, array( 'spacing', 'blockGap', '__experimentalDefault' ), null );
|
|
}
|
|
} else {
|
|
$block_gap_value = static::get_property_value( $node, array( 'spacing', 'blockGap' ) );
|
|
}
|
|
|
|
// Support split row / column values and concatenate to a shorthand value.
|
|
if ( is_array( $block_gap_value ) ) {
|
|
if ( isset( $block_gap_value['top'] ) && isset( $block_gap_value['left'] ) ) {
|
|
$gap_row = static::get_property_value( $node, array( 'spacing', 'blockGap', 'top' ) );
|
|
$gap_column = static::get_property_value( $node, array( 'spacing', 'blockGap', 'left' ) );
|
|
$block_gap_value = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
|
|
} else {
|
|
// Skip outputting gap value if not all sides are provided.
|
|
$block_gap_value = null;
|
|
}
|
|
}
|
|
|
|
// If the block should have custom gap, add the gap styles.
|
|
if ( null !== $block_gap_value && false !== $block_gap_value && '' !== $block_gap_value ) {
|
|
foreach ( $layout_definitions as $layout_definition_key => $layout_definition ) {
|
|
// Allow outputting fallback gap styles for flex layout type when block gap support isn't available.
|
|
if ( ! $has_block_gap_support && 'flex' !== $layout_definition_key ) {
|
|
continue;
|
|
}
|
|
|
|
$class_name = sanitize_title( _wp_array_get( $layout_definition, array( 'className' ), false ) );
|
|
$spacing_rules = _wp_array_get( $layout_definition, array( '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 ? '%s .%s%s' : '%s.%s%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 = sanitize_title( _wp_array_get( $layout_definition, array( 'className' ), false ) );
|
|
$base_style_rules = _wp_array_get( $layout_definition, array( 'baseStyles' ), array() );
|
|
|
|
if (
|
|
! empty( $class_name ) &&
|
|
! empty( $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();
|
|
|
|
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 ) {
|
|
if ( static::is_safe_css_declaration( $css_property, $css_value ) ) {
|
|
$declarations[] = array(
|
|
'name' => $css_property,
|
|
'value' => $css_value,
|
|
);
|
|
}
|
|
}
|
|
|
|
$layout_selector = sprintf(
|
|
'%s .%s%s',
|
|
$selector,
|
|
$class_name,
|
|
$base_style_rule['selector']
|
|
);
|
|
$block_rules .= static::to_ruleset( $layout_selector, $declarations );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return $block_rules;
|
|
}
|
|
|
|
/**
|
|
* Creates new rulesets as classes for each preset value such as:
|
|
*
|
|
* .has-value-color {
|
|
* color: value;
|
|
* }
|
|
*
|
|
* .has-value-background-color {
|
|
* background-color: value;
|
|
* }
|
|
*
|
|
* .has-value-font-size {
|
|
* font-size: value;
|
|
* }
|
|
*
|
|
* .has-value-gradient-background {
|
|
* background: value;
|
|
* }
|
|
*
|
|
* p.has-value-gradient-background {
|
|
* background: value;
|
|
* }
|
|
*
|
|
* @since 5.9.0
|
|
*
|
|
* @param array $setting_nodes Nodes with settings.
|
|
* @param array $origins List of origins to process presets from.
|
|
* @return string The new stylesheet.
|
|
*/
|
|
protected function get_preset_classes( $setting_nodes, $origins ) {
|
|
$preset_rules = '';
|
|
|
|
foreach ( $setting_nodes as $metadata ) {
|
|
if ( null === $metadata['selector'] ) {
|
|
continue;
|
|
}
|
|
|
|
$selector = $metadata['selector'];
|
|
$node = _wp_array_get( $this->theme_json, $metadata['path'], array() );
|
|
$preset_rules .= static::compute_preset_classes( $node, $selector, $origins );
|
|
}
|
|
|
|
return $preset_rules;
|
|
}
|
|
|
|
/**
|
|
* Converts each styles section into a list of rulesets
|
|
* to be appended to the stylesheet.
|
|
* These rulesets contain all the css variables (custom variables and preset variables).
|
|
*
|
|
* See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
|
|
*
|
|
* For each section this creates a new ruleset such as:
|
|
*
|
|
* block-selector {
|
|
* --wp--preset--category--slug: value;
|
|
* --wp--custom--variable: value;
|
|
* }
|
|
*
|
|
* @since 5.8.0
|
|
* @since 5.9.0 Added the `$origins` parameter.
|
|
*
|
|
* @param array $nodes Nodes with settings.
|
|
* @param array $origins List of origins to process.
|
|
* @return string The new stylesheet.
|
|
*/
|
|
protected function get_css_variables( $nodes, $origins ) {
|
|
$stylesheet = '';
|
|
foreach ( $nodes as $metadata ) {
|
|
if ( null === $metadata['selector'] ) {
|
|
continue;
|
|
}
|
|
|
|
$selector = $metadata['selector'];
|
|
|
|
$node = _wp_array_get( $this->theme_json, $metadata['path'], array() );
|
|
$declarations = array_merge( static::compute_preset_vars( $node, $origins ), static::compute_theme_vars( $node ) );
|
|
|
|
$stylesheet .= static::to_ruleset( $selector, $declarations );
|
|
}
|
|
|
|
return $stylesheet;
|
|
}
|
|
|
|
/**
|
|
* Given a selector and a declaration list,
|
|
* creates the corresponding ruleset.
|
|
*
|
|
* @since 5.8.0
|
|
*
|
|
* @param string $selector CSS selector.
|
|
* @param array $declarations List of declarations.
|
|
* @return string CSS ruleset.
|
|
*/
|
|
protected static function to_ruleset( $selector, $declarations ) {
|
|
if ( empty( $declarations ) ) {
|
|
return '';
|
|
}
|
|
|
|
$declaration_block = array_reduce(
|
|
$declarations,
|
|
static function ( $carry, $element ) {
|
|
return $carry .= $element['name'] . ': ' . $element['value'] . ';'; },
|
|
''
|
|
);
|
|
|
|
return $selector . '{' . $declaration_block . '}';
|
|
}
|
|
|
|
/**
|
|
* Given a settings array, it returns the generated rulesets
|
|
* for the preset classes.
|
|
*
|
|
* @since 5.8.0
|
|
* @since 5.9.0 Added the `$origins` parameter.
|
|
*
|
|
* @param array $settings Settings to process.
|
|
* @param string $selector Selector wrapping the classes.
|
|
* @param array $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.
|
|
$selector = '';
|
|
}
|
|
|
|
$stylesheet = '';
|
|
foreach ( static::PRESETS_METADATA as $preset_metadata ) {
|
|
$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 ),
|
|
array(
|
|
array(
|
|
'name' => $property,
|
|
'value' => 'var(' . $css_var . ') !important',
|
|
),
|
|
)
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
return $stylesheet;
|
|
}
|
|
|
|
/**
|
|
* Function that scopes a selector with another one. This works a bit like
|
|
* SCSS nesting except the `&` operator isn't supported.
|
|
*
|
|
* <code>
|
|
* $scope = '.a, .b .c';
|
|
* $selector = '> .x, .y';
|
|
* $merged = scope_selector( $scope, $selector );
|
|
* // $merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'
|
|
* </code>
|
|
*
|
|
* @since 5.9.0
|
|
*
|
|
* @param string $scope Selector to scope to.
|
|
* @param string $selector Original selector.
|
|
* @return string Scoped selector.
|
|
*/
|
|
protected static function scope_selector( $scope, $selector ) {
|
|
$scopes = explode( ',', $scope );
|
|
$selectors = explode( ',', $selector );
|
|
|
|
$selectors_scoped = array();
|
|
foreach ( $scopes as $outer ) {
|
|
foreach ( $selectors as $inner ) {
|
|
$selectors_scoped[] = trim( $outer ) . ' ' . trim( $inner );
|
|
}
|
|
}
|
|
|
|
return implode( ', ', $selectors_scoped );
|
|
}
|
|
|
|
/**
|
|
* Gets preset values keyed by slugs based on settings and metadata.
|
|
*
|
|
* <code>
|
|
* $settings = array(
|
|
* 'typography' => array(
|
|
* 'fontFamilies' => array(
|
|
* array(
|
|
* 'slug' => 'sansSerif',
|
|
* 'fontFamily' => '"Helvetica Neue", sans-serif',
|
|
* ),
|
|
* array(
|
|
* 'slug' => 'serif',
|
|
* 'colors' => 'Georgia, serif',
|
|
* )
|
|
* ),
|
|
* ),
|
|
* );
|
|
* $meta = array(
|
|
* 'path' => array( 'typography', 'fontFamilies' ),
|
|
* 'value_key' => 'fontFamily',
|
|
* );
|
|
* $values_by_slug = get_settings_values_by_slug();
|
|
* // $values_by_slug === array(
|
|
* // 'sans-serif' => '"Helvetica Neue", sans-serif',
|
|
* // 'serif' => 'Georgia, serif',
|
|
* // );
|
|
* </code>
|
|
*
|
|
* @since 5.9.0
|
|
*
|
|
* @param array $settings Settings to process.
|
|
* @param array $preset_metadata One of the PRESETS_METADATA values.
|
|
* @param array $origins List of origins to process.
|
|
* @return array Array of presets where each key is a slug and each value is the preset value.
|
|
*/
|
|
protected static function get_settings_values_by_slug( $settings, $preset_metadata, $origins ) {
|
|
$preset_per_origin = _wp_array_get( $settings, $preset_metadata['path'], array() );
|
|
|
|
$result = array();
|
|
foreach ( $origins as $origin ) {
|
|
if ( ! isset( $preset_per_origin[ $origin ] ) ) {
|
|
continue;
|
|
}
|
|
foreach ( $preset_per_origin[ $origin ] as $preset ) {
|
|
$slug = _wp_to_kebab_case( $preset['slug'] );
|
|
|
|
$value = '';
|
|
if ( isset( $preset_metadata['value_key'], $preset[ $preset_metadata['value_key'] ] ) ) {
|
|
$value_key = $preset_metadata['value_key'];
|
|
$value = $preset[ $value_key ];
|
|
} elseif (
|
|
isset( $preset_metadata['value_func'] ) &&
|
|
is_callable( $preset_metadata['value_func'] )
|
|
) {
|
|
$value_func = $preset_metadata['value_func'];
|
|
$value = call_user_func( $value_func, $preset );
|
|
} else {
|
|
// If we don't have a value, then don't add it to the result.
|
|
continue;
|
|
}
|
|
|
|
$result[ $slug ] = $value;
|
|
}
|
|
}
|
|
return $result;
|
|
}
|
|
|
|
/**
|
|
* Similar to get_settings_values_by_slug, but doesn't compute the value.
|
|
*
|
|
* @since 5.9.0
|
|
*
|
|
* @param array $settings Settings to process.
|
|
* @param array $preset_metadata One of the PRESETS_METADATA values.
|
|
* @param array $origins List of origins to process.
|
|
* @return array Array of presets where the key and value are both the slug.
|
|
*/
|
|
protected static function get_settings_slugs( $settings, $preset_metadata, $origins = null ) {
|
|
if ( null === $origins ) {
|
|
$origins = static::VALID_ORIGINS;
|
|
}
|
|
|
|
$preset_per_origin = _wp_array_get( $settings, $preset_metadata['path'], array() );
|
|
|
|
$result = array();
|
|
foreach ( $origins as $origin ) {
|
|
if ( ! isset( $preset_per_origin[ $origin ] ) ) {
|
|
continue;
|
|
}
|
|
foreach ( $preset_per_origin[ $origin ] as $preset ) {
|
|
$slug = _wp_to_kebab_case( $preset['slug'] );
|
|
|
|
// Use the array as a set so we don't get duplicates.
|
|
$result[ $slug ] = $slug;
|
|
}
|
|
}
|
|
return $result;
|
|
}
|
|
|
|
/**
|
|
* Transform a slug into a CSS Custom Property.
|
|
*
|
|
* @since 5.9.0
|
|
*
|
|
* @param string $input String to replace.
|
|
* @param string $slug The slug value to use to generate the custom property.
|
|
* @return string The CSS Custom Property. Something along the lines of `--wp--preset--color--black`.
|
|
*/
|
|
protected static function replace_slug_in_string( $input, $slug ) {
|
|
return strtr( $input, array( '$slug' => $slug ) );
|
|
}
|
|
|
|
/**
|
|
* Given the block settings, it extracts the CSS Custom Properties
|
|
* for the presets and adds them to the $declarations array
|
|
* following the format:
|
|
*
|
|
* array(
|
|
* 'name' => 'property_name',
|
|
* 'value' => 'property_value,
|
|
* )
|
|
*
|
|
* @since 5.8.0
|
|
* @since 5.9.0 Added the `$origins` parameter.
|
|
*
|
|
* @param array $settings Settings to process.
|
|
* @param array $origins List of origins to process.
|
|
* @return array Returns the modified $declarations.
|
|
*/
|
|
protected static function compute_preset_vars( $settings, $origins ) {
|
|
$declarations = array();
|
|
foreach ( static::PRESETS_METADATA as $preset_metadata ) {
|
|
$values_by_slug = static::get_settings_values_by_slug( $settings, $preset_metadata, $origins );
|
|
foreach ( $values_by_slug as $slug => $value ) {
|
|
$declarations[] = array(
|
|
'name' => static::replace_slug_in_string( $preset_metadata['css_vars'], $slug ),
|
|
'value' => $value,
|
|
);
|
|
}
|
|
}
|
|
|
|
return $declarations;
|
|
}
|
|
|
|
/**
|
|
* Given an array of settings, it extracts the CSS Custom Properties
|
|
* for the custom values and adds them to the $declarations
|
|
* array following the format:
|
|
*
|
|
* array(
|
|
* 'name' => 'property_name',
|
|
* 'value' => 'property_value,
|
|
* )
|
|
*
|
|
* @since 5.8.0
|
|
*
|
|
* @param array $settings Settings to process.
|
|
* @return array Returns the modified $declarations.
|
|
*/
|
|
protected static function compute_theme_vars( $settings ) {
|
|
$declarations = array();
|
|
$custom_values = _wp_array_get( $settings, array( 'custom' ), array() );
|
|
$css_vars = static::flatten_tree( $custom_values );
|
|
foreach ( $css_vars as $key => $value ) {
|
|
$declarations[] = array(
|
|
'name' => '--wp--custom--' . $key,
|
|
'value' => $value,
|
|
);
|
|
}
|
|
|
|
return $declarations;
|
|
}
|
|
|
|
/**
|
|
* Given a tree, it creates a flattened one
|
|
* by merging the keys and binding the leaf values
|
|
* to the new keys.
|
|
*
|
|
* It also transforms camelCase names into kebab-case
|
|
* and substitutes '/' by '-'.
|
|
*
|
|
* This is thought to be useful to generate
|
|
* CSS Custom Properties from a tree,
|
|
* although there's nothing in the implementation
|
|
* of this function that requires that format.
|
|
*
|
|
* For example, assuming the given prefix is '--wp'
|
|
* and the token is '--', for this input tree:
|
|
*
|
|
* {
|
|
* 'some/property': 'value',
|
|
* 'nestedProperty': {
|
|
* 'sub-property': 'value'
|
|
* }
|
|
* }
|
|
*
|
|
* it'll return this output:
|
|
*
|
|
* {
|
|
* '--wp--some-property': 'value',
|
|
* '--wp--nested-property--sub-property': 'value'
|
|
* }
|
|
*
|
|
* @since 5.8.0
|
|
*
|
|
* @param array $tree Input tree to process.
|
|
* @param string $prefix Optional. Prefix to prepend to each variable. Default empty string.
|
|
* @param string $token Optional. Token to use between levels. Default '--'.
|
|
* @return array The flattened tree.
|
|
*/
|
|
protected static function flatten_tree( $tree, $prefix = '', $token = '--' ) {
|
|
$result = array();
|
|
foreach ( $tree as $property => $value ) {
|
|
$new_key = $prefix . str_replace(
|
|
'/',
|
|
'-',
|
|
strtolower( _wp_to_kebab_case( $property ) )
|
|
);
|
|
|
|
if ( is_array( $value ) ) {
|
|
$new_prefix = $new_key . $token;
|
|
$result = array_merge(
|
|
$result,
|
|
static::flatten_tree( $value, $new_prefix, $token )
|
|
);
|
|
} else {
|
|
$result[ $new_key ] = $value;
|
|
}
|
|
}
|
|
return $result;
|
|
}
|
|
|
|
/**
|
|
* Given a styles array, it extracts the style properties
|
|
* and adds them to the $declarations array following the format:
|
|
*
|
|
* array(
|
|
* 'name' => 'property_name',
|
|
* 'value' => 'property_value,
|
|
* )
|
|
*
|
|
* @since 5.8.0
|
|
* @since 5.9.0 Added the `$settings` and `$properties` parameters.
|
|
* @since 6.1.0 Added `$theme_json`, `$selector`, and `$use_root_padding` parameters.
|
|
*
|
|
* @param array $styles Styles to process.
|
|
* @param array $settings Theme settings.
|
|
* @param array $properties Properties metadata.
|
|
* @param array $theme_json Theme JSON array.
|
|
* @param string $selector The style block selector.
|
|
* @param boolean $use_root_padding Whether to add custom properties at root level.
|
|
* @return array Returns the modified $declarations.
|
|
*/
|
|
protected static function compute_style_properties( $styles, $settings = array(), $properties = null, $theme_json = null, $selector = null, $use_root_padding = null ) {
|
|
if ( null === $properties ) {
|
|
$properties = static::PROPERTIES_METADATA;
|
|
}
|
|
|
|
$declarations = array();
|
|
if ( empty( $styles ) ) {
|
|
return $declarations;
|
|
}
|
|
|
|
$root_variable_duplicates = array();
|
|
|
|
foreach ( $properties as $css_property => $value_path ) {
|
|
$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 ) &&
|
|
_wp_array_get( $settings, static::PROTECTED_PROPERTIES[ $path_string ], null ) === null
|
|
) {
|
|
continue;
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
$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.
|
|
*
|
|
* @param array $styles Styles subtree.
|
|
* @param array $path Which property to process.
|
|
* @param array $theme_json Theme JSON array.
|
|
* @return string|array Style property value.
|
|
*/
|
|
protected static function get_property_value( $styles, $path, $theme_json = null ) {
|
|
$value = _wp_array_get( $styles, $path );
|
|
|
|
/*
|
|
* 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 ) && array_key_exists( 'ref', $value ) ) {
|
|
$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 ) && array_key_exists( 'ref', $ref_value ) ) {
|
|
$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;
|
|
}
|
|
|
|
// Convert custom CSS properties.
|
|
$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)";
|
|
}
|
|
|
|
return $value;
|
|
}
|
|
|
|
/**
|
|
* Builds metadata for the setting nodes, which returns in the form of:
|
|
*
|
|
* [
|
|
* [
|
|
* 'path' => ['path', 'to', 'some', 'node' ],
|
|
* 'selector' => 'CSS selector for some node'
|
|
* ],
|
|
* [
|
|
* 'path' => [ 'path', 'to', 'other', 'node' ],
|
|
* 'selector' => 'CSS selector for other node'
|
|
* ],
|
|
* ]
|
|
*
|
|
* @since 5.8.0
|
|
*
|
|
* @param array $theme_json The tree to extract setting nodes from.
|
|
* @param array $selectors List of selectors per block.
|
|
* @return array
|
|
*/
|
|
protected static function get_setting_nodes( $theme_json, $selectors = array() ) {
|
|
$nodes = array();
|
|
if ( ! isset( $theme_json['settings'] ) ) {
|
|
return $nodes;
|
|
}
|
|
|
|
// Top-level.
|
|
$nodes[] = array(
|
|
'path' => array( 'settings' ),
|
|
'selector' => static::ROOT_BLOCK_SELECTOR,
|
|
);
|
|
|
|
// Calculate paths for blocks.
|
|
if ( ! isset( $theme_json['settings']['blocks'] ) ) {
|
|
return $nodes;
|
|
}
|
|
|
|
foreach ( $theme_json['settings']['blocks'] as $name => $node ) {
|
|
$selector = null;
|
|
if ( isset( $selectors[ $name ]['selector'] ) ) {
|
|
$selector = $selectors[ $name ]['selector'];
|
|
}
|
|
|
|
$nodes[] = array(
|
|
'path' => array( 'settings', 'blocks', $name ),
|
|
'selector' => $selector,
|
|
);
|
|
}
|
|
|
|
return $nodes;
|
|
}
|
|
|
|
/**
|
|
* Builds metadata for the style nodes, which returns in the form of:
|
|
*
|
|
* [
|
|
* [
|
|
* 'path' => [ 'path', 'to', 'some', 'node' ],
|
|
* 'selector' => 'CSS selector for some node',
|
|
* 'duotone' => 'CSS selector for duotone for some node'
|
|
* ],
|
|
* [
|
|
* 'path' => ['path', 'to', 'other', 'node' ],
|
|
* 'selector' => 'CSS selector for other node',
|
|
* 'duotone' => null
|
|
* ],
|
|
* ]
|
|
*
|
|
* @since 5.8.0
|
|
*
|
|
* @param array $theme_json The tree to extract style nodes from.
|
|
* @param array $selectors List of selectors per block.
|
|
* @return array
|
|
*/
|
|
protected static function get_style_nodes( $theme_json, $selectors = array() ) {
|
|
$nodes = array();
|
|
if ( ! isset( $theme_json['styles'] ) ) {
|
|
return $nodes;
|
|
}
|
|
|
|
// Top-level.
|
|
$nodes[] = array(
|
|
'path' => array( 'styles' ),
|
|
'selector' => static::ROOT_BLOCK_SELECTOR,
|
|
);
|
|
|
|
if ( isset( $theme_json['styles']['elements'] ) ) {
|
|
foreach ( self::ELEMENTS as $element => $selector ) {
|
|
if ( ! isset( $theme_json['styles']['elements'][ $element ] ) ) {
|
|
continue;
|
|
}
|
|
$nodes[] = array(
|
|
'path' => array( 'styles', 'elements', $element ),
|
|
'selector' => static::ELEMENTS[ $element ],
|
|
);
|
|
|
|
// Handle any pseudo selectors for the element.
|
|
if ( array_key_exists( $element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
|
|
foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
|
|
|
|
if ( isset( $theme_json['styles']['elements'][ $element ][ $pseudo_selector ] ) ) {
|
|
$nodes[] = array(
|
|
'path' => array( 'styles', 'elements', $element ),
|
|
'selector' => static::append_to_selector( static::ELEMENTS[ $element ], $pseudo_selector ),
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Blocks.
|
|
if ( ! isset( $theme_json['styles']['blocks'] ) ) {
|
|
return $nodes;
|
|
}
|
|
|
|
$nodes = array_merge( $nodes, static::get_block_nodes( $theme_json ) );
|
|
|
|
/**
|
|
* 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( '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 );
|
|
}
|
|
|
|
/**
|
|
* An internal method to get the block nodes from a theme.json file.
|
|
*
|
|
* @since 6.1.0
|
|
*
|
|
* @param array $theme_json The theme.json converted to an array.
|
|
* @return array The block nodes in theme.json.
|
|
*/
|
|
private static function get_block_nodes( $theme_json ) {
|
|
$selectors = static::get_blocks_metadata();
|
|
$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'] ) ) {
|
|
$selector = $selectors[ $name ]['selector'];
|
|
}
|
|
|
|
$duotone_selector = null;
|
|
if ( isset( $selectors[ $name ]['duotone'] ) ) {
|
|
$duotone_selector = $selectors[ $name ]['duotone'];
|
|
}
|
|
|
|
$feature_selectors = null;
|
|
if ( isset( $selectors[ $name ]['features'] ) ) {
|
|
$feature_selectors = $selectors[ $name ]['features'];
|
|
}
|
|
|
|
$nodes[] = array(
|
|
'name' => $name,
|
|
'path' => array( 'styles', 'blocks', $name ),
|
|
'selector' => $selector,
|
|
'duotone' => $duotone_selector,
|
|
'features' => $feature_selectors,
|
|
);
|
|
|
|
if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'] ) ) {
|
|
foreach ( $theme_json['styles']['blocks'][ $name ]['elements'] as $element => $node ) {
|
|
$nodes[] = array(
|
|
'path' => array( 'styles', 'blocks', $name, 'elements', $element ),
|
|
'selector' => $selectors[ $name ]['elements'][ $element ],
|
|
);
|
|
|
|
// Handle any pseudo selectors for the element.
|
|
if ( array_key_exists( $element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
|
|
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 ),
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return $nodes;
|
|
}
|
|
|
|
/**
|
|
* Gets the CSS rules for a particular block from theme.json.
|
|
*
|
|
* @since 6.1.0
|
|
*
|
|
* @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 = _wp_array_get( $this->theme_json, array( 'settings' ) );
|
|
|
|
/*
|
|
* Process style declarations for block support features the current
|
|
* block contains selectors for. Values for a feature with a custom
|
|
* selector are filtered from the theme.json node before it is
|
|
* processed as normal.
|
|
*/
|
|
$feature_declarations = array();
|
|
|
|
if ( ! empty( $block_metadata['features'] ) ) {
|
|
foreach ( $block_metadata['features'] as $feature_name => $feature_selector ) {
|
|
if ( ! empty( $node[ $feature_name ] ) ) {
|
|
// Create temporary node containing only the feature data
|
|
// to leverage existing `compute_style_properties` function.
|
|
$feature = array( $feature_name => $node[ $feature_name ] );
|
|
// Generate the feature's declarations only.
|
|
$new_feature_declarations = static::compute_style_properties( $feature, $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( $feature_declarations[ $feature_selector ] ) ) {
|
|
$feature_declarations[ $feature_selector ] = array_merge( $feature_declarations[ $feature_selector ], $new_feature_declarations );
|
|
} else {
|
|
$feature_declarations[ $feature_selector ] = $new_feature_declarations;
|
|
}
|
|
|
|
// Remove the feature from the block's node now the
|
|
// styles will be included under the feature level selector.
|
|
unset( $node[ $feature_name ] );
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
* 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 ( array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
|
|
$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,
|
|
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 ] ) &&
|
|
array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS )
|
|
&& 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. Separate the declarations that use the general selector
|
|
* from the ones using the duotone selector.
|
|
*/
|
|
$declarations_duotone = array();
|
|
foreach ( $declarations as $index => $declaration ) {
|
|
if ( 'filter' === $declaration['name'] ) {
|
|
unset( $declarations[ $index ] );
|
|
$declarations_duotone[] = $declaration;
|
|
}
|
|
}
|
|
|
|
// 2. Generate and append the rules that use the general selector.
|
|
$block_rules .= static::to_ruleset( $selector, $declarations );
|
|
|
|
// 3. Generate and append the rules that use the duotone selector.
|
|
if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
|
|
$selector_duotone = static::scope_selector( $block_metadata['selector'], $block_metadata['duotone'] );
|
|
$block_rules .= static::to_ruleset( $selector_duotone, $declarations_duotone );
|
|
}
|
|
|
|
// 4. Generate Layout block gap styles.
|
|
if (
|
|
static::ROOT_BLOCK_SELECTOR !== $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( $feature_selector, $individual_feature_declarations );
|
|
}
|
|
|
|
return $block_rules;
|
|
}
|
|
|
|
/**
|
|
* Outputs the CSS for layout rules on the root.
|
|
*
|
|
* @since 6.1.0
|
|
*
|
|
* @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 = _wp_array_get( $this->theme_json, array( 'settings' ) );
|
|
$use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments'];
|
|
|
|
/*
|
|
* 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.
|
|
*/
|
|
$css .= 'body { margin: 0;';
|
|
|
|
/*
|
|
* 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 .= '--wp--style--global--content-size: ' . $content_size . ';';
|
|
$css .= '--wp--style--global--wide-size: ' . $wide_size . ';';
|
|
}
|
|
|
|
$css .= ' }';
|
|
|
|
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); }';
|
|
// Nested containers with `.has-global-padding` class do not get padding.
|
|
$css .= '.has-global-padding :where(.has-global-padding) { padding-right: 0; padding-left: 0; }';
|
|
// 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); }';
|
|
// The above rule is negated for alignfull children of nested containers.
|
|
$css .= '.has-global-padding :where(.has-global-padding) > .alignfull { margin-right: 0; margin-left: 0; }';
|
|
// Some of the children of alignfull blocks without content width should also get padding: text blocks and non-alignfull container blocks.
|
|
$css .= '.has-global-padding > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
|
|
// The above rule also has to be negated for blocks inside nested `.has-global-padding` blocks.
|
|
$css .= '.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 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_value = _wp_array_get( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ), '0.5em' );
|
|
$has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
|
|
if ( $has_block_gap_support ) {
|
|
$block_gap_value = static::get_property_value( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ) );
|
|
$css .= '.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
|
|
$css .= ".wp-site-blocks > * + * { margin-block-start: $block_gap_value; }";
|
|
|
|
// For backwards compatibility, ensure the legacy block gap CSS variable is still available.
|
|
$css .= "$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
|
|
* )
|
|
* );
|
|
*
|
|
* static::get_metadata_boolean( $data, false );
|
|
* // => false
|
|
*
|
|
* 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.
|
|
* @return bool Value of boolean metadata.
|
|
*/
|
|
protected static function get_metadata_boolean( $data, $path, $default = false ) {
|
|
if ( is_bool( $path ) ) {
|
|
return $path;
|
|
}
|
|
|
|
if ( is_array( $path ) ) {
|
|
$value = _wp_array_get( $data, $path );
|
|
if ( null !== $value ) {
|
|
return $value;
|
|
}
|
|
}
|
|
|
|
return $default;
|
|
}
|
|
|
|
/**
|
|
* Merge new incoming data.
|
|
*
|
|
* @since 5.8.0
|
|
* @since 5.9.0 Duotone preset also has origins.
|
|
*
|
|
* @param WP_Theme_JSON $incoming Data to merge.
|
|
*/
|
|
public function merge( $incoming ) {
|
|
$incoming_data = $incoming->get_raw_data();
|
|
$this->theme_json = array_replace_recursive( $this->theme_json, $incoming_data );
|
|
|
|
/*
|
|
* The array_replace_recursive algorithm merges at the leaf level,
|
|
* but we don't want leaf arrays to be merged, so we overwrite it.
|
|
*
|
|
* For leaf values that are sequential arrays it will use the numeric indexes for replacement.
|
|
* We rather replace the existing with the incoming value, if it exists.
|
|
* This is the case of spacing.units.
|
|
*
|
|
* For leaf values that are associative arrays it will merge them as expected.
|
|
* This is also not the behavior we want for the current associative arrays (presets).
|
|
* We rather replace the existing with the incoming value, if it exists.
|
|
* This happens, for example, when we merge data from theme.json upon existing
|
|
* theme supports or when we merge anything coming from the same source twice.
|
|
* This is the case of color.palette, color.gradients, color.duotone,
|
|
* typography.fontSizes, or typography.fontFamilies.
|
|
*
|
|
* Additionally, for some preset types, we also want to make sure the
|
|
* values they introduce don't conflict with default values. We do so
|
|
* by checking the incoming slugs for theme presets and compare them
|
|
* with the equivalent default presets: if a slug is present as a default
|
|
* we remove it from the theme presets.
|
|
*/
|
|
$nodes = static::get_setting_nodes( $incoming_data );
|
|
$slugs_global = static::get_default_slugs( $this->theme_json, array( 'settings' ) );
|
|
foreach ( $nodes as $node ) {
|
|
$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' ) );
|
|
$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::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 );
|
|
if ( ! isset( $content ) ) {
|
|
continue;
|
|
}
|
|
|
|
if ( 'theme' === $origin && $preset['use_default_names'] ) {
|
|
foreach ( $content as &$item ) {
|
|
if ( ! array_key_exists( 'name', $item ) ) {
|
|
$name = static::get_name_from_defaults( $item['slug'], $base_path );
|
|
if ( null !== $name ) {
|
|
$item['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 );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Converts all filter (duotone) presets into SVGs.
|
|
*
|
|
* @since 5.9.1
|
|
*
|
|
* @param array $origins List of origins to process.
|
|
* @return string SVG filters.
|
|
*/
|
|
public function get_svg_filters( $origins ) {
|
|
$blocks_metadata = static::get_blocks_metadata();
|
|
$setting_nodes = static::get_setting_nodes( $this->theme_json, $blocks_metadata );
|
|
|
|
$filters = '';
|
|
foreach ( $setting_nodes as $metadata ) {
|
|
$node = _wp_array_get( $this->theme_json, $metadata['path'], array() );
|
|
if ( empty( $node['color']['duotone'] ) ) {
|
|
continue;
|
|
}
|
|
|
|
$duotone_presets = $node['color']['duotone'];
|
|
|
|
foreach ( $origins as $origin ) {
|
|
if ( ! isset( $duotone_presets[ $origin ] ) ) {
|
|
continue;
|
|
}
|
|
foreach ( $duotone_presets[ $origin ] as $duotone_preset ) {
|
|
$filters .= wp_get_duotone_filter_svg( $duotone_preset );
|
|
}
|
|
}
|
|
}
|
|
|
|
return $filters;
|
|
}
|
|
|
|
/**
|
|
* Returns whether a presets should be overridden or not.
|
|
*
|
|
* @since 5.9.0
|
|
* @deprecated 6.0.0 Use {@see 'get_metadata_boolean'} instead.
|
|
*
|
|
* @param array $theme_json The theme.json like structure to inspect.
|
|
* @param array $path Path to inspect.
|
|
* @param bool|array $override Data to compute whether to override the preset.
|
|
* @return boolean
|
|
*/
|
|
protected static function should_override_preset( $theme_json, $path, $override ) {
|
|
_deprecated_function( __METHOD__, '6.0.0', 'get_metadata_boolean' );
|
|
|
|
if ( is_bool( $override ) ) {
|
|
return $override;
|
|
}
|
|
|
|
/*
|
|
* The relationship between whether to override the defaults
|
|
* and whether the defaults are enabled is inverse:
|
|
*
|
|
* - If defaults are enabled => theme presets should not be overridden
|
|
* - If defaults are disabled => theme presets should be overridden
|
|
*
|
|
* For example, a theme sets defaultPalette to false,
|
|
* making the default palette hidden from the user.
|
|
* In that case, we want all the theme presets to be present,
|
|
* so they should override the defaults.
|
|
*/
|
|
if ( is_array( $override ) ) {
|
|
$value = _wp_array_get( $theme_json, array_merge( $path, $override ) );
|
|
if ( isset( $value ) ) {
|
|
return ! $value;
|
|
}
|
|
|
|
// Search the top-level key if none was found for this node.
|
|
$value = _wp_array_get( $theme_json, array_merge( array( 'settings' ), $override ) );
|
|
if ( isset( $value ) ) {
|
|
return ! $value;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Returns the default slugs for all the presets in an associative array
|
|
* whose keys are the preset paths and the leafs is the list of slugs.
|
|
*
|
|
* For example:
|
|
*
|
|
* array(
|
|
* 'color' => array(
|
|
* 'palette' => array( 'slug-1', 'slug-2' ),
|
|
* 'gradients' => array( 'slug-3', 'slug-4' ),
|
|
* ),
|
|
* )
|
|
*
|
|
* @since 5.9.0
|
|
*
|
|
* @param array $data A theme.json like structure.
|
|
* @param array $node_path The path to inspect. It's 'settings' by default.
|
|
* @return array
|
|
*/
|
|
protected static function get_default_slugs( $data, $node_path ) {
|
|
$slugs = array();
|
|
|
|
foreach ( static::PRESETS_METADATA as $metadata ) {
|
|
$path = array_merge( $node_path, $metadata['path'], array( '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
|
|
);
|
|
_wp_array_set( $slugs, $metadata['path'], $slugs_for_preset );
|
|
}
|
|
|
|
return $slugs;
|
|
}
|
|
|
|
/**
|
|
* Get a `default`'s preset name by a provided slug.
|
|
*
|
|
* @since 5.9.0
|
|
*
|
|
* @param string $slug The slug we want to find a match from default presets.
|
|
* @param array $base_path The path to inspect. It's 'settings' by default.
|
|
* @return string|null
|
|
*/
|
|
protected function get_name_from_defaults( $slug, $base_path ) {
|
|
$path = array_merge( $base_path, array( 'default' ) );
|
|
$default_content = _wp_array_get( $this->theme_json, $path, null );
|
|
if ( ! $default_content ) {
|
|
return null;
|
|
}
|
|
foreach ( $default_content as $item ) {
|
|
if ( $slug === $item['slug'] ) {
|
|
return $item['name'];
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
/**
|
|
* Removes the preset values whose slug is equal to any of given slugs.
|
|
*
|
|
* @since 5.9.0
|
|
*
|
|
* @param array $node The node with the presets to validate.
|
|
* @param array $slugs The slugs that should not be overridden.
|
|
* @return array The new node.
|
|
*/
|
|
protected static function filter_slugs( $node, $slugs ) {
|
|
if ( empty( $slugs ) ) {
|
|
return $node;
|
|
}
|
|
|
|
$new_node = array();
|
|
foreach ( $node as $value ) {
|
|
if ( isset( $value['slug'] ) && ! in_array( $value['slug'], $slugs, true ) ) {
|
|
$new_node[] = $value;
|
|
}
|
|
}
|
|
|
|
return $new_node;
|
|
}
|
|
|
|
/**
|
|
* Removes insecure data from theme.json.
|
|
*
|
|
* @since 5.9.0
|
|
*
|
|
* @param array $theme_json Structure to sanitize.
|
|
* @return array Sanitized structure.
|
|
*/
|
|
public static function remove_insecure_properties( $theme_json ) {
|
|
$sanitized = array();
|
|
|
|
$theme_json = WP_Theme_JSON_Schema::migrate( $theme_json );
|
|
|
|
$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 );
|
|
|
|
$blocks_metadata = static::get_blocks_metadata();
|
|
$style_nodes = static::get_style_nodes( $theme_json, $blocks_metadata );
|
|
|
|
foreach ( $style_nodes as $metadata ) {
|
|
$input = _wp_array_get( $theme_json, $metadata['path'], array() );
|
|
if ( empty( $input ) ) {
|
|
continue;
|
|
}
|
|
|
|
$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 ( array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
|
|
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 );
|
|
}
|
|
}
|
|
|
|
$setting_nodes = static::get_setting_nodes( $theme_json );
|
|
foreach ( $setting_nodes as $metadata ) {
|
|
$input = _wp_array_get( $theme_json, $metadata['path'], array() );
|
|
if ( empty( $input ) ) {
|
|
continue;
|
|
}
|
|
|
|
$output = static::remove_insecure_settings( $input );
|
|
if ( ! empty( $output ) ) {
|
|
_wp_array_set( $sanitized, $metadata['path'], $output );
|
|
}
|
|
}
|
|
|
|
if ( empty( $sanitized['styles'] ) ) {
|
|
unset( $theme_json['styles'] );
|
|
} else {
|
|
$theme_json['styles'] = $sanitized['styles'];
|
|
}
|
|
|
|
if ( empty( $sanitized['settings'] ) ) {
|
|
unset( $theme_json['settings'] );
|
|
} else {
|
|
$theme_json['settings'] = $sanitized['settings'];
|
|
}
|
|
|
|
return $theme_json;
|
|
}
|
|
|
|
/**
|
|
* Processes a setting node and returns the same node
|
|
* without the insecure settings.
|
|
*
|
|
* @since 5.9.0
|
|
*
|
|
* @param array $input Node to process.
|
|
* @return array
|
|
*/
|
|
protected static function remove_insecure_settings( $input ) {
|
|
$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 );
|
|
if ( null === $presets ) {
|
|
continue;
|
|
}
|
|
|
|
$escaped_preset = array();
|
|
foreach ( $presets as $preset ) {
|
|
if (
|
|
esc_attr( esc_html( $preset['name'] ) ) === $preset['name'] &&
|
|
sanitize_html_class( $preset['slug'] ) === $preset['slug']
|
|
) {
|
|
$value = null;
|
|
if ( isset( $preset_metadata['value_key'], $preset[ $preset_metadata['value_key'] ] ) ) {
|
|
$value = $preset[ $preset_metadata['value_key'] ];
|
|
} elseif (
|
|
isset( $preset_metadata['value_func'] ) &&
|
|
is_callable( $preset_metadata['value_func'] )
|
|
) {
|
|
$value = call_user_func( $preset_metadata['value_func'], $preset );
|
|
}
|
|
|
|
$preset_is_valid = true;
|
|
foreach ( $preset_metadata['properties'] as $property ) {
|
|
if ( ! static::is_safe_css_declaration( $property, $value ) ) {
|
|
$preset_is_valid = false;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if ( $preset_is_valid ) {
|
|
$escaped_preset[] = $preset;
|
|
}
|
|
}
|
|
}
|
|
|
|
if ( ! empty( $escaped_preset ) ) {
|
|
_wp_array_set( $output, $path_with_origin, $escaped_preset );
|
|
}
|
|
}
|
|
}
|
|
return $output;
|
|
}
|
|
|
|
/**
|
|
* Processes a style node and returns the same node
|
|
* without the insecure styles.
|
|
*
|
|
* @since 5.9.0
|
|
*
|
|
* @param array $input Node to process.
|
|
* @return array
|
|
*/
|
|
protected static function remove_insecure_styles( $input ) {
|
|
$output = array();
|
|
$declarations = static::compute_style_properties( $input );
|
|
|
|
foreach ( $declarations as $declaration ) {
|
|
if ( static::is_safe_css_declaration( $declaration['name'], $declaration['value'] ) ) {
|
|
$path = static::PROPERTIES_METADATA[ $declaration['name'] ];
|
|
|
|
// Check the value isn't an array before adding so as to not
|
|
// double up shorthand and longhand styles.
|
|
$value = _wp_array_get( $input, $path, array() );
|
|
if ( ! is_array( $value ) ) {
|
|
_wp_array_set( $output, $path, $value );
|
|
}
|
|
}
|
|
}
|
|
return $output;
|
|
}
|
|
|
|
/**
|
|
* Checks that a declaration provided by the user is safe.
|
|
*
|
|
* @since 5.9.0
|
|
*
|
|
* @param string $property_name Property name in a CSS declaration, i.e. the `color` in `color: red`.
|
|
* @param string $property_value Value in a CSS declaration, i.e. the `red` in `color: red`.
|
|
* @return bool
|
|
*/
|
|
protected static function is_safe_css_declaration( $property_name, $property_value ) {
|
|
$style_to_validate = $property_name . ': ' . $property_value;
|
|
$filtered = esc_html( safecss_filter_attr( $style_to_validate ) );
|
|
return ! empty( trim( $filtered ) );
|
|
}
|
|
|
|
/**
|
|
* Returns the raw data.
|
|
*
|
|
* @since 5.8.0
|
|
*
|
|
* @return array Raw data.
|
|
*/
|
|
public function get_raw_data() {
|
|
return $this->theme_json;
|
|
}
|
|
|
|
/**
|
|
* Transforms the given editor settings according the
|
|
* add_theme_support format to the theme.json format.
|
|
*
|
|
* @since 5.8.0
|
|
*
|
|
* @param array $settings Existing editor settings.
|
|
* @return array Config that adheres to the theme.json schema.
|
|
*/
|
|
public static function get_from_editor_settings( $settings ) {
|
|
$theme_settings = array(
|
|
'version' => static::LATEST_SCHEMA,
|
|
'settings' => array(),
|
|
);
|
|
|
|
// 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'];
|
|
}
|
|
|
|
if ( isset( $settings['fontSizes'] ) ) {
|
|
$font_sizes = $settings['fontSizes'];
|
|
// Back-compatibility for presets without units.
|
|
foreach ( $font_sizes as $key => $font_size ) {
|
|
if ( is_numeric( $font_size['size'] ) ) {
|
|
$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'];
|
|
}
|
|
|
|
return $theme_settings;
|
|
}
|
|
|
|
/**
|
|
* Returns the current theme's wanted patterns(slugs) to be
|
|
* registered from Pattern Directory.
|
|
*
|
|
* @since 6.0.0
|
|
*
|
|
* @return string[]
|
|
*/
|
|
public function get_patterns() {
|
|
if ( isset( $this->theme_json['patterns'] ) && is_array( $this->theme_json['patterns'] ) ) {
|
|
return $this->theme_json['patterns'];
|
|
}
|
|
return array();
|
|
}
|
|
|
|
/**
|
|
* Returns a valid theme.json as provided by a theme.
|
|
*
|
|
* Unlike get_raw_data() this returns the presets flattened, as provided by a theme.
|
|
* This also uses appearanceTools instead of their opt-ins if all of them are true.
|
|
*
|
|
* @since 6.0.0
|
|
*
|
|
* @return array
|
|
*/
|
|
public function get_data() {
|
|
$output = $this->theme_json;
|
|
$nodes = static::get_setting_nodes( $output );
|
|
|
|
/**
|
|
* Flatten the theme & custom origins into a single one.
|
|
*
|
|
* For example, the following:
|
|
*
|
|
* {
|
|
* "settings": {
|
|
* "color": {
|
|
* "palette": {
|
|
* "theme": [ {} ],
|
|
* "custom": [ {} ]
|
|
* }
|
|
* }
|
|
* }
|
|
* }
|
|
*
|
|
* will be converted to:
|
|
*
|
|
* {
|
|
* "settings": {
|
|
* "color": {
|
|
* "palette": [ {} ]
|
|
* }
|
|
* }
|
|
* }
|
|
*/
|
|
foreach ( $nodes as $node ) {
|
|
foreach ( static::PRESETS_METADATA as $preset_metadata ) {
|
|
$path = array_merge( $node['path'], $preset_metadata['path'] );
|
|
$preset = _wp_array_get( $output, $path, null );
|
|
if ( null === $preset ) {
|
|
continue;
|
|
}
|
|
|
|
$items = array();
|
|
if ( isset( $preset['theme'] ) ) {
|
|
foreach ( $preset['theme'] as $item ) {
|
|
$slug = $item['slug'];
|
|
unset( $item['slug'] );
|
|
$items[ $slug ] = $item;
|
|
}
|
|
}
|
|
if ( isset( $preset['custom'] ) ) {
|
|
foreach ( $preset['custom'] as $item ) {
|
|
$slug = $item['slug'];
|
|
unset( $item['slug'] );
|
|
$items[ $slug ] = $item;
|
|
}
|
|
}
|
|
$flattened_preset = array();
|
|
foreach ( $items as $slug => $value ) {
|
|
$flattened_preset[] = array_merge( array( 'slug' => $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.
|
|
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).
|
|
$opt_in_value = _wp_array_get( $output, $full_path, 'unset prop' );
|
|
if ( 'unset prop' === $opt_in_value ) {
|
|
$all_opt_ins_are_set = false;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if ( $all_opt_ins_are_set ) {
|
|
_wp_array_set( $output, array_merge( $node['path'], array( 'appearanceTools' ) ), 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).
|
|
$opt_in_value = _wp_array_get( $output, $full_path, 'unset prop' );
|
|
if ( true !== $opt_in_value ) {
|
|
continue;
|
|
}
|
|
|
|
// The following could be improved to be path independent.
|
|
// At the moment it relies on a couple of assumptions:
|
|
//
|
|
// - all opt-ins having a path of size 2.
|
|
// - there's two sources of settings: the top-level and the block-level.
|
|
if (
|
|
( 1 === count( $node['path'] ) ) &&
|
|
( 'settings' === $node['path'][0] )
|
|
) {
|
|
// Top-level settings.
|
|
unset( $output['settings'][ $opt_in_path[0] ][ $opt_in_path[1] ] );
|
|
if ( empty( $output['settings'][ $opt_in_path[0] ] ) ) {
|
|
unset( $output['settings'][ $opt_in_path[0] ] );
|
|
}
|
|
} elseif (
|
|
( 3 === count( $node['path'] ) ) &&
|
|
( 'settings' === $node['path'][0] ) &&
|
|
( 'blocks' === $node['path'][1] )
|
|
) {
|
|
// Block-level settings.
|
|
$block_name = $node['path'][2];
|
|
unset( $output['settings']['blocks'][ $block_name ][ $opt_in_path[0] ][ $opt_in_path[1] ] );
|
|
if ( empty( $output['settings']['blocks'][ $block_name ][ $opt_in_path[0] ] ) ) {
|
|
unset( $output['settings']['blocks'][ $block_name ][ $opt_in_path[0] ] );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
wp_recursive_ksort( $output );
|
|
|
|
return $output;
|
|
}
|
|
|
|
}
|