diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index f0544ed03dba1d..05e9f411f16d8f 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1102,86 +1102,34 @@ public function get_stylesheet( $type = 'all' ) { /** * Merge new incoming data. * - * @param WP_Theme_JSON_Gutenberg $incoming Data to merge. - * @param string $update_or_remove Whether update or remove existing colors - * for which the incoming data has a duplicated slug. + * @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. - $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' ); + // 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( 'color', 'palette' ); + $properties[] = array( 'color', 'gradients' ); + $properties[] = array( 'custom' ); + $properties[] = array( 'spacing', 'units' ); + $properties[] = array( 'typography', 'fontSizes' ); + $properties[] = 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 ) ) { gutenberg_experimental_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 ); - - gutenberg_experimental_set( $this->theme_json, $path, $merged ); - } } } diff --git a/lib/class-wp-theme-json-resolver-gutenberg.php b/lib/class-wp-theme-json-resolver-gutenberg.php index 987f3e5400fc26..fcf5da98d8dda9 100644 --- a/lib/class-wp-theme-json-resolver-gutenberg.php +++ b/lib/class-wp-theme-json-resolver-gutenberg.php @@ -419,7 +419,7 @@ public static function get_merged_data( $settings = array(), $origin = 'user' ) $result->merge( self::get_theme_data( $theme_support_data ) ); if ( 'user' === $origin ) { - $result->merge( self::get_user_data(), 'update' ); + $result->merge( self::get_user_data() ); } return $result; diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json index 7297493491c99a..e12e4231018a36 100644 --- a/lib/experimental-default-theme.json +++ b/lib/experimental-default-theme.json @@ -6,148 +6,124 @@ { "name": "Black", "slug": "black", - "color": "#000000", - "origin": "core" + "color": "#000000" }, { "name": "Cyan bluish gray", "slug": "cyan-bluish-gray", - "color": "#abb8c3", - "origin": "core" + "color": "#abb8c3" }, { "name": "White", "slug": "white", - "color": "#ffffff", - "origin": "core" + "color": "#ffffff" }, { "name": "Pale pink", "slug": "pale-pink", - "color": "#f78da7", - "origin": "core" + "color": "#f78da7" }, { "name": "Vivid red", "slug": "vivid-red", - "color": "#cf2e2e", - "origin": "core" + "color": "#cf2e2e" }, { "name": "Luminous vivid orange", "slug": "luminous-vivid-orange", - "color": "#ff6900", - "origin": "core" + "color": "#ff6900" }, { "name": "Luminous vivid amber", "slug": "luminous-vivid-amber", - "color": "#fcb900", - "origin": "core" + "color": "#fcb900" }, { "name": "Light green cyan", "slug": "light-green-cyan", - "color": "#7bdcb5", - "origin": "core" + "color": "#7bdcb5" }, { "name": "Vivid green cyan", "slug": "vivid-green-cyan", - "color": "#00d084", - "origin": "core" + "color": "#00d084" }, { "name": "Pale cyan blue", "slug": "pale-cyan-blue", - "color": "#8ed1fc", - "origin": "core" + "color": "#8ed1fc" }, { "name": "Vivid cyan blue", "slug": "vivid-cyan-blue", - "color": "#0693e3", - "origin": "core" + "color": "#0693e3" }, { "name": "Vivid purple", "slug": "vivid-purple", - "color": "#9b51e0", - "origin": "core" + "color": "#9b51e0" } ], "gradients": [ { "name": "Vivid cyan blue to vivid purple", "gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)", - "slug": "vivid-cyan-blue-to-vivid-purple", - "origin": "core" + "slug": "vivid-cyan-blue-to-vivid-purple" }, { "name": "Light green cyan to vivid green cyan", "gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)", - "slug": "light-green-cyan-to-vivid-green-cyan", - "origin": "core" + "slug": "light-green-cyan-to-vivid-green-cyan" }, { "name": "Luminous vivid amber to luminous vivid orange", "gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)", - "slug": "luminous-vivid-amber-to-luminous-vivid-orange", - "origin": "core" + "slug": "luminous-vivid-amber-to-luminous-vivid-orange" }, { "name": "Luminous vivid orange to vivid red", "gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)", - "slug": "luminous-vivid-orange-to-vivid-red", - "origin": "core" + "slug": "luminous-vivid-orange-to-vivid-red" }, { "name": "Very light gray to cyan bluish gray", "gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)", - "slug": "very-light-gray-to-cyan-bluish-gray", - "origin": "core" + "slug": "very-light-gray-to-cyan-bluish-gray" }, { "name": "Cool to warm spectrum", "gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)", - "slug": "cool-to-warm-spectrum", - "origin": "core" + "slug": "cool-to-warm-spectrum" }, { "name": "Blush light purple", "gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)", - "slug": "blush-light-purple", - "origin": "core" + "slug": "blush-light-purple" }, { "name": "Blush bordeaux", "gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)", - "slug": "blush-bordeaux", - "origin": "core" + "slug": "blush-bordeaux" }, { "name": "Luminous dusk", "gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)", - "slug": "luminous-dusk", - "origin": "core" + "slug": "luminous-dusk" }, { "name": "Pale ocean", "gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)", - "slug": "pale-ocean", - "origin": "core" + "slug": "pale-ocean" }, { "name": "Electric grass", "gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)", - "slug": "electric-grass", - "origin": "core" + "slug": "electric-grass" }, { "name": "Midnight", "gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)", - "slug": "midnight", - "origin": "core" + "slug": "midnight" } ], "duotone": [ diff --git a/packages/block-editor/src/components/use-setting/index.js b/packages/block-editor/src/components/use-setting/index.js index 43ee185c396617..ec0e813eb8eace 100644 --- a/packages/block-editor/src/components/use-setting/index.js +++ b/packages/block-editor/src/components/use-setting/index.js @@ -49,20 +49,6 @@ const deprecatedFlags = { 'spacing.customPadding': ( settings ) => settings.enableCustomSpacing, }; -const filterColorsFromCoreOrigin = ( path, setting ) => { - if ( path !== 'color.palette' && path !== 'color.gradients' ) { - return setting; - } - - if ( ! Array.isArray( setting ) ) { - return setting; - } - - const colors = setting.filter( ( color ) => color?.origin !== 'core' ); - - return colors.length > 0 ? colors : setting; -}; - /** * Hook that retrieves the editor setting. * It works with nested objects using by finding the value at path. @@ -90,10 +76,7 @@ export default function useSetting( path ) { const experimentalFeaturesResult = get( settings, blockPath ) ?? get( settings, defaultsPath ); if ( experimentalFeaturesResult !== undefined ) { - return filterColorsFromCoreOrigin( - path, - experimentalFeaturesResult - ); + return experimentalFeaturesResult; } // 2 - Use deprecated settings, otherwise. @@ -101,10 +84,7 @@ export default function useSetting( path ) { ? deprecatedFlags[ path ]( settings ) : undefined; if ( deprecatedSettingsValue !== undefined ) { - return filterColorsFromCoreOrigin( - path, - deprecatedSettingsValue - ); + return deprecatedSettingsValue; } // 3 - Fall back for typography.dropCap: diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index 6d173773a18499..7fdf78b060a829 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -47,31 +47,7 @@ const GlobalStylesContext = createContext( { /* eslint-enable no-unused-vars */ } ); -const mergeTreesCustomizer = ( objValue, srcValue, key ) => { - // Users can add their own colors. - // We want to append them when they don't - // have the same slug as an existing color, - // otherwise we want to update the existing color instead. - if ( 'palette' === key ) { - const indexTable = {}; - const existingSlugs = []; - const result = [ ...( objValue ?? [] ) ]; - result.forEach( ( { slug }, index ) => { - indexTable[ slug ] = index; - existingSlugs.push( slug ); - } ); - - ( srcValue ?? [] ).forEach( ( element ) => { - if ( existingSlugs.includes( element?.slug ) ) { - result[ indexTable[ element?.slug ] ] = element; - } else { - result.push( element ); - } - } ); - - return result; - } - +const mergeTreesCustomizer = ( objValue, srcValue ) => { // We only pass as arrays the presets, // in which case we want the new array of values // to override the old array (no merging). diff --git a/packages/edit-site/src/components/editor/utils.js b/packages/edit-site/src/components/editor/utils.js index 7d5d55884feeeb..865279b4625ba4 100644 --- a/packages/edit-site/src/components/editor/utils.js +++ b/packages/edit-site/src/components/editor/utils.js @@ -90,28 +90,13 @@ function getPresetMetadataFromStyleProperty( styleProperty ) { return getPresetMetadataFromStyleProperty.MAP[ styleProperty ]; } -const filterColorsFromCoreOrigin = ( path, setting ) => { - if ( path !== 'color.palette' && path !== 'color.gradients' ) { - return setting; - } - - if ( ! Array.isArray( setting ) ) { - return setting; - } - - const colors = setting.filter( ( color ) => color?.origin !== 'core' ); - - return colors.length > 0 ? colors : setting; -}; - export function useSetting( path, blockName = '' ) { const settings = useSelect( ( select ) => { return select( editSiteStore ).getSettings(); } ); const topLevelPath = `__experimentalFeatures.${ path }`; const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ path }`; - const setting = get( settings, blockPath ) ?? get( settings, topLevelPath ); - return filterColorsFromCoreOrigin( path, setting ); + return get( settings, blockPath ) ?? get( settings, topLevelPath ); } export function getPresetVariable( styles, context, propertyName, value ) { diff --git a/packages/edit-site/src/components/sidebar/color-palette-panel.js b/packages/edit-site/src/components/sidebar/color-palette-panel.js index 49e7c964fc29c8..e3fbda55711974 100644 --- a/packages/edit-site/src/components/sidebar/color-palette-panel.js +++ b/packages/edit-site/src/components/sidebar/color-palette-panel.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { difference, get } from 'lodash'; +import { get } from 'lodash'; /** * WordPress dependencies @@ -58,21 +58,7 @@ export default function ColorPalettePanel( { immutableColorSlugs={ immutableColorSlugs } colors={ colors } onChange={ ( newColors ) => { - const existingUserColors = ( newColors ?? [] ).filter( - ( color ) => color.origin === 'user' - ); - const differentUserColors = difference( newColors, colors ); - if ( differentUserColors.length === 1 ) { - differentUserColors[ 0 ] = { - ...differentUserColors[ 0 ], - origin: 'user', - }; - } - - setSetting( contextName, 'color.palette', [ - ...existingUserColors, - ...differentUserColors, - ] ); + setSetting( contextName, 'color.palette', newColors ); } } emptyUI={ __( 'Colors are empty! Add some colors to create your own color palette.' diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index fa3a4931a561b2..769fc8c0011db0 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -437,14 +437,6 @@ public function test_merge_incoming_data() { 'custom' => true, 'customGradient' => true, 'palette' => array( - array( - 'slug' => 'red', - 'color' => 'red', - ), - array( - 'slug' => 'green', - 'color' => 'green', - ), array( 'slug' => 'blue', 'color' => 'blue',