GC_Theme_JSON
最后更新于：2021-11-26 01:51:20
GC_Theme_JSONClass that encapsulates the processing of structures that adhere to the theme.json spec.
源文件
文件: gc-includes/class-gc-theme-json.php
class GC_Theme_JSON {
/**
* Container of data in theme.json format.
*
* @since 5.8.0
* @var array
*/
private $theme_json = null;
/**
* Holds block metadata extracted from block.json
* to be shared among all instances so we don't
* process it twice.
*
* @since 5.8.0
* @var array
*/
private static $blocks_metadata = null;
/**
* The CSS selector for the top-level styles.
*
* @since 5.8.0
* @var string
*/
const ROOT_BLOCK_SELECTOR = 'body';
/**
* The sources of data this object can represent.
*
* @since 5.8.0
* @var array
*/
const VALID_ORIGINS = array(
'core',
'theme',
'user',
);
/**
* Presets are a set of values that serve
* to bootstrap some styles: colors, font sizes, etc.
*
* They are a unkeyed array of values such as:
*
* ```php
* array(
* array(
* 'slug' => 'unique-name-within-the-set',
* 'name' => 'Name for the UI',
* <value_key> => 'value'
* ),
* )
* ```
*
* This contains the necessary metadata to process them:
*
* - path => where to find the preset within the settings section
*
* - value_key => the key that represents the value
*
* - css_var_infix => infix to use in generating the CSS Custom Property. Example:
* --gc--preset--<preset_infix>--<slug>: <preset_value>
*
* - classes => array containing a structure with the classes to
* generate for the presets. Each class should have
* the class suffix and the property name. Example:
*
* .has-<slug>-<class_suffix> {
* <property_name>: <preset_value>
* }
*
* @since 5.8.0
* @var array
*/
const PRESETS_METADATA = array(
array(
'path' => array( 'color', 'palette' ),
'value_key' => 'color',
'css_var_infix' => 'color',
'classes' => array(
array(
'class_suffix' => 'color',
'property_name' => 'color',
),
array(
'class_suffix' => 'background-color',
'property_name' => 'background-color',
),
),
),
array(
'path' => array( 'color', 'gradients' ),
'value_key' => 'gradient',
'css_var_infix' => 'gradient',
'classes' => array(
array(
'class_suffix' => 'gradient-background',
'property_name' => 'background',
),
),
),
array(
'path' => array( 'typography', 'fontSizes' ),
'value_key' => 'size',
'css_var_infix' => 'font-size',
'classes' => array(
array(
'class_suffix' => 'font-size',
'property_name' => 'font-size',
),
),
),
);
/**
* Metadata for style properties.
*
* Each property declares:
*
* - 'value': path to the value in theme.json and block attributes.
*
* @since 5.8.0
* @var array
*/
const PROPERTIES_METADATA = array(
'background' => array(
'value' => array( 'color', 'gradient' ),
),
'background-color' => array(
'value' => array( 'color', 'background' ),
),
'color' => array(
'value' => array( 'color', 'text' ),
),
'font-size' => array(
'value' => array( 'typography', 'fontSize' ),
),
'line-height' => array(
'value' => array( 'typography', 'lineHeight' ),
),
'margin' => array(
'value' => array( 'spacing', 'margin' ),
'properties' => array( 'top', 'right', 'bottom', 'left' ),
),
'padding' => array(
'value' => array( 'spacing', 'padding' ),
'properties' => array( 'top', 'right', 'bottom', 'left' ),
),
);
/**
* @since 5.8.0
* @var array
*/
const ALLOWED_TOP_LEVEL_KEYS = array(
'settings',
'styles',
'version',
);
/**
* @since 5.8.0
* @var array
*/
const ALLOWED_SETTINGS = array(
'border' => array(
'customRadius' => null,
),
'color' => array(
'custom' => null,
'customDuotone' => null,
'customGradient' => null,
'duotone' => null,
'gradients' => null,
'link' => null,
'palette' => null,
),
'custom' => null,
'layout' => array(
'contentSize' => null,
'wideSize' => null,
),
'spacing' => array(
'customMargin' => null,
'customPadding' => null,
'units' => null,
),
'typography' => array(
'customFontSize' => null,
'customLineHeight' => null,
'dropCap' => null,
'fontSizes' => null,
),
);
/**
* @since 5.8.0
* @var array
*/
const ALLOWED_STYLES = array(
'border' => array(
'radius' => null,
),
'color' => array(
'background' => null,
'gradient' => null,
'text' => null,
),
'spacing' => array(
'margin' => array(
'top' => null,
'right' => null,
'bottom' => null,
'left' => null,
),
'padding' => array(
'bottom' => null,
'left' => null,
'right' => null,
'top' => null,
),
),
'typography' => array(
'fontSize' => null,
'lineHeight' => null,
),
);
/**
* @since 5.8.0
* @var array
*/
const ELEMENTS = array(
'link' => 'a',
'h1' => 'h1',
'h2' => 'h2',
'h3' => 'h3',
'h4' => 'h4',
'h5' => 'h5',
'h6' => 'h6',
);
/**
* @since 5.8.0
* @var int
*/
const LATEST_SCHEMA = 1;
/**
* Constructor.
*
* @since 5.8.0
*
* @param array $theme_json A structure that follows the theme.json schema.
* @param string $origin Optional. What source of data this object represents.
* One of 'core', 'theme', or 'user'. Default 'theme'.
*/
public function __construct( $theme_json = array(), $origin = 'theme' ) {
if ( ! in_array( $origin, self::VALID_ORIGINS, true ) ) {
$origin = 'theme';
}
if ( ! isset( $theme_json['version'] ) || self::LATEST_SCHEMA !== $theme_json['version'] ) {
$this->theme_json = array();
return;
}
$this->theme_json = self::sanitize( $theme_json );
// Internally, presets are keyed by origin.
$nodes = self::get_setting_nodes( $this->theme_json );
foreach ( $nodes as $node ) {
foreach ( self::PRESETS_METADATA as $preset ) {
$path = array_merge( $node['path'], $preset['path'] );
$preset = _gc_array_get( $this->theme_json, $path, null );
if ( null !== $preset ) {
_gc_array_set( $this->theme_json, $path, array( $origin => $preset ) );
}
}
}
}
/**
* Sanitizes the input according to the schemas.
*
* @since 5.8.0
*
* @param array $input Structure to sanitize.
* @return array The sanitized output.
*/
private static function sanitize( $input ) {
$output = array();
if ( ! is_array( $input ) ) {
return $output;
}
$allowed_top_level_keys = self::ALLOWED_TOP_LEVEL_KEYS;
$allowed_settings = self::ALLOWED_SETTINGS;
$allowed_styles = self::ALLOWED_STYLES;
$allowed_blocks = array_keys( self::get_blocks_metadata() );
$allowed_elements = array_keys( self::ELEMENTS );
$output = array_intersect_key( $input, array_flip( $allowed_top_level_keys ) );
// Build the schema.
$schema = array();
$schema_styles_elements = array();
foreach ( $allowed_elements as $element ) {
$schema_styles_elements[ $element ] = $allowed_styles;
}
$schema_styles_blocks = array();
$schema_settings_blocks = array();
foreach ( $allowed_blocks as $block ) {
$schema_settings_blocks[ $block ] = $allowed_settings;
$schema_styles_blocks[ $block ] = $allowed_styles;
$schema_styles_blocks[ $block ]['elements'] = $schema_styles_elements;
}
$schema['styles'] = $allowed_styles;
$schema['styles']['blocks'] = $schema_styles_blocks;
$schema['styles']['elements'] = $schema_styles_elements;
$schema['settings'] = $allowed_settings;
$schema['settings']['blocks'] = $schema_settings_blocks;
// Remove anything that's not present in the schema.
foreach ( array( 'styles', 'settings' ) as $subtree ) {
if ( ! isset( $input[ $subtree ] ) ) {
continue;
}
if ( ! is_array( $input[ $subtree ] ) ) {
unset( $output[ $subtree ] );
continue;
}
$result = self::remove_keys_not_in_schema( $input[ $subtree ], $schema[ $subtree ] );
if ( empty( $result ) ) {
unset( $output[ $subtree ] );
} else {
$output[ $subtree ] = $result;
}
}
return $output;
}
/**
* 响应s the metadata for each block.
*
* Example:
*
* {
* 'core/paragraph': {
* 'selector': 'p',
* 'elements': {
* 'link' => 'link selector',
* 'etc' => 'element selector'
* }
* },
* 'core/heading': {
* 'selector': 'h1',
* 'elements': {}
* }
* 'core/group': {
* 'selector': '.gc-block-group',
* 'elements': {}
* }
* }
*
* @since 5.8.0
*
* @return array Block metadata.
*/
private static function get_blocks_metadata() {
if ( null !== self::$blocks_metadata ) {
return self::$blocks_metadata;
}
self::$blocks_metadata = array();
$registry = GC_Block_Type_Registry::get_instance();
$blocks = $registry->get_all_registered();
foreach ( $blocks as $block_name => $block_type ) {
if (
isset( $block_type->supports['__experimentalSelector'] ) &&
is_string( $block_type->supports['__experimentalSelector'] )
) {
self::$blocks_metadata[ $block_name ]['selector'] = $block_type->supports['__experimentalSelector'];
} else {
self::$blocks_metadata[ $block_name ]['selector'] = '.gc-block-' . str_replace( '/', '-', str_replace( 'core/', '', $block_name ) );
}
/*
* Assign defaults, then overwrite those that the block sets by itself.
* If the block selector is compounded, will append the element to each
* individual block selector.
*/
$block_selectors = explode( ',', self::$blocks_metadata[ $block_name ]['selector'] );
foreach ( self::ELEMENTS as $el_name => $el_selector ) {
$element_selector = array();
foreach ( $block_selectors as $selector ) {
$element_selector[] = $selector . ' ' . $el_selector;
}
self::$blocks_metadata[ $block_name ]['elements'][ $el_name ] = implode( ',', $element_selector );
}
}
return self::$blocks_metadata;
}
/**
* Given a tree, removes the keys that are not present in the schema.
*
* It is recursive and modifies the input in-place.
*
* @since 5.8.0
*
* @param array $tree Input to process.
* @param array $schema Schema to adhere to.
* @return array 响应s the modified $tree.
*/
private static function remove_keys_not_in_schema( $tree, $schema ) {
$tree = array_intersect_key( $tree, $schema );
foreach ( $schema as $key => $data ) {
if ( ! isset( $tree[ $key ] ) ) {
continue;
}
if ( is_array( $schema[ $key ] ) && is_array( $tree[ $key ] ) ) {
$tree[ $key ] = self::remove_keys_not_in_schema( $tree[ $key ], $schema[ $key ] );
if ( empty( $tree[ $key ] ) ) {
unset( $tree[ $key ] );
}
} elseif ( is_array( $schema[ $key ] ) && ! is_array( $tree[ $key ] ) ) {
unset( $tree[ $key ] );
}
}
return $tree;
}
/**
* 响应s the existing settings for each block.
*
* Example:
*
* {
* 'root': {
* 'color': {
* 'custom': true
* }
* },
* 'core/paragraph': {
* 'spacing': {
* 'customPadding': true
* }
* }
* }
*
* @since 5.8.0
*
* @return array Settings per block.
*/
public function get_settings() {
if ( ! isset( $this->theme_json['settings'] ) ) {
return array();
} else {
return $this->theme_json['settings'];
}
}
/**
* 响应s the stylesheet that results of processing
* the theme.json structure this object represents.
*
* @since 5.8.0
*
* @param string $type Optional. Type of stylesheet we want. Accepts 'all',
* 'block_styles', and 'css_variables'. Default 'all'.
* @return string Stylesheet.
*/
public function get_stylesheet( $type = 'all' ) {
$blocks_metadata = self::get_blocks_metadata();
$style_nodes = self::get_style_nodes( $this->theme_json, $blocks_metadata );
$setting_nodes = self::get_setting_nodes( $this->theme_json, $blocks_metadata );
switch ( $type ) {
case 'block_styles':
return $this->get_block_styles( $style_nodes, $setting_nodes );
case 'css_variables':
return $this->get_css_variables( $setting_nodes );
default:
return $this->get_css_variables( $setting_nodes ) . $this->get_block_styles( $style_nodes, $setting_nodes );
}
}
/**
* Converts each style section into a list of rulesets
* containing the block styles to be appended to the stylesheet.
*
* See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
*
* For each section this creates a new ruleset such as:
*
* block-selector {
* style-property-one: value;
* }
*
* Additionally, it'll also create new rulesets
* as classes for each preset value such as:
*
* .has-value-color {
* color: value;
* }
*
* .has-value-background-color {
* background-color: value;
* }
*
* .has-value-font-size {
* font-size: value;
* }
*
* .has-value-gradient-background {
* background: value;
* }
*
* p.has-value-gradient-background {
* background: value;
* }
*
* @since 5.8.0
*
* @param array $style_nodes Nodes with styles.
* @param array $setting_nodes Nodes with settings.
* @return string The new stylesheet.
*/
private function get_block_styles( $style_nodes, $setting_nodes ) {
$block_rules = '';
foreach ( $style_nodes as $metadata ) {
if ( null === $metadata['selector'] ) {
continue;
}
$node = _gc_array_get( $this->theme_json, $metadata['path'], array() );
$selector = $metadata['selector'];
$declarations = self::compute_style_properties( $node );
$block_rules .= self::to_ruleset( $selector, $declarations );
}
$preset_rules = '';
foreach ( $setting_nodes as $metadata ) {
if ( null === $metadata['selector'] ) {
continue;
}
$selector = $metadata['selector'];
$node = _gc_array_get( $this->theme_json, $metadata['path'], array() );
$preset_rules .= self::compute_preset_classes( $node, $selector );
}
return $block_rules . $preset_rules;
}
/**
* Converts each styles section into a list of rulesets
* to be appended to the stylesheet.
* These rulesets contain all the css variables (custom variables and preset variables).
*
* See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
*
* For each section this creates a new ruleset such as:
*
* block-selector {
* --gc--preset--category--slug: value;
* --gc--custom--variable: value;
* }
*
* @since 5.8.0
*
* @param array $nodes Nodes with settings.
* @return string The new stylesheet.
*/
private function get_css_variables( $nodes ) {
$stylesheet = '';
foreach ( $nodes as $metadata ) {
if ( null === $metadata['selector'] ) {
continue;
}
$selector = $metadata['selector'];
$node = _gc_array_get( $this->theme_json, $metadata['path'], array() );
$declarations = array_merge( self::compute_preset_vars( $node ), self::compute_theme_vars( $node ) );
$stylesheet .= self::to_ruleset( $selector, $declarations );
}
return $stylesheet;
}
/**
* Given a selector and a declaration list,
* creates the corresponding ruleset.
*
* @since 5.8.0
*
* @param string $selector CSS selector.
* @param array $declarations List of declarations.
* @return string CSS ruleset.
*/
private static function to_ruleset( $selector, $declarations ) {
if ( empty( $declarations ) ) {
return '';
}
$declaration_block = array_reduce(
$declarations,
function ( $carry, $element ) {
return $carry .= $element['name'] . ': ' . $element['value'] . ';'; },
''
);
return $selector . '{' . $declaration_block . '}';
}
/**
* Function that appends a sub-selector to a existing one.
*
* Given the compounded $selector "h1, h2, h3"
* and the $to_append selector ".some-class" the result will be
* "h1.some-class, h2.some-class, h3.some-class".
*
* @since 5.8.0
*
* @param string $selector Original selector.
* @param string $to_append Selector to append.
* @return string
*/
private static function append_to_selector( $selector, $to_append ) {
$new_selectors = array();
$selectors = explode( ',', $selector );
foreach ( $selectors as $sel ) {
$new_selectors[] = $sel . $to_append;
}
return implode( ',', $new_selectors );
}
/**
* Given an array of presets keyed by origin and the value key of the preset,
* it returns an array where each key is the preset slug and each value the preset value.
*
* @since 5.8.0
*
* @param array $preset_per_origin Array of presets keyed by origin.
* @param string $value_key The property of the preset that contains its value.
* @return array Array of presets where each key is a slug and each value is the preset value.
*/
private static function get_merged_preset_by_slug( $preset_per_origin, $value_key ) {
$result = array();
foreach ( self::VALID_ORIGINS as $origin ) {
if ( ! isset( $preset_per_origin[ $origin ] ) ) {
continue;
}
foreach ( $preset_per_origin[ $origin ] as $preset ) {
/*
* We don't want to use kebabCase here,
* see https://github.com/GeChiUI/gutenberg/issues/32347
* However, we need to make sure the generated class or CSS variable
* doesn't contain spaces.
*/
$result[ preg_replace( '/s+/', '-', $preset['slug'] ) ] = $preset[ $value_key ];
}
}
return $result;
}
/**
* Given a settings array, it returns the generated rulesets
* for the preset classes.
*
* @since 5.8.0
*
* @param array $settings Settings to process.
* @param string $selector Selector wrapping the classes.
* @return string The result of processing the presets.
*/
private static function compute_preset_classes( $settings, $selector ) {
if ( self::ROOT_BLOCK_SELECTOR === $selector ) {
// Classes at the global level do not need any CSS prefixed,
// and we don't want to increase its specificity.
$selector = '';
}
$stylesheet = '';
foreach ( self::PRESETS_METADATA as $preset ) {
$preset_per_origin = _gc_array_get( $settings, $preset['path'], array() );
$preset_by_slug = self::get_merged_preset_by_slug( $preset_per_origin, $preset['value_key'] );
foreach ( $preset['classes'] as $class ) {
foreach ( $preset_by_slug as $slug => $value ) {
$stylesheet .= self::to_ruleset(
self::append_to_selector( $selector, '.has-' . _gc_to_kebab_case( $slug ) . '-' . $class['class_suffix'] ),
array(
array(
'name' => $class['property_name'],
'value' => 'var(--gc--preset--' . $preset['css_var_infix'] . '--' . _gc_to_kebab_case( $slug ) . ') !important',
),
)
);
}
}
}
return $stylesheet;
}
/**
* Given the block settings, it extracts the CSS Custom Properties
* for the presets and adds them to the $declarations array
* following the format:
*
* array(
* 'name' => 'property_name',
* 'value' => 'property_value,
* )
*
* @since 5.8.0
*
* @param array $settings Settings to process.
* @return array 响应s the modified $declarations.
*/
private static function compute_preset_vars( $settings ) {
$declarations = array();
foreach ( self::PRESETS_METADATA as $preset ) {
$preset_per_origin = _gc_array_get( $settings, $preset['path'], array() );
$preset_by_slug = self::get_merged_preset_by_slug( $preset_per_origin, $preset['value_key'] );
foreach ( $preset_by_slug as $slug => $value ) {
$declarations[] = array(
'name' => '--gc--preset--' . $preset['css_var_infix'] . '--' . _gc_to_kebab_case( $slug ),
'value' => $value,
);
}
}
return $declarations;
}
/**
* Given an array of settings, it extracts the CSS Custom Properties
* for the custom values and adds them to the $declarations
* array following the format:
*
* array(
* 'name' => 'property_name',
* 'value' => 'property_value,
* )
*
* @since 5.8.0
*
* @param array $settings Settings to process.
* @return array 响应s the modified $declarations.
*/
private static function compute_theme_vars( $settings ) {
$declarations = array();
$custom_values = _gc_array_get( $settings, array( 'custom' ), array() );
$css_vars = self::flatten_tree( $custom_values );
foreach ( $css_vars as $key => $value ) {
$declarations[] = array(
'name' => '--gc--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 '--gc'
* and the token is '--', for this input tree:
*
* {
* 'some/property': 'value',
* 'nestedProperty': {
* 'sub-property': 'value'
* }
* }
*
* it'll return this output:
*
* {
* '--gc--some-property': 'value',
* '--gc--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.
*/
private static function flatten_tree( $tree, $prefix = '', $token = '--' ) {
$result = array();
foreach ( $tree as $property => $value ) {
$new_key = $prefix . str_replace(
'/',
'-',
strtolower( preg_replace( '/(?<!^)[A-Z]/', '-$0', $property ) ) // CamelCase to kebab-case.
);
if ( is_array( $value ) ) {
$new_prefix = $new_key . $token;
$result = array_merge(
$result,
self::flatten_tree( $value, $new_prefix, $token )
);
} else {
$result[ $new_key ] = $value;
}
}
return $result;
}
/**
* Given a styles array, it extracts the style properties
* and adds them to the $declarations array following the format:
*
* array(
* 'name' => 'property_name',
* 'value' => 'property_value,
* )
*
* @since 5.8.0
*
* @param array $styles Styles to process.
* @return array 响应s the modified $declarations.
*/
private static function compute_style_properties( $styles ) {
$declarations = array();
if ( empty( $styles ) ) {
return $declarations;
}
$properties = array();
foreach ( self::PROPERTIES_METADATA as $name => $metadata ) {
/*
* Some properties can be shorthand properties, meaning that
* they contain multiple values instead of a single one.
* An example of this is the padding property.
*/
if ( self::has_properties( $metadata ) ) {
foreach ( $metadata['properties'] as $property ) {
$properties[] = array(
'name' => $name . '-' . $property,
'value' => array_merge( $metadata['value'], array( $property ) ),
);
}
} else {
$properties[] = array(
'name' => $name,
'value' => $metadata['value'],
);
}
}
foreach ( $properties as $prop ) {
$value = self::get_property_value( $styles, $prop['value'] );
if ( empty( $value ) ) {
continue;
}
$declarations[] = array(
'name' => $prop['name'],
'value' => $value,
);
}
return $declarations;
}
/**
* Whether the metadata contains a key named properties.
*
* @since 5.8.0
*
* @param array $metadata Description of the style property.
* @return bool True if properties exists, false otherwise.
*/
private static function has_properties( $metadata ) {
if ( array_key_exists( 'properties', $metadata ) ) {
return true;
}
return false;
}
/**
* 响应s the style property for the given path.
*
* It also converts CSS Custom Property stored as
* "var:preset|color|secondary" to the form
* "--gc--preset--color--secondary".
*
* @since 5.8.0
*
* @param array $styles Styles subtree.
* @param array $path Which property to process.
* @return string Style property value.
*/
private static function get_property_value( $styles, $path ) {
$value = _gc_array_get( $styles, $path, '' );
if ( '' === $value ) {
return $value;
}
$prefix = 'var:';
$prefix_len = strlen( $prefix );
$token_in = '|';
$token_out = '--';
if ( 0 === strncmp( $value, $prefix, $prefix_len ) ) {
$unwrapped_name = str_replace(
$token_in,
$token_out,
substr( $value, $prefix_len )
);
$value = "var(--gc--$unwrapped_name)";
}
return $value;
}
/**
* Builds metadata for the setting nodes, which returns in the form of:
*
* [
* [
* 'path' => ['path', 'to', 'some', 'node' ],
* 'selector' => 'CSS selector for some node'
* ],
* [
* 'path' => [ 'path', 'to', 'other', 'node' ],
* 'selector' => 'CSS selector for other node'
* ],
* ]
*
* @since 5.8.0
*
* @param array $theme_json The tree to extract setting nodes from.
* @param array $selectors List of selectors per block.
* @return array
*/
private 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' => self::ROOT_BLOCK_SELECTOR,
);
// Calculate paths for blocks.
if ( ! isset( $theme_json['settings']['blocks'] ) ) {
return $nodes;
}
foreach ( $theme_json['settings']['blocks'] as $name => $node ) {
$selector = null;
if ( isset( $selectors[ $name ]['selector'] ) ) {
$selector = $selectors[ $name ]['selector'];
}
$nodes[] = array(
'path' => array( 'settings', 'blocks', $name ),
'selector' => $selector,
);
}
return $nodes;
}
/**
* Builds metadata for the style nodes, which returns in the form of:
*
* [
* [
* 'path' => [ 'path', 'to', 'some', 'node' ],
* 'selector' => 'CSS selector for some node'
* ],
* [
* 'path' => ['path', 'to', 'other', 'node' ],
* 'selector' => 'CSS selector for other node'
* ],
* ]
*
* @since 5.8.0
*
* @param array $theme_json The tree to extract style nodes from.
* @param array $selectors List of selectors per block.
* @return array
*/
private static function get_style_nodes( $theme_json, $selectors = array() ) {
$nodes = array();
if ( ! isset( $theme_json['styles'] ) ) {
return $nodes;
}
// Top-level.
$nodes[] = array(
'path' => array( 'styles' ),
'selector' => self::ROOT_BLOCK_SELECTOR,
);
if ( isset( $theme_json['styles']['elements'] ) ) {
foreach ( $theme_json['styles']['elements'] as $element => $node ) {
$nodes[] = array(
'path' => array( 'styles', 'elements', $element ),
'selector' => self::ELEMENTS[ $element ],
);
}
}
// Blocks.
if ( ! isset( $theme_json['styles']['blocks'] ) ) {
return $nodes;
}
foreach ( $theme_json['styles']['blocks'] as $name => $node ) {
$selector = null;
if ( isset( $selectors[ $name ]['selector'] ) ) {
$selector = $selectors[ $name ]['selector'];
}
$nodes[] = array(
'path' => array( 'styles', 'blocks', $name ),
'selector' => $selector,
);
if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'] ) ) {
foreach ( $theme_json['styles']['blocks'][ $name ]['elements'] as $element => $node ) {
$nodes[] = array(
'path' => array( 'styles', 'blocks', $name, 'elements', $element ),
'selector' => $selectors[ $name ]['elements'][ $element ],
);
}
}
}
return $nodes;
}
/**
* Merge new incoming data.
*
* @since 5.8.0
*
* @param GC_Theme_JSON $incoming Data to merge.
*/
public function merge( $incoming ) {
$incoming_data = $incoming->get_raw_data();
$this->theme_json = array_replace_recursive( $this->theme_json, $incoming_data );
/*
* The array_replace_recursive() algorithm merges at the leaf level.
* For leaf values that are arrays it will use the numeric indexes for replacement.
* In those cases, we want to replace the existing with the incoming value, if it exists.
*/
$to_replace = array();
$to_replace[] = array( 'spacing', 'units' );
$to_replace[] = array( 'color', 'duotone' );
foreach ( self::VALID_ORIGINS as $origin ) {
$to_replace[] = array( 'color', 'palette', $origin );
$to_replace[] = array( 'color', 'gradients', $origin );
$to_replace[] = array( 'typography', 'fontSizes', $origin );
$to_replace[] = array( 'typography', 'fontFamilies', $origin );
}
$nodes = self::get_setting_nodes( $this->theme_json );
foreach ( $nodes as $metadata ) {
foreach ( $to_replace as $property_path ) {
$path = array_merge( $metadata['path'], $property_path );
$node = _gc_array_get( $incoming_data, $path, null );
if ( isset( $node ) ) {
_gc_array_set( $this->theme_json, $path, $node );
}
}
}
}
/**
* 响应s 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' => self::LATEST_SCHEMA,
'settings' => array(),
);
// Deprecated theme supports.
if ( isset( $settings['disableCustomColors'] ) ) {
if ( ! isset( $theme_settings['settings']['color'] ) ) {
$theme_settings['settings']['color'] = array();
}
$theme_settings['settings']['color']['custom'] = ! $settings['disableCustomColors'];
}
if ( isset( $settings['disableCustomGradients'] ) ) {
if ( ! isset( $theme_settings['settings']['color'] ) ) {
$theme_settings['settings']['color'] = array();
}
$theme_settings['settings']['color']['customGradient'] = ! $settings['disableCustomGradients'];
}
if ( isset( $settings['disableCustomFontSizes'] ) ) {
if ( ! isset( $theme_settings['settings']['typography'] ) ) {
$theme_settings['settings']['typography'] = array();
}
$theme_settings['settings']['typography']['customFontSize'] = ! $settings['disableCustomFontSizes'];
}
if ( isset( $settings['enableCustomLineHeight'] ) ) {
if ( ! isset( $theme_settings['settings']['typography'] ) ) {
$theme_settings['settings']['typography'] = array();
}
$theme_settings['settings']['typography']['customLineHeight'] = $settings['enableCustomLineHeight'];
}
if ( isset( $settings['enableCustomUnits'] ) ) {
if ( ! isset( $theme_settings['settings']['spacing'] ) ) {
$theme_settings['settings']['spacing'] = array();
}
$theme_settings['settings']['spacing']['units'] = ( true === $settings['enableCustomUnits'] ) ?
array( 'px', 'em', 'rem', 'vh', 'vw', '%' ) :
$settings['enableCustomUnits'];
}
if ( isset( $settings['colors'] ) ) {
if ( ! isset( $theme_settings['settings']['color'] ) ) {
$theme_settings['settings']['color'] = array();
}
$theme_settings['settings']['color']['palette'] = $settings['colors'];
}
if ( isset( $settings['gradients'] ) ) {
if ( ! isset( $theme_settings['settings']['color'] ) ) {
$theme_settings['settings']['color'] = array();
}
$theme_settings['settings']['color']['gradients'] = $settings['gradients'];
}
if ( isset( $settings['fontSizes'] ) ) {
$font_sizes = $settings['fontSizes'];
// Back-compatibility for presets without units.
foreach ( $font_sizes as $key => $font_size ) {
if ( is_numeric( $font_size['size'] ) ) {
$font_sizes[ $key ]['size'] = $font_size['size'] . 'px';
}
}
if ( ! isset( $theme_settings['settings']['typography'] ) ) {
$theme_settings['settings']['typography'] = array();
}
$theme_settings['settings']['typography']['fontSizes'] = $font_sizes;
}
if ( isset( $settings['enableCustomSpacing'] ) ) {
if ( ! isset( $theme_settings['settings']['spacing'] ) ) {
$theme_settings['settings']['spacing'] = array();
}
$theme_settings['settings']['spacing']['customPadding'] = $settings['enableCustomSpacing'];
}
// Things that didn't land in core yet, so didn't have a setting assigned.
if ( current( (array) get_theme_support( 'experimental-link-color' ) ) ) {
if ( ! isset( $theme_settings['settings']['color'] ) ) {
$theme_settings['settings']['color'] = array();
}
$theme_settings['settings']['color']['link'] = true;
}
return $theme_settings;
}
}