@wordpress/block-editor 12.19.1 → 12.19.2

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 );
+		} );
 	} );
 } );

package/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 = 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 ) => {

package/src/components/iframe/index.js

@@ -273,13 +273,16 @@ function Iframe( {
 				src={ src }
 				title={ __( 'Editor canvas' ) }
 				onKeyDown={ ( event ) => {
+					if ( props.onKeyDown ) {
+						props.onKeyDown( event );
+					}
 					// If the event originates from inside the iframe, it means
 					// it bubbled through the portal, but only with React
 					// events. We need to to bubble native events as well,
 					// though by doing so we also trigger another React event,
 					// so we need to stop the propagation of this event to avoid
 					// duplication.
-					if (
+					else if (
 						event.currentTarget.ownerDocument !==
 						event.target.ownerDocument
 					) {

package/src/components/rich-text/index.native.js

@@ -316,6 +316,7 @@ export function RichTextWrapper(
 						transformation.transform( { content: value.text } ),
 					] );
 					__unstableMarkAutomaticChange();
+					return;
 				}
 			}
 

package/src/components/rich-text/use-enter.js

@@ -61,6 +61,7 @@ export function useEnter( props ) {
 						} ),
 					] );
 					__unstableMarkAutomaticChange();
+					return;
 				}
 			}
 

package/src/hooks/use-bindings-attributes.js

@@ -112,24 +112,3 @@ addFilter(
 	'core/editor/custom-sources-backwards-compatibility/shim-attribute-source',
 	shimAttributeSource
 );
-
-// Add the context to all blocks.
-addFilter(
-	'blocks.registerBlockType',
-	'core/block-bindings-ui',
-	( settings, name ) => {
-		if ( ! ( name in BLOCK_BINDINGS_ALLOWED_BLOCKS ) ) {
-			return settings;
-		}
-		const contextItems = [ 'postId', 'postType', 'queryId' ];
-		const usesContextArray = settings.usesContext;
-		const oldUsesContextArray = new Set( usesContextArray );
-		contextItems.forEach( ( item ) => {
-			if ( ! oldUsesContextArray.has( item ) ) {
-				usesContextArray.push( item );
-			}
-		} );
-		settings.usesContext = usesContextArray;
-		return settings;
-	}
-);

package/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,

package/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;
 		}

package/src/store/private-actions.js

@@ -140,6 +140,15 @@ export const privateRemoveBlocks =
 				}
 
 				if ( rules[ 'bindings/core/pattern-overrides' ] ) {
+					const parentPatternBlocks =
+						select.getBlockParentsByBlockName(
+							clientId,
+							'core/block'
+						);
+					// We only need to run this check when editing the original pattern, not pattern instances.
+					if ( parentPatternBlocks?.length > 0 ) {
+						continue;
+					}
 					const blockAttributes =
 						select.getBlockAttributes( clientId );
 					if (