Skip to content
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

Fixes two regressions with colors #1363

Closed
wants to merge 3 commits into from
Closed

Fixes two regressions with colors #1363

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a3e37c6
Port https://github.com/WordPress/gutenberg/pull/32358
nosolosw Jun 10, 2021
098e992
Fix tests
nosolosw Jun 10, 2021
316ec81
Fix lint issues
nosolosw Jun 10, 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
36 changes: 26 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 @@ -295,14 +295,34 @@ 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( $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( $editor_settings['__experimentalFeatures']['color']['gradients'] ) ) {
$editor_settings['gradients'] = $editor_settings['__experimentalFeatures']['color']['gradients'];
unset( $editor_settings['__experimentalFeatures']['color']['gradients'] );
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 +332,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
6 changes: 3 additions & 3 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 @@ -284,7 +284,7 @@ public static function get_theme_data( $theme_support_data = array() ) {
* to override the ones declared via add_theme_support.
*/
$with_theme_supports = new WP_Theme_JSON( $theme_support_data );
$with_theme_supports->merge( self::$theme );
$with_theme_supports->merge( self::$theme, 'theme' );

return $with_theme_supports;
}
Expand All @@ -309,8 +309,8 @@ public static function get_merged_data( $settings = array() ) {
$theme_support_data = WP_Theme_JSON::get_from_editor_settings( $settings );

$result = new WP_Theme_JSON();
$result->merge( self::get_core_data() );
$result->merge( self::get_theme_data( $theme_support_data ) );
$result->merge( self::get_core_data(), 'core' );
$result->merge( self::get_theme_data( $theme_support_data ), 'theme' );

return $result;
}
Expand Down
145 changes: 71 additions & 74 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 @@ -631,12 +631,37 @@ 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 ) {
$origins = array( 'core', 'theme', 'user' );
$result = array();
foreach ( $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.
*
* @since 5.8.0
*
* @param array $settings Settings to process.
* @param string $selector Selector wrapping the classes.
*
Expand All @@ -651,19 +676,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 +717,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,85 +1062,59 @@ 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.
* @param string $origin origin of the incoming data (e.g: core, theme, or user).
*/
public function merge( $incoming, $update_or_remove = 'remove' ) {
$incoming_data = $incoming->get_raw_data();
$existing_data = $this->theme_json;
public function merge( $incoming, $origin ) {

$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 );
// In those cases, what we want is to use the incoming value, if it exists.
//
// These are the cases that have array values at the leaf levels.
$properties = array();
$properties[] = array( 'custom' );
$properties[] = array( 'spacing', 'units' );
$properties[] = array( 'color', 'duotone' );

// 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.
$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_append[] = array( 'color', 'gradients' );
$to_append[] = array( 'typography', 'fontSizes' );
$to_append[] = array( 'typography', 'fontFamilies' );

$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 ( $properties 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;
foreach ( $to_append as $property_path ) {
$path = array_merge( $metadata['path'], $property_path );
$node = _wp_array_get( $incoming_data, $path, null );
if ( null !== $node ) {
$existing_node = _wp_array_get( $this->theme_json, $path, null );
$new_node = array_filter(
$existing_node,
function ( $key ) {
return in_array( $key, array( 'core', 'theme', 'user ' ), true );
},
ARRAY_FILTER_USE_KEY
);
if ( isset( $node[ $origin ] ) ) {
$new_node[ $origin ] = $node[ $origin ];
} else {
$merged[] = $value;
$to_remove[] = $index_table[ $value['slug'] ];
$new_node[ $origin ] = $node;
}
_wp_array_set( $this->theme_json, $path, $new_node );
}

// 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