From 584270ab27ac2d71ee8f658ecc269ea2ded6c23c Mon Sep 17 00:00:00 2001 From: Jorge Date: Thu, 27 May 2021 21:13:24 +0100 Subject: [PATCH 1/8] Update: Way presets are merged --- lib/class-wp-theme-json-gutenberg.php | 84 ++++--------------- ...class-wp-theme-json-resolver-gutenberg.php | 2 +- lib/experimental-default-theme.json | 72 ++++++---------- .../src/components/use-setting/index.js | 24 +----- .../editor/global-styles-provider.js | 26 +----- .../edit-site/src/components/editor/utils.js | 17 +--- .../components/sidebar/color-palette-panel.js | 18 +--- phpunit/class-wp-theme-json-test.php | 8 -- 8 files changed, 47 insertions(+), 204 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 44a422dbf41f8c..b10e4694062e72 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1106,86 +1106,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 bcdedda86f30b7..27b980a0c278e5 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', From bba76f947219f2e7108c3c1cdaeb0d058e706efb Mon Sep 17 00:00:00 2001 From: Jorge Date: Mon, 31 May 2021 23:20:51 +0100 Subject: [PATCH 2/8] Enqueue core and theme colors by using separate structures per origin. --- lib/class-wp-theme-json-gutenberg.php | 89 +++++++++++++------ ...class-wp-theme-json-resolver-gutenberg.php | 8 +- lib/global-styles.php | 24 ++++- .../editor/global-styles-provider.js | 38 +++++++- .../editor/global-styles-renderer.js | 51 ++++++----- .../edit-site/src/components/editor/utils.js | 23 ++++- .../components/sidebar/color-palette-panel.js | 23 +++-- 7 files changed, 192 insertions(+), 64 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index b10e4694062e72..cf4aec33719cd0 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -664,22 +664,28 @@ 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 ) { - $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'] ), - array( + $values_per_origin = _wp_array_get( $settings, $preset['path'], array() ); + foreach ( $origins as $origin ) { + if ( ! isset( $values_per_origin[ $origin ] ) ) { + continue; + } + $values = $values_per_origin[ $origin ]; + foreach ( $values as $value ) { + foreach ( $preset['classes'] as $class ) { + $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'] ), array( - 'name' => $class['property_name'], - 'value' => $value[ $preset['value_key'] ] . ' !important', - ), - ) - ); + array( + 'name' => $class['property_name'], + 'value' => $value[ $preset['value_key'] ] . ' !important', + ), + ) + ); + } } } } @@ -705,13 +711,20 @@ private static function compute_preset_classes( $settings, $selector ) { */ private static function compute_preset_vars( $settings ) { $declarations = array(); + $origins = array( 'core', 'theme', 'user' ); foreach ( self::PRESETS_METADATA as $preset ) { - $values = _wp_array_get( $settings, $preset['path'], array() ); - foreach ( $values as $value ) { - $declarations[] = array( - 'name' => '--wp--preset--' . $preset['css_var_infix'] . '--' . $value['slug'], - 'value' => $value[ $preset['value_key'] ], - ); + $values_per_origin = _wp_array_get( $settings, $preset['path'], array() ); + foreach ( $origins as $origin ) { + if ( ! isset( $values_per_origin[ $origin ] ) ) { + continue; + } + $values = $values_per_origin[ $origin ]; + foreach ( $values as $value ) { + $declarations[] = array( + 'name' => '--wp--preset--' . $preset['css_var_infix'] . '--' . $value['slug'], + 'value' => $value[ $preset['value_key'] ], + ); + } } } @@ -1108,7 +1121,8 @@ public function get_stylesheet( $type = 'all' ) { * * @param WP_Theme_JSON $incoming Data to merge. */ - public function merge( $incoming ) { + public function merge( $incoming, $origin ) { + $incoming_data = $incoming->get_raw_data(); $this->theme_json = array_replace_recursive( $this->theme_json, $incoming_data ); @@ -1118,12 +1132,14 @@ public function merge( $incoming ) { // // 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' ); + + $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 ) { @@ -1134,6 +1150,27 @@ public function merge( $incoming ) { gutenberg_experimental_set( $this->theme_json, $path, $node ); } } + + 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 { + $new_node[ $origin ] = $node; + } + gutenberg_experimental_set( $this->theme_json, $path, $new_node ); + } + } } } diff --git a/lib/class-wp-theme-json-resolver-gutenberg.php b/lib/class-wp-theme-json-resolver-gutenberg.php index 27b980a0c278e5..e37264d25319b2 100644 --- a/lib/class-wp-theme-json-resolver-gutenberg.php +++ b/lib/class-wp-theme-json-resolver-gutenberg.php @@ -290,7 +290,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_Gutenberg( $theme_support_data ); - $with_theme_supports->merge( self::$theme ); + $with_theme_supports->merge( self::$theme, 'theme' ); return $with_theme_supports; } @@ -415,11 +415,11 @@ public static function get_merged_data( $settings = array(), $origin = 'user' ) $theme_support_data = WP_Theme_JSON_Gutenberg::get_from_editor_settings( $settings ); $result = new WP_Theme_JSON_Gutenberg(); - $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' ); if ( 'user' === $origin ) { - $result->merge( self::get_user_data() ); + $result->merge( self::get_user_data(), 'user' ); } return $result; diff --git a/lib/global-styles.php b/lib/global-styles.php index 08f6802a42659d..98e1560332533b 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -149,11 +149,23 @@ function_exists( 'gutenberg_is_edit_site_page' ) && // Copied from get_block_editor_settings() at wordpress-develop/block-editor.php. $settings['__experimentalFeatures'] = $consolidated->get_settings(); if ( isset( $settings['__experimentalFeatures']['color']['palette'] ) ) { - $settings['colors'] = $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'] + ); unset( $settings['__experimentalFeatures']['color']['palette'] ); } if ( isset( $settings['__experimentalFeatures']['color']['gradients'] ) ) { - $settings['gradients'] = $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'] + ); unset( $settings['__experimentalFeatures']['color']['gradients'] ); } if ( isset( $settings['__experimentalFeatures']['color']['custom'] ) ) { @@ -165,7 +177,13 @@ function_exists( 'gutenberg_is_edit_site_page' ) && unset( $settings['__experimentalFeatures']['color']['customGradient'] ); } if ( isset( $settings['__experimentalFeatures']['typography']['fontSizes'] ) ) { - $settings['fontSizes'] = $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'] + ); unset( $settings['__experimentalFeatures']['typography']['fontSizes'] ); } if ( isset( $settings['__experimentalFeatures']['typography']['customFontSize'] ) ) { 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 7fdf78b060a829..05e672dfa05f17 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { set, get, mergeWith } from 'lodash'; +import { set, get, mergeWith, mapValues, setWith, clone } from 'lodash'; /** * WordPress dependencies @@ -30,6 +30,7 @@ import { ROOT_BLOCK_SUPPORTS, getValueFromVariable, getPresetVariable, + PRESET_METADATA, } from './utils'; import { toCustomProperties, toStyles } from './global-styles-renderer'; import { store as editSiteStore } from '../../store'; @@ -111,6 +112,10 @@ const getBlockMetadata = ( blockTypes ) => { return result; }; +function immutableSet( object, path, value ) { + return setWith( object ? clone( object ) : {}, path, value, clone ); +} + export default function GlobalStylesProvider( { children, baseStyles } ) { const [ content, setContent ] = useGlobalStylesEntityContent(); const { blockTypes, settings } = useSelect( ( select ) => { @@ -150,12 +155,41 @@ export default function GlobalStylesProvider( { children, baseStyles } ) { newUserStyles = EMPTY_CONTENT; } + const addUserToSettings = ( settingsToAdd ) => { + PRESET_METADATA.forEach( ( { path } ) => { + const presetData = get( settingsToAdd, path ); + if ( presetData ) { + settingsToAdd = immutableSet( settingsToAdd, path, { + user: presetData, + } ); + } + } ); + return settingsToAdd; + }; + + let userStylesWithOrigin = newUserStyles; + if ( userStylesWithOrigin.settings ) { + userStylesWithOrigin = { + ...userStylesWithOrigin, + settings: addUserToSettings( userStylesWithOrigin.settings ), + }; + if ( userStylesWithOrigin.settings.blocks ) { + userStylesWithOrigin.settings = { + ...userStylesWithOrigin.settings, + blocks: mapValues( + userStylesWithOrigin.settings.blocks, + addUserToSettings + ), + }; + } + } + // At this point, the version schema of the theme & user // is the same, so we can merge them. const newMergedStyles = mergeWith( {}, baseStyles, - newUserStyles, + userStylesWithOrigin, mergeTreesCustomizer ); diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js index 45241512c0e7dc..5d3f9da5cc079b 100644 --- a/packages/edit-site/src/components/editor/global-styles-renderer.js +++ b/packages/edit-site/src/components/editor/global-styles-renderer.js @@ -52,12 +52,17 @@ function getPresetsDeclarations( blockPresets = {} ) { return reduce( PRESET_METADATA, ( declarations, { path, valueKey, cssVarInfix } ) => { - const preset = get( blockPresets, path, [] ); - preset.forEach( ( value ) => { - declarations.push( - `--wp--preset--${ cssVarInfix }--${ value.slug }: ${ value[ valueKey ] }` - ); + const presetByOrigin = get( blockPresets, path, [] ); + [ 'core', 'theme', 'user' ].forEach( ( origin ) => { + if ( presetByOrigin[ origin ] ) { + presetByOrigin[ origin ].forEach( ( value ) => { + declarations.push( + `--wp--preset--${ cssVarInfix }--${ value.slug }: ${ value[ valueKey ] }` + ); + } ); + } } ); + return declarations; }, [] @@ -78,22 +83,26 @@ function getPresetsClasses( blockSelector, blockPresets = {} ) { if ( ! classes ) { return declarations; } - const presets = get( blockPresets, path, [] ); - presets.forEach( ( preset ) => { - classes.forEach( ( { classSuffix, propertyName } ) => { - const slug = preset.slug; - const value = preset[ valueKey ]; - // We don't want to use kebabCase from lodash here - // see https://github.com/WordPress/gutenberg/issues/32347 - // However, we need to make sure the generated class - // doesn't contain spaces. - const classSelectorToUse = `.has-${ slug.replace( - /\s+/g, - '-' - ) }-${ classSuffix }`; - const selectorToUse = `${ blockSelector }${ classSelectorToUse }`; - declarations += `${ selectorToUse }{${ propertyName }: ${ value } !important;}`; - } ); + const presetByOrigin = get( blockPresets, path, [] ); + [ 'core', 'theme', 'user' ].forEach( ( origin ) => { + if ( presetByOrigin[ origin ] ) { + presetByOrigin[ origin ].forEach( ( preset ) => { + classes.forEach( ( { classSuffix, propertyName } ) => { + const slug = preset.slug; + const value = preset[ valueKey ]; + // We don't want to use kebabCase from lodash here + // see https://github.com/WordPress/gutenberg/issues/32347 + // However, we need to make sure the generated class + // doesn't contain spaces. + const classSelectorToUse = `.has-${ slug.replace( + /\s+/g, + '-' + ) }-${ classSuffix }`; + const selectorToUse = `${ blockSelector }${ classSelectorToUse }`; + declarations += `${ selectorToUse }{${ propertyName }: ${ value } !important;}`; + } ); + } ); + } } ); return declarations; }, diff --git a/packages/edit-site/src/components/editor/utils.js b/packages/edit-site/src/components/editor/utils.js index 865279b4625ba4..326c1e520c31e4 100644 --- a/packages/edit-site/src/components/editor/utils.js +++ b/packages/edit-site/src/components/editor/utils.js @@ -70,6 +70,11 @@ export const PRESET_METADATA = [ }, ]; +const presetPaths = {}; +forEach( PRESET_METADATA, ( { path } ) => { + presetPaths[ path.join( '.' ) ] = true; +} ); + const STYLE_PROPERTIES_TO_CSS_VAR_INFIX = { backgroundColor: 'color', background: 'gradient', @@ -90,13 +95,29 @@ function getPresetMetadataFromStyleProperty( styleProperty ) { return getPresetMetadataFromStyleProperty.MAP[ styleProperty ]; } +function getHighestPriorityOrigin( presetByOrigin, path ) { + if ( presetByOrigin && presetPaths[ path ] ) { + const origins = [ 'user', 'theme', 'core' ]; + for ( const origin of origins ) { + if ( presetByOrigin[ origin ] ) { + return presetByOrigin[ origin ]; + } + } + return undefined; + } + return presetByOrigin; +} + export function useSetting( path, blockName = '' ) { const settings = useSelect( ( select ) => { return select( editSiteStore ).getSettings(); } ); const topLevelPath = `__experimentalFeatures.${ path }`; const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ path }`; - return get( settings, blockPath ) ?? get( settings, topLevelPath ); + return ( + getHighestPriorityOrigin( get( settings, blockPath ), path ) ?? + getHighestPriorityOrigin( get( settings, topLevelPath ), path ) + ); } 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 e3fbda55711974..fbae0697b9c811 100644 --- a/packages/edit-site/src/components/sidebar/color-palette-panel.js +++ b/packages/edit-site/src/components/sidebar/color-palette-panel.js @@ -38,14 +38,23 @@ export default function ColorPalettePanel( { ( select ) => { const baseStyles = select( editSiteStore ).getSettings() .__experimentalGlobalStylesBaseStyles; + const contextualBasePalette = get( baseStyles, [ + 'settings', + 'blocks', + contextName, + 'color', + 'palette', + ] ); + const globalPalette = get( baseStyles, [ + 'settings', + 'color', + 'palette', + ] ); const basePalette = - get( baseStyles, [ - 'settings', - 'blocks', - contextName, - 'color', - 'palette', - ] ) ?? get( baseStyles, [ 'settings', 'color', 'palette' ] ); + contextualBasePalette?.theme ?? + contextualBasePalette?.core ?? + globalPalette?.theme ?? + globalPalette?.core; if ( ! basePalette ) { return EMPTY_ARRAY; } From 3caaeca6e05638e54e972d8187c258bc27c35256 Mon Sep 17 00:00:00 2001 From: Jorge Date: Fri, 4 Jun 2021 20:02:16 +0100 Subject: [PATCH 3/8] feedback --- lib/class-wp-theme-json-gutenberg.php | 71 ++++++++++++++------------- 1 file changed, 37 insertions(+), 34 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index cf4aec33719cd0..1f693c40a4ba27 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -646,6 +646,24 @@ private static function append_to_selector( $selector, $to_append ) { return implode( ',', $new_selectors ); } + 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. @@ -664,28 +682,19 @@ private static function compute_preset_classes( $settings, $selector ) { $stylesheet = ''; foreach ( self::PRESETS_METADATA as $preset ) { - $values_per_origin = _wp_array_get( $settings, $preset['path'], array() ); - foreach ( $origins as $origin ) { - if ( ! isset( $values_per_origin[ $origin ] ) ) { - continue; - } - $values = $values_per_origin[ $origin ]; - foreach ( $values as $value ) { - foreach ( $preset['classes'] as $class ) { - $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'] ), + $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( + self::append_to_selector( $selector, '.has-' . $slug . '-' . $class['class_suffix'] ), + array( array( - array( - 'name' => $class['property_name'], - 'value' => $value[ $preset['value_key'] ] . ' !important', - ), - ) - ); - } + 'name' => $class['property_name'], + 'value' => $value . ' !important', + ), + ) + ); } } } @@ -711,20 +720,14 @@ private static function compute_preset_classes( $settings, $selector ) { */ private static function compute_preset_vars( $settings ) { $declarations = array(); - $origins = array( 'core', 'theme', 'user' ); foreach ( self::PRESETS_METADATA as $preset ) { - $values_per_origin = _wp_array_get( $settings, $preset['path'], array() ); - foreach ( $origins as $origin ) { - if ( ! isset( $values_per_origin[ $origin ] ) ) { - continue; - } - $values = $values_per_origin[ $origin ]; - foreach ( $values as $value ) { - $declarations[] = array( - 'name' => '--wp--preset--' . $preset['css_var_infix'] . '--' . $value['slug'], - 'value' => $value[ $preset['value_key'] ], - ); - } + $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'] . '--' . $slug, + 'value' => $value, + ); } } From 753c1aa446da8941d036bb52fcd7496db6ebb0e3 Mon Sep 17 00:00:00 2001 From: Jorge Date: Fri, 4 Jun 2021 21:59:57 +0100 Subject: [PATCH 4/8] Updated code to the new useSetting shape --- lib/class-wp-theme-json-gutenberg.php | 10 ++++++ lib/global-styles.php | 31 +------------------ .../src/components/block-list/block.native.js | 10 ++++-- .../color-palette/with-color-context.js | 5 ++- .../components/colors-gradients/control.js | 9 ++++-- .../panel-color-gradient-settings.js | 9 ++++-- .../src/components/colors/with-colors.js | 6 +++- .../src/components/font-family/index.js | 5 ++- .../components/font-sizes/font-size-picker.js | 5 ++- .../components/font-sizes/with-font-sizes.js | 6 ++-- .../src/components/gradient-picker/control.js | 5 ++- .../src/components/gradient-picker/index.js | 6 +++- .../src/components/gradient-picker/panel.js | 5 ++- .../src/components/gradients/use-gradient.js | 6 +++- .../src/components/use-setting/index.js | 10 ++++-- .../block-editor/src/hooks/border-color.js | 11 +++++-- packages/block-editor/src/hooks/color.js | 16 ++++++++-- packages/block-editor/src/hooks/duotone.js | 5 ++- .../block-editor/src/hooks/font-family.js | 8 +++-- packages/block-editor/src/hooks/font-size.js | 13 ++++++-- .../src/hooks/use-border-props.js | 6 +++- .../block-editor/src/hooks/use-color-props.js | 11 +++++-- packages/block-editor/src/utils/theme.js | 10 ++++++ .../block-library/src/button/color-edit.js | 11 +++++-- .../block-library/src/cover/edit.native.js | 6 +++- .../cover/overlay-color-settings.native.js | 11 +++++-- .../edit-site/src/components/editor/utils.js | 18 +---------- .../src/components/sidebar/border-panel.js | 6 +++- .../components/sidebar/color-palette-panel.js | 5 ++- .../src/components/sidebar/color-panel.js | 13 ++++++-- .../components/sidebar/typography-panel.js | 9 ++++-- .../format-library/src/text-color/index.js | 11 +++++-- 32 files changed, 204 insertions(+), 94 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 1f693c40a4ba27..7646e24bd273d2 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -646,6 +646,16 @@ private static function append_to_selector( $selector, $to_append ) { return implode( ',', $new_selectors ); } + /** + * Function that given an array of presets keyed by origin + * and the value key of the preset returns an array where each key is + * the a preset slug and each value is 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(); diff --git a/lib/global-styles.php b/lib/global-styles.php index 98e1560332533b..39db49ade210f8 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -148,26 +148,7 @@ function_exists( 'gutenberg_is_edit_site_page' ) && // Copied from get_block_editor_settings() at wordpress-develop/block-editor.php. $settings['__experimentalFeatures'] = $consolidated->get_settings(); - 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'] - ); - unset( $settings['__experimentalFeatures']['color']['palette'] ); - } - 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'] - ); - unset( $settings['__experimentalFeatures']['color']['gradients'] ); - } + if ( isset( $settings['__experimentalFeatures']['color']['custom'] ) ) { $settings['disableCustomColors'] = ! $settings['__experimentalFeatures']['color']['custom']; unset( $settings['__experimentalFeatures']['color']['custom'] ); @@ -176,16 +157,6 @@ function_exists( 'gutenberg_is_edit_site_page' ) && $settings['disableCustomGradients'] = ! $settings['__experimentalFeatures']['color']['customGradient']; unset( $settings['__experimentalFeatures']['color']['customGradient'] ); } - 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'] - ); - unset( $settings['__experimentalFeatures']['typography']['fontSizes'] ); - } if ( isset( $settings['__experimentalFeatures']['typography']['customFontSize'] ) ) { $settings['disableCustomFontSizes'] = ! $settings['__experimentalFeatures']['typography']['customFontSize']; unset( $settings['__experimentalFeatures']['typography']['customFontSize'] ); diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index 6c576ebe95957a..32c7d211761e18 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -20,7 +20,10 @@ import { getBlockType, __experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel, } from '@wordpress/blocks'; -import { useSetting } from '@wordpress/block-editor'; +import { + useSetting, + __experimentalGetHighestPriorityPreset, +} from '@wordpress/block-editor'; /** * Internal dependencies @@ -49,7 +52,10 @@ function BlockForType( { wrapperProps, blockWidth, } ) { - const defaultColors = useSetting( 'color.palette' ) || emptyArray; + const defaultColors = + __experimentalGetHighestPriorityPreset( + useSetting( 'color.palette' ) + ) || emptyArray; const globalStyle = useGlobalStyles(); const mergedStyle = useMemo( () => { return getMergedGlobalStyles( diff --git a/packages/block-editor/src/components/color-palette/with-color-context.js b/packages/block-editor/src/components/color-palette/with-color-context.js index 85bff66fa23d3a..9391cc357c2afe 100644 --- a/packages/block-editor/src/components/color-palette/with-color-context.js +++ b/packages/block-editor/src/components/color-palette/with-color-context.js @@ -12,10 +12,13 @@ import { createHigherOrderComponent } from '@wordpress/compose'; * Internal dependencies */ import useSetting from '../use-setting'; +import { __experimentalGetHighestPriorityPreset } from '../../utils'; export default createHigherOrderComponent( ( WrappedComponent ) => { return ( props ) => { - const colorsFeature = useSetting( 'color.palette' ); + const colorsFeature = __experimentalGetHighestPriorityPreset( + useSetting( 'color.palette' ) + ); const disableCustomColorsFeature = ! useSetting( 'color.custom' ); const colors = props.colors === undefined ? colorsFeature : props.colors; diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js index 1fca410bc121f8..e70b94be9591dd 100644 --- a/packages/block-editor/src/components/colors-gradients/control.js +++ b/packages/block-editor/src/components/colors-gradients/control.js @@ -24,6 +24,7 @@ import { sprintf, __ } from '@wordpress/i18n'; import { getColorObjectByColorValue } from '../colors'; import { __experimentalGetGradientObjectByGradientValue } from '../gradients'; import useSetting from '../use-setting'; +import { __experimentalGetHighestPriorityPreset } from '../../utils'; // translators: first %s: the color name or value (e.g. red or #ff0000) const colorIndicatorAriaLabel = __( '(Color: %s)' ); @@ -177,8 +178,12 @@ function ColorGradientControlInner( { function ColorGradientControlSelect( props ) { const colorGradientSettings = {}; - colorGradientSettings.colors = useSetting( 'color.palette' ); - colorGradientSettings.gradients = useSetting( 'color.gradients' ); + colorGradientSettings.colors = __experimentalGetHighestPriorityPreset( + useSetting( 'color.palette' ) + ); + colorGradientSettings.gradients = __experimentalGetHighestPriorityPreset( + useSetting( 'color.gradients' ) + ); colorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' ); colorGradientSettings.disableCustomGradients = ! useSetting( 'color.customGradient' diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js index b8b09461b5e79a..9eb47d1fd4dc57 100644 --- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js +++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js @@ -17,6 +17,7 @@ import ColorGradientControl from './control'; import { getColorObjectByColorValue } from '../colors'; import { __experimentalGetGradientObjectByGradientValue } from '../gradients'; import useSetting from '../use-setting'; +import { __experimentalGetHighestPriorityPreset } from '../../utils'; // translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000) const colorIndicatorAriaLabel = __( '(%s: color %s)' ); @@ -148,8 +149,12 @@ export const PanelColorGradientSettingsInner = ( { const PanelColorGradientSettingsSelect = ( props ) => { const colorGradientSettings = {}; - colorGradientSettings.colors = useSetting( 'color.palette' ); - colorGradientSettings.gradients = useSetting( 'color.gradients' ); + colorGradientSettings.colors = __experimentalGetHighestPriorityPreset( + useSetting( 'color.palette' ) + ); + colorGradientSettings.gradients = __experimentalGetHighestPriorityPreset( + useSetting( 'color.gradients' ) + ); colorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' ); colorGradientSettings.disableCustomGradients = ! useSetting( 'color.customGradient' diff --git a/packages/block-editor/src/components/colors/with-colors.js b/packages/block-editor/src/components/colors/with-colors.js index 0dfe68314ff1fb..13940b17592b86 100644 --- a/packages/block-editor/src/components/colors/with-colors.js +++ b/packages/block-editor/src/components/colors/with-colors.js @@ -19,6 +19,7 @@ import { getMostReadableColor, } from './utils'; import useSetting from '../use-setting'; +import { __experimentalGetHighestPriorityPreset } from '../../utils'; const DEFAULT_COLORS = []; @@ -47,7 +48,10 @@ const withCustomColorPalette = ( colorsArray ) => const withEditorColorPalette = () => createHigherOrderComponent( ( WrappedComponent ) => ( props ) => { - const colors = useSetting( 'color.palette' ) || DEFAULT_COLORS; + const colors = + __experimentalGetHighestPriorityPreset( + useSetting( 'color.palette' ) + ) || DEFAULT_COLORS; return ; }, 'withEditorColorPalette' diff --git a/packages/block-editor/src/components/font-family/index.js b/packages/block-editor/src/components/font-family/index.js index 7316a70df15da6..07850b7fc2d883 100644 --- a/packages/block-editor/src/components/font-family/index.js +++ b/packages/block-editor/src/components/font-family/index.js @@ -13,6 +13,7 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import useSetting from '../use-setting'; +import { __experimentalGetHighestPriorityPreset } from '../../utils'; export default function FontFamilyControl( { value = '', @@ -20,7 +21,9 @@ export default function FontFamilyControl( { fontFamilies, ...props } ) { - const blockLevelFontFamilies = useSetting( 'typography.fontFamilies' ); + const blockLevelFontFamilies = __experimentalGetHighestPriorityPreset( + useSetting( 'typography.fontFamilies' ) + ); if ( ! fontFamilies ) { fontFamilies = blockLevelFontFamilies; } diff --git a/packages/block-editor/src/components/font-sizes/font-size-picker.js b/packages/block-editor/src/components/font-sizes/font-size-picker.js index 79b33de08a66e2..f7f40d9baff9c9 100644 --- a/packages/block-editor/src/components/font-sizes/font-size-picker.js +++ b/packages/block-editor/src/components/font-sizes/font-size-picker.js @@ -7,9 +7,12 @@ import { FontSizePicker as BaseFontSizePicker } from '@wordpress/components'; * Internal dependencies */ import useSetting from '../use-setting'; +import { __experimentalGetHighestPriorityPreset } from '../../utils'; function FontSizePicker( props ) { - const fontSizes = useSetting( 'typography.fontSizes' ); + const fontSizes = __experimentalGetHighestPriorityPreset( + useSetting( 'typography.fontSizes' ) + ); const disableCustomFontSizes = ! useSetting( 'typography.customFontSize' ); return ( diff --git a/packages/block-editor/src/components/font-sizes/with-font-sizes.js b/packages/block-editor/src/components/font-sizes/with-font-sizes.js index c08f2873b06122..b4a6c1f13f87e3 100644 --- a/packages/block-editor/src/components/font-sizes/with-font-sizes.js +++ b/packages/block-editor/src/components/font-sizes/with-font-sizes.js @@ -14,6 +14,7 @@ import { Component } from '@wordpress/element'; */ import { getFontSize, getFontSizeClass } from './utils'; import useSetting from '../use-setting'; +import { __experimentalGetHighestPriorityPreset } from '../../utils'; const DEFAULT_FONT_SIZES = []; @@ -49,8 +50,9 @@ export default ( ...fontSizeNames ) => { createHigherOrderComponent( ( WrappedComponent ) => ( props ) => { const fontSizes = - useSetting( 'typography.fontSizes' ) || - DEFAULT_FONT_SIZES; + __experimentalGetHighestPriorityPreset( + useSetting( 'typography.fontSizes' ) + ) || DEFAULT_FONT_SIZES; return ( { const { getBlockAttributes } = select( blockEditorStore ); diff --git a/packages/block-editor/src/components/use-setting/index.js b/packages/block-editor/src/components/use-setting/index.js index ec0e813eb8eace..c571a8597b0244 100644 --- a/packages/block-editor/src/components/use-setting/index.js +++ b/packages/block-editor/src/components/use-setting/index.js @@ -16,9 +16,11 @@ import { store as blockEditorStore } from '../../store'; const deprecatedFlags = { 'color.palette': ( settings ) => - settings.colors === undefined ? undefined : settings.colors, + settings.colors === undefined ? undefined : { theme: settings.colors }, 'color.gradients': ( settings ) => - settings.gradients === undefined ? undefined : settings.gradients, + settings.gradients === undefined + ? undefined + : { theme: settings.gradients }, 'color.custom': ( settings ) => settings.disableCustomColors === undefined ? undefined @@ -28,7 +30,9 @@ const deprecatedFlags = { ? undefined : ! settings.disableCustomGradients, 'typography.fontSizes': ( settings ) => - settings.fontSizes === undefined ? undefined : settings.fontSizes, + settings.fontSizes === undefined + ? undefined + : { theme: settings.fontSizes }, 'typography.customFontSize': ( settings ) => settings.disableCustomFontSizes === undefined ? undefined diff --git a/packages/block-editor/src/hooks/border-color.js b/packages/block-editor/src/hooks/border-color.js index bcf89f31ac7913..9841b81c7aad06 100644 --- a/packages/block-editor/src/hooks/border-color.js +++ b/packages/block-editor/src/hooks/border-color.js @@ -22,6 +22,7 @@ import { import useSetting from '../components/use-setting'; import { hasBorderSupport, shouldSkipSerialization } from './border'; import { cleanEmptyObject } from './utils'; +import { __experimentalGetHighestPriorityPreset } from '../utils'; // Defining empty array here instead of inline avoids unnecessary re-renders of // color control. @@ -44,7 +45,10 @@ export function BorderColorEdit( props ) { attributes: { borderColor, style }, setAttributes, } = props; - const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; + const colors = + __experimentalGetHighestPriorityPreset( + useSetting( 'color.palette' ) + ) || EMPTY_ARRAY; const disableCustomColors = ! useSetting( 'color.custom' ); const disableCustomGradients = ! useSetting( 'color.customGradient' ); @@ -180,7 +184,10 @@ export const withBorderColorPaletteStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { const { name, attributes } = props; const { borderColor } = attributes; - const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; + const colors = + __experimentalGetHighestPriorityPreset( + useSetting( 'color.palette' ) + ) || EMPTY_ARRAY; if ( ! hasBorderSupport( name, 'color' ) || diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index f8159240a20b88..822281153fb1df 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -29,6 +29,7 @@ import { import { cleanEmptyObject } from './utils'; import ColorPanel from './color-panel'; import useSetting from '../components/use-setting'; +import { __experimentalGetHighestPriorityPreset } from '../utils'; export const COLOR_SUPPORT_KEY = 'color'; const EMPTY_ARRAY = []; @@ -219,8 +220,14 @@ function immutableSet( object, path, value ) { export function ColorEdit( props ) { const { name: blockName, attributes } = props; const isLinkColorEnabled = useSetting( 'color.link' ); - const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; - const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY; + const colors = + __experimentalGetHighestPriorityPreset( + useSetting( 'color.palette' ) + ) || EMPTY_ARRAY; + const gradients = + __experimentalGetHighestPriorityPreset( + useSetting( 'color.gradients' ) + ) || EMPTY_ARRAY; // Shouldn't be needed but right now the ColorGradientsPanel // can trigger both onChangeColor and onChangeBackground @@ -388,7 +395,10 @@ export const withColorPaletteStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { const { name, attributes } = props; const { backgroundColor, textColor } = attributes; - const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; + const colors = + __experimentalGetHighestPriorityPreset( + useSetting( 'color.palette' ) + ) || EMPTY_ARRAY; if ( ! hasColorSupport( name ) || shouldSkipSerialization( name ) ) { return ; } diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js index c4845b34b49f83..69b334dc756d98 100644 --- a/packages/block-editor/src/hooks/duotone.js +++ b/packages/block-editor/src/hooks/duotone.js @@ -20,6 +20,7 @@ import { __experimentalDuotoneControl as DuotoneControl, useSetting, } from '../components'; +import { __experimentalGetHighestPriorityPreset } from '../utils'; /** * Convert a list of colors to an object of R, G, and B values. @@ -124,7 +125,9 @@ function DuotonePanel( { attributes, setAttributes } ) { const duotone = style?.color?.duotone; const duotonePalette = useSetting( 'color.duotone' ); - const colorPalette = useSetting( 'color.palette' ); + const colorPalette = __experimentalGetHighestPriorityPreset( + useSetting( 'color.palette' ) + ); const disableCustomColors = ! useSetting( 'color.custom' ); return ( diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js index d3a13bfc87d5e4..e015446113d3a8 100644 --- a/packages/block-editor/src/hooks/font-family.js +++ b/packages/block-editor/src/hooks/font-family.js @@ -14,6 +14,7 @@ import { hasBlockSupport } from '@wordpress/blocks'; import { cleanEmptyObject } from './utils'; import useSetting from '../components/use-setting'; import FontFamilyControl from '../components/font-family'; +import { __experimentalGetHighestPriorityPreset } from '../utils'; export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily'; @@ -35,12 +36,13 @@ export function FontFamilyEdit( { setAttributes, attributes: { style = {} }, } ) { - const fontFamilies = useSetting( 'typography.fontFamilies' ); + let fontFamilies = useSetting( 'typography.fontFamilies' ); const isDisable = useIsFontFamilyDisabled( { name } ); if ( isDisable ) { return null; } + fontFamilies = __experimentalGetHighestPriorityPreset( fontFamilies ); const value = getFontFamilyFromAttributeValue( fontFamilies, @@ -82,7 +84,9 @@ export function FontFamilyEdit( { * @return {boolean} Whether setting is disabled. */ export function useIsFontFamilyDisabled( { name } ) { - const fontFamilies = useSetting( 'typography.fontFamilies' ); + const fontFamilies = __experimentalGetHighestPriorityPreset( + useSetting( 'typography.fontFamilies' ) + ); return ( ! fontFamilies || fontFamilies.length === 0 || diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js index e678f31abd48cf..a49db547f094bb 100644 --- a/packages/block-editor/src/hooks/font-size.js +++ b/packages/block-editor/src/hooks/font-size.js @@ -17,6 +17,7 @@ import { } from '../components/font-sizes'; import { cleanEmptyObject } from './utils'; import useSetting from '../components/use-setting'; +import { __experimentalGetHighestPriorityPreset } from '../utils'; export const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize'; @@ -112,7 +113,9 @@ export function FontSizeEdit( props ) { setAttributes, } = props; const isDisabled = useIsFontSizeDisabled( props ); - const fontSizes = useSetting( 'typography.fontSizes' ); + const fontSizes = __experimentalGetHighestPriorityPreset( + useSetting( 'typography.fontSizes' ) + ); const onChange = ( value ) => { const fontSizeSlug = getFontSizeObjectByValue( fontSizes, value ).slug; @@ -152,7 +155,9 @@ export function FontSizeEdit( props ) { * @return {boolean} Whether setting is disabled. */ export function useIsFontSizeDisabled( { name: blockName } = {} ) { - const fontSizes = useSetting( 'typography.fontSizes' ); + const fontSizes = __experimentalGetHighestPriorityPreset( + useSetting( 'typography.fontSizes' ) + ); const hasFontSizes = !! fontSizes?.length; return ( @@ -170,7 +175,9 @@ export function useIsFontSizeDisabled( { name: blockName } = {} ) { */ const withFontSizeInlineStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { - const fontSizes = useSetting( 'typography.fontSizes' ); + const fontSizes = __experimentalGetHighestPriorityPreset( + useSetting( 'typography.fontSizes' ) + ); const { name: blockName, attributes: { fontSize, style }, diff --git a/packages/block-editor/src/hooks/use-border-props.js b/packages/block-editor/src/hooks/use-border-props.js index ac9f7678cd7950..c030a8815958e3 100644 --- a/packages/block-editor/src/hooks/use-border-props.js +++ b/packages/block-editor/src/hooks/use-border-props.js @@ -12,6 +12,7 @@ import { getColorObjectByAttributeValues, } from '../components/colors'; import useSetting from '../components/use-setting'; +import { __experimentalGetHighestPriorityPreset } from '../utils'; // This utility is intended to assist where the serialization of the border // block support is being skipped for a block but the border related CSS classes @@ -55,7 +56,10 @@ export function getBorderClassesAndStyles( { borderColor, style } ) { * @return {Object} ClassName & style props from border block support. */ export function useBorderProps( attributes ) { - const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; + const colors = + __experimentalGetHighestPriorityPreset( + useSetting( 'color.palette' ) + ) || EMPTY_ARRAY; const borderProps = getBorderClassesAndStyles( attributes ); // Force inline style to apply border color when themes do not load their diff --git a/packages/block-editor/src/hooks/use-color-props.js b/packages/block-editor/src/hooks/use-color-props.js index 768a166c376518..d2c1cdc461af08 100644 --- a/packages/block-editor/src/hooks/use-color-props.js +++ b/packages/block-editor/src/hooks/use-color-props.js @@ -16,6 +16,7 @@ import { getGradientValueBySlug, } from '../components/gradients'; import useSetting from '../components/use-setting'; +import { __experimentalGetHighestPriorityPreset } from '../utils'; // The code in this file has largely been lifted from the color block support // hook. @@ -82,8 +83,14 @@ export function getColorClassesAndStyles( attributes ) { export function useColorProps( attributes ) { const { backgroundColor, textColor, gradient } = attributes; - const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; - const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY; + const colors = + __experimentalGetHighestPriorityPreset( + useSetting( 'color.palette' ) + ) || EMPTY_ARRAY; + const gradients = + __experimentalGetHighestPriorityPreset( + useSetting( 'color.gradients' ) + ) || EMPTY_ARRAY; const colorProps = getColorClassesAndStyles( attributes ); diff --git a/packages/block-editor/src/utils/theme.js b/packages/block-editor/src/utils/theme.js index beb8bd8629fe14..3b9bdfcf475484 100644 --- a/packages/block-editor/src/utils/theme.js +++ b/packages/block-editor/src/utils/theme.js @@ -3,6 +3,16 @@ */ import { SETTINGS_DEFAULTS } from '../store/defaults'; +export function __experimentalGetHighestPriorityPreset( + presetSettingByOrigin = {} +) { + return ( + presetSettingByOrigin.user ?? + presetSettingByOrigin.theme ?? + presetSettingByOrigin.core + ); +} + /** * Given an array of theme colors checks colors for validity * diff --git a/packages/block-library/src/button/color-edit.js b/packages/block-library/src/button/color-edit.js index 54ae46fb025513..1c5f60fdfec718 100644 --- a/packages/block-library/src/button/color-edit.js +++ b/packages/block-library/src/button/color-edit.js @@ -27,6 +27,7 @@ import { ContrastChecker, InspectorControls, useSetting, + __experimentalGetHighestPriorityPreset, } from '@wordpress/block-editor'; const EMPTY_ARRAY = []; @@ -125,8 +126,14 @@ function ColorPanel( { settings, clientId, enableContrastChecking = true } ) { */ function ColorEdit( props ) { const { attributes } = props; - const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; - const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY; + const colors = + __experimentalGetHighestPriorityPreset( + useSetting( 'color.palette' ) + ) || EMPTY_ARRAY; + const gradients = + __experimentalGetHighestPriorityPreset( + useSetting( 'color.gradients' ) + ) || EMPTY_ARRAY; // Shouldn't be needed but right now the ColorGradientsPanel // can trigger both onChangeColor and onChangeBackground diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index aff0c997360a36..ca938b22f8e55f 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -44,6 +44,7 @@ import { __experimentalUseGradient, useSetting, store as blockEditorStore, + __experimentalGetHighestPriorityPreset, } from '@wordpress/block-editor'; import { compose, withPreferredColorScheme } from '@wordpress/compose'; import { withSelect, withDispatch } from '@wordpress/data'; @@ -139,7 +140,10 @@ const Cover = ( { const isImage = backgroundType === MEDIA_TYPE_IMAGE; const THEME_COLORS_COUNT = 4; - const colorsDefault = useSetting( 'color.palette' ) || []; + const colorsDefault = + __experimentalGetHighestPriorityPreset( + useSetting( 'color.palette' ) + ) || []; const coverDefaultPalette = { colors: colorsDefault.slice( 0, THEME_COLORS_COUNT ), }; diff --git a/packages/block-library/src/cover/overlay-color-settings.native.js b/packages/block-library/src/cover/overlay-color-settings.native.js index 08fa32878f4c6d..7133aeb014cd5a 100644 --- a/packages/block-library/src/cover/overlay-color-settings.native.js +++ b/packages/block-library/src/cover/overlay-color-settings.native.js @@ -13,6 +13,7 @@ import { getGradientSlugByValue, __experimentalPanelColorGradientSettings as PanelColorGradientSettings, useSetting, + __experimentalGetHighestPriorityPreset, } from '@wordpress/block-editor'; import { useMemo } from '@wordpress/element'; @@ -24,8 +25,14 @@ function OverlayColorSettings( { setAttributes, } ) { const EMPTY_ARRAY = []; - const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; - const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY; + const colors = + __experimentalGetHighestPriorityPreset( + useSetting( 'color.palette' ) + ) || EMPTY_ARRAY; + const gradients = + __experimentalGetHighestPriorityPreset( + useSetting( 'color.gradients' ) + ) || EMPTY_ARRAY; const gradientValue = customGradient || getGradientValueBySlug( gradients, gradient ); diff --git a/packages/edit-site/src/components/editor/utils.js b/packages/edit-site/src/components/editor/utils.js index 326c1e520c31e4..27f42fa7683a52 100644 --- a/packages/edit-site/src/components/editor/utils.js +++ b/packages/edit-site/src/components/editor/utils.js @@ -95,29 +95,13 @@ function getPresetMetadataFromStyleProperty( styleProperty ) { return getPresetMetadataFromStyleProperty.MAP[ styleProperty ]; } -function getHighestPriorityOrigin( presetByOrigin, path ) { - if ( presetByOrigin && presetPaths[ path ] ) { - const origins = [ 'user', 'theme', 'core' ]; - for ( const origin of origins ) { - if ( presetByOrigin[ origin ] ) { - return presetByOrigin[ origin ]; - } - } - return undefined; - } - return presetByOrigin; -} - export function useSetting( path, blockName = '' ) { const settings = useSelect( ( select ) => { return select( editSiteStore ).getSettings(); } ); const topLevelPath = `__experimentalFeatures.${ path }`; const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ path }`; - return ( - getHighestPriorityOrigin( get( settings, blockPath ), path ) ?? - getHighestPriorityOrigin( get( settings, topLevelPath ), path ) - ); + return get( settings, blockPath ) ?? get( settings, topLevelPath ); } export function getPresetVariable( styles, context, propertyName, value ) { diff --git a/packages/edit-site/src/components/sidebar/border-panel.js b/packages/edit-site/src/components/sidebar/border-panel.js index 46e27d6150accb..feb520a3270edb 100644 --- a/packages/edit-site/src/components/sidebar/border-panel.js +++ b/packages/edit-site/src/components/sidebar/border-panel.js @@ -4,6 +4,7 @@ import { __experimentalBorderStyleControl as BorderStyleControl, __experimentalColorGradientControl as ColorGradientControl, + __experimentalGetHighestPriorityPreset, } from '@wordpress/block-editor'; import { PanelBody, RangeControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -85,7 +86,10 @@ export default function BorderPanel( { ); // Border color. - const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; + const colors = + __experimentalGetHighestPriorityPreset( + useSetting( 'color.palette' ) + ) || EMPTY_ARRAY; const disableCustomColors = ! useSetting( 'color.custom' ); const disableCustomGradients = ! useSetting( 'color.customGradient' ); const hasBorderColor = useHasBorderColorControl( { supports, name } ); 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 fbae0697b9c811..51dc8eedc2d5ef 100644 --- a/packages/edit-site/src/components/sidebar/color-palette-panel.js +++ b/packages/edit-site/src/components/sidebar/color-palette-panel.js @@ -9,6 +9,7 @@ import { get } from 'lodash'; import { __experimentalColorEdit as ColorEdit } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; +import { __experimentalGetHighestPriorityPreset } from '@wordpress/block-editor'; /** * Internal dependencies @@ -32,7 +33,9 @@ export default function ColorPalettePanel( { getSetting, setSetting, } ) { - const colors = useSetting( 'color.palette', contextName ); + const colors = __experimentalGetHighestPriorityPreset( + useSetting( 'color.palette', contextName ) + ); const userColors = getSetting( contextName, 'color.palette' ); const immutableColorSlugs = useSelect( ( select ) => { diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js index 5dfdc2268f570d..9823e4c70173b6 100644 --- a/packages/edit-site/src/components/sidebar/color-panel.js +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -1,7 +1,10 @@ /** * WordPress dependencies */ -import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor'; +import { + __experimentalPanelColorGradientSettings as PanelColorGradientSettings, + __experimentalGetHighestPriorityPreset, +} from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; /** @@ -27,9 +30,13 @@ export default function ColorPanel( { getSetting, setSetting, } ) { - const colors = useSetting( 'color.palette', name ); + const colors = __experimentalGetHighestPriorityPreset( + useSetting( 'color.palette', name ) + ); const disableCustomColors = ! useSetting( 'color.custom', name ); - const gradients = useSetting( 'color.gradients', name ); + const gradients = __experimentalGetHighestPriorityPreset( + useSetting( 'color.gradients', name ) + ); const disableCustomGradients = ! useSetting( 'color.customGradient', name ); const settings = []; diff --git a/packages/edit-site/src/components/sidebar/typography-panel.js b/packages/edit-site/src/components/sidebar/typography-panel.js index 8e14eb08e0b4dc..a4052bab19a435 100644 --- a/packages/edit-site/src/components/sidebar/typography-panel.js +++ b/packages/edit-site/src/components/sidebar/typography-panel.js @@ -6,6 +6,7 @@ import { __experimentalFontFamilyControl as FontFamilyControl, __experimentalFontAppearanceControl as FontAppearanceControl, __experimentalLetterSpacingControl as LetterSpacingControl, + __experimentalGetHighestPriorityPreset, } from '@wordpress/block-editor'; import { PanelBody, FontSizePicker } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -56,12 +57,16 @@ export default function TypographyPanel( { getStyle, setStyle, } ) { - const fontSizes = useSetting( 'typography.fontSizes', name ); + const fontSizes = __experimentalGetHighestPriorityPreset( + useSetting( 'typography.fontSizes', name ) + ); const disableCustomFontSizes = ! useSetting( 'typography.customFontSize', name ); - const fontFamilies = useSetting( 'typography.fontFamilies', name ); + const fontFamilies = __experimentalGetHighestPriorityPreset( + useSetting( 'typography.fontFamilies', name ) + ); const hasFontStyles = useSetting( 'typography.customFontStyle', name ) && supports.includes( 'fontStyle' ); diff --git a/packages/format-library/src/text-color/index.js b/packages/format-library/src/text-color/index.js index 83004135aa837a..0c6bd10450e4b7 100644 --- a/packages/format-library/src/text-color/index.js +++ b/packages/format-library/src/text-color/index.js @@ -8,7 +8,11 @@ import { isEmpty } from 'lodash'; */ import { __ } from '@wordpress/i18n'; import { useCallback, useMemo, useState } from '@wordpress/element'; -import { RichTextToolbarButton, useSetting } from '@wordpress/block-editor'; +import { + RichTextToolbarButton, + useSetting, + __experimentalGetHighestPriorityPreset, +} from '@wordpress/block-editor'; import { Icon, textColor as textColorIcon } from '@wordpress/icons'; import { removeFormat } from '@wordpress/rich-text'; @@ -30,7 +34,10 @@ function TextColorEdit( { contentRef, } ) { const allowCustomControl = useSetting( 'color.custom' ); - const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; + const colors = + __experimentalGetHighestPriorityPreset( + useSetting( 'color.palette' ) + ) || EMPTY_ARRAY; const [ isAddingColor, setIsAddingColor ] = useState( false ); const enableIsAddingColor = useCallback( () => setIsAddingColor( true ), [ setIsAddingColor, From b4bea45c8d809a341a6fe76344f6150e5b3b45e0 Mon Sep 17 00:00:00 2001 From: Jorge Date: Tue, 8 Jun 2021 12:34:51 +0100 Subject: [PATCH 5/8] Feedback --- lib/class-wp-theme-json-gutenberg.php | 3 +- lib/global-styles.php | 30 +++++++++++++++++++ .../src/components/use-setting/index.js | 14 +++++++++ .../edit-site/src/components/editor/utils.js | 5 ---- 4 files changed, 46 insertions(+), 6 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 7646e24bd273d2..8dde6c399ba3f8 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1145,10 +1145,11 @@ public function merge( $incoming, $origin ) { // // 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' ); + $to_append = array(); $to_append[] = array( 'color', 'palette' ); $to_append[] = array( 'color', 'gradients' ); $to_append[] = array( 'typography', 'fontSizes' ); diff --git a/lib/global-styles.php b/lib/global-styles.php index 39db49ade210f8..5b3fe46f6533fc 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -149,6 +149,36 @@ function_exists( 'gutenberg_is_edit_site_page' ) && // Copied from get_block_editor_settings() at wordpress-develop/block-editor.php. $settings['__experimentalFeatures'] = $consolidated->get_settings(); + 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( $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( $settings['__experimentalFeatures']['color']['custom'] ) ) { $settings['disableCustomColors'] = ! $settings['__experimentalFeatures']['color']['custom']; unset( $settings['__experimentalFeatures']['color']['custom'] ); diff --git a/packages/block-editor/src/components/use-setting/index.js b/packages/block-editor/src/components/use-setting/index.js index c571a8597b0244..832ae1c5b2bc07 100644 --- a/packages/block-editor/src/components/use-setting/index.js +++ b/packages/block-editor/src/components/use-setting/index.js @@ -53,6 +53,13 @@ const deprecatedFlags = { 'spacing.customPadding': ( settings ) => settings.enableCustomSpacing, }; +const PATHS_WITH_MERGE = { + 'color.gradients': true, + 'color.palette': true, + 'typography.fontFamilies': true, + 'typography.fontSizes': true, +}; + /** * Hook that retrieves the editor setting. * It works with nested objects using by finding the value at path. @@ -80,6 +87,13 @@ export default function useSetting( path ) { const experimentalFeaturesResult = get( settings, blockPath ) ?? get( settings, defaultsPath ); if ( experimentalFeaturesResult !== undefined ) { + if ( PATHS_WITH_MERGE[ path ] ) { + return ( + experimentalFeaturesResult.user ?? + experimentalFeaturesResult.theme ?? + experimentalFeaturesResult.core + ); + } return experimentalFeaturesResult; } diff --git a/packages/edit-site/src/components/editor/utils.js b/packages/edit-site/src/components/editor/utils.js index 27f42fa7683a52..865279b4625ba4 100644 --- a/packages/edit-site/src/components/editor/utils.js +++ b/packages/edit-site/src/components/editor/utils.js @@ -70,11 +70,6 @@ export const PRESET_METADATA = [ }, ]; -const presetPaths = {}; -forEach( PRESET_METADATA, ( { path } ) => { - presetPaths[ path.join( '.' ) ] = true; -} ); - const STYLE_PROPERTIES_TO_CSS_VAR_INFIX = { backgroundColor: 'color', background: 'gradient', From d3cdc6735cf9d87df4fc8cdab1c4b0979010ecc2 Mon Sep 17 00:00:00 2001 From: Jorge Date: Tue, 8 Jun 2021 17:05:03 +0100 Subject: [PATCH 6/8] Revert useSetting shape. --- .../src/components/block-list/block.native.js | 10 ++-------- .../color-palette/with-color-context.js | 5 +---- .../src/components/colors-gradients/control.js | 9 ++------- .../panel-color-gradient-settings.js | 9 ++------- .../src/components/colors/with-colors.js | 6 +----- .../src/components/font-family/index.js | 5 +---- .../components/font-sizes/font-size-picker.js | 5 +---- .../components/font-sizes/with-font-sizes.js | 6 ++---- .../src/components/gradient-picker/control.js | 5 +---- .../src/components/gradient-picker/index.js | 6 +----- .../src/components/gradient-picker/panel.js | 5 +---- .../src/components/gradients/use-gradient.js | 6 +----- .../src/components/use-setting/index.js | 10 +++------- .../block-editor/src/hooks/border-color.js | 11 ++--------- packages/block-editor/src/hooks/color.js | 16 +++------------- packages/block-editor/src/hooks/duotone.js | 5 +---- packages/block-editor/src/hooks/font-family.js | 8 ++------ packages/block-editor/src/hooks/font-size.js | 13 +++---------- .../block-editor/src/hooks/use-border-props.js | 6 +----- .../block-editor/src/hooks/use-color-props.js | 11 ++--------- packages/block-editor/src/utils/theme.js | 10 ---------- .../block-library/src/button/color-edit.js | 11 ++--------- .../block-library/src/cover/edit.native.js | 6 +----- .../src/cover/overlay-color-settings.native.js | 11 ++--------- .../edit-site/src/components/editor/utils.js | 18 +++++++++++++++++- .../src/components/sidebar/border-panel.js | 6 +----- .../components/sidebar/color-palette-panel.js | 5 +---- .../src/components/sidebar/color-panel.js | 13 +++---------- .../src/components/sidebar/typography-panel.js | 9 ++------- .../format-library/src/text-color/index.js | 11 ++--------- 30 files changed, 64 insertions(+), 193 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index 32c7d211761e18..6c576ebe95957a 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -20,10 +20,7 @@ import { getBlockType, __experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel, } from '@wordpress/blocks'; -import { - useSetting, - __experimentalGetHighestPriorityPreset, -} from '@wordpress/block-editor'; +import { useSetting } from '@wordpress/block-editor'; /** * Internal dependencies @@ -52,10 +49,7 @@ function BlockForType( { wrapperProps, blockWidth, } ) { - const defaultColors = - __experimentalGetHighestPriorityPreset( - useSetting( 'color.palette' ) - ) || emptyArray; + const defaultColors = useSetting( 'color.palette' ) || emptyArray; const globalStyle = useGlobalStyles(); const mergedStyle = useMemo( () => { return getMergedGlobalStyles( diff --git a/packages/block-editor/src/components/color-palette/with-color-context.js b/packages/block-editor/src/components/color-palette/with-color-context.js index 9391cc357c2afe..85bff66fa23d3a 100644 --- a/packages/block-editor/src/components/color-palette/with-color-context.js +++ b/packages/block-editor/src/components/color-palette/with-color-context.js @@ -12,13 +12,10 @@ import { createHigherOrderComponent } from '@wordpress/compose'; * Internal dependencies */ import useSetting from '../use-setting'; -import { __experimentalGetHighestPriorityPreset } from '../../utils'; export default createHigherOrderComponent( ( WrappedComponent ) => { return ( props ) => { - const colorsFeature = __experimentalGetHighestPriorityPreset( - useSetting( 'color.palette' ) - ); + const colorsFeature = useSetting( 'color.palette' ); const disableCustomColorsFeature = ! useSetting( 'color.custom' ); const colors = props.colors === undefined ? colorsFeature : props.colors; diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js index e70b94be9591dd..1fca410bc121f8 100644 --- a/packages/block-editor/src/components/colors-gradients/control.js +++ b/packages/block-editor/src/components/colors-gradients/control.js @@ -24,7 +24,6 @@ import { sprintf, __ } from '@wordpress/i18n'; import { getColorObjectByColorValue } from '../colors'; import { __experimentalGetGradientObjectByGradientValue } from '../gradients'; import useSetting from '../use-setting'; -import { __experimentalGetHighestPriorityPreset } from '../../utils'; // translators: first %s: the color name or value (e.g. red or #ff0000) const colorIndicatorAriaLabel = __( '(Color: %s)' ); @@ -178,12 +177,8 @@ function ColorGradientControlInner( { function ColorGradientControlSelect( props ) { const colorGradientSettings = {}; - colorGradientSettings.colors = __experimentalGetHighestPriorityPreset( - useSetting( 'color.palette' ) - ); - colorGradientSettings.gradients = __experimentalGetHighestPriorityPreset( - useSetting( 'color.gradients' ) - ); + colorGradientSettings.colors = useSetting( 'color.palette' ); + colorGradientSettings.gradients = useSetting( 'color.gradients' ); colorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' ); colorGradientSettings.disableCustomGradients = ! useSetting( 'color.customGradient' diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js index 9eb47d1fd4dc57..b8b09461b5e79a 100644 --- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js +++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js @@ -17,7 +17,6 @@ import ColorGradientControl from './control'; import { getColorObjectByColorValue } from '../colors'; import { __experimentalGetGradientObjectByGradientValue } from '../gradients'; import useSetting from '../use-setting'; -import { __experimentalGetHighestPriorityPreset } from '../../utils'; // translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000) const colorIndicatorAriaLabel = __( '(%s: color %s)' ); @@ -149,12 +148,8 @@ export const PanelColorGradientSettingsInner = ( { const PanelColorGradientSettingsSelect = ( props ) => { const colorGradientSettings = {}; - colorGradientSettings.colors = __experimentalGetHighestPriorityPreset( - useSetting( 'color.palette' ) - ); - colorGradientSettings.gradients = __experimentalGetHighestPriorityPreset( - useSetting( 'color.gradients' ) - ); + colorGradientSettings.colors = useSetting( 'color.palette' ); + colorGradientSettings.gradients = useSetting( 'color.gradients' ); colorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' ); colorGradientSettings.disableCustomGradients = ! useSetting( 'color.customGradient' diff --git a/packages/block-editor/src/components/colors/with-colors.js b/packages/block-editor/src/components/colors/with-colors.js index 13940b17592b86..0dfe68314ff1fb 100644 --- a/packages/block-editor/src/components/colors/with-colors.js +++ b/packages/block-editor/src/components/colors/with-colors.js @@ -19,7 +19,6 @@ import { getMostReadableColor, } from './utils'; import useSetting from '../use-setting'; -import { __experimentalGetHighestPriorityPreset } from '../../utils'; const DEFAULT_COLORS = []; @@ -48,10 +47,7 @@ const withCustomColorPalette = ( colorsArray ) => const withEditorColorPalette = () => createHigherOrderComponent( ( WrappedComponent ) => ( props ) => { - const colors = - __experimentalGetHighestPriorityPreset( - useSetting( 'color.palette' ) - ) || DEFAULT_COLORS; + const colors = useSetting( 'color.palette' ) || DEFAULT_COLORS; return ; }, 'withEditorColorPalette' diff --git a/packages/block-editor/src/components/font-family/index.js b/packages/block-editor/src/components/font-family/index.js index 07850b7fc2d883..7316a70df15da6 100644 --- a/packages/block-editor/src/components/font-family/index.js +++ b/packages/block-editor/src/components/font-family/index.js @@ -13,7 +13,6 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import useSetting from '../use-setting'; -import { __experimentalGetHighestPriorityPreset } from '../../utils'; export default function FontFamilyControl( { value = '', @@ -21,9 +20,7 @@ export default function FontFamilyControl( { fontFamilies, ...props } ) { - const blockLevelFontFamilies = __experimentalGetHighestPriorityPreset( - useSetting( 'typography.fontFamilies' ) - ); + const blockLevelFontFamilies = useSetting( 'typography.fontFamilies' ); if ( ! fontFamilies ) { fontFamilies = blockLevelFontFamilies; } diff --git a/packages/block-editor/src/components/font-sizes/font-size-picker.js b/packages/block-editor/src/components/font-sizes/font-size-picker.js index f7f40d9baff9c9..79b33de08a66e2 100644 --- a/packages/block-editor/src/components/font-sizes/font-size-picker.js +++ b/packages/block-editor/src/components/font-sizes/font-size-picker.js @@ -7,12 +7,9 @@ import { FontSizePicker as BaseFontSizePicker } from '@wordpress/components'; * Internal dependencies */ import useSetting from '../use-setting'; -import { __experimentalGetHighestPriorityPreset } from '../../utils'; function FontSizePicker( props ) { - const fontSizes = __experimentalGetHighestPriorityPreset( - useSetting( 'typography.fontSizes' ) - ); + const fontSizes = useSetting( 'typography.fontSizes' ); const disableCustomFontSizes = ! useSetting( 'typography.customFontSize' ); return ( diff --git a/packages/block-editor/src/components/font-sizes/with-font-sizes.js b/packages/block-editor/src/components/font-sizes/with-font-sizes.js index b4a6c1f13f87e3..c08f2873b06122 100644 --- a/packages/block-editor/src/components/font-sizes/with-font-sizes.js +++ b/packages/block-editor/src/components/font-sizes/with-font-sizes.js @@ -14,7 +14,6 @@ import { Component } from '@wordpress/element'; */ import { getFontSize, getFontSizeClass } from './utils'; import useSetting from '../use-setting'; -import { __experimentalGetHighestPriorityPreset } from '../../utils'; const DEFAULT_FONT_SIZES = []; @@ -50,9 +49,8 @@ export default ( ...fontSizeNames ) => { createHigherOrderComponent( ( WrappedComponent ) => ( props ) => { const fontSizes = - __experimentalGetHighestPriorityPreset( - useSetting( 'typography.fontSizes' ) - ) || DEFAULT_FONT_SIZES; + useSetting( 'typography.fontSizes' ) || + DEFAULT_FONT_SIZES; return ( { const { getBlockAttributes } = select( blockEditorStore ); diff --git a/packages/block-editor/src/components/use-setting/index.js b/packages/block-editor/src/components/use-setting/index.js index 832ae1c5b2bc07..d302ceb277425f 100644 --- a/packages/block-editor/src/components/use-setting/index.js +++ b/packages/block-editor/src/components/use-setting/index.js @@ -16,11 +16,9 @@ import { store as blockEditorStore } from '../../store'; const deprecatedFlags = { 'color.palette': ( settings ) => - settings.colors === undefined ? undefined : { theme: settings.colors }, + settings.colors === undefined ? undefined : settings.colors, 'color.gradients': ( settings ) => - settings.gradients === undefined - ? undefined - : { theme: settings.gradients }, + settings.gradients === undefined ? undefined : settings.gradients, 'color.custom': ( settings ) => settings.disableCustomColors === undefined ? undefined @@ -30,9 +28,7 @@ const deprecatedFlags = { ? undefined : ! settings.disableCustomGradients, 'typography.fontSizes': ( settings ) => - settings.fontSizes === undefined - ? undefined - : { theme: settings.fontSizes }, + settings.fontSizes === undefined ? undefined : settings.fontSizes, 'typography.customFontSize': ( settings ) => settings.disableCustomFontSizes === undefined ? undefined diff --git a/packages/block-editor/src/hooks/border-color.js b/packages/block-editor/src/hooks/border-color.js index 9841b81c7aad06..bcf89f31ac7913 100644 --- a/packages/block-editor/src/hooks/border-color.js +++ b/packages/block-editor/src/hooks/border-color.js @@ -22,7 +22,6 @@ import { import useSetting from '../components/use-setting'; import { hasBorderSupport, shouldSkipSerialization } from './border'; import { cleanEmptyObject } from './utils'; -import { __experimentalGetHighestPriorityPreset } from '../utils'; // Defining empty array here instead of inline avoids unnecessary re-renders of // color control. @@ -45,10 +44,7 @@ export function BorderColorEdit( props ) { attributes: { borderColor, style }, setAttributes, } = props; - const colors = - __experimentalGetHighestPriorityPreset( - useSetting( 'color.palette' ) - ) || EMPTY_ARRAY; + const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; const disableCustomColors = ! useSetting( 'color.custom' ); const disableCustomGradients = ! useSetting( 'color.customGradient' ); @@ -184,10 +180,7 @@ export const withBorderColorPaletteStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { const { name, attributes } = props; const { borderColor } = attributes; - const colors = - __experimentalGetHighestPriorityPreset( - useSetting( 'color.palette' ) - ) || EMPTY_ARRAY; + const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; if ( ! hasBorderSupport( name, 'color' ) || diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index 822281153fb1df..f8159240a20b88 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -29,7 +29,6 @@ import { import { cleanEmptyObject } from './utils'; import ColorPanel from './color-panel'; import useSetting from '../components/use-setting'; -import { __experimentalGetHighestPriorityPreset } from '../utils'; export const COLOR_SUPPORT_KEY = 'color'; const EMPTY_ARRAY = []; @@ -220,14 +219,8 @@ function immutableSet( object, path, value ) { export function ColorEdit( props ) { const { name: blockName, attributes } = props; const isLinkColorEnabled = useSetting( 'color.link' ); - const colors = - __experimentalGetHighestPriorityPreset( - useSetting( 'color.palette' ) - ) || EMPTY_ARRAY; - const gradients = - __experimentalGetHighestPriorityPreset( - useSetting( 'color.gradients' ) - ) || EMPTY_ARRAY; + const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; + const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY; // Shouldn't be needed but right now the ColorGradientsPanel // can trigger both onChangeColor and onChangeBackground @@ -395,10 +388,7 @@ export const withColorPaletteStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { const { name, attributes } = props; const { backgroundColor, textColor } = attributes; - const colors = - __experimentalGetHighestPriorityPreset( - useSetting( 'color.palette' ) - ) || EMPTY_ARRAY; + const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; if ( ! hasColorSupport( name ) || shouldSkipSerialization( name ) ) { return ; } diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js index 69b334dc756d98..c4845b34b49f83 100644 --- a/packages/block-editor/src/hooks/duotone.js +++ b/packages/block-editor/src/hooks/duotone.js @@ -20,7 +20,6 @@ import { __experimentalDuotoneControl as DuotoneControl, useSetting, } from '../components'; -import { __experimentalGetHighestPriorityPreset } from '../utils'; /** * Convert a list of colors to an object of R, G, and B values. @@ -125,9 +124,7 @@ function DuotonePanel( { attributes, setAttributes } ) { const duotone = style?.color?.duotone; const duotonePalette = useSetting( 'color.duotone' ); - const colorPalette = __experimentalGetHighestPriorityPreset( - useSetting( 'color.palette' ) - ); + const colorPalette = useSetting( 'color.palette' ); const disableCustomColors = ! useSetting( 'color.custom' ); return ( diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js index e015446113d3a8..d3a13bfc87d5e4 100644 --- a/packages/block-editor/src/hooks/font-family.js +++ b/packages/block-editor/src/hooks/font-family.js @@ -14,7 +14,6 @@ import { hasBlockSupport } from '@wordpress/blocks'; import { cleanEmptyObject } from './utils'; import useSetting from '../components/use-setting'; import FontFamilyControl from '../components/font-family'; -import { __experimentalGetHighestPriorityPreset } from '../utils'; export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily'; @@ -36,13 +35,12 @@ export function FontFamilyEdit( { setAttributes, attributes: { style = {} }, } ) { - let fontFamilies = useSetting( 'typography.fontFamilies' ); + const fontFamilies = useSetting( 'typography.fontFamilies' ); const isDisable = useIsFontFamilyDisabled( { name } ); if ( isDisable ) { return null; } - fontFamilies = __experimentalGetHighestPriorityPreset( fontFamilies ); const value = getFontFamilyFromAttributeValue( fontFamilies, @@ -84,9 +82,7 @@ export function FontFamilyEdit( { * @return {boolean} Whether setting is disabled. */ export function useIsFontFamilyDisabled( { name } ) { - const fontFamilies = __experimentalGetHighestPriorityPreset( - useSetting( 'typography.fontFamilies' ) - ); + const fontFamilies = useSetting( 'typography.fontFamilies' ); return ( ! fontFamilies || fontFamilies.length === 0 || diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js index a49db547f094bb..e678f31abd48cf 100644 --- a/packages/block-editor/src/hooks/font-size.js +++ b/packages/block-editor/src/hooks/font-size.js @@ -17,7 +17,6 @@ import { } from '../components/font-sizes'; import { cleanEmptyObject } from './utils'; import useSetting from '../components/use-setting'; -import { __experimentalGetHighestPriorityPreset } from '../utils'; export const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize'; @@ -113,9 +112,7 @@ export function FontSizeEdit( props ) { setAttributes, } = props; const isDisabled = useIsFontSizeDisabled( props ); - const fontSizes = __experimentalGetHighestPriorityPreset( - useSetting( 'typography.fontSizes' ) - ); + const fontSizes = useSetting( 'typography.fontSizes' ); const onChange = ( value ) => { const fontSizeSlug = getFontSizeObjectByValue( fontSizes, value ).slug; @@ -155,9 +152,7 @@ export function FontSizeEdit( props ) { * @return {boolean} Whether setting is disabled. */ export function useIsFontSizeDisabled( { name: blockName } = {} ) { - const fontSizes = __experimentalGetHighestPriorityPreset( - useSetting( 'typography.fontSizes' ) - ); + const fontSizes = useSetting( 'typography.fontSizes' ); const hasFontSizes = !! fontSizes?.length; return ( @@ -175,9 +170,7 @@ export function useIsFontSizeDisabled( { name: blockName } = {} ) { */ const withFontSizeInlineStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { - const fontSizes = __experimentalGetHighestPriorityPreset( - useSetting( 'typography.fontSizes' ) - ); + const fontSizes = useSetting( 'typography.fontSizes' ); const { name: blockName, attributes: { fontSize, style }, diff --git a/packages/block-editor/src/hooks/use-border-props.js b/packages/block-editor/src/hooks/use-border-props.js index c030a8815958e3..ac9f7678cd7950 100644 --- a/packages/block-editor/src/hooks/use-border-props.js +++ b/packages/block-editor/src/hooks/use-border-props.js @@ -12,7 +12,6 @@ import { getColorObjectByAttributeValues, } from '../components/colors'; import useSetting from '../components/use-setting'; -import { __experimentalGetHighestPriorityPreset } from '../utils'; // This utility is intended to assist where the serialization of the border // block support is being skipped for a block but the border related CSS classes @@ -56,10 +55,7 @@ export function getBorderClassesAndStyles( { borderColor, style } ) { * @return {Object} ClassName & style props from border block support. */ export function useBorderProps( attributes ) { - const colors = - __experimentalGetHighestPriorityPreset( - useSetting( 'color.palette' ) - ) || EMPTY_ARRAY; + const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; const borderProps = getBorderClassesAndStyles( attributes ); // Force inline style to apply border color when themes do not load their diff --git a/packages/block-editor/src/hooks/use-color-props.js b/packages/block-editor/src/hooks/use-color-props.js index d2c1cdc461af08..768a166c376518 100644 --- a/packages/block-editor/src/hooks/use-color-props.js +++ b/packages/block-editor/src/hooks/use-color-props.js @@ -16,7 +16,6 @@ import { getGradientValueBySlug, } from '../components/gradients'; import useSetting from '../components/use-setting'; -import { __experimentalGetHighestPriorityPreset } from '../utils'; // The code in this file has largely been lifted from the color block support // hook. @@ -83,14 +82,8 @@ export function getColorClassesAndStyles( attributes ) { export function useColorProps( attributes ) { const { backgroundColor, textColor, gradient } = attributes; - const colors = - __experimentalGetHighestPriorityPreset( - useSetting( 'color.palette' ) - ) || EMPTY_ARRAY; - const gradients = - __experimentalGetHighestPriorityPreset( - useSetting( 'color.gradients' ) - ) || EMPTY_ARRAY; + const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; + const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY; const colorProps = getColorClassesAndStyles( attributes ); diff --git a/packages/block-editor/src/utils/theme.js b/packages/block-editor/src/utils/theme.js index 3b9bdfcf475484..beb8bd8629fe14 100644 --- a/packages/block-editor/src/utils/theme.js +++ b/packages/block-editor/src/utils/theme.js @@ -3,16 +3,6 @@ */ import { SETTINGS_DEFAULTS } from '../store/defaults'; -export function __experimentalGetHighestPriorityPreset( - presetSettingByOrigin = {} -) { - return ( - presetSettingByOrigin.user ?? - presetSettingByOrigin.theme ?? - presetSettingByOrigin.core - ); -} - /** * Given an array of theme colors checks colors for validity * diff --git a/packages/block-library/src/button/color-edit.js b/packages/block-library/src/button/color-edit.js index 1c5f60fdfec718..54ae46fb025513 100644 --- a/packages/block-library/src/button/color-edit.js +++ b/packages/block-library/src/button/color-edit.js @@ -27,7 +27,6 @@ import { ContrastChecker, InspectorControls, useSetting, - __experimentalGetHighestPriorityPreset, } from '@wordpress/block-editor'; const EMPTY_ARRAY = []; @@ -126,14 +125,8 @@ function ColorPanel( { settings, clientId, enableContrastChecking = true } ) { */ function ColorEdit( props ) { const { attributes } = props; - const colors = - __experimentalGetHighestPriorityPreset( - useSetting( 'color.palette' ) - ) || EMPTY_ARRAY; - const gradients = - __experimentalGetHighestPriorityPreset( - useSetting( 'color.gradients' ) - ) || EMPTY_ARRAY; + const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; + const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY; // Shouldn't be needed but right now the ColorGradientsPanel // can trigger both onChangeColor and onChangeBackground diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index ca938b22f8e55f..aff0c997360a36 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -44,7 +44,6 @@ import { __experimentalUseGradient, useSetting, store as blockEditorStore, - __experimentalGetHighestPriorityPreset, } from '@wordpress/block-editor'; import { compose, withPreferredColorScheme } from '@wordpress/compose'; import { withSelect, withDispatch } from '@wordpress/data'; @@ -140,10 +139,7 @@ const Cover = ( { const isImage = backgroundType === MEDIA_TYPE_IMAGE; const THEME_COLORS_COUNT = 4; - const colorsDefault = - __experimentalGetHighestPriorityPreset( - useSetting( 'color.palette' ) - ) || []; + const colorsDefault = useSetting( 'color.palette' ) || []; const coverDefaultPalette = { colors: colorsDefault.slice( 0, THEME_COLORS_COUNT ), }; diff --git a/packages/block-library/src/cover/overlay-color-settings.native.js b/packages/block-library/src/cover/overlay-color-settings.native.js index 7133aeb014cd5a..08fa32878f4c6d 100644 --- a/packages/block-library/src/cover/overlay-color-settings.native.js +++ b/packages/block-library/src/cover/overlay-color-settings.native.js @@ -13,7 +13,6 @@ import { getGradientSlugByValue, __experimentalPanelColorGradientSettings as PanelColorGradientSettings, useSetting, - __experimentalGetHighestPriorityPreset, } from '@wordpress/block-editor'; import { useMemo } from '@wordpress/element'; @@ -25,14 +24,8 @@ function OverlayColorSettings( { setAttributes, } ) { const EMPTY_ARRAY = []; - const colors = - __experimentalGetHighestPriorityPreset( - useSetting( 'color.palette' ) - ) || EMPTY_ARRAY; - const gradients = - __experimentalGetHighestPriorityPreset( - useSetting( 'color.gradients' ) - ) || EMPTY_ARRAY; + const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; + const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY; const gradientValue = customGradient || getGradientValueBySlug( gradients, gradient ); diff --git a/packages/edit-site/src/components/editor/utils.js b/packages/edit-site/src/components/editor/utils.js index 865279b4625ba4..4e8d434c3e8dfb 100644 --- a/packages/edit-site/src/components/editor/utils.js +++ b/packages/edit-site/src/components/editor/utils.js @@ -90,13 +90,29 @@ function getPresetMetadataFromStyleProperty( styleProperty ) { return getPresetMetadataFromStyleProperty.MAP[ styleProperty ]; } +function getHighestPriorityOrigin( presetByOrigin, path ) { + if ( presetByOrigin && presetPaths[ path ] ) { + const origins = [ 'user', 'theme', 'core' ]; + for ( const origin of origins ) { + if ( presetByOrigin[ origin ] ) { + return presetByOrigin[ origin ]; + } + } + return undefined; + } + return presetByOrigin; +} + export function useSetting( path, blockName = '' ) { const settings = useSelect( ( select ) => { return select( editSiteStore ).getSettings(); } ); const topLevelPath = `__experimentalFeatures.${ path }`; const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ path }`; - return get( settings, blockPath ) ?? get( settings, topLevelPath ); + return ( + getHighestPriorityOrigin( get( settings, blockPath ), path ) ?? + getHighestPriorityOrigin( get( settings, topLevelPath ), path ) + ); } export function getPresetVariable( styles, context, propertyName, value ) { diff --git a/packages/edit-site/src/components/sidebar/border-panel.js b/packages/edit-site/src/components/sidebar/border-panel.js index feb520a3270edb..46e27d6150accb 100644 --- a/packages/edit-site/src/components/sidebar/border-panel.js +++ b/packages/edit-site/src/components/sidebar/border-panel.js @@ -4,7 +4,6 @@ import { __experimentalBorderStyleControl as BorderStyleControl, __experimentalColorGradientControl as ColorGradientControl, - __experimentalGetHighestPriorityPreset, } from '@wordpress/block-editor'; import { PanelBody, RangeControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -86,10 +85,7 @@ export default function BorderPanel( { ); // Border color. - const colors = - __experimentalGetHighestPriorityPreset( - useSetting( 'color.palette' ) - ) || EMPTY_ARRAY; + const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; const disableCustomColors = ! useSetting( 'color.custom' ); const disableCustomGradients = ! useSetting( 'color.customGradient' ); const hasBorderColor = useHasBorderColorControl( { supports, name } ); 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 51dc8eedc2d5ef..fbae0697b9c811 100644 --- a/packages/edit-site/src/components/sidebar/color-palette-panel.js +++ b/packages/edit-site/src/components/sidebar/color-palette-panel.js @@ -9,7 +9,6 @@ import { get } from 'lodash'; import { __experimentalColorEdit as ColorEdit } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; -import { __experimentalGetHighestPriorityPreset } from '@wordpress/block-editor'; /** * Internal dependencies @@ -33,9 +32,7 @@ export default function ColorPalettePanel( { getSetting, setSetting, } ) { - const colors = __experimentalGetHighestPriorityPreset( - useSetting( 'color.palette', contextName ) - ); + const colors = useSetting( 'color.palette', contextName ); const userColors = getSetting( contextName, 'color.palette' ); const immutableColorSlugs = useSelect( ( select ) => { diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js index 9823e4c70173b6..5dfdc2268f570d 100644 --- a/packages/edit-site/src/components/sidebar/color-panel.js +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -1,10 +1,7 @@ /** * WordPress dependencies */ -import { - __experimentalPanelColorGradientSettings as PanelColorGradientSettings, - __experimentalGetHighestPriorityPreset, -} from '@wordpress/block-editor'; +import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; /** @@ -30,13 +27,9 @@ export default function ColorPanel( { getSetting, setSetting, } ) { - const colors = __experimentalGetHighestPriorityPreset( - useSetting( 'color.palette', name ) - ); + const colors = useSetting( 'color.palette', name ); const disableCustomColors = ! useSetting( 'color.custom', name ); - const gradients = __experimentalGetHighestPriorityPreset( - useSetting( 'color.gradients', name ) - ); + const gradients = useSetting( 'color.gradients', name ); const disableCustomGradients = ! useSetting( 'color.customGradient', name ); const settings = []; diff --git a/packages/edit-site/src/components/sidebar/typography-panel.js b/packages/edit-site/src/components/sidebar/typography-panel.js index a4052bab19a435..8e14eb08e0b4dc 100644 --- a/packages/edit-site/src/components/sidebar/typography-panel.js +++ b/packages/edit-site/src/components/sidebar/typography-panel.js @@ -6,7 +6,6 @@ import { __experimentalFontFamilyControl as FontFamilyControl, __experimentalFontAppearanceControl as FontAppearanceControl, __experimentalLetterSpacingControl as LetterSpacingControl, - __experimentalGetHighestPriorityPreset, } from '@wordpress/block-editor'; import { PanelBody, FontSizePicker } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -57,16 +56,12 @@ export default function TypographyPanel( { getStyle, setStyle, } ) { - const fontSizes = __experimentalGetHighestPriorityPreset( - useSetting( 'typography.fontSizes', name ) - ); + const fontSizes = useSetting( 'typography.fontSizes', name ); const disableCustomFontSizes = ! useSetting( 'typography.customFontSize', name ); - const fontFamilies = __experimentalGetHighestPriorityPreset( - useSetting( 'typography.fontFamilies', name ) - ); + const fontFamilies = useSetting( 'typography.fontFamilies', name ); const hasFontStyles = useSetting( 'typography.customFontStyle', name ) && supports.includes( 'fontStyle' ); diff --git a/packages/format-library/src/text-color/index.js b/packages/format-library/src/text-color/index.js index 0c6bd10450e4b7..83004135aa837a 100644 --- a/packages/format-library/src/text-color/index.js +++ b/packages/format-library/src/text-color/index.js @@ -8,11 +8,7 @@ import { isEmpty } from 'lodash'; */ import { __ } from '@wordpress/i18n'; import { useCallback, useMemo, useState } from '@wordpress/element'; -import { - RichTextToolbarButton, - useSetting, - __experimentalGetHighestPriorityPreset, -} from '@wordpress/block-editor'; +import { RichTextToolbarButton, useSetting } from '@wordpress/block-editor'; import { Icon, textColor as textColorIcon } from '@wordpress/icons'; import { removeFormat } from '@wordpress/rich-text'; @@ -34,10 +30,7 @@ function TextColorEdit( { contentRef, } ) { const allowCustomControl = useSetting( 'color.custom' ); - const colors = - __experimentalGetHighestPriorityPreset( - useSetting( 'color.palette' ) - ) || EMPTY_ARRAY; + const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; const [ isAddingColor, setIsAddingColor ] = useState( false ); const enableIsAddingColor = useCallback( () => setIsAddingColor( true ), [ setIsAddingColor, From 3918f63e2a6ad966a4864be1bcfa16165b89201a Mon Sep 17 00:00:00 2001 From: Jorge Date: Tue, 8 Jun 2021 17:16:56 +0100 Subject: [PATCH 7/8] New site editor useSetting --- .../edit-site/src/components/editor/utils.js | 27 ++++++++----------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/packages/edit-site/src/components/editor/utils.js b/packages/edit-site/src/components/editor/utils.js index 4e8d434c3e8dfb..05218ea42ad108 100644 --- a/packages/edit-site/src/components/editor/utils.js +++ b/packages/edit-site/src/components/editor/utils.js @@ -90,18 +90,12 @@ function getPresetMetadataFromStyleProperty( styleProperty ) { return getPresetMetadataFromStyleProperty.MAP[ styleProperty ]; } -function getHighestPriorityOrigin( presetByOrigin, path ) { - if ( presetByOrigin && presetPaths[ path ] ) { - const origins = [ 'user', 'theme', 'core' ]; - for ( const origin of origins ) { - if ( presetByOrigin[ origin ] ) { - return presetByOrigin[ origin ]; - } - } - return undefined; - } - return presetByOrigin; -} +const PATHS_WITH_MERGE = { + 'color.gradients': true, + 'color.palette': true, + 'typography.fontFamilies': true, + 'typography.fontSizes': true, +}; export function useSetting( path, blockName = '' ) { const settings = useSelect( ( select ) => { @@ -109,10 +103,11 @@ export function useSetting( path, blockName = '' ) { } ); const topLevelPath = `__experimentalFeatures.${ path }`; const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ path }`; - return ( - getHighestPriorityOrigin( get( settings, blockPath ), path ) ?? - getHighestPriorityOrigin( get( settings, topLevelPath ), path ) - ); + const result = get( settings, blockPath ) ?? get( settings, topLevelPath ); + if ( PATHS_WITH_MERGE[ path ] ) { + return result.user ?? result.theme ?? result.core; + } + return result; } export function getPresetVariable( styles, context, propertyName, value ) { From f5c1f8789474998cc0dc0bad9bcf8d20285cd1b5 Mon Sep 17 00:00:00 2001 From: Jorge Date: Tue, 8 Jun 2021 19:12:27 +0100 Subject: [PATCH 8/8] update tests --- lib/class-wp-theme-json-gutenberg.php | 1 + .../editor/test/global-styles-renderer.js | 62 ++- .../class-wp-theme-json-schema-v0-test.php | 207 +++++----- phpunit/class-wp-theme-json-test.php | 382 ++++++++++-------- 4 files changed, 354 insertions(+), 298 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 8dde6c399ba3f8..8963e11095700c 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1133,6 +1133,7 @@ public function get_stylesheet( $type = 'all' ) { * Merge new incoming data. * * @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, $origin ) { diff --git a/packages/edit-site/src/components/editor/test/global-styles-renderer.js b/packages/edit-site/src/components/editor/test/global-styles-renderer.js index 9d0f510c4be592..37798630dcd8e1 100644 --- a/packages/edit-site/src/components/editor/test/global-styles-renderer.js +++ b/packages/edit-site/src/components/editor/test/global-styles-renderer.js @@ -214,10 +214,20 @@ describe( 'global styles renderer', () => { const tree = { settings: { color: { - palette: [ - { name: 'White', slug: 'white', color: 'white' }, - { name: 'Black', slug: 'black', color: 'black' }, - ], + palette: { + user: [ + { + name: 'White', + slug: 'white', + color: 'white', + }, + { + name: 'Black', + slug: 'black', + color: 'black', + }, + ], + }, }, custom: { 'font-primary': 'value', @@ -229,18 +239,20 @@ describe( 'global styles renderer', () => { blocks: { 'core/heading': { typography: { - fontSizes: [ - { - name: 'small', - slug: 'small', - size: '12px', - }, - { - name: 'medium', - slug: 'medium', - size: '23px', - }, - ], + fontSizes: { + theme: [ + { + name: 'small', + slug: 'small', + size: '12px', + }, + { + name: 'medium', + slug: 'medium', + size: '23px', + }, + ], + }, }, }, }, @@ -264,10 +276,20 @@ describe( 'global styles renderer', () => { const tree = { settings: { color: { - palette: [ - { name: 'White', slug: 'white', color: 'white' }, - { name: 'Black', slug: 'black', color: 'black' }, - ], + palette: { + core: [ + { + name: 'White', + slug: 'white', + color: 'white', + }, + { + name: 'Black', + slug: 'black', + color: 'black', + }, + ], + }, }, }, styles: { diff --git a/phpunit/class-wp-theme-json-schema-v0-test.php b/phpunit/class-wp-theme-json-schema-v0-test.php index aad503dc7c1616..d2fd23e04edf49 100644 --- a/phpunit/class-wp-theme-json-schema-v0-test.php +++ b/phpunit/class-wp-theme-json-schema-v0-test.php @@ -335,129 +335,132 @@ function test_get_settings() { function test_get_stylesheet() { $root_name = WP_Theme_JSON_Schema_V0::ROOT_BLOCK_NAME; $all_blocks_name = WP_Theme_JSON_Schema_V0::ALL_BLOCKS_NAME; - - $theme_json = new WP_Theme_JSON_Gutenberg( - array( - 'settings' => array( - $all_blocks_name => array( - 'color' => array( - 'text' => 'value', - 'palette' => array( - array( - 'slug' => 'white', - 'color' => 'white', - ), - array( - 'slug' => 'black', - 'color' => 'black', + $theme_json = new WP_Theme_JSON_Gutenberg( array() ); + $theme_json->merge( + new WP_Theme_JSON_Gutenberg( + array( + 'settings' => array( + $all_blocks_name => array( + 'color' => array( + 'text' => 'value', + 'palette' => array( + array( + 'slug' => 'white', + 'color' => 'white', + ), + array( + 'slug' => 'black', + 'color' => 'black', + ), ), ), - ), - 'typography' => array( - 'fontFamilies' => array( - array( - 'slug' => 'small', - 'fontFamily' => '14px', + 'typography' => array( + 'fontFamilies' => array( + array( + 'slug' => 'small', + 'fontFamily' => '14px', + ), + array( + 'slug' => 'big', + 'fontFamily' => '41px', + ), ), - array( - 'slug' => 'big', - 'fontFamily' => '41px', + ), + 'misc' => 'value', + ), + $root_name => array( + 'color' => array( + 'palette' => array( + array( + 'slug' => 'grey', + 'color' => 'grey', + ), ), ), ), - 'misc' => 'value', - ), - $root_name => array( - 'color' => array( - 'palette' => array( - array( - 'slug' => 'grey', - 'color' => 'grey', + 'core/group' => array( + 'custom' => array( + 'base-font' => 16, + 'line-height' => array( + 'small' => 1.2, + 'medium' => 1.4, + 'large' => 1.8, ), ), ), ), - 'core/group' => array( - 'custom' => array( - 'base-font' => 16, - 'line-height' => array( - 'small' => 1.2, - 'medium' => 1.4, - 'large' => 1.8, + 'styles' => array( + $root_name => array( + 'color' => array( + 'link' => '#111', + 'text' => 'var:preset|color|grey', ), + 'misc' => 'value', ), - ), - ), - 'styles' => array( - $root_name => array( - 'color' => array( - 'link' => '#111', - 'text' => 'var:preset|color|grey', - ), - 'misc' => 'value', - ), - 'core/group' => array( - 'color' => array( - 'link' => '#333', - ), - 'spacing' => array( - 'padding' => array( - 'top' => '12px', - 'bottom' => '24px', + 'core/group' => array( + 'color' => array( + 'link' => '#333', + ), + 'spacing' => array( + 'padding' => array( + 'top' => '12px', + 'bottom' => '24px', + ), ), ), - ), - 'core/heading/h1' => array( - 'color' => array( - 'link' => '#111', - ), - 'typography' => array( - 'fontSize' => '1em', - ), - ), - 'core/heading/h2' => array( - 'color' => array( - 'link' => '#222', - ), - 'typography' => array( - 'fontSize' => '2em', - ), - ), - 'core/post-title/h2' => array( - 'color' => array( - 'link' => '#222', - ), - 'typography' => array( - 'fontSize' => '2em', - ), - ), - 'core/post-title/h5' => array( - 'color' => array( - 'link' => '#555', + 'core/heading/h1' => array( + 'color' => array( + 'link' => '#111', + ), + 'typography' => array( + 'fontSize' => '1em', + ), ), - 'typography' => array( - 'fontSize' => '5em', + 'core/heading/h2' => array( + 'color' => array( + 'link' => '#222', + ), + 'typography' => array( + 'fontSize' => '2em', + ), ), - ), - 'core/query-title/h4' => array( - 'color' => array( - 'link' => '#444', + 'core/post-title/h2' => array( + 'color' => array( + 'link' => '#222', + ), + 'typography' => array( + 'fontSize' => '2em', + ), ), - 'typography' => array( - 'fontSize' => '4em', + 'core/post-title/h5' => array( + 'color' => array( + 'link' => '#555', + ), + 'typography' => array( + 'fontSize' => '5em', + ), ), - ), - 'core/query-title/h5' => array( - 'color' => array( - 'link' => '#555', + 'core/query-title/h4' => array( + 'color' => array( + 'link' => '#444', + ), + 'typography' => array( + 'fontSize' => '4em', + ), ), - 'typography' => array( - 'fontSize' => '5em', + 'core/query-title/h5' => array( + 'color' => array( + 'link' => '#555', + ), + 'typography' => array( + 'fontSize' => '5em', + ), ), ), - ), - 'misc' => 'value', - ) + 'misc' => 'value', + ) + ), + 'core' ); $this->assertEquals( diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 769fc8c0011db0..c38aa1d9ae768c 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -57,107 +57,111 @@ function test_get_settings() { } function test_get_stylesheet() { - $theme_json = new WP_Theme_JSON_Gutenberg( - array( - 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, - 'settings' => array( - 'color' => array( - 'text' => 'value', - 'palette' => array( - array( - 'slug' => 'grey', - 'color' => 'grey', + $theme_json = new WP_Theme_JSON_Gutenberg( array() ); + $theme_json->merge( + new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'settings' => array( + 'color' => array( + 'text' => 'value', + 'palette' => array( + array( + 'slug' => 'grey', + 'color' => 'grey', + ), ), ), - ), - 'typography' => array( - 'fontFamilies' => array( - array( - 'slug' => 'small', - 'fontFamily' => '14px', - ), - array( - 'slug' => 'big', - 'fontFamily' => '41px', + 'typography' => array( + 'fontFamilies' => array( + array( + 'slug' => 'small', + 'fontFamily' => '14px', + ), + array( + 'slug' => 'big', + 'fontFamily' => '41px', + ), ), ), - ), - 'misc' => 'value', - 'blocks' => array( - 'core/group' => array( - 'custom' => array( - 'base-font' => 16, - 'line-height' => array( - 'small' => 1.2, - 'medium' => 1.4, - 'large' => 1.8, + 'misc' => 'value', + 'blocks' => array( + 'core/group' => array( + 'custom' => array( + 'base-font' => 16, + 'line-height' => array( + 'small' => 1.2, + 'medium' => 1.4, + 'large' => 1.8, + ), ), ), ), ), - ), - 'styles' => array( - 'color' => array( - 'text' => 'var:preset|color|grey', - ), - 'misc' => 'value', - 'elements' => array( - 'link' => array( - 'color' => array( - 'text' => '#111', - 'background' => '#333', - ), + 'styles' => array( + 'color' => array( + 'text' => 'var:preset|color|grey', ), - ), - 'blocks' => array( - 'core/group' => array( - 'elements' => array( - 'link' => array( - 'color' => array( - 'text' => '#111', - ), - ), - ), - 'spacing' => array( - 'padding' => array( - 'top' => '12px', - 'bottom' => '24px', + 'misc' => 'value', + 'elements' => array( + 'link' => array( + 'color' => array( + 'text' => '#111', + 'background' => '#333', ), ), ), - 'core/heading' => array( - 'color' => array( - 'text' => '#123456', - ), - 'elements' => array( - 'link' => array( - 'color' => array( - 'text' => '#111', - 'background' => '#333', + 'blocks' => array( + 'core/group' => array( + 'elements' => array( + 'link' => array( + 'color' => array( + 'text' => '#111', + ), ), - 'typography' => array( - 'fontSize' => '60px', + ), + 'spacing' => array( + 'padding' => array( + 'top' => '12px', + 'bottom' => '24px', ), ), ), - ), - 'core/post-date' => array( - 'color' => array( - 'text' => '#123456', + 'core/heading' => array( + 'color' => array( + 'text' => '#123456', + ), + 'elements' => array( + 'link' => array( + 'color' => array( + 'text' => '#111', + 'background' => '#333', + ), + 'typography' => array( + 'fontSize' => '60px', + ), + ), + ), ), - 'elements' => array( - 'link' => array( - 'color' => array( - 'background' => '#777', - 'text' => '#555', + 'core/post-date' => array( + 'color' => array( + 'text' => '#123456', + ), + 'elements' => array( + 'link' => array( + 'color' => array( + 'background' => '#777', + 'text' => '#555', + ), ), ), ), ), ), - ), - 'misc' => 'value', - ) + 'misc' => 'value', + ) + ), + 'core' ); $this->assertEquals( @@ -175,24 +179,28 @@ function test_get_stylesheet() { } function test_get_stylesheet_preset_classes_work_with_compounded_selectors() { - $theme_json = new WP_Theme_JSON_Gutenberg( - array( - 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, - 'settings' => array( - 'blocks' => array( - 'core/heading' => array( - 'color' => array( - 'palette' => array( - array( - 'slug' => 'white', - 'color' => '#fff', + $theme_json = new WP_Theme_JSON_Gutenberg( array() ); + $theme_json->merge( + new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'settings' => array( + 'blocks' => array( + 'core/heading' => array( + 'color' => array( + 'palette' => array( + array( + 'slug' => 'white', + 'color' => '#fff', + ), ), ), ), ), ), - ), - ) + ) + ), + 'theme' ); $this->assertEquals( @@ -202,33 +210,37 @@ function test_get_stylesheet_preset_classes_work_with_compounded_selectors() { } function test_get_stylesheet_preset_rules_come_after_block_rules() { - $theme_json = new WP_Theme_JSON_Gutenberg( - array( - 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, - 'settings' => array( - 'blocks' => array( - 'core/group' => array( - 'color' => array( - 'palette' => array( - array( - 'slug' => 'grey', - 'color' => 'grey', + $theme_json = new WP_Theme_JSON_Gutenberg( array() ); + $theme_json->merge( + new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'settings' => array( + 'blocks' => array( + 'core/group' => array( + 'color' => array( + 'palette' => array( + array( + 'slug' => 'grey', + 'color' => 'grey', + ), ), ), ), ), ), - ), - 'styles' => array( - 'blocks' => array( - 'core/group' => array( - 'color' => array( - 'text' => 'red', + 'styles' => array( + 'blocks' => array( + 'core/group' => array( + 'color' => array( + 'text' => 'red', + ), ), ), ), - ), - ) + ) + ), + 'theme' ); $this->assertEquals( @@ -242,34 +254,38 @@ function test_get_stylesheet_preset_rules_come_after_block_rules() { } public function test_get_stylesheet_preset_values_are_marked_as_important() { - $theme_json = new WP_Theme_JSON_Gutenberg( - array( - 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, - 'settings' => array( - 'color' => array( - 'palette' => array( - array( - 'slug' => 'grey', - 'color' => 'grey', + $theme_json = new WP_Theme_JSON_Gutenberg( array() ); + $theme_json->merge( + new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'settings' => array( + 'color' => array( + 'palette' => array( + array( + 'slug' => 'grey', + 'color' => 'grey', + ), ), ), ), - ), - 'styles' => array( - 'blocks' => array( - 'core/paragraph' => array( - 'color' => array( - 'text' => 'red', - 'background' => 'blue', - ), - 'typography' => array( - 'fontSize' => '12px', - 'lineHeight' => '1.3', + 'styles' => array( + 'blocks' => array( + 'core/paragraph' => array( + 'color' => array( + 'text' => 'red', + 'background' => 'blue', + ), + 'typography' => array( + 'fontSize' => '12px', + 'lineHeight' => '1.3', + ), ), ), ), - ), - ) + ) + ), + 'core' ); $this->assertEquals( @@ -279,35 +295,42 @@ public function test_get_stylesheet_preset_values_are_marked_as_important() { } public function test_merge_incoming_data() { - $initial = array( - 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, - 'settings' => array( - 'color' => array( - 'custom' => false, - 'palette' => array( - array( - 'slug' => 'red', - 'color' => 'red', + $theme_json = new WP_Theme_JSON_Gutenberg( array() ); + $theme_json->merge( + new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'settings' => array( + 'color' => array( + 'custom' => false, + 'palette' => array( + array( + 'slug' => 'red', + 'color' => 'red', + ), + array( + 'slug' => 'green', + 'color' => 'green', + ), + ), ), - array( - 'slug' => 'green', - 'color' => 'green', + 'blocks' => array( + 'core/paragraph' => array( + 'color' => array( + 'custom' => false, + ), + ), ), ), - ), - 'blocks' => array( - 'core/paragraph' => array( - 'color' => array( - 'custom' => false, + 'styles' => array( + 'typography' => array( + 'fontSize' => '12', ), ), - ), - ), - 'styles' => array( - 'typography' => array( - 'fontSize' => '12', - ), + + ) ), + 'core' ); $add_new_block = array( @@ -437,29 +460,37 @@ public function test_merge_incoming_data() { 'custom' => true, 'customGradient' => true, 'palette' => array( - array( - 'slug' => 'blue', - 'color' => 'blue', + 'core' => array( + array( + 'slug' => 'blue', + 'color' => 'blue', + ), ), ), 'gradients' => array( - array( - 'slug' => 'gradient', - 'gradient' => 'gradient', + 'core' => array( + array( + 'slug' => 'gradient', + 'gradient' => 'gradient', + ), ), ), ), 'typography' => array( 'fontSizes' => array( - array( - 'slug' => 'fontSize', - 'size' => 'fontSize', + 'core' => array( + array( + 'slug' => 'fontSize', + 'size' => 'fontSize', + ), ), ), 'fontFamilies' => array( - array( - 'slug' => 'fontFamily', - 'fontFamily' => 'fontFamily', + 'core' => array( + array( + 'slug' => 'fontFamily', + 'fontFamily' => 'fontFamily', + ), ), ), ), @@ -501,14 +532,13 @@ public function test_merge_incoming_data() { ), ); - $theme_json = new WP_Theme_JSON_Gutenberg( $initial ); - $theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_new_block ) ); - $theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_key_in_settings ) ); - $theme_json->merge( new WP_Theme_JSON_Gutenberg( $update_key_in_settings ) ); - $theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_styles ) ); - $theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_key_in_styles ) ); - $theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_invalid_context ) ); - $theme_json->merge( new WP_Theme_JSON_Gutenberg( $update_presets ) ); + $theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_new_block ), 'core' ); + $theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_key_in_settings ), 'core' ); + $theme_json->merge( new WP_Theme_JSON_Gutenberg( $update_key_in_settings ), 'core' ); + $theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_styles ), 'core' ); + $theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_key_in_styles ), 'core' ); + $theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_invalid_context ), 'core' ); + $theme_json->merge( new WP_Theme_JSON_Gutenberg( $update_presets ), 'core' ); $actual = $theme_json->get_raw_data(); $this->assertEqualSetsWithIndex( $expected, $actual );