replace.
* @param string $slug The slug value to use to generate the custom property.
* @return string The CSS Custom Property. Something along the lines of `--wp--preset--color--black`.
*/
protected static function replace_slug_in_string( $input, $slug ) {
return strtr( $input, array( '$slug' => $slug ) );
}
/**
* Given the block settings, extracts the CSS Custom Properties
* for the presets and adds them to the $declarations array
* following the format:
*
* array(
* 'name' => 'property_name',
* 'value' => 'property_value,
* )
*
* @since 5.8.0
* @since 5.9.0 Added the `$origins` parameter.
*
* @param array $settings Settings to process.
* @param string[] $origins List of origins to process.
* @return array The modified $declarations.
*/
protected static function compute_preset_vars( $settings, $origins ) {
$declarations = array();
foreach ( static::PRESETS_METADATA as $preset_metadata ) {
if ( empty( $preset_metadata['css_vars'] ) ) {
continue;
}
$values_by_slug = static::get_settings_values_by_slug( $settings, $preset_metadata, $origins );
foreach ( $values_by_slug as $slug => $value ) {
$declarations[] = array(
'name' => static::replace_slug_in_string( $preset_metadata['css_vars'], $slug ),
'value' => $value,
);
}
}
return $declarations;
}
/**
* Given an array of settings, extracts the CSS Custom Properties
* for the custom values and adds them to the $declarations
* array following the format:
*
* array(
* 'name' => 'property_name',
* 'value' => 'property_value,
* )
*
* @since 5.8.0
*
* @param array $settings Settings to process.
* @return array The modified $declarations.
*/
protected static function compute_theme_vars( $settings ) {
$declarations = array();
$custom_values = isset( $settings['custom'] ) ? $settings['custom'] : array();
$css_vars = static::flatten_tree( $custom_values );
foreach ( $css_vars as $key => $value ) {
$declarations[] = array(
'name' => '--wp--custom--' . $key,
'value' => $value,
);
}
return $declarations;
}
/**
* Given a tree, it creates a flattened one
* by merging the keys and binding the leaf values
* to the new keys.
*
* It also transforms camelCase names into kebab-case
* and substitutes '/' by '-'.
*
* This is thought to be useful to generate
* CSS Custom Properties from a tree,
* although there's nothing in the implementation
* of this function that requires that format.
*
* For example, assuming the given prefix is '--wp'
* and the token is '--', for this input tree:
*
* {
* 'some/property': 'value',
* 'nestedProperty': {
* 'sub-property': 'value'
* }
* }
*
* it'll return this output:
*
* {
* '--wp--some-property': 'value',
* '--wp--nested-property--sub-property': 'value'
* }
*
* @since 5.8.0
*
* @param array $tree Input tree to process.
* @param string $prefix Optional. Prefix to prepend to each variable. Default empty string.
* @param string $token Optional. Token to use between levels. Default '--'.
* @return array The flattened tree.
*/
protected static function flatten_tree( $tree, $prefix = '', $token = '--' ) {
$result = array();
foreach ( $tree as $property => $value ) {
$new_key = $prefix . str_replace(
'/',
'-',
strtolower( _wp_to_kebab_case( $property ) )
);
if ( is_array( $value ) ) {
$new_prefix = $new_key . $token;
$flattened_subtree = static::flatten_tree( $value, $new_prefix, $token );
foreach ( $flattened_subtree as $subtree_key => $subtree_value ) {
$result[ $subtree_key ] = $subtree_value;
}
} else {
$result[ $new_key ] = $value;
}
}
return $result;
}
/**
* Given a styles array, it extracts the style properties
* and adds them to the $declarations array following the format:
*
* array(
* 'name' => 'property_name',
* 'value' => 'property_value',
* )
*
* @since 5.8.0
* @since 5.9.0 Added the `$settings` and `$properties` parameters.
* @since 6.1.0 Added `$theme_json`, `$selector`, and `$use_root_padding` parameters.
* @since 6.5.0 Output a `min-height: unset` rule when `aspect-ratio` is set.
* @since 6.6.0 Pass current theme JSON settings to wp_get_typography_font_size_value(), and process background properties.
* @since 6.7.0 `ref` resolution of background properties, and assigning custom default values.
*
* @param array $styles Styles to process.
* @param array $settings Theme settings.
* @param array $properties Properties metadata.
* @param array $theme_json Theme JSON array.
* @param string $selector The style block selector.
* @param boolean $use_root_padding Whether to add custom properties at root level.
* @return array Returns the modified $declarations.
*/
protected static function compute_style_properties( $styles, $settings = array(), $properties = null, $theme_json = null, $selector = null, $use_root_padding = null ) {
if ( empty( $styles ) ) {
return array();
}
if ( null === $properties ) {
$properties = static::PROPERTIES_METADATA;
}
$declarations = array();
$root_variable_duplicates = array();
$root_style_length = strlen( '--wp--style--root--' );
foreach ( $properties as $css_property => $value_path ) {
if ( ! is_array( $value_path ) ) {
continue;
}
$is_root_style = str_starts_with( $css_property, '--wp--style--root--' );
if ( $is_root_style && ( static::ROOT_BLOCK_SELECTOR !== $selector || ! $use_root_padding ) ) {
continue;
}
$value = static::get_property_value( $styles, $value_path, $theme_json );
/*
* Root-level padding styles don't currently support strings with CSS shorthand values.
* This may change: https://github.com/WordPress/gutenberg/issues/40132.
*/
if ( '--wp--style--root--padding' === $css_property && is_string( $value ) ) {
continue;
}
if ( $is_root_style && $use_root_padding ) {
$root_variable_duplicates[] = substr( $css_property, $root_style_length );
}
/*
* Processes background image styles.
* If the value is a URL, it will be converted to a CSS `url()` value.
* For uploaded image (images with a database ID), apply size and position defaults,
* equal to those applied in block supports in lib/background.php.
*/
if ( 'background-image' === $css_property && ! empty( $value ) ) {
$background_styles = wp_style_engine_get_styles(
array( 'background' => array( 'backgroundImage' => $value ) )
);
$value = $background_styles['declarations'][ $css_property ];
}
if ( empty( $value ) && static::ROOT_BLOCK_SELECTOR !== $selector && ! empty( $styles['background']['backgroundImage']['id'] ) ) {
if ( 'background-size' === $css_property ) {
$value = 'cover';
}
// If the background size is set to `contain` and no position is set, set the position to `center`.
if ( 'background-position' === $css_property ) {
$background_size = $styles['background']['backgroundSize'] ?? null;
$value = 'contain' === $background_size ? '50% 50%' : null;
}
}
// Skip if empty and not "0" or value represents array of longhand values.
$has_missing_value = empty( $value ) && ! is_numeric( $value );
if ( $has_missing_value || is_array( $value ) ) {
continue;
}
/*
* Look up protected properties, keyed by value path.
* Skip protected properties that are explicitly set to `null`.
*/
$path_string = implode( '.', $value_path );
if (
isset( static::PROTECTED_PROPERTIES[ $path_string ] ) &&
_wp_array_get( $settings, static::PROTECTED_PROPERTIES[ $path_string ], null ) === null
) {
continue;
}
// Calculates fluid typography rules where available.
if ( 'font-size' === $css_property ) {
/*
* wp_get_typography_font_size_value() will check
* if fluid typography has been activated and also
* whether the incoming value can be converted to a fluid value.
* Values that already have a clamp() function will not pass the test,
* and therefore the original $value will be returned.
* Pass the current theme_json settings to override any global settings.
*/
$value = wp_get_typography_font_size_value( array( 'size' => $value ), $settings );
}
if ( 'aspect-ratio' === $css_property ) {
// For aspect ratio to work, other dimensions rules must be unset.
// This ensures that a fixed height does not override the aspect ratio.
$declarations[] = array(
'name' => 'min-height',
'value' => 'unset',
);
}
$declarations[] = array(
'name' => $css_property,
'value' => $value,
);
}
// If a variable value is added to the root, the corresponding property should be removed.
foreach ( $root_variable_duplicates as $duplicate ) {
$discard = array_search( $duplicate, array_column( $declarations, 'name' ), true );
if ( is_numeric( $discard ) ) {
array_splice( $declarations, $discard, 1 );
}
}
return $declarations;
}
/**
* Returns the style property for the given path.
*
* It also converts references to a path to the value
* stored at that location, e.g.
* { "ref": "style.color.background" } => "#fff".
*
* @since 5.8.0
* @since 5.9.0 Added support for values of array type, which are returned as is.
* @since 6.1.0 Added the `$theme_json` parameter.
* @since 6.3.0 It no longer converts the internal format "var:preset|color|secondary"
* to the standard form "--wp--preset--color--secondary".
* This is already done by the sanitize method,
* so every property will be in the standard form.
* @since 6.7.0 Added support for background image refs.
*
* @param array $styles Styles subtree.
* @param array $path Which property to process.
* @param array $theme_json Theme JSON array.
* @return string|array Style property value.
*/
protected static function get_property_value( $styles, $path, $theme_json = null ) {
$value = _wp_array_get( $styles, $path, '' );
if ( '' === $value || null === $value ) {
// No need to process the value further.
return '';
}
/*
* This converts references to a path to the value at that path
* where the value is an array with a "ref" key, pointing to a path.
* For example: { "ref": "style.color.background" } => "#fff".
* In the case of backgroundImage, if both a ref and a URL are present in the value,
* the URL takes precedence and the ref is ignored.
*/
if ( is_array( $value ) && isset( $value['ref'] ) ) {
$value_path = explode( '.', $value['ref'] );
$ref_value = _wp_array_get( $theme_json, $value_path );
// Background Image refs can refer to a string or an array containing a URL string.
$ref_value_url = $ref_value['url'] ?? null;
// Only use the ref value if we find anything.
if ( ! empty( $ref_value ) && ( is_string( $ref_value ) || is_string( $ref_value_url ) ) ) {
$value = $ref_value;
}
if ( is_array( $ref_value ) && isset( $ref_value['ref'] ) ) {
$path_string = json_encode( $path );
$ref_value_string = json_encode( $ref_value );
_doing_it_wrong(
'get_property_value',
sprintf(
/* translators: 1: theme.json, 2: Value name, 3: Value path, 4: Another value name. */
__( 'Your %1$s file uses a dynamic value (%2$s) for the path at %3$s. However, the value at %3$s is also a dynamic value (pointing to %4$s) and pointing to another dynamic value is not supported. Please update %3$s to point directly to %4$s.' ),
'theme.json',
$ref_value_string,
$path_string,
$ref_value['ref']
),
'6.1.0'
);
}
}
if ( is_array( $value ) ) {
return $value;
}
return $value;
}
/**
* Builds metadata for the setting nodes, which returns in the form of:
*
* [
* [
* 'path' => ['path', 'to', 'some', 'node' ],
* 'selector' => 'CSS selector for some node'
* ],
* [
* 'path' => [ 'path', 'to', 'other', 'node' ],
* 'selector' => 'CSS selector for other node'
* ],
* ]
*
* @since 5.8.0
*
* @param array $theme_json The tree to extract setting nodes from.
* @param array $selectors List of selectors per block.
* @return array An array of setting nodes metadata.
*/
protected static function get_setting_nodes( $theme_json, $selectors = array() ) {
$nodes = array();
if ( ! isset( $theme_json['settings'] ) ) {
return $nodes;
}
// Top-level.
$nodes[] = array(
'path' => array( 'settings' ),
'selector' => static::ROOT_CSS_PROPERTIES_SELECTOR,
);
// Calculate paths for blocks.
if ( ! isset( $theme_json['settings']['blocks'] ) ) {
return $nodes;
}
foreach ( $theme_json['settings']['blocks'] as $name => $node ) {
$selector = null;
if ( isset( $selectors[ $name ]['selector'] ) ) {
$selector = $selectors[ $name ]['selector'];
}
$nodes[] = array(
'path' => array( 'settings', 'blocks', $name ),
'selector' => $selector,
);
}
return $nodes;
}
/**
* Builds metadata for the style nodes, which returns in the form of:
*
* [
* [
* 'path' => [ 'path', 'to', 'some', 'node' ],
* 'selector' => 'CSS selector for some node',
* 'duotone' => 'CSS selector for duotone for some node'
* ],
* [
* 'path' => ['path', 'to', 'other', 'node' ],
* 'selector' => 'CSS selector for other node',
* 'duotone' => null
* ],
* ]
*
* @since 5.8.0
* @since 6.6.0 Added options array for modifying generated nodes.
*
* @param array $theme_json The tree to extract style nodes from.
* @param array $selectors List of selectors per block.
* @param array $options {
* Optional. An array of options for now used for internal purposes only (may change without notice).
*
* @type bool $include_block_style_variations Includes style nodes for block style variations. Default false.
* }
* @return array An array of style nodes metadata.
*/
protected static function get_style_nodes( $theme_json, $selectors = array(), $options = array() ) {
$nodes = array();
if ( ! isset( $theme_json['styles'] ) ) {
return $nodes;
}
// Top-level.
$nodes[] = array(
'path' => array( 'styles' ),
'selector' => static::ROOT_BLOCK_SELECTOR,
);
if ( isset( $theme_json['styles']['elements'] ) ) {
foreach ( self::ELEMENTS as $element => $selector ) {
if ( ! isset( $theme_json['styles']['elements'][ $element ] ) ) {
continue;
}
$nodes[] = array(
'path' => array( 'styles', 'elements', $element ),
'selector' => static::ELEMENTS[ $element ],
);
// Handle any pseudo selectors for the element.
if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] ) ) {
foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
if ( isset( $theme_json['styles']['elements'][ $element ][ $pseudo_selector ] ) ) {
$nodes[] = array(
'path' => array( 'styles', 'elements', $element ),
'selector' => static::append_to_selector( static::ELEMENTS[ $element ], $pseudo_selector ),
);
}
}
}
}
}
// Blocks.
if ( ! isset( $theme_json['styles']['blocks'] ) ) {
return $nodes;
}
$block_nodes = static::get_block_nodes( $theme_json, $selectors, $options );
foreach ( $block_nodes as $block_node ) {
$nodes[] = $block_node;
}
/**
* Filters the list of style nodes with metadata.
*
* This allows for things like loading block CSS independently.
*
* @since 6.1.0
*
* @param array $nodes Style nodes with metadata.
*/
return apply_filters( 'wp_theme_json_get_style_nodes', $nodes );
}
/**
* A public helper to get the block nodes from a theme.json file.
*
* @since 6.1.0
*
* @return array The block nodes in theme.json.
*/
public function get_styles_block_nodes() {
return static::get_block_nodes( $this->theme_json );
}
/**
* Returns a filtered declarations array if there is a separator block with only a background
* style defined in theme.json by adding a color attribute to reflect the changes in the front.
*
* @since 6.1.1
*
* @param array $declarations List of declarations.
* @return array $declarations List of declarations filtered.
*/
private static function update_separator_declarations( $declarations ) {
$background_color = '';
$border_color_matches = false;
$text_color_matches = false;
foreach ( $declarations as $declaration ) {
if ( 'background-color' === $declaration['name'] && ! $background_color && isset( $declaration['value'] ) ) {
$background_color = $declaration['value'];
} elseif ( 'border-color' === $declaration['name'] ) {
$border_color_matches = true;
} elseif ( 'color' === $declaration['name'] ) {
$text_color_matches = true;
}
if ( $background_color && $border_color_matches && $text_color_matches ) {
break;
}
}
if ( $background_color && ! $border_color_matches && ! $text_color_matches ) {
$declarations[] = array(
'name' => 'color',
'value' => $background_color,
);
}
return $declarations;
}
/**
* An internal method to get the block nodes from a theme.json file.
*
* @since 6.1.0
* @since 6.3.0 Refactored and stabilized selectors API.
* @since 6.6.0 Added optional selectors and options for generating block nodes.
* @since 6.7.0 Added $include_node_paths_only option.
*
* @param array $theme_json The theme.json converted to an array.
* @param array $selectors Optional list of selectors per block.
* @param array $options {
* Optional. An array of options for now used for internal purposes only (may change without notice).
*
* @type bool $include_block_style_variations Include nodes for block style variations. Default false.
* @type bool $include_node_paths_only Return only block nodes node paths. Default false.
* }
* @return array The block nodes in theme.json.
*/
private static function get_block_nodes( $theme_json, $selectors = array(), $options = array() ) {
$nodes = array();
if ( ! isset( $theme_json['styles']['blocks'] ) ) {
return $nodes;
}
$include_variations = $options['include_block_style_variations'] ?? false;
$include_node_paths_only = $options['include_node_paths_only'] ?? false;
// If only node paths are to be returned, skip selector assignment.
if ( ! $include_node_paths_only ) {
$selectors = empty( $selectors ) ? static::get_blocks_metadata() : $selectors;
}
foreach ( $theme_json['styles']['blocks'] as $name => $node ) {
$node_path = array( 'styles', 'blocks', $name );
if ( $include_node_paths_only ) {
$nodes[] = array(
'path' => $node_path,
);
} else {
$selector = null;
if ( isset( $selectors[ $name ]['selector'] ) ) {
$selector = $selectors[ $name ]['selector'];
}
$duotone_selector = null;
if ( isset( $selectors[ $name ]['duotone'] ) ) {
$duotone_selector = $selectors[ $name ]['duotone'];
}
$feature_selectors = null;
if ( isset( $selectors[ $name ]['selectors'] ) ) {
$feature_selectors = $selectors[ $name ]['selectors'];
}
$variation_selectors = array();
if ( $include_variations && isset( $node['variations'] ) ) {
foreach ( $node['variations'] as $variation => $node ) {
$variation_selectors[] = array(
'path' => array( 'styles', 'blocks', $name, 'variations', $variation ),
'selector' => $selectors[ $name ]['styleVariations'][ $variation ],
);
}
}
$nodes[] = array(
'name' => $name,
'path' => $node_path,
'selector' => $selector,
'selectors' => $feature_selectors,
'duotone' => $duotone_selector,
'features' => $feature_selectors,
'variations' => $variation_selectors,
'css' => $selector,
);
}
if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'] ) ) {
foreach ( $theme_json['styles']['blocks'][ $name ]['elements'] as $element => $node ) {
$node_path = array( 'styles', 'blocks', $name, 'elements', $element );
if ( $include_node_paths_only ) {
$nodes[] = array(
'path' => $node_path,
);
continue;
}
$nodes[] = array(
'path' => $node_path,
'selector' => $selectors[ $name ]['elements'][ $element ],
);
// Handle any pseudo selectors for the element.
if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] ) ) {
foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'][ $element ][ $pseudo_selector ] ) ) {
$node_path = array( 'styles', 'blocks', $name, 'elements', $element );
if ( $include_node_paths_only ) {
$nodes[] = array(
'path' => $node_path,
);
continue;
}
$nodes[] = array(
'path' => $node_path,
'selector' => static::append_to_selector( $selectors[ $name ]['elements'][ $element ], $pseudo_selector ),
);
}
}
}
}
}
}
return $nodes;
}
/**
* Gets the CSS rules for a particular block from theme.json.
*
* @since 6.1.0
* @since 6.6.0 Setting a min-height of HTML when root styles have a background gradient or image.
* Updated general global styles specificity to 0-1-0.
* Fixed custom CSS output in block style variations.
*
* @param array $block_metadata Metadata about the block to get styles for.
*
* @return string Styles for the block.
*/
public function get_styles_for_block( $block_metadata ) {
$node = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
$use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments'];
$selector = $block_metadata['selector'];
$settings = isset( $this->theme_json['settings'] ) ? $this->theme_json['settings'] : array();
$feature_declarations = static::get_feature_declarations_for_node( $block_metadata, $node );
$is_root_selector = static::ROOT_BLOCK_SELECTOR === $selector;
// If there are style variations, generate the declarations for them, including any feature selectors the block may have.
$style_variation_declarations = array();
$style_variation_custom_css = array();
if ( ! empty( $block_metadata['variations'] ) ) {
foreach ( $block_metadata['variations'] as $style_variation ) {
$style_variation_node = _wp_array_get( $this->theme_json, $style_variation['path'], array() );
$clean_style_variation_selector = trim( $style_variation['selector'] );
// Generate any feature/subfeature style declarations for the current style variation.
$variation_declarations = static::get_feature_declarations_for_node( $block_metadata, $style_variation_node );
// Combine selectors with style variation's selector and add to overall style variation declarations.
foreach ( $variation_declarations as $current_selector => $new_declarations ) {
// If current selector includes block classname, remove it but leave the whitespace in.
$shortened_selector = str_replace( $block_metadata['selector'] . ' ', ' ', $current_selector );
// Prepend the variation selector to the current selector.
$split_selectors = explode( ',', $shortened_selector );
$updated_selectors = array_map(
static function ( $split_selector ) use ( $clean_style_variation_selector ) {
return $clean_style_variation_selector . $split_selector;
},
$split_selectors
);
$combined_selectors = implode( ',', $updated_selectors );
// Add the new declarations to the overall results under the modified selector.
$style_variation_declarations[ $combined_selectors ] = $new_declarations;
}
// Compute declarations for remaining styles not covered by feature level selectors.
$style_variation_declarations[ $style_variation['selector'] ] = static::compute_style_properties( $style_variation_node, $settings, null, $this->theme_json );
// Store custom CSS for the style variation.
if ( isset( $style_variation_node['css'] ) ) {
$style_variation_custom_css[ $style_variation['selector'] ] = $this->process_blocks_custom_css( $style_variation_node['css'], $style_variation['selector'] );
}
}
}
/*
* Get a reference to element name from path.
* $block_metadata['path'] = array( 'styles','elements','link' );
* Make sure that $block_metadata['path'] describes an element node, like [ 'styles', 'element', 'link' ].
* Skip non-element paths like just ['styles'].
*/
$is_processing_element = in_array( 'elements', $block_metadata['path'], true );
$current_element = $is_processing_element ? $block_metadata['path'][ count( $block_metadata['path'] ) - 1 ] : null;
$element_pseudo_allowed = array();
if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] ) ) {
$element_pseudo_allowed = static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ];
}
/*
* Check for allowed pseudo classes (e.g. ":hover") from the $selector ("a:hover").
* This also resets the array keys.
*/
$pseudo_matches = array_values(
array_filter(
$element_pseudo_allowed,
static function ( $pseudo_selector ) use ( $selector ) {
return str_contains( $selector, $pseudo_selector );
}
)
);
$pseudo_selector = isset( $pseudo_matches[0] ) ? $pseudo_matches[0] : null;
/*
* If the current selector is a pseudo selector that's defined in the allow list for the current
* element then compute the style properties for it.
* Otherwise just compute the styles for the default selector as normal.
*/
if ( $pseudo_selector && isset( $node[ $pseudo_selector ] ) &&
isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] )
&& in_array( $pseudo_selector, static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ], true )
) {
$declarations = static::compute_style_properties( $node[ $pseudo_selector ], $settings, null, $this->theme_json, $selector, $use_root_padding );
} else {
$declarations = static::compute_style_properties( $node, $settings, null, $this->theme_json, $selector, $use_root_padding );
}
$block_rules = '';
/*
* 1. Bespoke declaration modifiers:
* - 'filter': Separate the declarations that use the general selector
* from the ones using the duotone selector.
* - 'background|background-image': set the html min-height to 100%
* to ensure the background covers the entire viewport.
*/
$declarations_duotone = array();
$should_set_root_min_height = false;
foreach ( $declarations as $index => $declaration ) {
if ( 'filter' === $declaration['name'] ) {
/*
* 'unset' filters happen when a filter is unset
* in the site-editor UI. Because the 'unset' value
* in the user origin overrides the value in the
* theme origin, we can skip rendering anything
* here as no filter needs to be applied anymore.
* So only add declarations to with values other
* than 'unset'.
*/
if ( 'unset' !== $declaration['value'] ) {
$declarations_duotone[] = $declaration;
}
unset( $declarations[ $index ] );
}
if ( $is_root_selector && ( 'background-image' === $declaration['name'] || 'background' === $declaration['name'] ) ) {
$should_set_root_min_height = true;
}
}
/*
* If root styles has a background-image or a background (gradient) set,
* set the min-height to '100%'. Minus `--wp-admin--admin-bar--height` for logged-in view.
* Setting the CSS rule on the HTML tag ensures background gradients and images behave similarly,
* and matches the behavior of the site editor.
*/
if ( $should_set_root_min_height ) {
$block_rules .= static::to_ruleset(
'html',
array(
array(
'name' => 'min-height',
'value' => 'calc(100% - var(--wp-admin--admin-bar--height, 0px))',
),
)
);
}
// Update declarations if there are separators with only background color defined.
if ( '.wp-block-separator' === $selector ) {
$declarations = static::update_separator_declarations( $declarations );
}
/*
* Root selector (body) styles should not be wrapped in `:root where()` to keep
* specificity at (0,0,1) and maintain backwards compatibility.
*
* Top-level element styles using element-only specificity selectors should
* not get wrapped in `:root :where()` to maintain backwards compatibility.
*
* Pseudo classes, e.g. :hover, :focus etc., are a class-level selector so
* still need to be wrapped in `:root :where` to cap specificity for nested
* variations etc. Pseudo selectors won't match the ELEMENTS selector exactly.
*/
$element_only_selector = $is_root_selector || (
$current_element &&
isset( static::ELEMENTS[ $current_element ] ) &&
// buttons, captions etc. still need `:root :where()` as they are class based selectors.
! isset( static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES[ $current_element ] ) &&
static::ELEMENTS[ $current_element ] === $selector
);
// 2. Generate and append the rules that use the general selector.
$general_selector = $element_only_selector ? $selector : ":root :where($selector)";
$block_rules .= static::to_ruleset( $general_selector, $declarations );
// 3. Generate and append the rules that use the duotone selector.
if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
$block_rules .= static::to_ruleset( $block_metadata['duotone'], $declarations_duotone );
}
// 4. Generate Layout block gap styles.
if (
! $is_root_selector &&
! empty( $block_metadata['name'] )
) {
$block_rules .= $this->get_layout_styles( $block_metadata );
}
// 5. Generate and append the feature level rulesets.
foreach ( $feature_declarations as $feature_selector => $individual_feature_declarations ) {
$block_rules .= static::to_ruleset( ":root :where($feature_selector)", $individual_feature_declarations );
}
// 6. Generate and append the style variation rulesets.
foreach ( $style_variation_declarations as $style_variation_selector => $individual_style_variation_declarations ) {
$block_rules .= static::to_ruleset( ":root :where($style_variation_selector)", $individual_style_variation_declarations );
if ( isset( $style_variation_custom_css[ $style_variation_selector ] ) ) {
$block_rules .= $style_variation_custom_css[ $style_variation_selector ];
}
}
// 7. Generate and append any custom CSS rules.
if ( isset( $node['css'] ) && ! $is_root_selector ) {
$block_rules .= $this->process_blocks_custom_css( $node['css'], $selector );
}
return $block_rules;
}
/**
* Outputs the CSS for layout rules on the root.
*
* @since 6.1.0
* @since 6.6.0 Use `ROOT_CSS_PROPERTIES_SELECTOR` for CSS custom properties and improved consistency of root padding rules.
* Updated specificity of body margin reset and first/last child selectors.
*
* @param string $selector The root node selector.
* @param array $block_metadata The metadata for the root block.
* @return string The additional root rules CSS.
*/
public function get_root_layout_rules( $selector, $block_metadata ) {
$css = '';
$settings = isset( $this->theme_json['settings'] ) ? $this->theme_json['settings'] : array();
$use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments'];
/*
* If there are content and wide widths in theme.json, output them
* as custom properties on the body element so all blocks can use them.
*/
if ( isset( $settings['layout']['contentSize'] ) || isset( $settings['layout']['wideSize'] ) ) {
$content_size = isset( $settings['layout']['contentSize'] ) ? $settings['layout']['contentSize'] : $settings['layout']['wideSize'];
$content_size = static::is_safe_css_declaration( 'max-width', $content_size ) ? $content_size : 'initial';
$wide_size = isset( $settings['layout']['wideSize'] ) ? $settings['layout']['wideSize'] : $settings['layout']['contentSize'];
$wide_size = static::is_safe_css_declaration( 'max-width', $wide_size ) ? $wide_size : 'initial';
$css .= static::ROOT_CSS_PROPERTIES_SELECTOR . ' { --wp--style--global--content-size: ' . $content_size . ';';
$css .= '--wp--style--global--wide-size: ' . $wide_size . '; }';
}
/*
* Reset default browser margin on the body element.
* This is set on the body selector **before** generating the ruleset
* from the `theme.json`. This is to ensure that if the `theme.json` declares
* `margin` in its `spacing` declaration for the `body` element then these
* user-generated values take precedence in the CSS cascade.
* @link https://github.com/WordPress/gutenberg/issues/36147.
*/
$css .= ':where(body) { margin: 0; }';
if ( $use_root_padding ) {
// Top and bottom padding are applied to the outer block container.
$css .= '.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }';
// Right and left padding are applied to the first container with `.has-global-padding` class.
$css .= '.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
// Alignfull children of the container with left and right padding have negative margins so they can still be full width.
$css .= '.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';
// Nested children of the container with left and right padding that are not full aligned do not get padding, unless they are direct children of an alignfull flow container.
$css .= '.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }';
// Alignfull direct children of the containers that are targeted by the rule above do not need negative margins.
$css .= '.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0; }';
}
$css .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
$css .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
$css .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
// Block gap styles will be output unless explicitly set to `null`. See static::PROTECTED_PROPERTIES.
if ( isset( $this->theme_json['settings']['spacing']['blockGap'] ) ) {
$block_gap_value = static::get_property_value( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ) );
$css .= ":where(.wp-site-blocks) > * { margin-block-start: $block_gap_value; margin-block-end: 0; }";
$css .= ':where(.wp-site-blocks) > :first-child { margin-block-start: 0; }';
$css .= ':where(.wp-site-blocks) > :last-child { margin-block-end: 0; }';
// For backwards compatibility, ensure the legacy block gap CSS variable is still available.
$css .= static::ROOT_CSS_PROPERTIES_SELECTOR . " { --wp--style--block-gap: $block_gap_value; }";
}
$css .= $this->get_layout_styles( $block_metadata );
return $css;
}
/**
* For metadata values that can either be booleans or paths to booleans, gets the value.
*
* $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_value Default value if the referenced path is missing.
* Default false.
* @return bool Value of boolean metadata.
*/
protected static function get_metadata_boolean( $data, $path, $default_value = false ) {
if ( is_bool( $path ) ) {
return $path;
}
if ( is_array( $path ) ) {
$value = _wp_array_get( $data, $path );
if ( null !== $value ) {
return $value;
}
}
return $default_value;
}
/**
* Merges new incoming data.
*
* @since 5.8.0
* @since 5.9.0 Duotone preset also has origins.
* @since 6.7.0 Replace background image objects during merge.
*
* @param WP_Theme_JSON $incoming Data to merge.
*/
public function merge( $incoming ) {
$incoming_data = $incoming->get_raw_data();
$this->theme_json = array_replace_recursive( $this->theme_json, $incoming_data );
/*
* Recompute all the spacing sizes based on the new hierarchy of data. In the constructor
* spacingScale and spacingSizes are both keyed by origin and VALID_ORIGINS is ordered, so
* we can allow partial spacingScale data to inherit missing data from earlier layers when
* computing the spacing sizes.
*
* This happens before the presets are merged to ensure that default spacing sizes can be
* removed from the theme origin if $prevent_override is true.
*/
$flattened_spacing_scale = array();
foreach ( static::VALID_ORIGINS as $origin ) {
$scale_path = array( 'settings', 'spacing', 'spacingScale', $origin );
// Apply the base spacing scale to the current layer.
$base_spacing_scale = _wp_array_get( $this->theme_json, $scale_path, array() );
$flattened_spacing_scale = array_replace( $flattened_spacing_scale, $base_spacing_scale );
$spacing_scale = _wp_array_get( $incoming_data, $scale_path, null );
if ( ! isset( $spacing_scale ) ) {
continue;
}
// Allow partial scale settings by merging with lower layers.
$flattened_spacing_scale = array_replace( $flattened_spacing_scale, $spacing_scale );
// Generate and merge the scales for this layer.
$sizes_path = array( 'settings', 'spacing', 'spacingSizes', $origin );
$spacing_sizes = _wp_array_get( $incoming_data, $sizes_path, array() );
$spacing_scale_sizes = static::compute_spacing_sizes( $flattened_spacing_scale );
$merged_spacing_sizes = static::merge_spacing_sizes( $spacing_scale_sizes, $spacing_sizes );
_wp_array_set( $incoming_data, $sizes_path, $merged_spacing_sizes );
}
/*
* The array_replace_recursive algorithm merges at the leaf level,
* but we don't want leaf arrays to be merged, so we overwrite it.
*
* For leaf values that are sequential arrays it will use the numeric indexes for replacement.
* We rather replace the existing with the incoming value, if it exists.
* This is the case of spacing.units.
*
* For leaf values that are associative arrays it will merge them as expected.
* This is also not the behavior we want for the current associative arrays (presets).
* We rather replace the existing with the incoming value, if it exists.
* This happens, for example, when we merge data from theme.json upon existing
* theme supports or when we merge anything coming from the same source twice.
* This is the case of color.palette, color.gradients, color.duotone,
* typography.fontSizes, or typography.fontFamilies.
*
* Additionally, for some preset types, we also want to make sure the
* values they introduce don't conflict with default values. We do so
* by checking the incoming slugs for theme presets and compare them
* with the equivalent default presets: if a slug is present as a default
* we remove it from the theme presets.
*/
$nodes = static::get_setting_nodes( $incoming_data );
$slugs_global = static::get_default_slugs( $this->theme_json, array( 'settings' ) );
foreach ( $nodes as $node ) {
// Replace the spacing.units.
$path = $node['path'];
$path[] = 'spacing';
$path[] = 'units';
$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_metadata ) {
$prevent_override = $preset_metadata['prevent_override'];
if ( is_array( $prevent_override ) ) {
$prevent_override = _wp_array_get( $this->theme_json['settings'], $preset_metadata['prevent_override'] );
}
foreach ( static::VALID_ORIGINS as $origin ) {
$base_path = $node['path'];
foreach ( $preset_metadata['path'] as $leaf ) {
$base_path[] = $leaf;
}
$path = $base_path;
$path[] = $origin;
$content = _wp_array_get( $incoming_data, $path, null );
if ( ! isset( $content ) ) {
continue;
}
// Set names for theme presets based on the slug if they are not set and can use default names.
if ( 'theme' === $origin && $preset_metadata['use_default_names'] ) {
foreach ( $content as $key => $item ) {
if ( ! isset( $item['name'] ) ) {
$name = static::get_name_from_defaults( $item['slug'], $base_path );
if ( null !== $name ) {
$content[ $key ]['name'] = $name;
}
}
}
}
// Filter out default slugs from theme presets when defaults should not be overridden.
if ( 'theme' === $origin && $prevent_override ) {
$slugs_node = static::get_default_slugs( $this->theme_json, $node['path'] );
$preset_global = _wp_array_get( $slugs_global, $preset_metadata['path'], array() );
$preset_node = _wp_array_get( $slugs_node, $preset_metadata['path'], array() );
$preset_slugs = array_merge_recursive( $preset_global, $preset_node );
$content = static::filter_slugs( $content, $preset_slugs );
}
_wp_array_set( $this->theme_json, $path, $content );
}
}
}
/*
* Style values are merged at the leaf level, however
* some values provide exceptions, namely style values that are
* objects and represent unique definitions for the style.
*/
$style_nodes = static::get_block_nodes(
$this->theme_json,
array(),
array( 'include_node_paths_only' => true )
);
foreach ( $style_nodes as $style_node ) {
$path = $style_node['path'];
/*
* Background image styles should be replaced, not merged,
* as they themselves are specific object definitions for the style.
*/
$background_image_path = array_merge( $path, static::PROPERTIES_METADATA['background-image'] );
$content = _wp_array_get( $incoming_data, $background_image_path, null );
if ( isset( $content ) ) {
_wp_array_set( $this->theme_json, $background_image_path, $content );
}
}
}
/**
* Converts all filter (duotone) presets into SVGs.
*
* @since 5.9.1
*
* @param array $origins List of origins to process.
* @return string SVG filters.
*/
public function get_svg_filters( $origins ) {
$blocks_metadata = static::get_blocks_metadata();
$setting_nodes = static::get_setting_nodes( $this->theme_json, $blocks_metadata );
$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;
}
/**
* Determines whether a presets should be overridden or not.
*
* @since 5.9.0
* @deprecated 6.0.0 Use {@see 'get_metadata_boolean'} instead.
*
* @param array $theme_json The theme.json like structure to inspect.
* @param array $path Path to inspect.
* @param bool|array $override Data to compute whether to override the preset.
* @return bool
*/
protected static function should_override_preset( $theme_json, $path, $override ) {
_deprecated_function( __METHOD__, '6.0.0', 'get_metadata_boolean' );
if ( is_bool( $override ) ) {
return $override;
}
/*
* The relationship between whether to override the defaults
* and whether the defaults are enabled is inverse:
*
* - If defaults are enabled => theme presets should not be overridden
* - If defaults are disabled => theme presets should be overridden
*
* For example, a theme sets defaultPalette to false,
* making the default palette hidden from the user.
* In that case, we want all the theme presets to be present,
* so they should override the defaults.
*/
if ( is_array( $override ) ) {
$value = _wp_array_get( $theme_json, array_merge( $path, $override ) );
if ( isset( $value ) ) {
return ! $value;
}
// Search the top-level key if none was found for this node.
$value = _wp_array_get( $theme_json, array_merge( array( 'settings' ), $override ) );
if ( isset( $value ) ) {
return ! $value;
}
return true;
}
}
/**
* Returns the default slugs for all the presets in an associative array
* whose keys are the preset paths and the leaves is the list of slugs.
*
* For example:
*
* array(
* 'color' => array(
* 'palette' => array( 'slug-1', 'slug-2' ),
* 'gradients' => array( 'slug-3', 'slug-4' ),
* ),
* )
*
* @since 5.9.0
*
* @param array $data A theme.json like structure.
* @param array $node_path The path to inspect. It's 'settings' by default.
* @return array
*/
protected static function get_default_slugs( $data, $node_path ) {
$slugs = array();
foreach ( static::PRESETS_METADATA as $metadata ) {
$path = $node_path;
foreach ( $metadata['path'] as $leaf ) {
$path[] = $leaf;
}
$path[] = 'default';
$preset = _wp_array_get( $data, $path, null );
if ( ! isset( $preset ) ) {
continue;
}
$slugs_for_preset = array();
foreach ( $preset as $item ) {
if ( isset( $item['slug'] ) ) {
$slugs_for_preset[] = $item['slug'];
}
}
_wp_array_set( $slugs, $metadata['path'], $slugs_for_preset );
}
return $slugs;
}
/**
* Gets a `default`'s preset name by a provided slug.
*
* @since 5.9.0
*
* @param string $slug The slug we want to find a match from default presets.
* @param array $base_path The path to inspect. It's 'settings' by default.
* @return string|null
*/
protected function get_name_from_defaults( $slug, $base_path ) {
$path = $base_path;
$path[] = 'default';
$default_content = _wp_array_get( $this->theme_json, $path, null );
if ( ! $default_content ) {
return null;
}
foreach ( $default_content as $item ) {
if ( $slug === $item['slug'] ) {
return $item['name'];
}
}
return null;
}
/**
* Removes the preset values whose slug is equal to any of given slugs.
*
* @since 5.9.0
*
* @param array $node The node with the presets to validate.
* @param array $slugs The slugs that should not be overridden.
* @return array The new node.
*/
protected static function filter_slugs( $node, $slugs ) {
if ( empty( $slugs ) ) {
return $node;
}
$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
* @since 6.3.2 Preserves global styles block variations when securing styles.
* @since 6.6.0 Updated to allow variation element styles and $origin parameter.
*
* @param array $theme_json Structure to sanitize.
* @param string $origin Optional. What source of data this object represents.
* One of 'blocks', 'default', 'theme', or 'custom'. Default 'theme'.
* @return array Sanitized structure.
*/
public static function remove_insecure_properties( $theme_json, $origin = 'theme' ) {
if ( ! in_array( $origin, static::VALID_ORIGINS, true ) ) {
$origin = 'theme';
}
$sanitized = array();
$theme_json = WP_Theme_JSON_Schema::migrate( $theme_json, $origin );
$valid_block_names = array_keys( static::get_blocks_metadata() );
$valid_element_names = array_keys( static::ELEMENTS );
$valid_variations = static::get_valid_block_style_variations();
$theme_json = static::sanitize( $theme_json, $valid_block_names, $valid_element_names, $valid_variations );
$blocks_metadata = static::get_blocks_metadata();
$style_options = array( 'include_block_style_variations' => true ); // Allow variations data.
$style_nodes = static::get_style_nodes( $theme_json, $blocks_metadata, $style_options );
foreach ( $style_nodes as $metadata ) {
$input = _wp_array_get( $theme_json, $metadata['path'], array() );
if ( empty( $input ) ) {
continue;
}
// The global styles custom CSS is not sanitized, but can only be edited by users with 'edit_css' capability.
if ( isset( $input['css'] ) && current_user_can( 'edit_css' ) ) {
$output = $input;
} else {
$output = static::remove_insecure_styles( $input );
}
/*
* Get a reference to element name from path.
* $metadata['path'] = array( 'styles', 'elements', 'link' );
*/
$current_element = $metadata['path'][ count( $metadata['path'] ) - 1 ];
/*
* $output is stripped of pseudo selectors. Re-add and process them
* or insecure styles here.
*/
if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] ) ) {
foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] as $pseudo_selector ) {
if ( isset( $input[ $pseudo_selector ] ) ) {
$output[ $pseudo_selector ] = static::remove_insecure_styles( $input[ $pseudo_selector ] );
}
}
}
if ( ! empty( $output ) ) {
_wp_array_set( $sanitized, $metadata['path'], $output );
}
if ( isset( $metadata['variations'] ) ) {
foreach ( $metadata['variations'] as $variation ) {
$variation_input = _wp_array_get( $theme_json, $variation['path'], array() );
if ( empty( $variation_input ) ) {
continue;
}
$variation_output = static::remove_insecure_styles( $variation_input );
// Process a variation's elements and element pseudo selector styles.
if ( isset( $variation_input['elements'] ) ) {
foreach ( $valid_element_names as $element_name ) {
$element_input = $variation_input['elements'][ $element_name ] ?? null;
if ( $element_input ) {
$element_output = static::remove_insecure_styles( $element_input );
if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element_name ] ) ) {
foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element_name ] as $pseudo_selector ) {
if ( isset( $element_input[ $pseudo_selector ] ) ) {
$element_output[ $pseudo_selector ] = static::remove_insecure_styles( $element_input[ $pseudo_selector ] );
}
}
}
if ( ! empty( $element_output ) ) {
_wp_array_set( $variation_output, array( 'elements', $element_name ), $element_output );
}
}
}
}
if ( ! empty( $variation_output ) ) {
_wp_array_set( $sanitized, $variation['path'], $variation_output );
}
}
}
}
$setting_nodes = static::get_setting_nodes( $theme_json );
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 = $preset_metadata['path'];
$path_with_origin[] = $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 );
}
}
}
// Ensure indirect properties not included in any `PRESETS_METADATA` value are allowed.
static::remove_indirect_properties( $input, $output );
return $output;
}
/**
* Processes a style node and returns the same node
* without the insecure styles.
*
* @since 5.9.0
*
* @param array $input Node to process.
* @return array
*/
protected static function remove_insecure_styles( $input ) {
$output = array();
$declarations = static::compute_style_properties( $input );
foreach ( $declarations as $declaration ) {
if ( static::is_safe_css_declaration( $declaration['name'], $declaration['value'] ) ) {
$path = static::PROPERTIES_METADATA[ $declaration['name'] ];
/*
* Check the value isn't an array before adding so as to not
* double up shorthand and longhand styles.
*/
$value = _wp_array_get( $input, $path, array() );
if ( ! is_array( $value ) ) {
_wp_array_set( $output, $path, $value );
}
}
}
// Ensure indirect properties not handled by `compute_style_properties` are allowed.
static::remove_indirect_properties( $input, $output );
return $output;
}
/**
* Checks that a declaration provided by the user is safe.
*
* @since 5.9.0
*
* @param string $property_name Property name in a CSS declaration, i.e. the `color` in `color: red`.
* @param string $property_value Value in a CSS declaration, i.e. the `red` in `color: red`.
* @return bool
*/
protected static function is_safe_css_declaration( $property_name, $property_value ) {
$style_to_validate = $property_name . ': ' . $property_value;
$filtered = esc_html( safecss_filter_attr( $style_to_validate ) );
return ! empty( trim( $filtered ) );
}
/**
* Removes indirect properties from the given input node and
* sets in the given output node.
*
* @since 6.2.0
*
* @param array $input Node to process.
* @param array $output The processed node. Passed by reference.
*/
private static function remove_indirect_properties( $input, &$output ) {
foreach ( static::INDIRECT_PROPERTIES_METADATA as $property => $paths ) {
foreach ( $paths as $path ) {
$value = _wp_array_get( $input, $path );
if (
is_string( $value ) &&
static::is_safe_css_declaration( $property, $value )
) {
_wp_array_set( $output, $path, $value );
}
}
}
}
/**
* Returns the raw data.
*
* @since 5.8.0
*
* @return array Raw data.
*/
public function get_raw_data() {
return $this->theme_json;
}
/**
* Transforms the given editor settings according the
* add_theme_support format to the theme.json format.
*
* @since 5.8.0
*
* @param array $settings Existing editor settings.
* @return array Config that adheres to the theme.json schema.
*/
public static function get_from_editor_settings( $settings ) {
$theme_settings = array(
'version' => static::LATEST_SCHEMA,
'settings' => array(),
);
// Deprecated theme supports.
if ( isset( $settings['disableCustomColors'] ) ) {
$theme_settings['settings']['color']['custom'] = ! $settings['disableCustomColors'];
}
if ( isset( $settings['disableCustomGradients'] ) ) {
$theme_settings['settings']['color']['customGradient'] = ! $settings['disableCustomGradients'];
}
if ( isset( $settings['disableCustomFontSizes'] ) ) {
$theme_settings['settings']['typography']['customFontSize'] = ! $settings['disableCustomFontSizes'];
}
if ( isset( $settings['enableCustomLineHeight'] ) ) {
$theme_settings['settings']['typography']['lineHeight'] = $settings['enableCustomLineHeight'];
}
if ( isset( $settings['enableCustomUnits'] ) ) {
$theme_settings['settings']['spacing']['units'] = ( true === $settings['enableCustomUnits'] ) ?
array( 'px', 'em', 'rem', 'vh', 'vw', '%' ) :
$settings['enableCustomUnits'];
}
if ( isset( $settings['colors'] ) ) {
$theme_settings['settings']['color']['palette'] = $settings['colors'];
}
if ( isset( $settings['gradients'] ) ) {
$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';
}
}
$theme_settings['settings']['typography']['fontSizes'] = $font_sizes;
}
if ( isset( $settings['enableCustomSpacing'] ) ) {
$theme_settings['settings']['spacing']['padding'] = $settings['enableCustomSpacing'];
}
if ( isset( $settings['spacingSizes'] ) ) {
$theme_settings['settings']['spacing']['spacingSizes'] = $settings['spacingSizes'];
}
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 = $node['path'];
foreach ( $preset_metadata['path'] as $preset_metadata_path ) {
$path[] = $preset_metadata_path;
}
$preset = _wp_array_get( $output, $path, null );
if ( null === $preset ) {
continue;
}
$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' => (string) $slug ), $value );
}
_wp_array_set( $output, $path, $flattened_preset );
}
}
/*
* If all of the static::APPEARANCE_TOOLS_OPT_INS are true,
* this code unsets them and sets 'appearanceTools' instead.
*/
foreach ( $nodes as $node ) {
$all_opt_ins_are_set = true;
foreach ( static::APPEARANCE_TOOLS_OPT_INS as $opt_in_path ) {
$full_path = $node['path'];
foreach ( $opt_in_path as $opt_in_path_item ) {
$full_path[] = $opt_in_path_item;
}
/*
* Use "unset prop" as a marker instead of "null" because
* "null" can be a valid value for some props (e.g. blockGap).
*/
$opt_in_value = _wp_array_get( $output, $full_path, 'unset prop' );
if ( 'unset prop' === $opt_in_value ) {
$all_opt_ins_are_set = false;
break;
}
}
if ( $all_opt_ins_are_set ) {
$node_path_with_appearance_tools = $node['path'];
$node_path_with_appearance_tools[] = 'appearanceTools';
_wp_array_set( $output, $node_path_with_appearance_tools, true );
foreach ( static::APPEARANCE_TOOLS_OPT_INS as $opt_in_path ) {
$full_path = $node['path'];
foreach ( $opt_in_path as $opt_in_path_item ) {
$full_path[] = $opt_in_path_item;
}
/*
* Use "unset prop" as a marker instead of "null" because
* "null" can be a valid value for some props (e.g. blockGap).
*/
$opt_in_value = _wp_array_get( $output, $full_path, 'unset prop' );
if ( true !== $opt_in_value ) {
continue;
}
/*
* The following could be improved to be path independent.
* At the moment it relies on a couple of assumptions:
*
* - all opt-ins having a path of size 2.
* - there's two sources of settings: the top-level and the block-level.
*/
if (
( 1 === count( $node['path'] ) ) &&
( 'settings' === $node['path'][0] )
) {
// Top-level settings.
unset( $output['settings'][ $opt_in_path[0] ][ $opt_in_path[1] ] );
if ( empty( $output['settings'][ $opt_in_path[0] ] ) ) {
unset( $output['settings'][ $opt_in_path[0] ] );
}
} elseif (
( 3 === count( $node['path'] ) ) &&
( 'settings' === $node['path'][0] ) &&
( 'blocks' === $node['path'][1] )
) {
// Block-level settings.
$block_name = $node['path'][2];
unset( $output['settings']['blocks'][ $block_name ][ $opt_in_path[0] ][ $opt_in_path[1] ] );
if ( empty( $output['settings']['blocks'][ $block_name ][ $opt_in_path[0] ] ) ) {
unset( $output['settings']['blocks'][ $block_name ][ $opt_in_path[0] ] );
}
}
}
}
}
wp_recursive_ksort( $output );
return $output;
}
/**
* Sets the spacingSizes array based on the spacingScale values from theme.json.
*
* @since 6.1.0
* @deprecated 6.6.0 No longer used as the spacingSizes are automatically
* generated in the constructor and merge methods instead
* of manually after instantiation.
*
* @return null|void
*/
public function set_spacing_sizes() {
_deprecated_function( __METHOD__, '6.6.0' );
$spacing_scale = isset( $this->theme_json['settings']['spacing']['spacingScale'] )
? $this->theme_json['settings']['spacing']['spacingScale']
: array();
if ( ! isset( $spacing_scale['steps'] )
|| ! is_numeric( $spacing_scale['steps'] )
|| ! isset( $spacing_scale['mediumStep'] )
|| ! isset( $spacing_scale['unit'] )
|| ! isset( $spacing_scale['operator'] )
|| ! isset( $spacing_scale['increment'] )
|| ! isset( $spacing_scale['steps'] )
|| ! is_numeric( $spacing_scale['increment'] )
|| ! is_numeric( $spacing_scale['mediumStep'] )
|| ( '+' !== $spacing_scale['operator'] && '*' !== $spacing_scale['operator'] ) ) {
if ( ! empty( $spacing_scale ) ) {
wp_trigger_error(
__METHOD__,
sprintf(
/* translators: 1: theme.json, 2: settings.spacing.spacingScale */
__( 'Some of the %1$s %2$s values are invalid' ),
'theme.json',
'settings.spacing.spacingScale'
),
E_USER_NOTICE
);
}
return null;
}
// If theme authors want to prevent the generation of the core spacing scale they can set their theme.json spacingScale.steps to 0.
if ( 0 === $spacing_scale['steps'] ) {
return null;
}
$spacing_sizes = static::compute_spacing_sizes( $spacing_scale );
// If there are 7 or fewer steps in the scale revert to numbers for labels instead of t-shirt sizes.
if ( $spacing_scale['steps'] <= 7 ) {
for ( $spacing_sizes_count = 0; $spacing_sizes_count < count( $spacing_sizes ); $spacing_sizes_count++ ) {
$spacing_sizes[ $spacing_sizes_count ]['name'] = (string) ( $spacing_sizes_count + 1 );
}
}
_wp_array_set( $this->theme_json, array( 'settings', 'spacing', 'spacingSizes', 'default' ), $spacing_sizes );
}
/**
* Merges two sets of spacing size presets.
*
* @since 6.6.0
*
* @param array $base The base set of spacing sizes.
* @param array $incoming The set of spacing sizes to merge with the base. Duplicate slugs will override the base values.
* @return array The merged set of spacing sizes.
*/
private static function merge_spacing_sizes( $base, $incoming ) {
// Preserve the order if there are no base (spacingScale) values.
if ( empty( $base ) ) {
return $incoming;
}
$merged = array();
foreach ( $base as $item ) {
$merged[ $item['slug'] ] = $item;
}
foreach ( $incoming as $item ) {
$merged[ $item['slug'] ] = $item;
}
ksort( $merged, SORT_NUMERIC );
return array_values( $merged );
}
/**
* Generates a set of spacing sizes by starting with a medium size and
* applying an operator with an increment value to generate the rest of the
* sizes outward from the medium size. The medium slug is '50' with the rest
* of the slugs being 10 apart. The generated names use t-shirt sizing.
*
* Example:
*
* $spacing_scale = array(
* 'steps' => 4,
* 'mediumStep' => 16,
* 'unit' => 'px',
* 'operator' => '+',
* 'increment' => 2,
* );
* $spacing_sizes = static::compute_spacing_sizes( $spacing_scale );
* // -> array(
* // array( 'name' => 'Small', 'slug' => '40', 'size' => '14px' ),
* // array( 'name' => 'Medium', 'slug' => '50', 'size' => '16px' ),
* // array( 'name' => 'Large', 'slug' => '60', 'size' => '18px' ),
* // array( 'name' => 'X-Large', 'slug' => '70', 'size' => '20px' ),
* // )
*
* @since 6.6.0
*
* @param array $spacing_scale {
* The spacing scale values. All are required.
*
* @type int $steps The number of steps in the scale. (up to 10 steps are supported.)
* @type float $mediumStep The middle value that gets the slug '50'. (For even number of steps, this becomes the first middle value.)
* @type string $unit The CSS unit to use for the sizes.
* @type string $operator The mathematical operator to apply to generate the other sizes. Either '+' or '*'.
* @type float $increment The value used with the operator to generate the other sizes.
* }
* @return array The spacing sizes presets or an empty array if some spacing scale values are missing or invalid.
*/
private static function compute_spacing_sizes( $spacing_scale ) {
/*
* This condition is intentionally missing some checks on ranges for the values in order to
* keep backwards compatibility with the previous implementation.
*/
if (
! isset( $spacing_scale['steps'] ) ||
! is_numeric( $spacing_scale['steps'] ) ||
0 === $spacing_scale['steps'] ||
! isset( $spacing_scale['mediumStep'] ) ||
! is_numeric( $spacing_scale['mediumStep'] ) ||
! isset( $spacing_scale['unit'] ) ||
! isset( $spacing_scale['operator'] ) ||
( '+' !== $spacing_scale['operator'] && '*' !== $spacing_scale['operator'] ) ||
! isset( $spacing_scale['increment'] ) ||
! is_numeric( $spacing_scale['increment'] )
) {
return array();
}
$unit = '%' === $spacing_scale['unit'] ? '%' : sanitize_title( $spacing_scale['unit'] );
$current_step = $spacing_scale['mediumStep'];
$steps_mid_point = round( $spacing_scale['steps'] / 2, 0 );
$x_small_count = null;
$below_sizes = array();
$slug = 40;
$remainder = 0;
for ( $below_midpoint_count = $steps_mid_point - 1; $spacing_scale['steps'] > 1 && $slug > 0 && $below_midpoint_count > 0; $below_midpoint_count-- ) {
if ( '+' === $spacing_scale['operator'] ) {
$current_step -= $spacing_scale['increment'];
} elseif ( $spacing_scale['increment'] > 1 ) {
$current_step /= $spacing_scale['increment'];
} else {
$current_step *= $spacing_scale['increment'];
}
if ( $current_step <= 0 ) {
$remainder = $below_midpoint_count;
break;
}
$below_sizes[] = array(
/* translators: %s: Digit to indicate multiple of sizing, eg. 2X-Small. */
'name' => $below_midpoint_count === $steps_mid_point - 1 ? __( 'Small' ) : sprintf( __( '%sX-Small' ), (string) $x_small_count ),
'slug' => (string) $slug,
'size' => round( $current_step, 2 ) . $unit,
);
if ( $below_midpoint_count === $steps_mid_point - 2 ) {
$x_small_count = 2;
}
if ( $below_midpoint_count < $steps_mid_point - 2 ) {
++$x_small_count;
}
$slug -= 10;
}
$below_sizes = array_reverse( $below_sizes );
$below_sizes[] = array(
'name' => __( 'Medium' ),
'slug' => '50',
'size' => $spacing_scale['mediumStep'] . $unit,
);
$current_step = $spacing_scale['mediumStep'];
$x_large_count = null;
$above_sizes = array();
$slug = 60;
$steps_above = ( $spacing_scale['steps'] - $steps_mid_point ) + $remainder;
for ( $above_midpoint_count = 0; $above_midpoint_count < $steps_above; $above_midpoint_count++ ) {
$current_step = '+' === $spacing_scale['operator']
? $current_step + $spacing_scale['increment']
: ( $spacing_scale['increment'] >= 1 ? $current_step * $spacing_scale['increment'] : $current_step / $spacing_scale['increment'] );
$above_sizes[] = array(
/* translators: %s: Digit to indicate multiple of sizing, eg. 2X-Large. */
'name' => 0 === $above_midpoint_count ? __( 'Large' ) : sprintf( __( '%sX-Large' ), (string) $x_large_count ),
'slug' => (string) $slug,
'size' => round( $current_step, 2 ) . $unit,
);
if ( 1 === $above_midpoint_count ) {
$x_large_count = 2;
}
if ( $above_midpoint_count > 1 ) {
++$x_large_count;
}
$slug += 10;
}
$spacing_sizes = $below_sizes;
foreach ( $above_sizes as $above_sizes_item ) {
$spacing_sizes[] = $above_sizes_item;
}
return $spacing_sizes;
}
/**
* This is used to convert the internal representation of variables to the CSS representation.
* For example, `var:preset|color|vivid-green-cyan` becomes `var(--wp--preset--color--vivid-green-cyan)`.
*
* @since 6.3.0
* @param string $value The variable such as var:preset|color|vivid-green-cyan to convert.
* @return string The converted variable.
*/
private static function convert_custom_properties( $value ) {
$prefix = 'var:';
$prefix_len = strlen( $prefix );
$token_in = '|';
$token_out = '--';
if ( str_starts_with( $value, $prefix ) ) {
$unwrapped_name = str_replace(
$token_in,
$token_out,
substr( $value, $prefix_len )
);
$value = "var(--wp--$unwrapped_name)";
}
return $value;
}
/**
* Given a tree, converts the internal representation of variables to the CSS representation.
* It is recursive and modifies the input in-place.
*
* @since 6.3.0
* @param array $tree Input to process.
* @return array The modified $tree.
*/
private static function resolve_custom_css_format( $tree ) {
$prefix = 'var:';
foreach ( $tree as $key => $data ) {
if ( is_string( $data ) && str_starts_with( $data, $prefix ) ) {
$tree[ $key ] = self::convert_custom_properties( $data );
} elseif ( is_array( $data ) ) {
$tree[ $key ] = self::resolve_custom_css_format( $data );
}
}
return $tree;
}
/**
* Returns the selectors metadata for a block.
*
* @since 6.3.0
*
* @param object $block_type The block type.
* @param string $root_selector The block's root selector.
*
* @return array The custom selectors set by the block.
*/
protected static function get_block_selectors( $block_type, $root_selector ) {
if ( ! empty( $block_type->selectors ) ) {
return $block_type->selectors;
}
$selectors = array( 'root' => $root_selector );
foreach ( static::BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS as $key => $feature ) {
$feature_selector = wp_get_block_css_selector( $block_type, $key );
if ( null !== $feature_selector ) {
$selectors[ $feature ] = array( 'root' => $feature_selector );
}
}
return $selectors;
}
/**
* Generates all the element selectors for a block.
*
* @since 6.3.0
*
* @param string $root_selector The block's root CSS selector.
* @return array The block's element selectors.
*/
protected static function get_block_element_selectors( $root_selector ) {
/*
* Assign defaults, then override those that the block sets by itself.
* If the block selector is compounded, will append the element to each
* individual block selector.
*/
$block_selectors = explode( ',', $root_selector );
$element_selectors = array();
foreach ( static::ELEMENTS as $el_name => $el_selector ) {
$element_selector = array();
foreach ( $block_selectors as $selector ) {
if ( $selector === $el_selector ) {
$element_selector = array( $el_selector );
break;
}
$element_selector[] = static::prepend_to_selector( $el_selector, $selector . ' ' );
}
$element_selectors[ $el_name ] = implode( ',', $element_selector );
}
return $element_selectors;
}
/**
* Generates style declarations for a node's features e.g., color, border,
* typography etc. that have custom selectors in their related block's
* metadata.
*
* @since 6.3.0
*
* @param object $metadata The related block metadata containing selectors.
* @param object $node A merged theme.json node for block or variation.
*
* @return array The style declarations for the node's features with custom
* selectors.
*/
protected function get_feature_declarations_for_node( $metadata, &$node ) {
$declarations = array();
if ( ! isset( $metadata['selectors'] ) ) {
return $declarations;
}
$settings = isset( $this->theme_json['settings'] )
? $this->theme_json['settings']
: array();
foreach ( $metadata['selectors'] as $feature => $feature_selectors ) {
/*
* Skip if this is the block's root selector or the block doesn't
* have any styles for the feature.
*/
if ( 'root' === $feature || empty( $node[ $feature ] ) ) {
continue;
}
if ( is_array( $feature_selectors ) ) {
foreach ( $feature_selectors as $subfeature => $subfeature_selector ) {
if ( 'root' === $subfeature || empty( $node[ $feature ][ $subfeature ] ) ) {
continue;
}
/*
* Create temporary node containing only the subfeature data
* to leverage existing `compute_style_properties` function.
*/
$subfeature_node = array(
$feature => array(
$subfeature => $node[ $feature ][ $subfeature ],
),
);
// Generate style declarations.
$new_declarations = static::compute_style_properties( $subfeature_node, $settings, null, $this->theme_json );
// Merge subfeature declarations into feature declarations.
if ( isset( $declarations[ $subfeature_selector ] ) ) {
foreach ( $new_declarations as $new_declaration ) {
$declarations[ $subfeature_selector ][] = $new_declaration;
}
} else {
$declarations[ $subfeature_selector ] = $new_declarations;
}
/*
* Remove the subfeature from the block's node now its
* styles will be included under its own selector not the
* block's.
*/
unset( $node[ $feature ][ $subfeature ] );
}
}
/*
* Now subfeatures have been processed and removed we can process
* feature root selector or simple string selector.
*/
if (
is_string( $feature_selectors ) ||
( isset( $feature_selectors['root'] ) && $feature_selectors['root'] )
) {
$feature_selector = is_string( $feature_selectors ) ? $feature_selectors : $feature_selectors['root'];
/*
* Create temporary node containing only the feature data
* to leverage existing `compute_style_properties` function.
*/
$feature_node = array( $feature => $node[ $feature ] );
// Generate the style declarations.
$new_declarations = static::compute_style_properties( $feature_node, $settings, null, $this->theme_json );
/*
* Merge new declarations with any that already exist for
* the feature selector. This may occur when multiple block
* support features use the same custom selector.
*/
if ( isset( $declarations[ $feature_selector ] ) ) {
foreach ( $new_declarations as $new_declaration ) {
$declarations[ $feature_selector ][] = $new_declaration;
}
} else {
$declarations[ $feature_selector ] = $new_declarations;
}
/*
* Remove the feature from the block's node now its styles
* will be included under its own selector not the block's.
*/
unset( $node[ $feature ] );
}
}
return $declarations;
}
/**
* Replaces CSS variables with their values in place.
*
* @since 6.3.0
* @since 6.5.0 Check for empty style before processing its value.
*
* @param array $styles CSS declarations to convert.
* @param array $values key => value pairs to use for replacement.
* @return array
*/
private static function convert_variables_to_value( $styles, $values ) {
foreach ( $styles as $key => $style ) {
if ( empty( $style ) ) {
continue;
}
if ( is_array( $style ) ) {
$styles[ $key ] = self::convert_variables_to_value( $style, $values );
continue;
}
if ( 0 <= strpos( $style, 'var(' ) ) {
// find all the variables in the string in the form of var(--variable-name, fallback), with fallback in the second capture group.
$has_matches = preg_match_all( '/var\(([^),]+)?,?\s?(\S+)?\)/', $style, $var_parts );
if ( $has_matches ) {
$resolved_style = $styles[ $key ];
foreach ( $var_parts[1] as $index => $var_part ) {
$key_in_values = 'var(' . $var_part . ')';
$rule_to_replace = $var_parts[0][ $index ]; // the css rule to replace e.g. var(--wp--preset--color--vivid-green-cyan).
$fallback = $var_parts[2][ $index ]; // the fallback value.
$resolved_style = str_replace(
array(
$rule_to_replace,
$fallback,
),
array(
isset( $values[ $key_in_values ] ) ? $values[ $key_in_values ] : $rule_to_replace,
isset( $values[ $fallback ] ) ? $values[ $fallback ] : $fallback,
),
$resolved_style
);
}
$styles[ $key ] = $resolved_style;
}
}
}
return $styles;
}
/**
* Resolves the values of CSS variables in the given styles.
*
* @since 6.3.0
* @param WP_Theme_JSON $theme_json The theme json resolver.
*
* @return WP_Theme_JSON The $theme_json with resolved variables.
*/
public static function resolve_variables( $theme_json ) {
$settings = $theme_json->get_settings();
$styles = $theme_json->get_raw_data()['styles'];
$preset_vars = static::compute_preset_vars( $settings, static::VALID_ORIGINS );
$theme_vars = static::compute_theme_vars( $settings );
$vars = array_reduce(
array_merge( $preset_vars, $theme_vars ),
function ( $carry, $item ) {
$name = $item['name'];
$carry[ "var({$name})" ] = $item['value'];
return $carry;
},
array()
);
$theme_json->theme_json['styles'] = self::convert_variables_to_value( $styles, $vars );
return $theme_json;
}
/**
* Generates a selector for a block style variation.
*
* @since 6.5.0
*
* @param string $variation_name Name of the block style variation.
* @param string $block_selector CSS selector for the block.
* @return string Block selector with block style variation selector added to it.
*/
protected static function get_block_style_variation_selector( $variation_name, $block_selector ) {
$variation_class = ".is-style-$variation_name";
if ( ! $block_selector ) {
return $variation_class;
}
$limit = 1;
$selector_parts = explode( ',', $block_selector );
$result = array();
foreach ( $selector_parts as $part ) {
$result[] = preg_replace_callback(
'/((?::\([^)]+\))?\s*)([^\s:]+)/',
function ( $matches ) use ( $variation_class ) {
return $matches[1] . $matches[2] . $variation_class;
},
$part,
$limit
);
}
return implode( ',', $result );
}
/**
* Collects valid block style variations keyed by block type.
*
* @since 6.6.0
*
* @return array Valid block style variations by block type.
*/
protected static function get_valid_block_style_variations() {
$valid_variations = array();
foreach ( self::get_blocks_metadata() as $block_name => $block_meta ) {
if ( ! isset( $block_meta['styleVariations'] ) ) {
continue;
}
$valid_variations[ $block_name ] = array_keys( $block_meta['styleVariations'] );
}
return $valid_variations;
}
}
{"id":13985,"date":"2024-12-26T16:27:55","date_gmt":"2024-12-26T12:57:55","guid":{"rendered":"https:\/\/itimes.ir\/%d8%a8%d8%a7%d8%b4%da%af%d8%a7%d9%87-%d9%be%d8%b1%d8%b3%d9%be%d9%88%d9%84%db%8c%d8%b3-%d9%85%d8%b1%d8%a8%db%8c-%da%a9%d8%b1%d9%88%d8%a7%d8%aa-%d9%85%db%8c%d8%ae%d9%88%d8%a7%d9%87%d8%af\/"},"modified":"2024-12-26T16:27:55","modified_gmt":"2024-12-26T12:57:55","slug":"%d8%a8%d8%a7%d8%b4%da%af%d8%a7%d9%87-%d9%be%d8%b1%d8%b3%d9%be%d9%88%d9%84%db%8c%d8%b3-%d9%85%d8%b1%d8%a8%db%8c-%da%a9%d8%b1%d9%88%d8%a7%d8%aa-%d9%85%db%8c%d8%ae%d9%88%d8%a7%d9%87%d8%af","status":"publish","type":"post","link":"https:\/\/itimes.ir\/%d8%a8%d8%a7%d8%b4%da%af%d8%a7%d9%87-%d9%be%d8%b1%d8%b3%d9%be%d9%88%d9%84%db%8c%d8%b3-%d9%85%d8%b1%d8%a8%db%8c-%da%a9%d8%b1%d9%88%d8%a7%d8%aa-%d9%85%db%8c%d8%ae%d9%88%d8%a7%d9%87%d8%af\/","title":{"rendered":"\u0628\u0627\u0634\u06af\u0627\u0647 \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633 \u0645\u0631\u0628\u06cc \u06a9\u0631\u0648\u0627\u062a \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u062f"},"content":{"rendered":" ![](\"https:\/\/media.khabarvarzeshi.com\/d\/2020\/12\/16\/4\/109628.jpg\")
<\/p>\n
\u0628\u0647 \u06af\u0632\u0627\u0631\u0634 \u062e\u0628\u0631 \u0648\u0631\u0632\u0634\u06cc\u060c \u062f\u0648\u0631\u0627\u0646 \u067e\u0633\u0627 \u06af\u0627\u0631\u06cc\u062f\u0648 \u0647\u0645\u0686\u0646\u0627\u0646 \u0627\u062f\u0627\u0645\u0647 \u062f\u0627\u0631\u062f \u0648 \u0628\u0627\u0634\u06af\u0627\u0647 \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u062c\u0630\u0628 \u06cc\u06a9 \u0633\u0631\u0645\u0631\u0628\u06cc \u0634\u0646\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u062a\u0627 \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u062e\u0627\u062a\u0645\u0647 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0641\u0636\u0627\u06cc \u0646\u0647 \u0686\u0646\u062f\u0627\u0646 \u0645\u0646\u0627\u0633\u0628 \u0627\u06cc\u0646 \u0631\u0648\u0632\u0647\u0627\u060c \u0634\u0631\u0627\u06cc\u0637 \u0641\u0646\u06cc \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633 \u0631\u0627 \u0646\u06cc\u0632 \u0628\u0647 \u062f\u0648\u0631\u0627\u0646 \u062e\u0648\u0628 \u06af\u0630\u0634\u062a\u0647 \u0628\u0627\u0632\u06af\u0631\u062f\u0627\u0646\u062f.\u00a0<\/p>\n
\u062a\u062c\u0631\u0628\u0647 \u0645\u062b\u0628\u062a \u062d\u0636\u0648\u0631 \u0645\u0631\u0628\u06cc\u0627\u0646\u06cc \u0686\u0648\u0646 \u0627\u0633\u062a\u0627\u0646\u06a9\u0648 \u0648 \u0628\u0631\u0627\u0646\u06a9\u0648 \u0628\u0627\u0639\u062b \u0634\u062f\u0647 \u062a\u0627 \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633\u06cc\u200c\u0647\u0627 \u062e\u0627\u0637\u0631\u0627\u062a \u062e\u0648\u0628\u06cc \u0627\u0632 \u0647\u0645\u06a9\u0627\u0631\u06cc \u0628\u0627 \u0645\u0631\u0628\u06cc\u0627\u0646 \u0634\u0631\u0642 \u0627\u0631\u0648\u067e\u0627\u06cc\u06cc \u0648 \u0627\u06cc\u0646 \u062e\u0637\u0647 \u0627\u0632 \u0642\u0627\u0631\u0647 \u0633\u0628\u0632 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f. \u00a0<\/p>\n
\u062d\u062a\u06cc \u0628\u0647 \u0645\u0631\u0628\u06cc \u0627\u06cc \u0686\u0648\u0646 \u06a9\u0631\u0627\u0646\u0686\u0627\u0631 \u0646\u06cc\u0632 \u0627\u06af\u0631 \u0641\u0631\u0635\u062a \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u062f \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0633\u062a \u062a\u0627\u062b\u06cc\u0631 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633 \u0646\u0634\u0627\u0646 \u062f\u0647\u062f \u0648 \u062a\u0645\u0627\u0645\u06cc \u0627\u06cc\u0646 \u062a\u062c\u0627\u0631\u0628 \u06af\u0630\u0634\u062a\u0647 \u0628\u0627\u0639\u062b \u0634\u062f\u0647 \u062a\u0627 \u0628\u0627\u0634\u06af\u0627\u0647 \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633 \u0648 \u062f\u0631 \u0631\u0627\u0633 \u0622\u0646\u0647\u0627 \u0631\u0636\u0627 \u062f\u0631\u0648\u06cc\u0634\u060c \u062a\u0631\u062c\u06cc\u062d \u062f\u0647\u062f \u062a\u0627 \u0628\u0627 \u062c\u0630\u0628 \u06cc\u06a9 \u0645\u0631\u0628\u06cc \u06a9\u0631\u0648\u0627\u062a \u06cc\u0627 \u06a9\u0634\u0648\u0631\u0647\u0627\u06cc \u0647\u0645\u0633\u0627\u06cc\u0647 \u0645\u062b\u0644 \u0635\u0631\u0628\u0633\u062a\u0627\u0646 \u0648 \u0645\u0642\u062f\u0648\u0646\u06cc\u0647 \u06a9\u0647 \u0627\u0632 \u0646\u0638\u0631 \u0641\u0646\u06cc \u06cc\u06a9 \u062e\u0627\u0633\u062a\u06af\u0627\u0647 \u062f\u0627\u0631\u0646\u062f \u062a\u0644\u0627\u0634 \u06a9\u0646\u062f \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633 \u0631\u0627 \u0628\u0647 \u0634\u0631\u0627\u06cc\u0637 \u0648 \u062f\u0648\u0631\u0627\u0646 \u062e\u0648\u0628 \u06af\u0630\u0634\u062a\u0647 \u0628\u0627\u0632\u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n
\u06a9\u0645\u0627 \u0627\u06cc\u0646\u06a9\u0647 \u062f\u0631 \u0627\u0648\u0644\u06cc\u0646 \u06af\u0627\u0645 \u0645\u0630\u0627\u06a9\u0631\u0627\u062a\u06cc \u0628\u0627 \u0646\u06cc\u06a9\u0648 \u06a9\u0648\u0627\u0686 \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f \u0648 \u0628\u0627 \u067e\u0627\u0633\u062e \u0645\u0646\u0641\u06cc \u0627\u06cc\u0646 \u0645\u0631\u0628\u06cc \u0628\u0632\u0631\u06af \u06a9\u0631\u0648\u0627\u062a \u0647\u0645\u0631\u0627\u0647 \u0634\u062f. \u00a0<\/p>\n
\u062d\u0627\u0644 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc\u200c\u0631\u0633\u062f \u06af\u0632\u06cc\u0646\u0647\u200c\u0647\u0627\u06cc\u06cc \u0645\u062b\u0644 \u0627\u0633\u0644\u0627\u0648\u0646 \u0628\u06cc\u0644\u06cc\u0686 \u0648 \u0648 \u0645\u0631\u0628\u06cc\u0627\u0646\u06cc \u0628\u0627 \u0632\u0648\u0645\u0647\u200c\u0647\u0627\u06cc \u0645\u0634\u0627\u0628\u0647 \u0628\u06cc\u0644\u06cc\u0686 \u0645\u0648\u0631\u062f \u062a\u0648\u062c\u0647 \u0628\u0627\u0634\u06af\u0627\u0647 \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633 \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a\u0647 \u0627\u0646\u062f.<\/p>\n
\u0628\u0627\u06cc\u062f \u0645\u0646\u062a\u0638\u0631 \u0628\u0648\u062f\u06cc\u062f \u0645\u0631\u0628\u06cc\u0627\u0646\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u062f\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0641\u0648\u062a\u0628\u0627\u0644 \u062f\u0646\u06cc\u0627 \u0634\u0646\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0647\u0633\u062a\u0646\u062f \u0628\u0631\u0627\u06cc \u0645\u0631\u0628\u06cc\u06af\u0631\u06cc \u0628\u0647 \u0627\u06cc\u0631\u0627\u0646 \u062e\u0648\u0627\u0647\u0646\u062f \u0622\u0645\u062f \u06cc\u0627 \u0646\u0647.<\/p>\n
\u0645\u0646\u0628\u0639 \u062e\u0628\u0631 <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\u0628\u0647 \u06af\u0632\u0627\u0631\u0634 \u062e\u0628\u0631 \u0648\u0631\u0632\u0634\u06cc\u060c \u062f\u0648\u0631\u0627\u0646 \u067e\u0633\u0627 \u06af\u0627\u0631\u06cc\u062f\u0648 \u0647\u0645\u0686\u0646\u0627\u0646 \u0627\u062f\u0627\u0645\u0647 \u062f\u0627\u0631\u062f \u0648 \u0628\u0627\u0634\u06af\u0627\u0647 \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u062c\u0630\u0628 \u06cc\u06a9 \u0633\u0631\u0645\u0631\u0628\u06cc \u0634\u0646\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u062a\u0627 \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u062e\u0627\u062a\u0645\u0647 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0641\u0636\u0627\u06cc \u0646\u0647 \u0686\u0646\u062f\u0627\u0646 \u0645\u0646\u0627\u0633\u0628 \u0627\u06cc\u0646 \u0631\u0648\u0632\u0647\u0627\u060c \u0634\u0631\u0627\u06cc\u0637 \u0641\u0646\u06cc \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633 \u0631\u0627 \u0646\u06cc\u0632 \u0628\u0647 \u062f\u0648\u0631\u0627\u0646 \u062e\u0648\u0628 \u06af\u0630\u0634\u062a\u0647 \u0628\u0627\u0632\u06af\u0631\u062f\u0627\u0646\u062f.\u00a0 \u062a\u062c\u0631\u0628\u0647 \u0645\u062b\u0628\u062a \u062d\u0636\u0648\u0631 \u0645\u0631\u0628\u06cc\u0627\u0646\u06cc \u0686\u0648\u0646 \u0627\u0633\u062a\u0627\u0646\u06a9\u0648 \u0648 \u0628\u0631\u0627\u0646\u06a9\u0648 \u0628\u0627\u0639\u062b \u0634\u062f\u0647 \u062a\u0627 \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633\u06cc\u200c\u0647\u0627 […]<\/p>\n","protected":false},"author":1,"featured_media":13986,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[],"class_list":["post-13985","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-21"],"yoast_head":"\n
\u0628\u0627\u0634\u06af\u0627\u0647 \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633 \u0645\u0631\u0628\u06cc \u06a9\u0631\u0648\u0627\u062a \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u062f - \u0622\u06cc \u062a\u0627\u06cc\u0645\u0632<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itimes.ir\/\u0628\u0627\u0634\u06af\u0627\u0647-\u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633-\u0645\u0631\u0628\u06cc-\u06a9\u0631\u0648\u0627\u062a-\u0645\u06cc\u062e\u0648\u0627\u0647\u062f\/\" \/>\n<meta property=\"og:locale\" content=\"fa_IR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0628\u0627\u0634\u06af\u0627\u0647 \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633 \u0645\u0631\u0628\u06cc \u06a9\u0631\u0648\u0627\u062a \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u062f - \u0622\u06cc \u062a\u0627\u06cc\u0645\u0632\" \/>\n<meta property=\"og:description\" content=\"\u0628\u0647 \u06af\u0632\u0627\u0631\u0634 \u062e\u0628\u0631 \u0648\u0631\u0632\u0634\u06cc\u060c \u062f\u0648\u0631\u0627\u0646 \u067e\u0633\u0627 \u06af\u0627\u0631\u06cc\u062f\u0648 \u0647\u0645\u0686\u0646\u0627\u0646 \u0627\u062f\u0627\u0645\u0647 \u062f\u0627\u0631\u062f \u0648 \u0628\u0627\u0634\u06af\u0627\u0647 \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u062c\u0630\u0628 \u06cc\u06a9 \u0633\u0631\u0645\u0631\u0628\u06cc \u0634\u0646\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u062a\u0627 \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u062e\u0627\u062a\u0645\u0647 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0641\u0636\u0627\u06cc \u0646\u0647 \u0686\u0646\u062f\u0627\u0646 \u0645\u0646\u0627\u0633\u0628 \u0627\u06cc\u0646 \u0631\u0648\u0632\u0647\u0627\u060c \u0634\u0631\u0627\u06cc\u0637 \u0641\u0646\u06cc \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633 \u0631\u0627 \u0646\u06cc\u0632 \u0628\u0647 \u062f\u0648\u0631\u0627\u0646 \u062e\u0648\u0628 \u06af\u0630\u0634\u062a\u0647 \u0628\u0627\u0632\u06af\u0631\u062f\u0627\u0646\u062f.\u00a0 \u062a\u062c\u0631\u0628\u0647 \u0645\u062b\u0628\u062a \u062d\u0636\u0648\u0631 \u0645\u0631\u0628\u06cc\u0627\u0646\u06cc \u0686\u0648\u0646 \u0627\u0633\u062a\u0627\u0646\u06a9\u0648 \u0648 \u0628\u0631\u0627\u0646\u06a9\u0648 \u0628\u0627\u0639\u062b \u0634\u062f\u0647 \u062a\u0627 \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633\u06cc\u200c\u0647\u0627 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itimes.ir\/\u0628\u0627\u0634\u06af\u0627\u0647-\u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633-\u0645\u0631\u0628\u06cc-\u06a9\u0631\u0648\u0627\u062a-\u0645\u06cc\u062e\u0648\u0627\u0647\u062f\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0648\u0628\u0633\u0627\u06cc\u062a \u062e\u0628\u0631\u06cc \u0622\u06cc \u062a\u0627\u06cc\u0645\u0632\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-26T12:57:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/media.khabarvarzeshi.com\/d\/2020\/12\/16\/4\/109628.jpg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0646\u0648\u0634\u062a\u0647\u200c\u0634\u062f\u0647 \u0628\u062f\u0633\u062a\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/itimes.ir\/%d8%a8%d8%a7%d8%b4%da%af%d8%a7%d9%87-%d9%be%d8%b1%d8%b3%d9%be%d9%88%d9%84%db%8c%d8%b3-%d9%85%d8%b1%d8%a8%db%8c-%da%a9%d8%b1%d9%88%d8%a7%d8%aa-%d9%85%db%8c%d8%ae%d9%88%d8%a7%d9%87%d8%af\/\",\"url\":\"https:\/\/itimes.ir\/%d8%a8%d8%a7%d8%b4%da%af%d8%a7%d9%87-%d9%be%d8%b1%d8%b3%d9%be%d9%88%d9%84%db%8c%d8%b3-%d9%85%d8%b1%d8%a8%db%8c-%da%a9%d8%b1%d9%88%d8%a7%d8%aa-%d9%85%db%8c%d8%ae%d9%88%d8%a7%d9%87%d8%af\/\",\"name\":\"\u0628\u0627\u0634\u06af\u0627\u0647 \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633 \u0645\u0631\u0628\u06cc \u06a9\u0631\u0648\u0627\u062a \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u062f - \u0622\u06cc \u062a\u0627\u06cc\u0645\u0632\",\"isPartOf\":{\"@id\":\"https:\/\/itimes.ir\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/itimes.ir\/%d8%a8%d8%a7%d8%b4%da%af%d8%a7%d9%87-%d9%be%d8%b1%d8%b3%d9%be%d9%88%d9%84%db%8c%d8%b3-%d9%85%d8%b1%d8%a8%db%8c-%da%a9%d8%b1%d9%88%d8%a7%d8%aa-%d9%85%db%8c%d8%ae%d9%88%d8%a7%d9%87%d8%af\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/itimes.ir\/%d8%a8%d8%a7%d8%b4%da%af%d8%a7%d9%87-%d9%be%d8%b1%d8%b3%d9%be%d9%88%d9%84%db%8c%d8%b3-%d9%85%d8%b1%d8%a8%db%8c-%da%a9%d8%b1%d9%88%d8%a7%d8%aa-%d9%85%db%8c%d8%ae%d9%88%d8%a7%d9%87%d8%af\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/itimes.ir\/wp-content\/uploads\/2024\/12\/109628.jpg\",\"datePublished\":\"2024-12-26T12:57:55+00:00\",\"dateModified\":\"2024-12-26T12:57:55+00:00\",\"author\":{\"@id\":\"https:\/\/itimes.ir\/#\/schema\/person\/ccf433393293f15a958df585fbab9ad1\"},\"breadcrumb\":{\"@id\":\"https:\/\/itimes.ir\/%d8%a8%d8%a7%d8%b4%da%af%d8%a7%d9%87-%d9%be%d8%b1%d8%b3%d9%be%d9%88%d9%84%db%8c%d8%b3-%d9%85%d8%b1%d8%a8%db%8c-%da%a9%d8%b1%d9%88%d8%a7%d8%aa-%d9%85%db%8c%d8%ae%d9%88%d8%a7%d9%87%d8%af\/#breadcrumb\"},\"inLanguage\":\"fa-IR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/itimes.ir\/%d8%a8%d8%a7%d8%b4%da%af%d8%a7%d9%87-%d9%be%d8%b1%d8%b3%d9%be%d9%88%d9%84%db%8c%d8%b3-%d9%85%d8%b1%d8%a8%db%8c-%da%a9%d8%b1%d9%88%d8%a7%d8%aa-%d9%85%db%8c%d8%ae%d9%88%d8%a7%d9%87%d8%af\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fa-IR\",\"@id\":\"https:\/\/itimes.ir\/%d8%a8%d8%a7%d8%b4%da%af%d8%a7%d9%87-%d9%be%d8%b1%d8%b3%d9%be%d9%88%d9%84%db%8c%d8%b3-%d9%85%d8%b1%d8%a8%db%8c-%da%a9%d8%b1%d9%88%d8%a7%d8%aa-%d9%85%db%8c%d8%ae%d9%88%d8%a7%d9%87%d8%af\/#primaryimage\",\"url\":\"https:\/\/itimes.ir\/wp-content\/uploads\/2024\/12\/109628.jpg\",\"contentUrl\":\"https:\/\/itimes.ir\/wp-content\/uploads\/2024\/12\/109628.jpg\",\"width\":1200,\"height\":675},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/itimes.ir\/%d8%a8%d8%a7%d8%b4%da%af%d8%a7%d9%87-%d9%be%d8%b1%d8%b3%d9%be%d9%88%d9%84%db%8c%d8%b3-%d9%85%d8%b1%d8%a8%db%8c-%da%a9%d8%b1%d9%88%d8%a7%d8%aa-%d9%85%db%8c%d8%ae%d9%88%d8%a7%d9%87%d8%af\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u062e\u0627\u0646\u0647\",\"item\":\"https:\/\/itimes.ir\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0628\u0627\u0634\u06af\u0627\u0647 \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633 \u0645\u0631\u0628\u06cc \u06a9\u0631\u0648\u0627\u062a \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u062f\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/itimes.ir\/#website\",\"url\":\"https:\/\/itimes.ir\/\",\"name\":\"\u0622\u06cc \u062a\u0627\u06cc\u0645\u0632 | \u062c\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0622\u062e\u0631\u06cc\u0646 \u062e\u0628\u0631\u0647\u0627\u06cc \u0645\u0647\u0645\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/itimes.ir\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fa-IR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/itimes.ir\/#\/schema\/person\/ccf433393293f15a958df585fbab9ad1\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fa-IR\",\"@id\":\"https:\/\/itimes.ir\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/24082aba70a57a3786edce34f137e2be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/24082aba70a57a3786edce34f137e2be?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/itimes.ir\"],\"url\":\"https:\/\/itimes.ir\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u0628\u0627\u0634\u06af\u0627\u0647 \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633 \u0645\u0631\u0628\u06cc \u06a9\u0631\u0648\u0627\u062a \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u062f - \u0622\u06cc \u062a\u0627\u06cc\u0645\u0632","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itimes.ir\/\u0628\u0627\u0634\u06af\u0627\u0647-\u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633-\u0645\u0631\u0628\u06cc-\u06a9\u0631\u0648\u0627\u062a-\u0645\u06cc\u062e\u0648\u0627\u0647\u062f\/","og_locale":"fa_IR","og_type":"article","og_title":"\u0628\u0627\u0634\u06af\u0627\u0647 \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633 \u0645\u0631\u0628\u06cc \u06a9\u0631\u0648\u0627\u062a \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u062f - \u0622\u06cc \u062a\u0627\u06cc\u0645\u0632","og_description":"\u0628\u0647 \u06af\u0632\u0627\u0631\u0634 \u062e\u0628\u0631 \u0648\u0631\u0632\u0634\u06cc\u060c \u062f\u0648\u0631\u0627\u0646 \u067e\u0633\u0627 \u06af\u0627\u0631\u06cc\u062f\u0648 \u0647\u0645\u0686\u0646\u0627\u0646 \u0627\u062f\u0627\u0645\u0647 \u062f\u0627\u0631\u062f \u0648 \u0628\u0627\u0634\u06af\u0627\u0647 \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u062c\u0630\u0628 \u06cc\u06a9 \u0633\u0631\u0645\u0631\u0628\u06cc \u0634\u0646\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u062a\u0627 \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u062e\u0627\u062a\u0645\u0647 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0641\u0636\u0627\u06cc \u0646\u0647 \u0686\u0646\u062f\u0627\u0646 \u0645\u0646\u0627\u0633\u0628 \u0627\u06cc\u0646 \u0631\u0648\u0632\u0647\u0627\u060c \u0634\u0631\u0627\u06cc\u0637 \u0641\u0646\u06cc \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633 \u0631\u0627 \u0646\u06cc\u0632 \u0628\u0647 \u062f\u0648\u0631\u0627\u0646 \u062e\u0648\u0628 \u06af\u0630\u0634\u062a\u0647 \u0628\u0627\u0632\u06af\u0631\u062f\u0627\u0646\u062f.\u00a0 \u062a\u062c\u0631\u0628\u0647 \u0645\u062b\u0628\u062a \u062d\u0636\u0648\u0631 \u0645\u0631\u0628\u06cc\u0627\u0646\u06cc \u0686\u0648\u0646 \u0627\u0633\u062a\u0627\u0646\u06a9\u0648 \u0648 \u0628\u0631\u0627\u0646\u06a9\u0648 \u0628\u0627\u0639\u062b \u0634\u062f\u0647 \u062a\u0627 \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633\u06cc\u200c\u0647\u0627 […]","og_url":"https:\/\/itimes.ir\/\u0628\u0627\u0634\u06af\u0627\u0647-\u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633-\u0645\u0631\u0628\u06cc-\u06a9\u0631\u0648\u0627\u062a-\u0645\u06cc\u062e\u0648\u0627\u0647\u062f\/","og_site_name":"\u0648\u0628\u0633\u0627\u06cc\u062a \u062e\u0628\u0631\u06cc \u0622\u06cc \u062a\u0627\u06cc\u0645\u0632","article_published_time":"2024-12-26T12:57:55+00:00","og_image":[{"url":"https:\/\/media.khabarvarzeshi.com\/d\/2020\/12\/16\/4\/109628.jpg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u0646\u0648\u0634\u062a\u0647\u200c\u0634\u062f\u0647 \u0628\u062f\u0633\u062a":"admin"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/itimes.ir\/%d8%a8%d8%a7%d8%b4%da%af%d8%a7%d9%87-%d9%be%d8%b1%d8%b3%d9%be%d9%88%d9%84%db%8c%d8%b3-%d9%85%d8%b1%d8%a8%db%8c-%da%a9%d8%b1%d9%88%d8%a7%d8%aa-%d9%85%db%8c%d8%ae%d9%88%d8%a7%d9%87%d8%af\/","url":"https:\/\/itimes.ir\/%d8%a8%d8%a7%d8%b4%da%af%d8%a7%d9%87-%d9%be%d8%b1%d8%b3%d9%be%d9%88%d9%84%db%8c%d8%b3-%d9%85%d8%b1%d8%a8%db%8c-%da%a9%d8%b1%d9%88%d8%a7%d8%aa-%d9%85%db%8c%d8%ae%d9%88%d8%a7%d9%87%d8%af\/","name":"\u0628\u0627\u0634\u06af\u0627\u0647 \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633 \u0645\u0631\u0628\u06cc \u06a9\u0631\u0648\u0627\u062a \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u062f - \u0622\u06cc \u062a\u0627\u06cc\u0645\u0632","isPartOf":{"@id":"https:\/\/itimes.ir\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itimes.ir\/%d8%a8%d8%a7%d8%b4%da%af%d8%a7%d9%87-%d9%be%d8%b1%d8%b3%d9%be%d9%88%d9%84%db%8c%d8%b3-%d9%85%d8%b1%d8%a8%db%8c-%da%a9%d8%b1%d9%88%d8%a7%d8%aa-%d9%85%db%8c%d8%ae%d9%88%d8%a7%d9%87%d8%af\/#primaryimage"},"image":{"@id":"https:\/\/itimes.ir\/%d8%a8%d8%a7%d8%b4%da%af%d8%a7%d9%87-%d9%be%d8%b1%d8%b3%d9%be%d9%88%d9%84%db%8c%d8%b3-%d9%85%d8%b1%d8%a8%db%8c-%da%a9%d8%b1%d9%88%d8%a7%d8%aa-%d9%85%db%8c%d8%ae%d9%88%d8%a7%d9%87%d8%af\/#primaryimage"},"thumbnailUrl":"https:\/\/itimes.ir\/wp-content\/uploads\/2024\/12\/109628.jpg","datePublished":"2024-12-26T12:57:55+00:00","dateModified":"2024-12-26T12:57:55+00:00","author":{"@id":"https:\/\/itimes.ir\/#\/schema\/person\/ccf433393293f15a958df585fbab9ad1"},"breadcrumb":{"@id":"https:\/\/itimes.ir\/%d8%a8%d8%a7%d8%b4%da%af%d8%a7%d9%87-%d9%be%d8%b1%d8%b3%d9%be%d9%88%d9%84%db%8c%d8%b3-%d9%85%d8%b1%d8%a8%db%8c-%da%a9%d8%b1%d9%88%d8%a7%d8%aa-%d9%85%db%8c%d8%ae%d9%88%d8%a7%d9%87%d8%af\/#breadcrumb"},"inLanguage":"fa-IR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itimes.ir\/%d8%a8%d8%a7%d8%b4%da%af%d8%a7%d9%87-%d9%be%d8%b1%d8%b3%d9%be%d9%88%d9%84%db%8c%d8%b3-%d9%85%d8%b1%d8%a8%db%8c-%da%a9%d8%b1%d9%88%d8%a7%d8%aa-%d9%85%db%8c%d8%ae%d9%88%d8%a7%d9%87%d8%af\/"]}]},{"@type":"ImageObject","inLanguage":"fa-IR","@id":"https:\/\/itimes.ir\/%d8%a8%d8%a7%d8%b4%da%af%d8%a7%d9%87-%d9%be%d8%b1%d8%b3%d9%be%d9%88%d9%84%db%8c%d8%b3-%d9%85%d8%b1%d8%a8%db%8c-%da%a9%d8%b1%d9%88%d8%a7%d8%aa-%d9%85%db%8c%d8%ae%d9%88%d8%a7%d9%87%d8%af\/#primaryimage","url":"https:\/\/itimes.ir\/wp-content\/uploads\/2024\/12\/109628.jpg","contentUrl":"https:\/\/itimes.ir\/wp-content\/uploads\/2024\/12\/109628.jpg","width":1200,"height":675},{"@type":"BreadcrumbList","@id":"https:\/\/itimes.ir\/%d8%a8%d8%a7%d8%b4%da%af%d8%a7%d9%87-%d9%be%d8%b1%d8%b3%d9%be%d9%88%d9%84%db%8c%d8%b3-%d9%85%d8%b1%d8%a8%db%8c-%da%a9%d8%b1%d9%88%d8%a7%d8%aa-%d9%85%db%8c%d8%ae%d9%88%d8%a7%d9%87%d8%af\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u062e\u0627\u0646\u0647","item":"https:\/\/itimes.ir\/"},{"@type":"ListItem","position":2,"name":"\u0628\u0627\u0634\u06af\u0627\u0647 \u067e\u0631\u0633\u067e\u0648\u0644\u06cc\u0633 \u0645\u0631\u0628\u06cc \u06a9\u0631\u0648\u0627\u062a \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u062f"}]},{"@type":"WebSite","@id":"https:\/\/itimes.ir\/#website","url":"https:\/\/itimes.ir\/","name":"\u0622\u06cc \u062a\u0627\u06cc\u0645\u0632 | \u062c\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0622\u062e\u0631\u06cc\u0646 \u062e\u0628\u0631\u0647\u0627\u06cc \u0645\u0647\u0645","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itimes.ir\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fa-IR"},{"@type":"Person","@id":"https:\/\/itimes.ir\/#\/schema\/person\/ccf433393293f15a958df585fbab9ad1","name":"admin","image":{"@type":"ImageObject","inLanguage":"fa-IR","@id":"https:\/\/itimes.ir\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/24082aba70a57a3786edce34f137e2be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/24082aba70a57a3786edce34f137e2be?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/itimes.ir"],"url":"https:\/\/itimes.ir\/author\/admin\/"}]}},"views":3,"_links":{"self":[{"href":"https:\/\/itimes.ir\/wp-json\/wp\/v2\/posts\/13985","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itimes.ir\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itimes.ir\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itimes.ir\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/itimes.ir\/wp-json\/wp\/v2\/comments?post=13985"}],"version-history":[{"count":0,"href":"https:\/\/itimes.ir\/wp-json\/wp\/v2\/posts\/13985\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itimes.ir\/wp-json\/wp\/v2\/media\/13986"}],"wp:attachment":[{"href":"https:\/\/itimes.ir\/wp-json\/wp\/v2\/media?parent=13985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itimes.ir\/wp-json\/wp\/v2\/categories?post=13985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itimes.ir\/wp-json\/wp\/v2\/tags?post=13985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}