@wordpress/block-editor 12.5.0 → 12.7.0

package/src/components/global-styles/hooks.js

@@ -2,27 +2,28 @@
  * External dependencies
  */
 import fastDeepEqual from 'fast-deep-equal/es6';
-import { get, set } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { useContext, useCallback, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { store as blocksStore } from '@wordpress/blocks';
+import { store as blocksStore, hasBlockSupport } from '@wordpress/blocks';
 import { _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { getValueFromVariable, getPresetVariableFromValue } from './utils';
+import { getValueFromObjectPath, setImmutably } from '../../utils/object';
 import { GlobalStylesContext } from './context';
 import { unlock } from '../../lock-unlock';
 
-const EMPTY_CONFIG = { settings: {}, styles: {} };
+const EMPTY_CONFIG = { settings: {}, styles: {}, behaviors: {} };
 
 const VALID_SETTINGS = [
 	'appearanceTools',
+	'behaviors',
 	'useRootPaddingAwareAlignments',
 	'border.color',
 	'border.radius',
@@ -88,7 +89,6 @@ export const useGlobalStylesReset = () => {
 
 export function useGlobalSetting( propertyPath, blockName, source = 'all' ) {
 	const { setUserConfig, ...configs } = useContext( GlobalStylesContext );
-
 	const appendedBlockPath = blockName ? '.blocks.' + blockName : '';
 	const appendedPropertyPath = propertyPath ? '.' + propertyPath : '';
 	const contextualPath = `settings${ appendedBlockPath }${ appendedPropertyPath }`;
@@ -103,20 +103,21 @@ export function useGlobalSetting( propertyPath, blockName, source = 'all' ) {
 
 		if ( propertyPath ) {
 			return (
-				get( configToUse, contextualPath ) ??
-				get( configToUse, globalPath )
+				getValueFromObjectPath( configToUse, contextualPath ) ??
+				getValueFromObjectPath( configToUse, globalPath )
 			);
 		}
 
-		const result = {};
+		let result = {};
 		VALID_SETTINGS.forEach( ( setting ) => {
 			const value =
-				get(
+				getValueFromObjectPath(
 					configToUse,
 					`settings${ appendedBlockPath }.${ setting }`
-				) ?? get( configToUse, `settings.${ setting }` );
+				) ??
+				getValueFromObjectPath( configToUse, `settings.${ setting }` );
 			if ( value ) {
-				set( result, setting, value );
+				result = setImmutably( result, setting.split( '.' ), value );
 			}
 		} );
 		return result;
@@ -130,15 +131,10 @@ export function useGlobalSetting( propertyPath, blockName, source = 'all' ) {
 	] );
 
 	const setSetting = ( newValue ) => {
-		setUserConfig( ( currentConfig ) => {
-			// Deep clone `currentConfig` to avoid mutating it later.
-			const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) );
-			set( newUserConfig, contextualPath, newValue );
-
-			return newUserConfig;
-		} );
+		setUserConfig( ( currentConfig ) =>
+			setImmutably( currentConfig, contextualPath.split( '.' ), newValue )
+		);
 	};
-
 	return [ settingValue, setSetting ];
 }
 
@@ -160,12 +156,10 @@ export function useGlobalStyle(
 		: `styles.blocks.${ blockName }${ appendedPath }`;
 
 	const setStyle = ( newValue ) => {
-		setUserConfig( ( currentConfig ) => {
-			// Deep clone `currentConfig` to avoid mutating it later.
-			const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) );
-			set(
-				newUserConfig,
-				finalPath,
+		setUserConfig( ( currentConfig ) =>
+			setImmutably(
+				currentConfig,
+				finalPath.split( '.' ),
 				shouldDecodeEncode
 					? getPresetVariableFromValue(
 							mergedConfig.settings,
@@ -174,27 +168,26 @@ export function useGlobalStyle(
 							newValue
 					  )
 					: newValue
-			);
-			return newUserConfig;
-		} );
+			)
+		);
 	};
 
 	let rawResult, result;
 	switch ( source ) {
 		case 'all':
-			rawResult = get( mergedConfig, finalPath );
+			rawResult = getValueFromObjectPath( mergedConfig, finalPath );
 			result = shouldDecodeEncode
 				? getValueFromVariable( mergedConfig, blockName, rawResult )
 				: rawResult;
 			break;
 		case 'user':
-			rawResult = get( userConfig, finalPath );
+			rawResult = getValueFromObjectPath( userConfig, finalPath );
 			result = shouldDecodeEncode
 				? getValueFromVariable( mergedConfig, blockName, rawResult )
 				: rawResult;
 			break;
 		case 'base':
-			rawResult = get( baseConfig, finalPath );
+			rawResult = getValueFromObjectPath( baseConfig, finalPath );
 			result = shouldDecodeEncode
 				? getValueFromVariable( baseConfig, blockName, rawResult )
 				: rawResult;
@@ -333,7 +326,8 @@ export function useSettingsForBlockElement(
 			const sides = Array.isArray( supports?.spacing?.[ key ] )
 				? supports?.spacing?.[ key ]
 				: supports?.spacing?.[ key ]?.sides;
-			if ( sides?.length ) {
+			// Check if spacing type is supported before adding sides.
+			if ( sides?.length && updatedSettings.spacing?.[ key ] ) {
 				updatedSettings.spacing = {
 					...updatedSettings.spacing,
 					[ key ]: {
@@ -467,3 +461,112 @@ export function useGradientsPerOrigin( settings ) {
 		shouldDisplayDefaultGradients,
 	] );
 }
+
+export function __experimentalUseGlobalBehaviors( blockName, source = 'all' ) {
+	const {
+		merged: mergedConfig,
+		base: baseConfig,
+		user: userConfig,
+		setUserConfig,
+	} = useContext( GlobalStylesContext );
+	const finalPath = ! blockName
+		? `behaviors`
+		: `behaviors.blocks.${ blockName }`;
+
+	let rawResult, result;
+	switch ( source ) {
+		case 'all':
+			rawResult = getValueFromObjectPath( mergedConfig, finalPath );
+			result = getValueFromVariable( mergedConfig, blockName, rawResult );
+			break;
+		case 'user':
+			rawResult = getValueFromObjectPath( userConfig, finalPath );
+			result = getValueFromVariable( mergedConfig, blockName, rawResult );
+			break;
+		case 'base':
+			rawResult = getValueFromObjectPath( baseConfig, finalPath );
+			result = getValueFromVariable( baseConfig, blockName, rawResult );
+			break;
+		default:
+			throw 'Unsupported source';
+	}
+
+	const animation = result?.lightbox?.animation || 'zoom';
+
+	const setBehavior = ( newValue ) => {
+		let newBehavior;
+		// The user saves with Apply Globally option.
+		if ( typeof newValue === 'object' ) {
+			newBehavior = newValue;
+		} else {
+			switch ( newValue ) {
+				case 'lightbox':
+					newBehavior = {
+						lightbox: {
+							enabled: true,
+							animation,
+						},
+					};
+					break;
+				case 'fade':
+					newBehavior = {
+						lightbox: {
+							enabled: true,
+							animation: 'fade',
+						},
+					};
+					break;
+				case 'zoom':
+					newBehavior = {
+						lightbox: {
+							enabled: true,
+							animation: 'zoom',
+						},
+					};
+					break;
+				case '':
+					newBehavior = {
+						lightbox: {
+							enabled: false,
+							animation,
+						},
+					};
+					break;
+				default:
+					break;
+			}
+		}
+		setUserConfig( ( currentConfig ) =>
+			setImmutably( currentConfig, finalPath.split( '.' ), newBehavior )
+		);
+	};
+	let behavior = '';
+	if ( result === undefined ) behavior = 'default';
+	if ( result?.lightbox.enabled ) behavior = 'lightbox';
+
+	return { behavior, inheritedBehaviors: result, setBehavior };
+}
+
+export function __experimentalUseHasBehaviorsPanel(
+	settings,
+	name,
+	{ blockSupportOnly = false } = {}
+) {
+	if ( ! settings?.behaviors ) {
+		return false;
+	}
+
+	// If every behavior is disabled on block supports, do not show the behaviors inspector control.
+	const hasSomeBlockSupport = Object.keys( settings?.behaviors ).some(
+		( key ) => hasBlockSupport( name, `behaviors.${ key }` )
+	);
+
+	if ( blockSupportOnly ) {
+		return hasSomeBlockSupport;
+	}
+
+	// If every behavior is disabled, do not show the behaviors inspector control.
+	return Object.values( settings?.behaviors ).some(
+		( value ) => value === true && hasSomeBlockSupport
+	);
+}

package/src/components/global-styles/index.js

@@ -1,4 +1,6 @@
 export {
+	__experimentalUseGlobalBehaviors,
+	__experimentalUseHasBehaviorsPanel,
 	useGlobalStylesReset,
 	useGlobalSetting,
 	useGlobalStyle,
@@ -23,5 +25,6 @@ export { default as BorderPanel, useHasBorderPanel } from './border-panel';
 export { default as ColorPanel, useHasColorPanel } from './color-panel';
 export { default as EffectsPanel, useHasEffectsPanel } from './effects-panel';
 export { default as FiltersPanel, useHasFiltersPanel } from './filters-panel';
+export { default as __experimentalBehaviorsPanel } from './behaviors-panel';
 export { default as AdvancedPanel } from './advanced-panel';
 export { areGlobalStyleConfigsEqual } from './utils';

package/src/components/global-styles/test/typography-utils.js

@@ -192,7 +192,7 @@ describe( 'typography utils', () => {
 
 			{
 				message:
-					'should apply maxViewPortWidth as maximum viewport width',
+					'should apply maxViewportWidth as maximum viewport width',
 				preset: {
 					size: '80px',
 					fluid: {
@@ -202,7 +202,7 @@ describe( 'typography utils', () => {
 				},
 				typographySettings: {
 					fluid: {
-						maxViewPortWidth: '1100px',
+						maxViewportWidth: '1100px',
 					},
 				},
 				expected:
@@ -548,18 +548,18 @@ describe( 'typography utils', () => {
 					layout: { wideSize: '1000rem' },
 				},
 				expected: {
-					fluid: { maxViewPortWidth: '1000rem', minFontSize: '16px' },
+					fluid: { maxViewportWidth: '1000rem', minFontSize: '16px' },
 				},
 			},
 
 			{
 				message:
-					'should prioritize fluid `maxViewPortWidth` over `layout.wideSize`',
+					'should prioritize fluid `maxViewportWidth` over `layout.wideSize`',
 				settings: {
-					typography: { fluid: { maxViewPortWidth: '10px' } },
+					typography: { fluid: { maxViewportWidth: '10px' } },
 					layout: { wideSize: '1000rem' },
 				},
-				expected: { fluid: { maxViewPortWidth: '10px' } },
+				expected: { fluid: { maxViewportWidth: '10px' } },
 			},
 		].forEach( ( { message, settings, expected } ) => {
 			it( `${ message }`, () => {

package/src/components/global-styles/typography-panel.js

@@ -114,6 +114,21 @@ function useHasTextColumnsControl( settings ) {
 	return settings?.typography?.textColumns;
 }
 
+function getUniqueFontSizesBySlug( settings ) {
+	const fontSizesPerOrigin = settings?.typography?.fontSizes ?? {};
+	const fontSizes = []
+		.concat( fontSizesPerOrigin?.custom ?? [] )
+		.concat( fontSizesPerOrigin?.theme ?? [] )
+		.concat( fontSizesPerOrigin.default ?? [] );
+
+	return fontSizes.reduce( ( acc, currentSize ) => {
+		if ( ! acc.some( ( { slug } ) => slug === currentSize.slug ) ) {
+			acc.push( currentSize );
+		}
+		return acc;
+	}, [] );
+}
+
 function TypographyToolsPanel( {
 	resetAllFilter,
 	onChange,
@@ -189,11 +204,8 @@ export default function TypographyPanel( {
 	// Font Size
 	const hasFontSizeEnabled = useHasFontSizeControl( settings );
 	const disableCustomFontSizes = ! settings?.typography?.customFontSize;
-	const fontSizesPerOrigin = settings?.typography?.fontSizes ?? {};
-	const fontSizes = []
-		.concat( fontSizesPerOrigin?.custom ?? [] )
-		.concat( fontSizesPerOrigin?.theme ?? [] )
-		.concat( fontSizesPerOrigin.default ?? [] );
+	const fontSizes = getUniqueFontSizesBySlug( settings );
+
 	const fontSize = decodeValue( inheritedValue?.typography?.fontSize );
 	const setFontSize = ( newValue, metadata ) => {
 		const actualValue = !! metadata?.slug

package/src/components/global-styles/typography-utils.js

@@ -25,8 +25,8 @@ import { getComputedFluidTypographyValue } from '../font-sizes/fluid-utils';
 
 /**
  * @typedef {Object} TypographySettings
- * @property {?string} minViewPortWidth  Minimum viewport size from which type will have fluidity. Optional if size is specified.
- * @property {?string} maxViewPortWidth  Maximum size up to which type will have fluidity. Optional if size is specified.
+ * @property {?string} minViewportWidth  Minimum viewport size from which type will have fluidity. Optional if size is specified.
+ * @property {?string} maxViewportWidth  Maximum size up to which type will have fluidity. Optional if size is specified.
  * @property {?number} scaleFactor       A scale factor to determine how fast a font scales within boundaries. Optional.
  * @property {?number} minFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.
  * @property {?string} minFontSize       The smallest a calculated font size may be. Optional.
@@ -67,7 +67,7 @@ export function getTypographyFontSizeValue( preset, typographyOptions ) {
 		maximumFontSize: preset?.fluid?.max,
 		fontSize: defaultSize,
 		minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
-		maximumViewPortWidth: fluidTypographySettings?.maxViewPortWidth,
+		maximumViewportWidth: fluidTypographySettings?.maxViewportWidth,
 	} );
 
 	if ( !! fluidFontSizeValue ) {
@@ -102,7 +102,7 @@ export function getFluidTypographyOptionsFromSettings( settings ) {
 		layoutSettings?.wideSize
 		? {
 				fluid: {
-					maxViewPortWidth: layoutSettings.wideSize,
+					maxViewportWidth: layoutSettings.wideSize,
 					...typographySettings.fluid,
 				},
 		  }

package/src/components/global-styles/use-global-styles-output.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get, set } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -32,7 +27,11 @@ import { PresetDuotoneFilter } from '../duotone/components';
 import { getGapCSSValue } from '../../hooks/gap';
 import { store as blockEditorStore } from '../../store';
 import { LAYOUT_DEFINITIONS } from '../../layouts/definitions';
-import { kebabCase } from '../../utils/object';
+import {
+	getValueFromObjectPath,
+	kebabCase,
+	setImmutably,
+} from '../../utils/object';
 
 // List of block support features that can have their related styles
 // generated under their own feature level selector rather than the block's.
@@ -69,7 +68,11 @@ function compileStyleValue( uncompiledValue ) {
 function getPresetsDeclarations( blockPresets = {}, mergedSettings ) {
 	return PRESET_METADATA.reduce(
 		( declarations, { path, valueKey, valueFunc, cssVarInfix } ) => {
-			const presetByOrigin = get( blockPresets, path, [] );
+			const presetByOrigin = getValueFromObjectPath(
+				blockPresets,
+				path,
+				[]
+			);
 			[ 'default', 'theme', 'custom' ].forEach( ( origin ) => {
 				if ( presetByOrigin[ origin ] ) {
 					presetByOrigin[ origin ].forEach( ( value ) => {
@@ -113,7 +116,11 @@ function getPresetsClasses( blockSelector = '*', blockPresets = {} ) {
 				return declarations;
 			}
 
-			const presetByOrigin = get( blockPresets, path, [] );
+			const presetByOrigin = getValueFromObjectPath(
+				blockPresets,
+				path,
+				[]
+			);
 			[ 'default', 'theme', 'custom' ].forEach( ( origin ) => {
 				if ( presetByOrigin[ origin ] ) {
 					presetByOrigin[ origin ].forEach( ( { slug } ) => {
@@ -147,7 +154,11 @@ function getPresetsSvgFilters( blockPresets = {} ) {
 		// Duotone are the only type of filters for now.
 		( metadata ) => metadata.path.at( -1 ) === 'duotone'
 	).flatMap( ( metadata ) => {
-		const presetByOrigin = get( blockPresets, metadata.path, {} );
+		const presetByOrigin = getValueFromObjectPath(
+			blockPresets,
+			metadata.path,
+			{}
+		);
 		return [ 'default', 'theme' ]
 			.filter( ( origin ) => presetByOrigin[ origin ] )
 			.flatMap( ( origin ) =>
@@ -319,7 +330,10 @@ export function getStylesDeclarations(
 				return declarations;
 			}
 
-			const styleValue = get( blockStyles, pathToValue );
+			const styleValue = getValueFromObjectPath(
+				blockStyles,
+				pathToValue
+			);
 
 			// Root-level padding styles don't currently support strings with CSS shorthand values.
 			// This may change: https://github.com/WordPress/gutenberg/issues/40132.
@@ -334,7 +348,9 @@ export function getStylesDeclarations(
 				Object.entries( properties ).forEach( ( entry ) => {
 					const [ name, prop ] = entry;
 
-					if ( ! get( styleValue, [ prop ], false ) ) {
+					if (
+						! getValueFromObjectPath( styleValue, [ prop ], false )
+					) {
 						// Do not create a declaration
 						// for sub-properties that don't have any value.
 						return;
@@ -345,17 +361,19 @@ export function getStylesDeclarations(
 						: kebabCase( name );
 					declarations.push(
 						`${ cssProperty }: ${ compileStyleValue(
-							get( styleValue, [ prop ] )
+							getValueFromObjectPath( styleValue, [ prop ] )
 						) }`
 					);
 				} );
-			} else if ( get( blockStyles, pathToValue, false ) ) {
+			} else if (
+				getValueFromObjectPath( blockStyles, pathToValue, false )
+			) {
 				const cssProperty = key.startsWith( '--' )
 					? key
 					: kebabCase( key );
 				declarations.push(
 					`${ cssProperty }: ${ compileStyleValue(
-						get( blockStyles, pathToValue )
+						getValueFromObjectPath( blockStyles, pathToValue )
 					) }`
 				);
 			}
@@ -384,7 +402,7 @@ export function getStylesDeclarations(
 		let ruleValue = rule.value;
 		if ( typeof ruleValue !== 'string' && ruleValue?.ref ) {
 			const refPath = ruleValue.ref.split( '.' );
-			ruleValue = get( tree, refPath );
+			ruleValue = getValueFromObjectPath( tree, refPath );
 			// Presence of another ref indicates a reference to another dynamic value.
 			// Pointing to another dynamic value is not supported.
 			if ( ! ruleValue || ruleValue?.ref ) {
@@ -678,11 +696,11 @@ export const getNodesWithSettings = ( tree, blockSelectors ) => {
 	}
 
 	const pickPresets = ( treeToPickFrom ) => {
-		const presets = {};
+		let presets = {};
 		PRESET_METADATA.forEach( ( { path } ) => {
-			const value = get( treeToPickFrom, path, false );
+			const value = getValueFromObjectPath( treeToPickFrom, path, false );
 			if ( value !== false ) {
-				set( presets, path, value );
+				presets = setImmutably( presets, path, value );
 			}
 		} );
 		return presets;

package/src/components/global-styles/utils.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { get } from 'lodash';
 import fastDeepEqual from 'fast-deep-equal/es6';
 
 /**
@@ -11,6 +10,7 @@ import {
 	getTypographyFontSizeValue,
 	getFluidTypographyOptionsFromSettings,
 } from './typography-utils';
+import { getValueFromObjectPath } from '../../utils/object';
 
 /* Supporting data. */
 export const ROOT_BLOCK_NAME = 'root';
@@ -168,8 +168,12 @@ function findInPresetsBy(
 ) {
 	// Block presets take priority above root level presets.
 	const orderedPresetsByOrigin = [
-		get( features, [ 'blocks', blockName, ...presetPath ] ),
-		get( features, presetPath ),
+		getValueFromObjectPath( features, [
+			'blocks',
+			blockName,
+			...presetPath,
+		] ),
+		getValueFromObjectPath( features, presetPath ),
 	];
 
 	for ( const presetByOrigin of orderedPresetsByOrigin ) {
@@ -282,8 +286,13 @@ function getValueFromPresetVariable(
 
 function getValueFromCustomVariable( features, blockName, variable, path ) {
 	const result =
-		get( features.settings, [ 'blocks', blockName, 'custom', ...path ] ) ??
-		get( features.settings, [ 'custom', ...path ] );
+		getValueFromObjectPath( features.settings, [
+			'blocks',
+			blockName,
+			'custom',
+			...path,
+		] ) ??
+		getValueFromObjectPath( features.settings, [ 'custom', ...path ] );
 	if ( ! result ) {
 		return variable;
 	}
@@ -303,7 +312,7 @@ export function getValueFromVariable( features, blockName, variable ) {
 	if ( ! variable || typeof variable !== 'string' ) {
 		if ( variable?.ref && typeof variable?.ref === 'string' ) {
 			const refPath = variable.ref.split( '.' );
-			variable = get( features, refPath );
+			variable = getValueFromObjectPath( features, refPath );
 			// Presence of another ref indicates a reference to another dynamic value.
 			// Pointing to another dynamic value is not supported.
 			if ( ! variable || !! variable?.ref ) {
@@ -406,6 +415,7 @@ export function areGlobalStyleConfigsEqual( original, variation ) {
 	}
 	return (
 		fastDeepEqual( original?.styles, variation?.styles ) &&
-		fastDeepEqual( original?.settings, variation?.settings )
+		fastDeepEqual( original?.settings, variation?.settings ) &&
+		fastDeepEqual( original?.behaviors, variation?.behaviors )
 	);
 }