Revert #55219 fix/block-settings-origins

packages/block-editor/src/components/global-styles/border-panel.js

@@ -19,7 +19,7 @@ import { __ } from '@wordpress/i18n';
 import BorderRadiusControl from '../border-radius-control';
 import { useColorsPerOrigin } from './hooks';
 import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
-import { mergeOrigins } from '../../store/get-block-settings';
+import { overrideOrigins } from '../../store/get-block-settings';
 import { setImmutably } from '../../utils/object';
 import { getBorderPanelLabel } from '../../hooks/border';
 import { ShadowPopover } from './shadow-panel-components';
@@ -154,12 +154,12 @@ export default function BorderPanel( {
 
 	// Shadow
 	const shadow = decodeValue( inheritedValue?.shadow );
-	const shadowPresets = settings?.shadow?.presets;
-	const mergedShadowPresets = shadowPresets
-		? mergeOrigins( shadowPresets )
+	const shadowPresets = settings?.shadow?.presets ?? {};
+	const overriddenShadowPresets = shadowPresets
+		? overrideOrigins( shadowPresets )
 		: [];
 	const setShadow = ( newValue ) => {
-		const slug = mergedShadowPresets?.find(
+		const slug = overriddenShadowPresets?.find(
 			( { shadow: shadowName } ) => shadowName === newValue
 		)?.slug;
 

packages/block-editor/src/components/global-styles/typography-panel.js

@@ -13,7 +13,11 @@ import { useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { mergeOrigins, hasMergedOrigins } from '../../store/get-block-settings';
+import {
+	mergeOrigins,
+	overrideOrigins,
+	hasOriginValue,
+} from '../../store/get-block-settings';
 import FontFamilyControl from '../font-family';
 import FontAppearanceControl from '../font-appearance-control';
 import LineHeightControl from '../line-height-control';
@@ -53,13 +57,13 @@ export function useHasTypographyPanel( settings ) {
 
 function useHasFontSizeControl( settings ) {
 	return (
-		hasMergedOrigins( settings?.typography?.fontSizes ) ||
+		hasOriginValue( settings?.typography?.fontSizes ) ||
 		settings?.typography?.customFontSize
 	);
 }
 
 function useHasFontFamilyControl( settings ) {
-	return hasMergedOrigins( settings?.typography?.fontFamilies );
+	return hasOriginValue( settings?.typography?.fontFamilies );
 }
 
 function useHasLineHeightControl( settings ) {
@@ -101,10 +105,10 @@ function useHasTextColumnsControl( settings ) {
 }
 
 function getUniqueFontSizesBySlug( settings ) {
-	const fontSizes = settings?.typography?.fontSizes;
-	const mergedFontSizes = fontSizes ? mergeOrigins( fontSizes ) : [];
+	const fontSizes = settings?.typography?.fontSizes ?? {};
+	const overriddenFontSizes = fontSizes ? overrideOrigins( fontSizes ) : [];
 	const uniqueSizes = [];
-	for ( const currentSize of mergedFontSizes ) {
+	for ( const currentSize of overriddenFontSizes ) {
 		if ( ! uniqueSizes.some( ( { slug } ) => slug === currentSize.slug ) ) {
 			uniqueSizes.push( currentSize );
 		}
@@ -162,7 +166,7 @@ export default function TypographyPanel( {
 
 	// Font Family
 	const hasFontFamilyEnabled = useHasFontFamilyControl( settings );
-	const fontFamilies = settings?.typography?.fontFamilies;
+	const fontFamilies = settings?.typography?.fontFamilies ?? {};
 	const mergedFontFamilies = fontFamilies ? mergeOrigins( fontFamilies ) : [];
 	const fontFamily = decodeValue( inheritedValue?.typography?.fontFamily );
 	const setFontFamily = ( newValue ) => {

packages/block-editor/src/hooks/utils.js

@@ -176,8 +176,12 @@ export function useBlockSettings( name, parentLayout ) {
 	const [
 		backgroundImage,
 		backgroundSize,
-		fontFamilies,
-		fontSizes,
+		customFontFamilies,
+		defaultFontFamilies,
+		themeFontFamilies,
+		customFontSizes,
+		defaultFontSizes,
+		themeFontSizes,
 		customFontSize,
 		fontStyle,
 		fontWeight,
@@ -223,8 +227,12 @@ export function useBlockSettings( name, parentLayout ) {
 	] = useSettings(
 		'background.backgroundImage',
 		'background.backgroundSize',
-		'typography.fontFamilies',
-		'typography.fontSizes',
+		'typography.fontFamilies.custom',
+		'typography.fontFamilies.default',
+		'typography.fontFamilies.theme',
+		'typography.fontSizes.custom',
+		'typography.fontSizes.default',
+		'typography.fontSizes.theme',
 		'typography.customFontSize',
 		'typography.fontStyle',
 		'typography.fontWeight',
@@ -305,10 +313,14 @@ export function useBlockSettings( name, parentLayout ) {
 			},
 			typography: {
 				fontFamilies: {
-					custom: fontFamilies,
+					custom: customFontFamilies,
+					default: defaultFontFamilies,
+					theme: themeFontFamilies,
 				},
 				fontSizes: {
-					custom: fontSizes,
+					custom: customFontSizes,
+					default: defaultFontSizes,
+					theme: themeFontSizes,
 				},
 				customFontSize,
 				fontStyle,
@@ -346,8 +358,12 @@ export function useBlockSettings( name, parentLayout ) {
 	}, [
 		backgroundImage,
 		backgroundSize,
-		fontFamilies,
-		fontSizes,
+		customFontFamilies,
+		defaultFontFamilies,
+		themeFontFamilies,
+		customFontSizes,
+		defaultFontSizes,
+		themeFontSizes,
 		customFontSize,
 		fontStyle,
 		fontWeight,

packages/block-editor/src/store/get-block-settings.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import {
-	__EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE,
+	__EXPERIMENTAL_PATHS_WITH_OVERRIDE as PATHS_WITH_OVERRIDE,
 	hasBlockSupport,
 } from '@wordpress/blocks';
 import { applyFilters } from '@wordpress/hooks';
@@ -111,6 +111,17 @@ export function mergeOrigins( value ) {
 }
 const mergeCache = new WeakMap();
 
+/**
+ * For settings like `color.palette`, which have a value that is an object
+ * with `default`, `theme`, `custom`, with field values that are arrays of
+ * items, returns the one with the highest priority among these three arrays.
+ * @param {Object} value Object to extract from
+ * @return {Array} Array of items extracted from the three origins
+ */
+export function overrideOrigins( value ) {
+	return value.custom ?? value.theme ?? value.default;
+}
+
 /**
  * For settings like `color.palette`, which have a value that is an object
  * with `default`, `theme`, `custom`, with field values that are arrays of
@@ -119,7 +130,7 @@ const mergeCache = new WeakMap();
  * @param {Object} value Object to check
  * @return {boolean} Whether the object has values in any of the three origins
  */
-export function hasMergedOrigins( value ) {
+export function hasOriginValue( value ) {
 	return [ 'default', 'theme', 'custom' ].some(
 		( key ) => value?.[ key ]?.length
 	);
@@ -203,8 +214,8 @@ export function getBlockSettings( state, clientId, ...paths ) {
 
 		// Return if the setting was found in either the block instance or the store.
 		if ( result !== undefined ) {
-			if ( PATHS_WITH_MERGE[ normalizedPath ] ) {
-				return mergeOrigins( result );
+			if ( PATHS_WITH_OVERRIDE[ normalizedPath ] ) {
+				return overrideOrigins( result );
 			}
 			return result;
 		}

packages/blocks/src/api/constants.js

@@ -271,11 +271,13 @@ export const __EXPERIMENTAL_ELEMENTS = {
 	cite: 'cite',
 };
 
-export const __EXPERIMENTAL_PATHS_WITH_MERGE = {
+// These paths may have three origins, custom, theme, and default,
+// and are expected to override other origins with custom, theme,
+// and default priority.
+export const __EXPERIMENTAL_PATHS_WITH_OVERRIDE = {
 	'color.duotone': true,
 	'color.gradients': true,
 	'color.palette': true,
-	'typography.fontFamilies': true,
 	'typography.fontSizes': true,
 	'spacing.spacingSizes': true,
 };

packages/blocks/src/api/index.js

@@ -162,5 +162,5 @@ export { default as node } from './node';
 export {
 	__EXPERIMENTAL_STYLE_PROPERTY,
 	__EXPERIMENTAL_ELEMENTS,
-	__EXPERIMENTAL_PATHS_WITH_MERGE,
+	__EXPERIMENTAL_PATHS_WITH_OVERRIDE,
 } from './constants';