Skip to content

Theme.json infrastructure changes for WP 5.8 beta 2 #1368

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jorgefilipecosta wants to merge 2 commits into from
Closed

Theme.json infrastructure changes for WP 5.8 beta 2 #1368

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
130923e
Update the WordPress packages with the first batch of fixes for 5.8 b…
youknowriad Jun 14, 2021
43ae322
Adapt theme.json changes.
jorgefilipecosta Jun 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,619 changes: 806 additions & 813 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

52 changes: 26 additions & 26 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,56 +78,56 @@
"dependencies": {
"@babel/polyfill": "7.10.1",
"@wordpress/a11y": "3.1.1",
"@wordpress/annotations": "2.1.1",
"@wordpress/annotations": "2.1.2",
"@wordpress/api-fetch": "5.1.1",
"@wordpress/autop": "3.1.1",
"@wordpress/blob": "3.1.1",
"@wordpress/block-directory": "2.1.5",
"@wordpress/block-editor": "6.1.3",
"@wordpress/block-library": "3.2.4",
"@wordpress/block-directory": "2.1.6",
"@wordpress/block-editor": "6.1.4",
"@wordpress/block-library": "3.2.5",
"@wordpress/block-serialization-default-parser": "4.1.1",
"@wordpress/blocks": "9.1.3",
"@wordpress/components": "14.1.2",
"@wordpress/compose": "4.1.1",
"@wordpress/core-data": "3.1.4",
"@wordpress/customize-widgets": "1.0.4",
"@wordpress/data": "5.1.1",
"@wordpress/data-controls": "2.1.1",
"@wordpress/blocks": "9.1.4",
"@wordpress/components": "14.1.3",
"@wordpress/compose": "4.1.2",
"@wordpress/core-data": "3.1.5",
"@wordpress/customize-widgets": "1.0.5",
"@wordpress/data": "5.1.2",
"@wordpress/data-controls": "2.1.2",
"@wordpress/date": "4.1.1",
"@wordpress/deprecated": "3.1.1",
"@wordpress/dom": "3.1.1",
"@wordpress/dom-ready": "3.1.1",
"@wordpress/edit-post": "4.1.5",
"@wordpress/edit-widgets": "2.1.5",
"@wordpress/editor": "10.1.4",
"@wordpress/edit-post": "4.1.6",
"@wordpress/edit-widgets": "2.1.6",
"@wordpress/editor": "10.1.5",
"@wordpress/element": "3.1.1",
"@wordpress/escape-html": "2.1.1",
"@wordpress/format-library": "2.1.3",
"@wordpress/format-library": "2.1.4",
"@wordpress/hooks": "3.1.1",
"@wordpress/html-entities": "3.1.1",
"@wordpress/i18n": "4.1.1",
"@wordpress/icons": "4.0.1",
"@wordpress/interface": "3.1.2",
"@wordpress/interface": "3.1.3",
"@wordpress/is-shallow-equal": "4.1.1",
"@wordpress/keyboard-shortcuts": "2.1.1",
"@wordpress/keyboard-shortcuts": "2.1.2",
"@wordpress/keycodes": "3.1.1",
"@wordpress/list-reusable-blocks": "2.1.2",
"@wordpress/list-reusable-blocks": "2.1.3",
"@wordpress/media-utils": "2.1.1",
"@wordpress/notices": "3.1.1",
"@wordpress/nux": "4.1.2",
"@wordpress/plugins": "3.1.1",
"@wordpress/notices": "3.1.2",
"@wordpress/nux": "4.1.3",
"@wordpress/plugins": "3.1.2",
"@wordpress/primitives": "2.1.1",
"@wordpress/priority-queue": "2.1.1",
"@wordpress/redux-routine": "4.1.1",
"@wordpress/reusable-blocks": "2.1.4",
"@wordpress/rich-text": "4.1.1",
"@wordpress/server-side-render": "2.1.3",
"@wordpress/reusable-blocks": "2.1.5",
"@wordpress/rich-text": "4.1.2",
"@wordpress/server-side-render": "2.1.4",
"@wordpress/shortcode": "3.1.1",
"@wordpress/token-list": "2.1.1",
"@wordpress/url": "3.1.1",
"@wordpress/viewport": "3.1.1",
"@wordpress/viewport": "3.1.2",
"@wordpress/warning": "2.1.1",
"@wordpress/widgets": "1.1.4",
"@wordpress/widgets": "1.1.5",
"@wordpress/wordcount": "3.1.1",
"backbone": "1.4.0",
"clipboard": "2.0.8",
Expand Down
2 changes: 1 addition & 1 deletion src/wp-includes/assets/script-loader-packages.php
View file
Open in desktop

Large diffs are not rendered by default.

35 changes: 25 additions & 10 deletions src/wp-includes/block-editor.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -296,13 +296,32 @@ function get_block_editor_settings( array $custom_settings, $block_editor_contex

$editor_settings['__experimentalFeatures'] = $theme_json->get_settings();
// These settings may need to be updated based on data coming from theme.json sources.
if ( isset( $editor_settings['__experimentalFeatures']['color']['palette'] ) ) {
$editor_settings['colors'] = $editor_settings['__experimentalFeatures']['color']['palette'];
unset( $editor_settings['__experimentalFeatures']['color']['palette'] );
if ( isset( $settings['__experimentalFeatures']['color']['palette'] ) ) {
$colors_by_origin = $settings['__experimentalFeatures']['color']['palette'];
$settings['colors'] = isset( $colors_by_origin['user'] ) ?
$colors_by_origin['user'] : (
isset( $colors_by_origin['theme'] ) ?
$colors_by_origin['theme'] :
$colors_by_origin['core']
);
}
if ( isset( $editor_settings['__experimentalFeatures']['color']['gradients'] ) ) {
$editor_settings['gradients'] = $editor_settings['__experimentalFeatures']['color']['gradients'];
unset( $editor_settings['__experimentalFeatures']['color']['gradients'] );
if ( isset( $settings['__experimentalFeatures']['color']['gradients'] ) ) {
$gradients_by_origin = $settings['__experimentalFeatures']['color']['gradients'];
$settings['gradients'] = isset( $gradients_by_origin['user'] ) ?
$gradients_by_origin['user'] : (
isset( $gradients_by_origin['theme'] ) ?
$gradients_by_origin['theme'] :
$gradients_by_origin['core']
);
}
if ( isset( $settings['__experimentalFeatures']['typography']['fontSizes'] ) ) {
$font_sizes_by_origin = $settings['__experimentalFeatures']['typography']['fontSizes'];
$settings['fontSizes'] = isset( $font_sizes_by_origin['user'] ) ?
$font_sizes_by_origin['user'] : (
isset( $font_sizes_by_origin['theme'] ) ?
$font_sizes_by_origin['theme'] :
$font_sizes_by_origin['core']
);
}
if ( isset( $editor_settings['__experimentalFeatures']['color']['custom'] ) ) {
$editor_settings['disableCustomColors'] = ! $editor_settings['__experimentalFeatures']['color']['custom'];
Expand All @@ -312,10 +331,6 @@ function get_block_editor_settings( array $custom_settings, $block_editor_contex
$editor_settings['disableCustomGradients'] = ! $editor_settings['__experimentalFeatures']['color']['customGradient'];
unset( $editor_settings['__experimentalFeatures']['color']['customGradient'] );
}
if ( isset( $editor_settings['__experimentalFeatures']['typography']['fontSizes'] ) ) {
$editor_settings['fontSizes'] = $editor_settings['__experimentalFeatures']['typography']['fontSizes'];
unset( $editor_settings['__experimentalFeatures']['typography']['fontSizes'] );
}
if ( isset( $editor_settings['__experimentalFeatures']['typography']['customFontSize'] ) ) {
$editor_settings['disableCustomFontSizes'] = ! $editor_settings['__experimentalFeatures']['typography']['customFontSize'];
unset( $editor_settings['__experimentalFeatures']['typography']['customFontSize'] );
Expand Down
4 changes: 2 additions & 2 deletions src/wp-includes/class-wp-theme-json-resolver.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@ public static function get_core_data() {

$config = self::read_json_file( __DIR__ . '/theme.json' );
$config = self::translate( $config );
self::$core = new WP_Theme_JSON( $config );
self::$core = new WP_Theme_JSON( $config, 'core' );

return self::$core;
}
Expand Down Expand Up @@ -301,7 +301,7 @@ public static function get_theme_data( $theme_support_data = array() ) {
*
* @since 5.8.0
*
* @param array $settings Existing block editor settings.
* @param array $settings Existing block editor settings.
* Empty array by default.
* @return WP_Theme_JSON
*/
Expand Down
153 changes: 74 additions & 79 deletions src/wp-includes/class-wp-theme-json.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,12 @@ class WP_Theme_JSON {
*/
const ROOT_BLOCK_SELECTOR = 'body';

const VALID_ORIGINS = array(
'core',
'theme',
'user',
);

/**
* Presets are a set of values that serve
* to bootstrap some styles: colors, font sizes, etc.
Expand Down Expand Up @@ -246,14 +252,31 @@ class WP_Theme_JSON {
* @since 5.8.0
*
* @param array $theme_json A structure that follows the theme.json schema.
* @param string $origin What source of data this object represents. One of core, theme, or user. Default: theme.
*/
public function __construct( $theme_json = array() ) {
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 = _wp_array_get( $this->theme_json, $path, null );
if ( null !== $preset ) {
_wp_array_set( $this->theme_json, $path, array( $origin => $preset ) );
}
}
}
}

/**
Expand Down Expand Up @@ -631,6 +654,32 @@ private static function append_to_selector( $selector, $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.
*
* @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/WordPress/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.
Expand All @@ -651,19 +700,16 @@ private static function compute_preset_classes( $settings, $selector ) {

$stylesheet = '';
foreach ( self::PRESETS_METADATA as $preset ) {
$values = _wp_array_get( $settings, $preset['path'], array() );
foreach ( $values as $value ) {
foreach ( $preset['classes'] as $class ) {
$preset_per_origin = _wp_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(
// We don't want to use kebabCase here,
// see https://github.com/WordPress/gutenberg/issues/32347
// However, we need to make sure the generated class
// doesn't contain spaces.
self::append_to_selector( $selector, '.has-' . preg_replace( '/\s+/', '-', $value['slug'] ) . '-' . $class['class_suffix'] ),
self::append_to_selector( $selector, '.has-' . $slug . '-' . $class['class_suffix'] ),
array(
array(
'name' => $class['property_name'],
'value' => $value[ $preset['value_key'] ] . ' !important',
'value' => $value . ' !important',
),
)
);
Expand Down Expand Up @@ -695,11 +741,12 @@ private static function compute_preset_classes( $settings, $selector ) {
private static function compute_preset_vars( $settings ) {
$declarations = array();
foreach ( self::PRESETS_METADATA as $preset ) {
$values = _wp_array_get( $settings, $preset['path'], array() );
foreach ( $values as $value ) {
$preset_per_origin = _wp_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' => '--wp--preset--' . $preset['css_var_infix'] . '--' . $value['slug'],
'value' => $value[ $preset['value_key'] ],
'name' => '--wp--preset--' . $preset['css_var_infix'] . '--' . $slug,
'value' => $value,
);
}
}
Expand Down Expand Up @@ -1039,88 +1086,36 @@ private static function get_style_nodes( $theme_json, $selectors = array() ) {
/**
* Merge new incoming data.
*
* @since 5.8.0
*
* @param WP_Theme_JSON $incoming Data to merge.
*/
public function merge( $incoming, $update_or_remove = 'remove' ) {
$incoming_data = $incoming->get_raw_data();
$existing_data = $this->theme_json;
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.
$this->theme_json = array_replace_recursive( $this->theme_json, $incoming_data );

// There are a few cases in which we want to merge things differently
// from what array_replace_recursive does.

// Some incoming properties should replace the existing.
// In those cases, we want to replace the existing with the incoming value, if it exists.
$to_replace = array();
$to_replace[] = array( 'custom' );
$to_replace[] = array( 'spacing', 'units' );
$to_replace[] = array( 'typography', 'fontSizes' );
$to_replace[] = array( 'typography', 'fontFamilies' );

// Some others should be appended to the existing.
// If the slug is the same than an existing element,
// the $update_or_remove param is used to decide
// what to do with the existing element:
// either remove it and append the incoming,
// or update it with the incoming.
$to_append = array();
$to_append[] = array( 'color', 'duotone' );
$to_append[] = array( 'color', 'gradients' );
$to_append[] = array( 'color', 'palette' );
$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 $path_to_replace ) {
$path = array_merge( $metadata['path'], $path_to_replace );
foreach ( $to_replace as $property_path ) {
$path = array_merge( $metadata['path'], $property_path );
$node = _wp_array_get( $incoming_data, $path, array() );
if ( ! empty( $node ) ) {
_wp_array_set( $this->theme_json, $path, $node );
}
}
foreach ( $to_append as $path_to_append ) {
$path = array_merge( $metadata['path'], $path_to_append );
$incoming_node = _wp_array_get( $incoming_data, $path, array() );
$existing_node = _wp_array_get( $existing_data, $path, array() );

if ( empty( $incoming_node ) && empty( $existing_node ) ) {
continue;
}

$index_table = array();
$existing_slugs = array();
$merged = array();
foreach ( $existing_node as $key => $value ) {
$index_table[ $value['slug'] ] = $key;
$existing_slugs[] = $value['slug'];
$merged[ $key ] = $value;
}

$to_remove = array();
foreach ( $incoming_node as $value ) {
if ( ! in_array( $value['slug'], $existing_slugs, true ) ) {
$merged[] = $value;
} elseif ( 'update' === $update_or_remove ) {
$merged[ $index_table[ $value['slug'] ] ] = $value;
} else {
$merged[] = $value;
$to_remove[] = $index_table[ $value['slug'] ];
}
}

// Remove the duplicated values and pack the sparsed array.
foreach ( $to_remove as $index ) {
unset( $merged[ $index ] );
}
$merged = array_values( $merged );

_wp_array_set( $this->theme_json, $path, $merged );
}
}

}

/**
Expand Down
Loading