Block Editor: Update the WordPress packages with the fixes for 5.8 beta 2.

This includes:

**Various**

 - Fix multi selection for nested blocks https://github.com/WordPress/gutenberg/pull/32536
 - Consistently show the drop indicator while dragging blocks https://github.com/WordPress/gutenberg/pull/31896
 - Fix horizontal drop indicator https://github.com/WordPress/gutenberg/pull/32589
 - Fix Safari flickering issue https://github.com/WordPress/gutenberg/pull/32581
 - Silence useSelect zombie bug errors https://github.com/WordPress/gutenberg/pull/32088

**Template Editor**

 - Clarify the template creation modal https://github.com/WordPress/gutenberg/pull/32427
 - Only add skip links for block templates https://github.com/WordPress/gutenberg/pull/32451

**Widgets Editor**

 - Add block breadcrumb https://github.com/WordPress/gutenberg/pull/32498 https://github.com/WordPress/gutenberg/pull/32528 https://github.com/WordPress/gutenberg/pull/32569
 - Saved deleted and restored widgets. https://github.com/WordPress/gutenberg/pull/32534
 - Fix unsaved changes detection https://github.com/WordPress/gutenberg/pull/32573
 - Fix button spacing in the header https://github.com/WordPress/gutenberg/pull/32585
 - Avoid extra undo levels https://github.com/WordPress/gutenberg/pull/32572
 - Move Legacy Widget block to the `@wordpress/widgets` package https://github.com/WordPress/gutenberg/pull/32501
 - Fix Social Links color inheritance https://github.com/WordPress/gutenberg/pull/32625
 - Use Button appender https://github.com/WordPress/gutenberg/pull/32580

**Global Styles (theme.json)**
 
 - Separate the presets per origin in the block editor settings https://github.com/WordPress/gutenberg/pull/32358 https://github.com/WordPress/gutenberg/pull/32622
 - Use CSS Custom Properties for the preset styles https://github.com/WordPress/gutenberg/pull/32627

**Performance**

 - Remove is-typing classname to improve typing performance https://github.com/WordPress/gutenberg/pull/32567

Props nosolosw, jorgefilipecosta, aristath, ntsekouras, peterwilsoncc, mcsf.
See #53397.


git-svn-id: https://develop.svn.wordpress.org/trunk@51149 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Riad Benguella
2021-06-15 08:50:26 +00:00
parent 15c8c705bc
commit 0068f2646c
20 changed files with 1243 additions and 1077 deletions

View File

@@ -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.
@@ -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 ) );
}
}
}
}
/**
@@ -631,6 +654,32 @@ class WP_Theme_JSON {
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.
@@ -651,19 +700,16 @@ class WP_Theme_JSON {
$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',
),
)
);
@@ -695,11 +741,12 @@ class WP_Theme_JSON {
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,
);
}
}
@@ -1039,88 +1086,36 @@ class WP_Theme_JSON {
/**
* 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 );
}
}
}
/**