Updated code to the new useSetting shape

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();

lib/global-styles.php

@@ -140,26 +140,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'] );
@@ -168,16 +149,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'] );

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(

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;

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'

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'

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 <WrappedComponent { ...props } colors={ colors } />;
 		},
 		'withEditorColorPalette'

packages/block-editor/src/components/font-family/index.js

@@ -13,14 +13,17 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import useSetting from '../use-setting';
+import { __experimentalGetHighestPriorityPreset } from '../../utils';
 
 export default function FontFamilyControl( {
 	value = '',
 	onChange,
 	fontFamilies,
 	...props
 } ) {
-	const blockLevelFontFamilies = useSetting( 'typography.fontFamilies' );
+	const blockLevelFontFamilies = __experimentalGetHighestPriorityPreset(
+		useSetting( 'typography.fontFamilies' )
+	);
 	if ( ! fontFamilies ) {
 		fontFamilies = blockLevelFontFamilies;
 	}

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 (

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 (
 						<WrappedComponent
 							{ ...props }

packages/block-editor/src/components/gradient-picker/control.js

@@ -15,6 +15,7 @@ import { __ } from '@wordpress/i18n';
  */
 import GradientPicker from './';
 import useSetting from '../use-setting';
+import { __experimentalGetHighestPriorityPreset } from '../../utils';
 
 export default function GradientPickerControl( {
 	className,
@@ -23,7 +24,9 @@ export default function GradientPickerControl( {
 	label = __( 'Gradient Presets' ),
 	...props
 } ) {
-	const gradients = useSetting( 'color.gradients' );
+	const gradients = __experimentalGetHighestPriorityPreset(
+		useSetting( 'color.gradients' )
+	);
 	const disableCustomGradients = ! useSetting( 'color.customGradient' );
 	if ( isEmpty( gradients ) && disableCustomGradients ) {
 		return null;

packages/block-editor/src/components/gradient-picker/index.js

@@ -7,11 +7,15 @@ import { __experimentalGradientPicker as GradientPicker } from '@wordpress/compo
  * Internal dependencies
  */
 import useSetting from '../use-setting';
+import { __experimentalGetHighestPriorityPreset } from '../../utils';
 
 const EMPTY_ARRAY = [];
 
 function GradientPickerWithGradients( props ) {
-	const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY;
+	const gradients =
+		__experimentalGetHighestPriorityPreset(
+			useSetting( 'color.gradients' )
+		) || EMPTY_ARRAY;
 	const disableCustomGradients = ! useSetting( 'color.customGradient' );
 
 	return (

packages/block-editor/src/components/gradient-picker/panel.js

@@ -14,9 +14,12 @@ import { __ } from '@wordpress/i18n';
  */
 import GradientPicker from './control';
 import useSetting from '../use-setting';
+import { __experimentalGetHighestPriorityPreset } from '../../utils';
 
 export default function GradientPanel( props ) {
-	const gradients = useSetting( 'color.gradients' );
+	const gradients = __experimentalGetHighestPriorityPreset(
+		useSetting( 'color.gradients' )
+	);
 	if ( isEmpty( gradients ) ) {
 		return null;
 	}

packages/block-editor/src/components/gradients/use-gradient.js

@@ -15,6 +15,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useBlockEditContext } from '../block-edit';
 import useSetting from '../use-setting';
 import { store as blockEditorStore } from '../../store';
+import { __experimentalGetHighestPriorityPreset } from '../../utils';
 
 const EMPTY_ARRAY = [];
 
@@ -67,7 +68,10 @@ export function __experimentalUseGradient( {
 } = {} ) {
 	const { clientId } = useBlockEditContext();
 
-	const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY;
+	const gradients =
+		__experimentalGetHighestPriorityPreset(
+			useSetting( 'color.gradients' )
+		) || EMPTY_ARRAY;
 	const { gradient, customGradient } = useSelect(
 		( select ) => {
 			const { getBlockAttributes } = select( blockEditorStore );

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

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' ) ||

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 <BlockListBlock { ...props } />;
 		}