@wordpress/block-editor 12.19.1 → 12.19.3

package/build-module/store/utils.js

@@ -1,3 +1,7 @@
+/**
+ * Internal dependencies
+ */
+import { selectBlockPatternsKey } from './private-keys';
 export const checkAllowList = (list, item, defaultResult = null) => {
   if (typeof list === 'boolean') {
     return list;
@@ -30,7 +34,7 @@ export const checkAllowListRecursive = (blocks, allowedBlockTypes) => {
   }
   return true;
 };
-export const getAllPatternsDependants = state => {
-  return [state.settings.__experimentalBlockPatterns, state.settings.__experimentalUserPatternCategories, state.settings.__experimentalReusableBlocks, state.settings.__experimentalFetchBlockPatterns, state.blockPatterns];
+export const getAllPatternsDependants = select => state => {
+  return [state.settings.__experimentalBlockPatterns, state.settings.__experimentalUserPatternCategories, state.settings.__experimentalReusableBlocks, state.settings[selectBlockPatternsKey]?.(select), state.blockPatterns];
 };
 //# sourceMappingURL=utils.js.map

package/build-module/store/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["checkAllowList","list","item","defaultResult","Array","isArray","includes","checkAllowListRecursive","blocks","allowedBlockTypes","blocksQueue","length","block","shift","isAllowed","name","blockName","innerBlocks","forEach","innerBlock","push","getAllPatternsDependants","state","settings","__experimentalBlockPatterns","__experimentalUserPatternCategories","__experimentalReusableBlocks","__experimentalFetchBlockPatterns","blockPatterns"],"sources":["@wordpress/block-editor/src/store/utils.js"],"sourcesContent":["export const checkAllowList = ( list, item, defaultResult = null ) => {\n\tif ( typeof list === 'boolean' ) {\n\t\treturn list;\n\t}\n\tif ( Array.isArray( list ) ) {\n\t\t// TODO: when there is a canonical way to detect that we are editing a post\n\t\t// the following check should be changed to something like:\n\t\t// if ( list.includes( 'core/post-content' ) && getEditorMode() === 'post-content' && item === null )\n\t\tif ( list.includes( 'core/post-content' ) && item === null ) {\n\t\t\treturn true;\n\t\t}\n\t\treturn list.includes( item );\n\t}\n\treturn defaultResult;\n};\n\nexport const checkAllowListRecursive = ( blocks, allowedBlockTypes ) => {\n\tif ( typeof allowedBlockTypes === 'boolean' ) {\n\t\treturn allowedBlockTypes;\n\t}\n\n\tconst blocksQueue = [ ...blocks ];\n\twhile ( blocksQueue.length > 0 ) {\n\t\tconst block = blocksQueue.shift();\n\n\t\tconst isAllowed = checkAllowList(\n\t\t\tallowedBlockTypes,\n\t\t\tblock.name || block.blockName,\n\t\t\ttrue\n\t\t);\n\t\tif ( ! isAllowed ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tblock.innerBlocks?.forEach( ( innerBlock ) => {\n\t\t\tblocksQueue.push( innerBlock );\n\t\t} );\n\t}\n\n\treturn true;\n};\n\nexport const getAllPatternsDependants = ( state ) => {\n\treturn [\n\t\tstate.settings.__experimentalBlockPatterns,\n\t\tstate.settings.__experimentalUserPatternCategories,\n\t\tstate.settings.__experimentalReusableBlocks,\n\t\tstate.settings.__experimentalFetchBlockPatterns,\n\t\tstate.blockPatterns,\n\t];\n};\n"],"mappings":"AAAA,OAAO,MAAMA,cAAc,GAAGA,CAAEC,IAAI,EAAEC,IAAI,EAAEC,aAAa,GAAG,IAAI,KAAM;EACrE,IAAK,OAAOF,IAAI,KAAK,SAAS,EAAG;IAChC,OAAOA,IAAI;EACZ;EACA,IAAKG,KAAK,CAACC,OAAO,CAAEJ,IAAK,CAAC,EAAG;IAC5B;IACA;IACA;IACA,IAAKA,IAAI,CAACK,QAAQ,CAAE,mBAAoB,CAAC,IAAIJ,IAAI,KAAK,IAAI,EAAG;MAC5D,OAAO,IAAI;IACZ;IACA,OAAOD,IAAI,CAACK,QAAQ,CAAEJ,IAAK,CAAC;EAC7B;EACA,OAAOC,aAAa;AACrB,CAAC;AAED,OAAO,MAAMI,uBAAuB,GAAGA,CAAEC,MAAM,EAAEC,iBAAiB,KAAM;EACvE,IAAK,OAAOA,iBAAiB,KAAK,SAAS,EAAG;IAC7C,OAAOA,iBAAiB;EACzB;EAEA,MAAMC,WAAW,GAAG,CAAE,GAAGF,MAAM,CAAE;EACjC,OAAQE,WAAW,CAACC,MAAM,GAAG,CAAC,EAAG;IAChC,MAAMC,KAAK,GAAGF,WAAW,CAACG,KAAK,CAAC,CAAC;IAEjC,MAAMC,SAAS,GAAGd,cAAc,CAC/BS,iBAAiB,EACjBG,KAAK,CAACG,IAAI,IAAIH,KAAK,CAACI,SAAS,EAC7B,IACD,CAAC;IACD,IAAK,CAAEF,SAAS,EAAG;MAClB,OAAO,KAAK;IACb;IAEAF,KAAK,CAACK,WAAW,EAAEC,OAAO,CAAIC,UAAU,IAAM;MAC7CT,WAAW,CAACU,IAAI,CAAED,UAAW,CAAC;IAC/B,CAAE,CAAC;EACJ;EAEA,OAAO,IAAI;AACZ,CAAC;AAED,OAAO,MAAME,wBAAwB,GAAKC,KAAK,IAAM;EACpD,OAAO,CACNA,KAAK,CAACC,QAAQ,CAACC,2BAA2B,EAC1CF,KAAK,CAACC,QAAQ,CAACE,mCAAmC,EAClDH,KAAK,CAACC,QAAQ,CAACG,4BAA4B,EAC3CJ,KAAK,CAACC,QAAQ,CAACI,gCAAgC,EAC/CL,KAAK,CAACM,aAAa,CACnB;AACF,CAAC"}
+{"version":3,"names":["selectBlockPatternsKey","checkAllowList","list","item","defaultResult","Array","isArray","includes","checkAllowListRecursive","blocks","allowedBlockTypes","blocksQueue","length","block","shift","isAllowed","name","blockName","innerBlocks","forEach","innerBlock","push","getAllPatternsDependants","select","state","settings","__experimentalBlockPatterns","__experimentalUserPatternCategories","__experimentalReusableBlocks","blockPatterns"],"sources":["@wordpress/block-editor/src/store/utils.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { selectBlockPatternsKey } from './private-keys';\n\nexport const checkAllowList = ( list, item, defaultResult = null ) => {\n\tif ( typeof list === 'boolean' ) {\n\t\treturn list;\n\t}\n\tif ( Array.isArray( list ) ) {\n\t\t// TODO: when there is a canonical way to detect that we are editing a post\n\t\t// the following check should be changed to something like:\n\t\t// if ( list.includes( 'core/post-content' ) && getEditorMode() === 'post-content' && item === null )\n\t\tif ( list.includes( 'core/post-content' ) && item === null ) {\n\t\t\treturn true;\n\t\t}\n\t\treturn list.includes( item );\n\t}\n\treturn defaultResult;\n};\n\nexport const checkAllowListRecursive = ( blocks, allowedBlockTypes ) => {\n\tif ( typeof allowedBlockTypes === 'boolean' ) {\n\t\treturn allowedBlockTypes;\n\t}\n\n\tconst blocksQueue = [ ...blocks ];\n\twhile ( blocksQueue.length > 0 ) {\n\t\tconst block = blocksQueue.shift();\n\n\t\tconst isAllowed = checkAllowList(\n\t\t\tallowedBlockTypes,\n\t\t\tblock.name || block.blockName,\n\t\t\ttrue\n\t\t);\n\t\tif ( ! isAllowed ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tblock.innerBlocks?.forEach( ( innerBlock ) => {\n\t\t\tblocksQueue.push( innerBlock );\n\t\t} );\n\t}\n\n\treturn true;\n};\n\nexport const getAllPatternsDependants = ( select ) => ( state ) => {\n\treturn [\n\t\tstate.settings.__experimentalBlockPatterns,\n\t\tstate.settings.__experimentalUserPatternCategories,\n\t\tstate.settings.__experimentalReusableBlocks,\n\t\tstate.settings[ selectBlockPatternsKey ]?.( select ),\n\t\tstate.blockPatterns,\n\t];\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,sBAAsB,QAAQ,gBAAgB;AAEvD,OAAO,MAAMC,cAAc,GAAGA,CAAEC,IAAI,EAAEC,IAAI,EAAEC,aAAa,GAAG,IAAI,KAAM;EACrE,IAAK,OAAOF,IAAI,KAAK,SAAS,EAAG;IAChC,OAAOA,IAAI;EACZ;EACA,IAAKG,KAAK,CAACC,OAAO,CAAEJ,IAAK,CAAC,EAAG;IAC5B;IACA;IACA;IACA,IAAKA,IAAI,CAACK,QAAQ,CAAE,mBAAoB,CAAC,IAAIJ,IAAI,KAAK,IAAI,EAAG;MAC5D,OAAO,IAAI;IACZ;IACA,OAAOD,IAAI,CAACK,QAAQ,CAAEJ,IAAK,CAAC;EAC7B;EACA,OAAOC,aAAa;AACrB,CAAC;AAED,OAAO,MAAMI,uBAAuB,GAAGA,CAAEC,MAAM,EAAEC,iBAAiB,KAAM;EACvE,IAAK,OAAOA,iBAAiB,KAAK,SAAS,EAAG;IAC7C,OAAOA,iBAAiB;EACzB;EAEA,MAAMC,WAAW,GAAG,CAAE,GAAGF,MAAM,CAAE;EACjC,OAAQE,WAAW,CAACC,MAAM,GAAG,CAAC,EAAG;IAChC,MAAMC,KAAK,GAAGF,WAAW,CAACG,KAAK,CAAC,CAAC;IAEjC,MAAMC,SAAS,GAAGd,cAAc,CAC/BS,iBAAiB,EACjBG,KAAK,CAACG,IAAI,IAAIH,KAAK,CAACI,SAAS,EAC7B,IACD,CAAC;IACD,IAAK,CAAEF,SAAS,EAAG;MAClB,OAAO,KAAK;IACb;IAEAF,KAAK,CAACK,WAAW,EAAEC,OAAO,CAAIC,UAAU,IAAM;MAC7CT,WAAW,CAACU,IAAI,CAAED,UAAW,CAAC;IAC/B,CAAE,CAAC;EACJ;EAEA,OAAO,IAAI;AACZ,CAAC;AAED,OAAO,MAAME,wBAAwB,GAAKC,MAAM,IAAQC,KAAK,IAAM;EAClE,OAAO,CACNA,KAAK,CAACC,QAAQ,CAACC,2BAA2B,EAC1CF,KAAK,CAACC,QAAQ,CAACE,mCAAmC,EAClDH,KAAK,CAACC,QAAQ,CAACG,4BAA4B,EAC3CJ,KAAK,CAACC,QAAQ,CAAEzB,sBAAsB,CAAE,GAAIuB,MAAO,CAAC,EACpDC,KAAK,CAACK,aAAa,CACnB;AACF,CAAC"}

package/build-style/style-rtl.css

@@ -1587,16 +1587,6 @@ iframe[name=editor-canvas].has-editor-padding {
   direction: ltr;
 }
 
-.block-editor-global-styles-advanced-panel__custom-css-validation-wrapper {
-  position: absolute;
-  bottom: 16px;
-  left: 24px;
-}
-
-.block-editor-global-styles-advanced-panel__custom-css-validation-icon {
-  fill: #cc1818;
-}
-
 .block-editor-height-control {
   border: 0;
   margin: 0;

package/build-style/style.css

@@ -1588,16 +1588,6 @@ iframe[name=editor-canvas].has-editor-padding {
   direction: ltr;
 }
 
-.block-editor-global-styles-advanced-panel__custom-css-validation-wrapper {
-  position: absolute;
-  bottom: 16px;
-  right: 24px;
-}
-
-.block-editor-global-styles-advanced-panel__custom-css-validation-icon {
-  fill: #cc1818;
-}
-
 .block-editor-height-control {
   border: 0;
   margin: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.19.1",
+	"version": "12.19.3",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,35 +35,35 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.51.0",
-		"@wordpress/api-fetch": "^6.48.0",
-		"@wordpress/blob": "^3.51.0",
-		"@wordpress/blocks": "^12.28.1",
-		"@wordpress/commands": "^0.22.1",
-		"@wordpress/components": "^26.0.1",
-		"@wordpress/compose": "^6.28.0",
-		"@wordpress/data": "^9.21.0",
-		"@wordpress/date": "^4.51.0",
-		"@wordpress/deprecated": "^3.51.0",
-		"@wordpress/dom": "^3.51.0",
-		"@wordpress/element": "^5.28.0",
-		"@wordpress/escape-html": "^2.51.0",
-		"@wordpress/hooks": "^3.51.0",
-		"@wordpress/html-entities": "^3.51.0",
-		"@wordpress/i18n": "^4.51.0",
-		"@wordpress/icons": "^9.42.0",
-		"@wordpress/is-shallow-equal": "^4.51.0",
-		"@wordpress/keyboard-shortcuts": "^4.28.0",
-		"@wordpress/keycodes": "^3.51.0",
-		"@wordpress/notices": "^4.19.0",
-		"@wordpress/preferences": "^3.28.1",
-		"@wordpress/private-apis": "^0.33.0",
-		"@wordpress/rich-text": "^6.28.1",
-		"@wordpress/style-engine": "^1.34.0",
-		"@wordpress/token-list": "^2.51.0",
-		"@wordpress/url": "^3.52.0",
-		"@wordpress/warning": "^2.51.0",
-		"@wordpress/wordcount": "^3.51.0",
+		"@wordpress/a11y": "^3.51.1",
+		"@wordpress/api-fetch": "^6.48.1",
+		"@wordpress/blob": "^3.51.1",
+		"@wordpress/blocks": "^12.28.3",
+		"@wordpress/commands": "^0.22.2",
+		"@wordpress/components": "^26.0.2",
+		"@wordpress/compose": "^6.28.1",
+		"@wordpress/data": "^9.21.1",
+		"@wordpress/date": "^4.51.1",
+		"@wordpress/deprecated": "^3.51.1",
+		"@wordpress/dom": "^3.51.1",
+		"@wordpress/element": "^5.28.1",
+		"@wordpress/escape-html": "^2.51.1",
+		"@wordpress/hooks": "^3.51.1",
+		"@wordpress/html-entities": "^3.51.1",
+		"@wordpress/i18n": "^4.51.1",
+		"@wordpress/icons": "^9.42.1",
+		"@wordpress/is-shallow-equal": "^4.51.1",
+		"@wordpress/keyboard-shortcuts": "^4.28.1",
+		"@wordpress/keycodes": "^3.51.1",
+		"@wordpress/notices": "^4.19.1",
+		"@wordpress/preferences": "^3.28.2",
+		"@wordpress/private-apis": "^0.33.1",
+		"@wordpress/rich-text": "^6.28.2",
+		"@wordpress/style-engine": "^1.34.1",
+		"@wordpress/token-list": "^2.51.1",
+		"@wordpress/url": "^3.52.1",
+		"@wordpress/warning": "^2.51.1",
+		"@wordpress/wordcount": "^3.51.1",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -87,5 +87,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5902fc0f490528da6965dd4cf97f11192bcf5956"
+	"gitHead": "b12d75c5c5256fda2a0509bb432e20ddd3354d5e"
 }

package/src/components/block-tools/insertion-point.js

@@ -81,11 +81,16 @@ function InbetweenInsertionPointPopover( {
 			isInserterShown: insertionPoint?.__unstableWithInserter,
 		};
 	}, [] );
+	const { getBlockEditingMode } = useSelect( blockEditorStore );
 
 	const disableMotion = useReducedMotion();
 
 	function onClick( event ) {
-		if ( event.target === ref.current && nextClientId ) {
+		if (
+			event.target === ref.current &&
+			nextClientId &&
+			getBlockEditingMode( nextClientId ) !== 'disabled'
+		) {
 			selectBlock( nextClientId, -1 );
 		}
 	}

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

@@ -3,12 +3,11 @@
  */
 import {
 	TextareaControl,
-	Tooltip,
+	Notice,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Icon, info } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -58,6 +57,11 @@ export default function AdvancedPanel( {
 
 	return (
 		<VStack spacing={ 3 }>
+			{ cssError && (
+				<Notice status="error" onRemove={ () => setCSSError( null ) }>
+					{ cssError }
+				</Notice>
+			) }
 			<TextareaControl
 				label={ __( 'Additional CSS' ) }
 				__nextHasNoMarginBottom
@@ -67,16 +71,6 @@ export default function AdvancedPanel( {
 				className="block-editor-global-styles-advanced-panel__custom-css-input"
 				spellCheck={ false }
 			/>
-			{ cssError && (
-				<Tooltip text={ cssError }>
-					<div className="block-editor-global-styles-advanced-panel__custom-css-validation-wrapper">
-						<Icon
-							icon={ info }
-							className="block-editor-global-styles-advanced-panel__custom-css-validation-icon"
-						/>
-					</div>
-				</Tooltip>
-			) }
 		</VStack>
 	);
 }

package/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,10 @@ 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 = overrideOrigins( shadowPresets ) ?? [];
 	const setShadow = ( newValue ) => {
-		const slug = mergedShadowPresets?.find(
+		const slug = overriddenShadowPresets?.find(
 			( { shadow: shadowName } ) => shadowName === newValue
 		)?.slug;
 

package/src/components/global-styles/get-global-styles-changes.js

@@ -22,8 +22,8 @@ const translationMap = {
 	h4: __( 'H4' ),
 	h5: __( 'H5' ),
 	h6: __( 'H6' ),
-	'settings.color': __( 'Color settings' ),
-	'settings.typography': __( 'Typography settings' ),
+	'settings.color': __( 'Color' ),
+	'settings.typography': __( 'Typography' ),
 	'styles.color': __( 'Colors' ),
 	'styles.spacing': __( 'Spacing' ),
 	'styles.typography': __( 'Typography' ),
@@ -54,12 +54,7 @@ function getTranslation( key ) {
 	}
 
 	if ( keyArray?.[ 0 ] === 'elements' ) {
-		const elementName = translationMap[ keyArray[ 1 ] ] || keyArray[ 1 ];
-		return sprintf(
-			// translators: %s: element name, e.g., heading button, link, caption.
-			__( '%s element' ),
-			elementName
-		);
+		return translationMap[ keyArray[ 1 ] ] || keyArray[ 1 ];
 	}
 
 	return undefined;
@@ -114,9 +109,9 @@ function deepCompare( changedObject, originalObject, parentPath = '' ) {
  *
  * @param {Object} next     The changed object to compare.
  * @param {Object} previous The original object to compare against.
- * @return {string[]}                        An array of translated changes.
+ * @return {Array[]}        A 2-dimensional array of tuples: [ "group", "translated change" ].
  */
-function getGlobalStylesChangelist( next, previous ) {
+export function getGlobalStylesChangelist( next, previous ) {
 	const cacheKey = JSON.stringify( { next, previous } );
 
 	if ( globalStylesChangesCache.has( cacheKey ) ) {
@@ -160,12 +155,12 @@ function getGlobalStylesChangelist( next, previous ) {
 	const result = [ ...new Set( changedValueTree ) ]
 		/*
 		 * Translate the keys.
-		 * Remove duplicate or empty translations.
+		 * Remove empty translations.
 		 */
 		.reduce( ( acc, curr ) => {
 			const translation = getTranslation( curr );
-			if ( translation && ! acc.includes( translation ) ) {
-				acc.push( translation );
+			if ( translation ) {
+				acc.push( [ curr.split( '.' )[ 0 ], translation ] );
 			}
 			return acc;
 		}, [] );
@@ -176,29 +171,74 @@ function getGlobalStylesChangelist( next, previous ) {
 }
 
 /**
- * From a getGlobalStylesChangelist() result, returns a truncated array of translated changes.
- * Appends a translated string indicating the number of changes that were truncated.
+ * From a getGlobalStylesChangelist() result, returns an array of translated global styles changes, grouped by type.
+ * The types are 'blocks', 'elements', 'settings', and 'styles'.
  *
  * @param {Object}              next     The changed object to compare.
  * @param {Object}              previous The original object to compare against.
  * @param {{maxResults:number}} options  Options. maxResults: results to return before truncating.
- * @return {string[]}                        An array of translated changes.
+ * @return {string[]}                    An array of translated changes.
  */
 export default function getGlobalStylesChanges( next, previous, options = {} ) {
-	const changes = getGlobalStylesChangelist( next, previous );
-	const changesLength = changes.length;
+	let changeList = getGlobalStylesChangelist( next, previous );
+	const changesLength = changeList.length;
 	const { maxResults } = options;
 
-	// Truncate to `n` results if necessary.
-	if ( !! maxResults && changesLength && changesLength > maxResults ) {
-		const deleteCount = changesLength - maxResults;
-		const andMoreText = sprintf(
-			// translators: %d: number of global styles changes that are not displayed in the UI.
-			_n( '…and %d more change', '…and %d more changes', deleteCount ),
-			deleteCount
-		);
-		changes.splice( maxResults, deleteCount, andMoreText );
+	if ( changesLength ) {
+		// Truncate to `n` results if necessary.
+		if ( !! maxResults && changesLength > maxResults ) {
+			changeList = changeList.slice( 0, maxResults );
+		}
+		return Object.entries(
+			changeList.reduce( ( acc, curr ) => {
+				const group = acc[ curr[ 0 ] ] || [];
+				if ( ! group.includes( curr[ 1 ] ) ) {
+					acc[ curr[ 0 ] ] = [ ...group, curr[ 1 ] ];
+				}
+				return acc;
+			}, {} )
+		).map( ( [ key, changeValues ] ) => {
+			const changeValuesLength = changeValues.length;
+			const joinedChangesValue = changeValues.join( __( ', ' ) );
+			switch ( key ) {
+				case 'blocks': {
+					return sprintf(
+						// translators: %s: a list of block names separated by a comma.
+						_n( '%s block.', '%s blocks.', changeValuesLength ),
+						joinedChangesValue
+					);
+				}
+				case 'elements': {
+					return sprintf(
+						// translators: %s: a list of element names separated by a comma.
+						_n( '%s element.', '%s elements.', changeValuesLength ),
+						joinedChangesValue
+					);
+				}
+				case 'settings': {
+					return sprintf(
+						// translators: %s: a list of theme.json setting labels separated by a comma.
+						__( '%s settings.' ),
+						joinedChangesValue
+					);
+				}
+				case 'styles': {
+					return sprintf(
+						// translators: %s: a list of theme.json top-level styles labels separated by a comma.
+						__( '%s styles.' ),
+						joinedChangesValue
+					);
+				}
+				default: {
+					return sprintf(
+						// translators: %s: a list of global styles changes separated by a comma.
+						__( '%s.' ),
+						joinedChangesValue
+					);
+				}
+			}
+		} );
 	}
 
-	return changes;
+	return EMPTY_ARRAY;
 }

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

@@ -19,13 +19,13 @@ import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
 import classNames from 'classnames';
 
 export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
-	const defaultShadows = settings?.shadow?.presets?.default;
-	const themeShadows = settings?.shadow?.presets?.theme;
+	const defaultShadows = settings?.shadow?.presets?.default || [];
+	const themeShadows = settings?.shadow?.presets?.theme || [];
 	const defaultPresetsEnabled = settings?.shadow?.defaultPresets;
 
 	const shadows = [
 		...( defaultPresetsEnabled ? defaultShadows : [] ),
-		...( themeShadows || [] ),
+		...themeShadows,
 	];
 
 	return (

package/src/components/global-styles/style.scss

@@ -47,13 +47,3 @@
 	/*rtl:ignore*/
 	direction: ltr;
 }
-
-.block-editor-global-styles-advanced-panel__custom-css-validation-wrapper {
-	position: absolute;
-	bottom: $grid-unit-20;
-	right: $grid-unit * 3;
-}
-
-.block-editor-global-styles-advanced-panel__custom-css-validation-icon {
-	fill: $alert-red;
-}

package/src/components/global-styles/test/get-global-styles-changes.js

@@ -1,7 +1,9 @@
 /**
  * Internal dependencies
  */
-import getGlobalStylesChanges from '../get-global-styles-changes';
+import getGlobalStylesChanges, {
+	getGlobalStylesChangelist,
+} from '../get-global-styles-changes';
 
 /**
  * WordPress dependencies
@@ -12,24 +14,8 @@ import {
 	getBlockTypes,
 } from '@wordpress/blocks';
 
-describe( 'getGlobalStylesChanges', () => {
-	beforeEach( () => {
-		registerBlockType( 'core/test-fiori-di-zucca', {
-			save: () => {},
-			category: 'text',
-			title: 'Test pumpkin flowers',
-			edit: () => {},
-		} );
-	} );
-
-	afterEach( () => {
-		getBlockTypes().forEach( ( block ) => {
-			unregisterBlockType( block.name );
-		} );
-	} );
-
-	const revision = {
-		id: 10,
+describe( 'getGlobalStylesChanges and utils', () => {
+	const next = {
 		styles: {
 			typography: {
 				fontSize: 'var(--wp--preset--font-size--potato)',
@@ -85,11 +71,18 @@ describe( 'getGlobalStylesChanges', () => {
 						},
 					],
 				},
+				gradients: [
+					{
+						name: 'Something something',
+						gradient:
+							'linear-gradient(105deg,rgba(6,147,100,1) 0%,rgb(155,81,100) 100%)',
+						slug: 'something-something',
+					},
+				],
 			},
 		},
 	};
-	const previousRevision = {
-		id: 9,
+	const previous = {
 		styles: {
 			typography: {
 				fontSize: 'var(--wp--preset--font-size--fungus)',
@@ -161,74 +154,120 @@ describe( 'getGlobalStylesChanges', () => {
 							color: 'blue',
 						},
 					],
+					custom: [
+						{
+							slug: 'one',
+							color: 'tomato',
+						},
+					],
 				},
+				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',
+					},
+				],
+			},
+			typography: {
+				fluid: true,
 			},
 		},
 	};
 
-	it( 'returns a list of changes and caches them', () => {
-		const resultA = getGlobalStylesChanges( revision, previousRevision );
-		expect( resultA ).toEqual( [
-			'Colors',
-			'Typography',
-			'Test pumpkin flowers',
-			'H3 element',
-			'Caption element',
-			'H6 element',
-			'Link element',
-			'Color settings',
-		] );
-
-		const resultB = getGlobalStylesChanges( revision, previousRevision );
-
-		expect( resultA ).toBe( resultB );
+	beforeEach( () => {
+		registerBlockType( 'core/test-fiori-di-zucca', {
+			save: () => {},
+			category: 'text',
+			title: 'Test pumpkin flowers',
+			edit: () => {},
+		} );
 	} );
 
-	it( 'returns a list of truncated changes', () => {
-		const resultA = getGlobalStylesChanges( revision, previousRevision, {
-			maxResults: 3,
+	afterEach( () => {
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
 		} );
-		expect( resultA ).toEqual( [
-			'Colors',
-			'Typography',
-			'Test pumpkin flowers',
-			'…and 5 more changes',
-		] );
 	} );
 
-	it( 'skips unknown and unchanged keys', () => {
-		const result = getGlobalStylesChanges(
-			{
-				styles: {
-					frogs: {
-						legs: 'green',
-					},
-					typography: {
-						fontSize: '1rem',
-					},
-					settings: {
-						'': {
-							'': 'foo',
+	describe( 'getGlobalStylesChanges()', () => {
+		it( 'returns a list of changes', () => {
+			const result = getGlobalStylesChanges( next, previous );
+			expect( result ).toEqual( [
+				'Colors, Typography styles.',
+				'Test pumpkin flowers block.',
+				'H3, Caption, H6, Link elements.',
+				'Color, Typography settings.',
+			] );
+		} );
+
+		it( 'returns a list of truncated changes', () => {
+			const resultA = getGlobalStylesChanges( next, previous, {
+				maxResults: 3,
+			} );
+			expect( resultA ).toEqual( [
+				'Colors, Typography styles.',
+				'Test pumpkin flowers block.',
+			] );
+		} );
+
+		it( 'skips unknown and unchanged keys', () => {
+			const result = getGlobalStylesChanges(
+				{
+					styles: {
+						frogs: {
+							legs: 'green',
+						},
+						typography: {
+							fontSize: '1rem',
+						},
+						settings: {
+							'': {
+								'': 'foo',
+							},
 						},
 					},
 				},
-			},
-			{
-				styles: {
-					frogs: {
-						legs: 'yellow',
-					},
-					typography: {
-						fontSize: '1rem',
-					},
-					settings: {
-						'': {
-							'': 'bar',
+				{
+					styles: {
+						frogs: {
+							legs: 'yellow',
+						},
+						typography: {
+							fontSize: '1rem',
+						},
+						settings: {
+							'': {
+								'': 'bar',
+							},
 						},
 					},
-				},
-			}
-		);
-		expect( result ).toEqual( [] );
+				}
+			);
+			expect( result ).toEqual( [] );
+		} );
+	} );
+
+	describe( 'getGlobalStylesChangelist()', () => {
+		it( 'compares two objects and returns a cached list of changed keys', () => {
+			const resultA = getGlobalStylesChangelist( next, previous );
+
+			expect( resultA ).toEqual( [
+				[ 'styles', 'Colors' ],
+				[ 'styles', 'Typography' ],
+				[ 'blocks', 'Test pumpkin flowers' ],
+				[ 'elements', 'H3' ],
+				[ 'elements', 'Caption' ],
+				[ 'elements', 'H6' ],
+				[ 'elements', 'Link' ],
+				[ 'settings', 'Color' ],
+				[ 'settings', 'Typography' ],
+			] );
+
+			const resultB = getGlobalStylesChangelist( next, previous );
+
+			expect( resultB ).toEqual( resultA );
+		} );
 	} );
 } );