@wordpress/block-editor 12.4.0 → 12.6.0

package/src/store/selectors.js

@@ -1945,7 +1945,6 @@ const buildBlockTypeItem =
  *
  * @param    {Object}   state             Editor state.
  * @param    {?string}  rootClientId      Optional root client ID of block list.
- * @param    {?string}  syncStatus        Optional sync status to filter pattern blocks by.
  *
  * @return {WPEditorInserterItem[]} Items that appear in inserter.
  *
@@ -1962,11 +1961,7 @@ const buildBlockTypeItem =
  * @property {number}   frecency          Heuristic that combines frequency and recency.
  */
 export const getInserterItems = createSelector(
-	( state, rootClientId = null, syncStatus ) => {
-		const buildBlockTypeInserterItem = buildBlockTypeItem( state, {
-			buildScope: 'inserter',
-		} );
-
+	( state, rootClientId = null ) => {
 		/*
 		 * Matches block comment delimiters amid serialized content.
 		 *
@@ -2023,7 +2018,7 @@ export const getInserterItems = createSelector(
 				title: reusableBlock.title.raw,
 				icon,
 				category: 'reusable',
-				keywords: [],
+				keywords: [ 'reusable' ],
 				isDisabled: false,
 				utility: 1, // Deprecated.
 				frecency,
@@ -2031,13 +2026,7 @@ export const getInserterItems = createSelector(
 			};
 		};
 
-		const blockTypeInserterItems = getBlockTypes()
-			.filter( ( blockType ) =>
-				canIncludeBlockTypeInInserter( state, blockType, rootClientId )
-			)
-			.map( buildBlockTypeInserterItem );
-
-		const reusableBlockInserterItems = canInsertBlockTypeUnmemoized(
+		const syncedPatternInserterItems = canInsertBlockTypeUnmemoized(
 			state,
 			'core/block',
 			rootClientId
@@ -2045,13 +2034,27 @@ export const getInserterItems = createSelector(
 			? getReusableBlocks( state )
 					.filter(
 						( reusableBlock ) =>
-							syncStatus === reusableBlock.meta?.sync_status ||
-							( ! syncStatus &&
-								reusableBlock.meta?.sync_status === '' )
+							// Reusable blocks that are fully synced should have no sync status set
+							// for backwards compat between patterns and old reusable blocks, but
+							// some in release 16.1 may have had sync status inadvertantly set to
+							// 'fully' if created in the site editor.
+							reusableBlock.wp_pattern_sync_status === 'fully' ||
+							reusableBlock.wp_pattern_sync_status === '' ||
+							! reusableBlock.wp_pattern_sync_status
 					)
 					.map( buildReusableBlockInserterItem )
 			: [];
 
+		const buildBlockTypeInserterItem = buildBlockTypeItem( state, {
+			buildScope: 'inserter',
+		} );
+
+		const blockTypeInserterItems = getBlockTypes()
+			.filter( ( blockType ) =>
+				canIncludeBlockTypeInInserter( state, blockType, rootClientId )
+			)
+			.map( buildBlockTypeInserterItem );
+
 		const items = blockTypeInserterItems.reduce( ( accumulator, item ) => {
 			const { variations = [] } = item;
 			// Exclude any block type item that is to be replaced by a default variation.
@@ -2082,7 +2085,7 @@ export const getInserterItems = createSelector(
 			{ core: [], noncore: [] }
 		);
 		const sortedBlockTypes = [ ...coreItems, ...nonCoreItems ];
-		return [ ...sortedBlockTypes, ...reusableBlockInserterItems ];
+		return [ ...sortedBlockTypes, ...syncedPatternInserterItems ];
 	},
 	( state, rootClientId ) => [
 		state.blockListSettings[ rootClientId ],
@@ -2211,15 +2214,24 @@ export const getAllowedBlocks = createSelector(
 			return;
 		}
 
-		return getBlockTypes().filter( ( blockType ) =>
+		const blockTypes = getBlockTypes().filter( ( blockType ) =>
 			canIncludeBlockTypeInInserter( state, blockType, rootClientId )
 		);
+		const hasReusableBlock =
+			canInsertBlockTypeUnmemoized( state, 'core/block', rootClientId ) &&
+			getReusableBlocks( state ).length > 0;
+
+		return [
+			...blockTypes,
+			...( hasReusableBlock ? [ 'core/block' ] : [] ),
+		];
 	},
 	( state, rootClientId ) => [
 		state.blockListSettings[ rootClientId ],
 		state.blocks.byClientId,
 		state.settings.allowedBlockTypes,
 		state.settings.templateLock,
+		getReusableBlocks( state ),
 		getBlockTypes(),
 	]
 );
@@ -2255,15 +2267,15 @@ export const __experimentalGetAllowedBlocks = createSelector(
  * @property {?Object}        attributes       Attributes to pass to the newly created block.
  * @property {?Array<string>} attributesToCopy Attributes to be copied from adjecent blocks when inserted.
  */
-export const __experimentalGetDirectInsertBlock = createSelector(
+export const getDirectInsertBlock = createSelector(
 	( state, rootClientId = null ) => {
 		if ( ! rootClientId ) {
 			return;
 		}
 		const defaultBlock =
-			state.blockListSettings[ rootClientId ]?.__experimentalDefaultBlock;
+			state.blockListSettings[ rootClientId ]?.defaultBlock;
 		const directInsert =
-			state.blockListSettings[ rootClientId ]?.__experimentalDirectInsert;
+			state.blockListSettings[ rootClientId ]?.directInsert;
 		if ( ! defaultBlock || ! directInsert ) {
 			return;
 		}
@@ -2280,6 +2292,25 @@ export const __experimentalGetDirectInsertBlock = createSelector(
 	]
 );
 
+export const __experimentalGetDirectInsertBlock = createSelector(
+	( state, rootClientId = null ) => {
+		deprecated(
+			'wp.data.select( "core/block-editor" ).__experimentalGetDirectInsertBlock',
+			{
+				alternative:
+					'wp.data.select( "core/block-editor" ).getDirectInsertBlock',
+				since: '6.3',
+				version: '6.4',
+			}
+		);
+		return getDirectInsertBlock( state, rootClientId );
+	},
+	( state, rootClientId ) => [
+		state.blockListSettings[ rootClientId ],
+		state.blocks.tree.get( rootClientId ),
+	]
+);
+
 const checkAllowListRecursive = ( blocks, allowedBlockTypes ) => {
 	if ( typeof allowedBlockTypes === 'boolean' ) {
 		return allowedBlockTypes;
@@ -2306,10 +2337,33 @@ const checkAllowListRecursive = ( blocks, allowedBlockTypes ) => {
 	return true;
 };
 
+function getUnsyncedPatterns( state ) {
+	const reusableBlocks =
+		state?.settings?.__experimentalReusableBlocks ?? EMPTY_ARRAY;
+
+	return reusableBlocks
+		.filter(
+			( reusableBlock ) =>
+				reusableBlock.wp_pattern_sync_status === 'unsynced'
+		)
+		.map( ( reusableBlock ) => {
+			return {
+				name: `core/block/${ reusableBlock.id }`,
+				title: reusableBlock.title.raw,
+				categories: [ 'custom' ],
+				content: reusableBlock.content.raw,
+			};
+		} );
+}
+
 export const __experimentalGetParsedPattern = createSelector(
 	( state, patternName ) => {
 		const patterns = state.settings.__experimentalBlockPatterns;
-		const pattern = patterns.find( ( { name } ) => name === patternName );
+		const unsyncedPatterns = getUnsyncedPatterns( state );
+
+		const pattern = [ ...patterns, ...unsyncedPatterns ].find(
+			( { name } ) => name === patternName
+		);
 		if ( ! pattern ) {
 			return null;
 		}
@@ -2320,14 +2374,20 @@ export const __experimentalGetParsedPattern = createSelector(
 			} ),
 		};
 	},
-	( state ) => [ state.settings.__experimentalBlockPatterns ]
+	( state ) => [
+		state.settings.__experimentalBlockPatterns,
+		state.settings.__experimentalReusableBlocks,
+	]
 );
 
 const getAllAllowedPatterns = createSelector(
 	( state ) => {
 		const patterns = state.settings.__experimentalBlockPatterns;
+		const unsyncedPatterns = getUnsyncedPatterns( state );
+
 		const { allowedBlockTypes } = getSettings( state );
-		const parsedPatterns = patterns
+
+		const parsedPatterns = [ ...patterns, ...unsyncedPatterns ]
 			.filter( ( { inserter = true } ) => !! inserter )
 			.map( ( { name } ) =>
 				__experimentalGetParsedPattern( state, name )
@@ -2339,6 +2399,7 @@ const getAllAllowedPatterns = createSelector(
 	},
 	( state ) => [
 		state.settings.__experimentalBlockPatterns,
+		state.settings.__experimentalReusableBlocks,
 		state.settings.allowedBlockTypes,
 	]
 );
@@ -2365,6 +2426,7 @@ export const __experimentalGetAllowedPatterns = createSelector(
 	},
 	( state, rootClientId ) => [
 		state.settings.__experimentalBlockPatterns,
+		state.settings.__experimentalReusableBlocks,
 		state.settings.allowedBlockTypes,
 		state.settings.templateLock,
 		state.blockListSettings[ rootClientId ],

package/src/store/test/actions.js

@@ -53,6 +53,7 @@ const {
 	updateBlockListSettings,
 	updateSettings,
 	validateBlocksToTemplate,
+	registerInserterMediaCategory,
 } = actions;
 
 describe( 'actions', () => {
@@ -215,6 +216,7 @@ describe( 'actions', () => {
 				getBlockCount: () => 1,
 			};
 			const dispatch = jest.fn();
+			dispatch.ensureDefaultBlock = jest.fn();
 
 			replaceBlock( 'chicken', block )( { select, dispatch } );
 
@@ -280,6 +282,7 @@ describe( 'actions', () => {
 				getBlockCount: () => 1,
 			};
 			const dispatch = jest.fn();
+			dispatch.ensureDefaultBlock = jest.fn();
 
 			replaceBlocks( [ 'chicken' ], blocks )( { select, dispatch } );
 
@@ -313,6 +316,7 @@ describe( 'actions', () => {
 				getBlockCount: () => 1,
 			};
 			const dispatch = jest.fn();
+			dispatch.ensureDefaultBlock = jest.fn();
 
 			replaceBlocks(
 				[ 'chicken' ],
@@ -617,6 +621,7 @@ describe( 'actions', () => {
 			const select = {
 				getBlockRootClientId: () => undefined,
 				canRemoveBlocks: () => true,
+				getBlockRemovalRules: () => false,
 			};
 			const dispatch = Object.assign( jest.fn(), {
 				selectPreviousBlock: jest.fn(),
@@ -727,6 +732,7 @@ describe( 'actions', () => {
 			const select = {
 				getBlockRootClientId: () => null,
 				canRemoveBlocks: () => true,
+				getBlockRemovalRules: () => false,
 			};
 			const dispatch = Object.assign( jest.fn(), {
 				selectPreviousBlock: jest.fn(),
@@ -751,6 +757,7 @@ describe( 'actions', () => {
 			const select = {
 				getBlockRootClientId: () => null,
 				canRemoveBlocks: () => true,
+				getBlockRemovalRules: () => false,
 			};
 			const dispatch = Object.assign( jest.fn(), {
 				selectPreviousBlock: jest.fn(),
@@ -1209,4 +1216,111 @@ describe( 'actions', () => {
 			expect( result ).toEqual( false );
 		} );
 	} );
+
+	describe( 'registerInserterMediaCategory', () => {
+		describe( 'should log errors when invalid', () => {
+			it( 'valid object', () => {
+				registerInserterMediaCategory()( {} );
+				expect( console ).toHaveErroredWith(
+					'Category should be an `InserterMediaCategory` object.'
+				);
+			} );
+			it( 'has name', () => {
+				registerInserterMediaCategory( {} )( {} );
+				expect( console ).toHaveErroredWith(
+					'Category should have a `name` that should be unique among all media categories.'
+				);
+			} );
+			it( 'has labels.name', () => {
+				registerInserterMediaCategory( { name: 'a' } )( {} );
+				expect( console ).toHaveErroredWith(
+					'Category should have a `labels.name`.'
+				);
+			} );
+			it( 'has proper media type', () => {
+				registerInserterMediaCategory( {
+					name: 'a',
+					labels: { name: 'a' },
+					mediaType: 'b',
+				} )( {} );
+				expect( console ).toHaveErroredWith(
+					'Category should have `mediaType` property that is one of `image|audio|video`.'
+				);
+			} );
+			it( 'has fetch function', () => {
+				registerInserterMediaCategory( {
+					name: 'a',
+					labels: { name: 'a' },
+					mediaType: 'image',
+					fetch: 'c',
+				} )( {} );
+				expect( console ).toHaveErroredWith(
+					'Category should have a `fetch` function defined with the following signature `(InserterMediaRequest) => Promise<InserterMediaItem[]>`.'
+				);
+			} );
+			it( 'has unique name', () => {
+				registerInserterMediaCategory( {
+					name: 'a',
+					labels: { name: 'a' },
+					mediaType: 'image',
+					fetch: () => {},
+				} )( {
+					select: {
+						getSettings: () => ( {
+							inserterMediaCategories: [ { name: 'a' } ],
+						} ),
+					},
+				} );
+				expect( console ).toHaveErroredWith(
+					'A category is already registered with the same name: "a".'
+				);
+			} );
+			it( 'has unique labels.name', () => {
+				registerInserterMediaCategory( {
+					name: 'a',
+					labels: { name: 'a' },
+					mediaType: 'image',
+					fetch: () => {},
+				} )( {
+					select: {
+						getSettings: () => ( {
+							inserterMediaCategories: [
+								{ labels: { name: 'a' } },
+							],
+						} ),
+					},
+				} );
+				expect( console ).toHaveErroredWith(
+					'A category is already registered with the same labels.name: "a".'
+				);
+			} );
+		} );
+		it( 'should register a media category', () => {
+			const category = {
+				name: 'new',
+				labels: { name: 'new' },
+				mediaType: 'image',
+				fetch: () => {},
+			};
+			const inserterMediaCategories = [
+				{ name: 'a', labels: { name: 'a' } },
+			];
+			const dispatch = jest.fn();
+			registerInserterMediaCategory( category )( {
+				select: {
+					getSettings: () => ( { inserterMediaCategories } ),
+				},
+				dispatch,
+			} );
+			expect( dispatch ).toHaveBeenLastCalledWith( {
+				type: 'UPDATE_SETTINGS',
+				settings: {
+					inserterMediaCategories: [
+						...inserterMediaCategories,
+						{ ...category, isExternalResource: true },
+					],
+				},
+			} );
+		} );
+	} );
 } );

package/src/store/test/private-actions.js

@@ -6,6 +6,7 @@ import {
 	showBlockInterface,
 	setBlockEditingMode,
 	unsetBlockEditingMode,
+	__experimentalUpdateSettings,
 } from '../private-actions';
 
 describe( 'private actions', () => {
@@ -50,4 +51,59 @@ describe( 'private actions', () => {
 			} );
 		} );
 	} );
+
+	describe( '__experimentalUpdateSettings', () => {
+		const experimentalSettings = {
+			inserterMediaCategories: 'foo',
+			blockInspectorAnimation: 'bar',
+		};
+
+		const stableSettings = {
+			foo: 'foo',
+			bar: 'bar',
+			baz: 'baz',
+		};
+
+		const settings = {
+			...experimentalSettings,
+			...stableSettings,
+		};
+
+		it( 'should dispatch provided settings by default', () => {
+			expect( __experimentalUpdateSettings( settings ) ).toEqual( {
+				type: 'UPDATE_SETTINGS',
+				settings,
+				reset: false,
+			} );
+		} );
+
+		it( 'should dispatch provided settings with reset flag when `reset` argument is truthy', () => {
+			expect(
+				__experimentalUpdateSettings( settings, {
+					stripExperimentalSettings: false,
+					reset: true,
+				} )
+			).toEqual( {
+				type: 'UPDATE_SETTINGS',
+				settings,
+				reset: true,
+			} );
+		} );
+
+		it( 'should strip experimental settings from a given settings object when `stripExperimentalSettings` argument is truthy', () => {
+			expect(
+				__experimentalUpdateSettings( settings, {
+					stripExperimentalSettings: true,
+				} )
+			).toEqual( {
+				type: 'UPDATE_SETTINGS',
+				settings: {
+					foo: 'foo',
+					bar: 'bar',
+					baz: 'baz',
+				},
+				reset: false,
+			} );
+		} );
+	} );
 } );

package/src/store/test/private-selectors.js

@@ -11,7 +11,7 @@ import {
 	getLastInsertedBlocksClientIds,
 	getBlockEditingMode,
 	isBlockSubtreeDisabled,
-	getListViewClientIdsTree,
+	getEnabledClientIdsTree,
 	getEnabledBlockParents,
 } from '../private-selectors';
 
@@ -391,7 +391,7 @@ describe( 'private selectors', () => {
 		} );
 	} );
 
-	describe( 'getListViewClientIdsTree', () => {
+	describe( 'getEnabledClientIdsTree', () => {
 		const baseState = {
 			settings: {},
 			blocks: {
@@ -462,7 +462,7 @@ describe( 'private selectors', () => {
 				...baseState,
 				blockEditingModes: new Map( [] ),
 			};
-			expect( getListViewClientIdsTree( state ) ).toEqual( [
+			expect( getEnabledClientIdsTree( state ) ).toEqual( [
 				{
 					clientId: '6cf70164-9097-4460-bcbf-200560546988',
 					innerBlocks: [],
@@ -500,7 +500,7 @@ describe( 'private selectors', () => {
 				blockEditingModes: new Map( [] ),
 			};
 			expect(
-				getListViewClientIdsTree(
+				getEnabledClientIdsTree(
 					state,
 					'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337'
 				)
@@ -534,7 +534,7 @@ describe( 'private selectors', () => {
 					[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'contentOnly' ],
 				] ),
 			};
-			expect( getListViewClientIdsTree( state ) ).toEqual( [
+			expect( getEnabledClientIdsTree( state ) ).toEqual( [
 				{
 					clientId: 'b26fc763-417d-4f01-b81c-2ec61e14a972',
 					innerBlocks: [],

package/src/store/test/reducer.js

@@ -3328,25 +3328,32 @@ describe( 'state', () => {
 			expect( state.clientIds ).toEqual( [ clientIdOne, clientIdTwo ] );
 		} );
 
-		it( 'should return client ids of all blocks when inner blocks are replaced with REPLACE_INNER_BLOCKS', () => {
-			const clientIdOne = '62bfef6e-d5e9-43ba-b7f9-c77cf354141f';
-			const clientIdTwo = '9db792c6-a25a-495d-adbd-97d56a4c4189';
+		it( 'should return client ids of the original blocks when inner blocks are replaced with REPLACE_INNER_BLOCKS', () => {
+			const initialBlocks = deepFreeze( [
+				'62bfef6e-d5e9-43ba-b7f9-c77cf354141f',
+				'9db792c6-a25a-495d-adbd-97d56a4c4189',
+			] );
 
 			const action = {
 				blocks: [
 					{
-						clientId: clientIdOne,
+						clientId: 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1',
 					},
 					{
-						clientId: clientIdTwo,
+						clientId: '14501cc2-90a6-4f52-aa36-ab6e896135d1',
 					},
 				],
 				type: 'REPLACE_INNER_BLOCKS',
 			};
 
-			const state = lastBlockInserted( {}, action );
+			const state = lastBlockInserted(
+				{
+					clientIds: initialBlocks,
+				},
+				action
+			);
 
-			expect( state.clientIds ).toEqual( [ clientIdOne, clientIdTwo ] );
+			expect( state.clientIds ).toEqual( initialBlocks );
 		} );
 
 		it( 'should return empty state if last block inserted is called with action RESET_BLOCKS', () => {

package/src/store/test/selectors.js

@@ -3351,7 +3351,7 @@ describe( 'selectors', () => {
 				id: 'core/block/1',
 				initialAttributes: { ref: 1 },
 				isDisabled: false,
-				keywords: [],
+				keywords: [ 'reusable' ],
 				name: 'core/block',
 				syncStatus: undefined,
 				title: 'Reusable Block 1',

package/src/utils/object.js

@@ -56,12 +56,17 @@ export function kebabCase( str ) {
 
 /**
  * Clones an object.
+ * Arrays are also cloned as arrays.
  * Non-object values are returned unchanged.
  *
  * @param {*} object Object to clone.
  * @return {*} Cloned object, or original literal non-object value.
  */
 function cloneObject( object ) {
+	if ( Array.isArray( object ) ) {
+		return object.map( cloneObject );
+	}
+
 	if ( object && typeof object === 'object' ) {
 		return {
 			...Object.fromEntries(
@@ -79,7 +84,7 @@ function cloneObject( object ) {
 /**
  * Immutably sets a value inside an object. Like `lodash#set`, but returning a
  * new object. Treats nullish initial values as empty objects. Clones any
- * nested objects.
+ * nested objects. Supports arrays, too.
  *
  * @param {Object}              object Object to set a value in.
  * @param {number|string|Array} path   Path in the object to modify.
@@ -92,7 +97,11 @@ export function setImmutably( object, path, value ) {
 
 	normalizedPath.reduce( ( acc, key, i ) => {
 		if ( acc[ key ] === undefined ) {
-			acc[ key ] = {};
+			if ( Number.isInteger( path[ i + 1 ] ) ) {
+				acc[ key ] = [];
+			} else {
+				acc[ key ] = {};
+			}
 		}
 		if ( i === normalizedPath.length - 1 ) {
 			acc[ key ] = value;
@@ -102,3 +111,24 @@ export function setImmutably( object, path, value ) {
 
 	return newObject;
 }
+
+/**
+ * Helper util to return a value from a certain path of the object.
+ * Path is specified as either:
+ * - a string of properties, separated by dots, for example: "x.y".
+ * - an array of properties, for example `[ 'x', 'y' ]`.
+ * You can also specify a default value in case the result is nullish.
+ *
+ * @param {Object}       object       Input object.
+ * @param {string|Array} path         Path to the object property.
+ * @param {*}            defaultValue Default value if the value at the specified path is nullish.
+ * @return {*} Value of the object property at the specified path.
+ */
+export const getValueFromObjectPath = ( object, path, defaultValue ) => {
+	const normalizedPath = Array.isArray( path ) ? path : path.split( '.' );
+	let value = object;
+	normalizedPath.forEach( ( fieldName ) => {
+		value = value?.[ fieldName ];
+	} );
+	return value ?? defaultValue;
+};

package/src/utils/test/object.js

@@ -150,6 +150,22 @@ describe( 'setImmutably', () => {
 			expect( result ).toEqual( { test: 2 } );
 		} );
 
+		it( 'handles first level arrays properly', () => {
+			const result = setImmutably( [ 5 ], 0, 6 );
+
+			expect( result ).toEqual( [ 6 ] );
+		} );
+
+		it( 'handles nested arrays properly', () => {
+			const result = setImmutably(
+				[ [ 'foo', [ 'bar' ] ] ],
+				[ 0, 1, 0 ],
+				'baz'
+			);
+
+			expect( result ).toEqual( [ [ 'foo', [ 'baz' ] ] ] );
+		} );
+
 		describe( 'with array notation access', () => {
 			it( 'assigns values at deeper levels', () => {
 				const result = setImmutably( {}, [ 'foo', 'bar', 'baz' ], 5 );
@@ -236,5 +252,25 @@ describe( 'setImmutably', () => {
 			expect( result.foo.bar ).not.toBe( input.foo.bar );
 			expect( result.foo.bar.baz ).not.toBe( input.foo.bar.baz );
 		} );
+
+		it( 'clones arrays at the first level', () => {
+			const input = [];
+			const result = setImmutably( input, 0, 1 );
+
+			expect( result ).not.toBe( input );
+		} );
+
+		it( 'clones arrays at deeper levels', () => {
+			const input = [ [ [ [ 'foo', [ 'bar' ] ] ] ] ];
+			const result = setImmutably( input, [ 0, 0, 0, 1, 0 ], 'baz' );
+
+			expect( result ).not.toBe( input );
+			expect( result[ 0 ] ).not.toBe( input[ 0 ] );
+			expect( result[ 0 ][ 0 ] ).not.toBe( input[ 0 ][ 0 ] );
+			expect( result[ 0 ][ 0 ][ 0 ] ).not.toBe( input[ 0 ][ 0 ][ 0 ] );
+			expect( result[ 0 ][ 0 ][ 0 ][ 1 ] ).not.toBe(
+				input[ 0 ][ 0 ][ 0 ][ 1 ]
+			);
+		} );
 	} );
 } );