@wordpress/block-editor 12.15.0 → 12.16.1-next.79a6196f.0

package/src/store/private-selectors.js

@@ -10,7 +10,12 @@ import {
 	getBlockOrder,
 	getBlockParents,
 	getBlockEditingMode,
+	getSettings,
+	__experimentalGetParsedPattern,
+	canInsertBlockType,
+	__experimentalGetAllowedPatterns,
 } from './selectors';
+import { getUserPatterns, checkAllowListRecursive } from './utils';
 
 /**
  * Returns true if the block interface is hidden, or false otherwise.
@@ -236,3 +241,54 @@ export const getInserterMediaCategories = createSelector(
 		state.registeredInserterMediaCategories,
 	]
 );
+
+/**
+ * Returns whether there is at least one allowed pattern for inner blocks children.
+ * This is useful for deferring the parsing of all patterns until needed.
+ *
+ * @param {Object} state               Editor state.
+ * @param {string} [rootClientId=null] Target root client ID.
+ *
+ * @return {boolean} If there is at least one allowed pattern.
+ */
+export const hasAllowedPatterns = createSelector(
+	( state, rootClientId = null ) => {
+		const patterns = state.settings.__experimentalBlockPatterns;
+		const userPatterns = getUserPatterns( state );
+		const { allowedBlockTypes } = getSettings( state );
+		return [ ...userPatterns, ...patterns ].some(
+			( { name, inserter = true } ) => {
+				if ( ! inserter ) {
+					return false;
+				}
+				const { blocks } = __experimentalGetParsedPattern(
+					state,
+					name
+				);
+				return (
+					checkAllowListRecursive( blocks, allowedBlockTypes ) &&
+					blocks.every( ( { name: blockName } ) =>
+						canInsertBlockType( state, blockName, rootClientId )
+					)
+				);
+			}
+		);
+	},
+	( state, rootClientId ) => [
+		...__experimentalGetAllowedPatterns.getDependants(
+			state,
+			rootClientId
+		),
+	]
+);
+
+/**
+ * Returns the element of the last element that had focus when focus left the editor canvas.
+ *
+ * @param {Object} state Block editor state.
+ *
+ * @return {Object} Element.
+ */
+export function getLastFocus( state ) {
+	return state.lastFocus;
+}

package/src/store/reducer.js

@@ -283,6 +283,7 @@ const withBlockTree =
 					false
 				);
 				break;
+			case 'SYNC_DERIVED_BLOCK_ATTRIBUTES':
 			case 'UPDATE_BLOCK_ATTRIBUTES': {
 				newState.tree = new Map( newState.tree );
 				action.clientIds.forEach( ( clientId ) => {
@@ -452,10 +453,27 @@ const withBlockTree =
 function withPersistentBlockChange( reducer ) {
 	let lastAction;
 	let markNextChangeAsNotPersistent = false;
+	let explicitPersistent;
 
 	return ( state, action ) => {
 		let nextState = reducer( state, action );
 
+		let nextIsPersistentChange;
+		if ( action.type === 'SET_EXPLICIT_PERSISTENT' ) {
+			explicitPersistent = action.isPersistentChange;
+			nextIsPersistentChange = state.isPersistentChange ?? true;
+		}
+
+		if ( explicitPersistent !== undefined ) {
+			nextIsPersistentChange = explicitPersistent;
+			return nextIsPersistentChange === nextState.isPersistentChange
+				? nextState
+				: {
+						...nextState,
+						isPersistentChange: nextIsPersistentChange,
+				  };
+		}
+
 		const isExplicitPersistentChange =
 			action.type === 'MARK_LAST_CHANGE_AS_PERSISTENT' ||
 			markNextChangeAsNotPersistent;
@@ -466,7 +484,7 @@ function withPersistentBlockChange( reducer ) {
 			markNextChangeAsNotPersistent =
 				action.type === 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT';
 
-			const nextIsPersistentChange = state?.isPersistentChange ?? true;
+			nextIsPersistentChange = state?.isPersistentChange ?? true;
 			if ( state.isPersistentChange === nextIsPersistentChange ) {
 				return state;
 			}
@@ -860,6 +878,7 @@ export const blocks = pipe(
 				return newState;
 			}
 
+			case 'SYNC_DERIVED_BLOCK_ATTRIBUTES':
 			case 'UPDATE_BLOCK_ATTRIBUTES': {
 				// Avoid a state change if none of the block IDs are known.
 				if ( action.clientIds.every( ( id ) => ! state.get( id ) ) ) {

package/src/store/selectors.js

@@ -26,8 +26,12 @@ import { createRegistrySelector } from '@wordpress/data';
 /**
  * Internal dependencies
  */
+import {
+	getUserPatterns,
+	checkAllowListRecursive,
+	checkAllowList,
+} from './utils';
 import { orderBy } from '../utils/sorting';
-import { PATTERN_TYPES } from '../components/inserter/block-patterns-tab/utils';
 
 /**
  * A block selection object.
@@ -1481,22 +1485,6 @@ export function getTemplateLock( state, rootClientId ) {
 	return getBlockListSettings( state, rootClientId )?.templateLock ?? false;
 }
 
-const checkAllowList = ( list, item, defaultResult = null ) => {
-	if ( typeof list === 'boolean' ) {
-		return list;
-	}
-	if ( Array.isArray( list ) ) {
-		// TODO: when there is a canonical way to detect that we are editing a post
-		// the following check should be changed to something like:
-		// if ( list.includes( 'core/post-content' ) && getEditorMode() === 'post-content' && item === null )
-		if ( list.includes( 'core/post-content' ) && item === null ) {
-			return true;
-		}
-		return list.includes( item );
-	}
-	return defaultResult;
-};
-
 /**
  * Determines if the given block type is allowed to be inserted into the block list.
  * This function is not exported and not memoized because using a memoized selector
@@ -2249,58 +2237,6 @@ export const __experimentalGetDirectInsertBlock = createSelector(
 	]
 );
 
-const checkAllowListRecursive = ( blocks, allowedBlockTypes ) => {
-	if ( typeof allowedBlockTypes === 'boolean' ) {
-		return allowedBlockTypes;
-	}
-
-	const blocksQueue = [ ...blocks ];
-	while ( blocksQueue.length > 0 ) {
-		const block = blocksQueue.shift();
-
-		const isAllowed = checkAllowList(
-			allowedBlockTypes,
-			block.name || block.blockName,
-			true
-		);
-		if ( ! isAllowed ) {
-			return false;
-		}
-
-		block.innerBlocks?.forEach( ( innerBlock ) => {
-			blocksQueue.push( innerBlock );
-		} );
-	}
-
-	return true;
-};
-
-function getUserPatterns( state ) {
-	const userPatterns =
-		state?.settings?.__experimentalReusableBlocks ?? EMPTY_ARRAY;
-	const userPatternCategories =
-		state?.settings?.__experimentalUserPatternCategories ?? [];
-	const categories = new Map();
-	userPatternCategories.forEach( ( userCategory ) =>
-		categories.set( userCategory.id, userCategory )
-	);
-	return userPatterns.map( ( userPattern ) => {
-		return {
-			name: `core/block/${ userPattern.id }`,
-			id: userPattern.id,
-			type: PATTERN_TYPES.user,
-			title: userPattern.title.raw,
-			categories: userPattern.wp_pattern_category.map( ( catId ) =>
-				categories && categories.get( catId )
-					? categories.get( catId ).slug
-					: catId
-			),
-			content: userPattern.content.raw,
-			syncStatus: userPattern.wp_pattern_sync_status,
-		};
-	} );
-}
-
 export const __experimentalUserPatternCategories = createSelector(
 	( state ) => {
 		return state?.settings?.__experimentalUserPatternCategories;
@@ -2806,8 +2742,11 @@ export const __unstableGetContentLockingParent = createSelector(
 		while ( state.blocks.parents.has( current ) ) {
 			current = state.blocks.parents.get( current );
 			if (
-				current &&
-				getTemplateLock( state, current ) === 'contentOnly'
+				( current &&
+					getBlockName( state, current ) === 'core/block' &&
+					window.__experimentalPatternPartialSyncing ) ||
+				( current &&
+					getTemplateLock( state, current ) === 'contentOnly' )
 			) {
 				result = current;
 			}
@@ -3007,14 +2946,3 @@ export const isGroupable = createRegistrySelector(
 			);
 		}
 );
-
-/**
- * Returns the element of the last element that had focus when focus left the editor canvas.
- *
- * @param {Object} state Block editor state.
- *
- * @return {Object} Element.
- */
-export function getLastFocus( state ) {
-	return state.lastFocus;
-}

package/src/store/undo-ignore.js

@@ -0,0 +1,4 @@
+// Keep track of the blocks that should not be pushing an additional
+// undo stack when editing the entity.
+// See the implementation of `syncDerivedUpdates` and `useBlockSync`.
+export const undoIgnoreBlocks = new WeakSet();

package/src/store/utils.js

@@ -0,0 +1,74 @@
+/**
+ * Internal dependencies
+ */
+import { INSERTER_PATTERN_TYPES } from '../components/inserter/block-patterns-tab/utils';
+
+const EMPTY_ARRAY = [];
+
+export function getUserPatterns( state ) {
+	const userPatterns =
+		state?.settings?.__experimentalReusableBlocks ?? EMPTY_ARRAY;
+	const userPatternCategories =
+		state?.settings?.__experimentalUserPatternCategories ?? [];
+	const categories = new Map();
+	userPatternCategories.forEach( ( userCategory ) =>
+		categories.set( userCategory.id, userCategory )
+	);
+	return userPatterns.map( ( userPattern ) => {
+		return {
+			name: `core/block/${ userPattern.id }`,
+			id: userPattern.id,
+			type: INSERTER_PATTERN_TYPES.user,
+			title: userPattern.title.raw,
+			categories: userPattern.wp_pattern_category.map( ( catId ) =>
+				categories && categories.get( catId )
+					? categories.get( catId ).slug
+					: catId
+			),
+			content: userPattern.content.raw,
+			syncStatus: userPattern.wp_pattern_sync_status,
+		};
+	} );
+}
+
+export const checkAllowList = ( list, item, defaultResult = null ) => {
+	if ( typeof list === 'boolean' ) {
+		return list;
+	}
+	if ( Array.isArray( list ) ) {
+		// TODO: when there is a canonical way to detect that we are editing a post
+		// the following check should be changed to something like:
+		// if ( list.includes( 'core/post-content' ) && getEditorMode() === 'post-content' && item === null )
+		if ( list.includes( 'core/post-content' ) && item === null ) {
+			return true;
+		}
+		return list.includes( item );
+	}
+	return defaultResult;
+};
+
+export const checkAllowListRecursive = ( blocks, allowedBlockTypes ) => {
+	if ( typeof allowedBlockTypes === 'boolean' ) {
+		return allowedBlockTypes;
+	}
+
+	const blocksQueue = [ ...blocks ];
+	while ( blocksQueue.length > 0 ) {
+		const block = blocksQueue.shift();
+
+		const isAllowed = checkAllowList(
+			allowedBlockTypes,
+			block.name || block.blockName,
+			true
+		);
+		if ( ! isAllowed ) {
+			return false;
+		}
+
+		block.innerBlocks?.forEach( ( innerBlock ) => {
+			blocksQueue.push( innerBlock );
+		} );
+	}
+
+	return true;
+};

package/src/style.scss

@@ -1,5 +1,6 @@
 @import "./autocompleters/style.scss";
 @import "./components/block-alignment-control/style.scss";
+@import "./components/block-canvas/style.scss";
 @import "./components/block-icon/style.scss";
 @import "./components/block-inspector/style.scss";
 @import "./components/block-tools/style.scss";
@@ -10,7 +11,6 @@
 @import "./components/block-draggable/style.scss";
 @import "./components/block-mover/style.scss";
 @import "./components/block-navigation/style.scss";
-@import "./components/block-parent-selector/style.scss";
 @import "./components/block-patterns-list/style.scss";
 @import "./components/block-patterns-paging/style.scss";
 @import "./components/block-popover/style.scss";
@@ -60,7 +60,6 @@
 
 @import "./components/block-toolbar/style.scss";
 @import "./components/inserter/style.scss";
-@import "./components/preview-options/style.scss";
 @import "./components/spacing-sizes-control/style.scss";
 
 @include wordpress-admin-schemes();

package/src/utils/get-px-from-css-unit.js

@@ -0,0 +1,8 @@
+/**
+ * This function was accidentially exposed for mobile/native usage.
+ *
+ * @deprecated
+ *
+ * @return {string} Empty string.
+ */
+export default () => '';

package/src/utils/index.js

@@ -1,3 +1,3 @@
 export { default as transformStyles } from './transform-styles';
 export * from './block-variation-transforms';
-export { default as getPxFromCssUnit } from './parse-css-unit-to-px';
+export { default as getPxFromCssUnit } from './get-px-from-css-unit';

package/src/utils/object.js

@@ -1,87 +1,3 @@
-/**
- * External dependencies
- */
-import { paramCase } from 'change-case';
-import memoize from 'memize';
-
-/**
- * Converts a path to an array of its fragments.
- * Supports strings, numbers and arrays:
- *
- * 'foo' => [ 'foo' ]
- * 2 => [ '2' ]
- * [ 'foo', 'bar' ] => [ 'foo', 'bar' ]
- *
- * @param {string|number|Array} path Path
- * @return {Array} Normalized path.
- */
-function normalizePath( path ) {
-	if ( Array.isArray( path ) ) {
-		return path;
-	} else if ( typeof path === 'number' ) {
-		return [ path.toString() ];
-	}
-
-	return [ path ];
-}
-
-/**
- * Converts any string to kebab case.
- * Backwards compatible with Lodash's `_.kebabCase()`.
- * Backwards compatible with `_wp_to_kebab_case()`.
- *
- * @see https://lodash.com/docs/4.17.15#kebabCase
- * @see https://developer.wordpress.org/reference/functions/_wp_to_kebab_case/
- *
- * @param {string} str String to convert.
- * @return {string} Kebab-cased string
- */
-export function kebabCase( str ) {
-	let input = str;
-	if ( typeof str !== 'string' ) {
-		input = str?.toString?.() ?? '';
-	}
-
-	// See https://github.com/lodash/lodash/blob/b185fcee26b2133bd071f4aaca14b455c2ed1008/lodash.js#L4970
-	input = input.replace( /['\u2019]/, '' );
-
-	return paramCase( input, {
-		splitRegexp: [
-			/(?!(?:1ST|2ND|3RD|[4-9]TH)(?![a-z]))([a-z0-9])([A-Z])/g, // fooBar => foo-bar, 3Bar => 3-bar
-			/(?!(?:1st|2nd|3rd|[4-9]th)(?![a-z]))([0-9])([a-z])/g, // 3bar => 3-bar
-			/([A-Za-z])([0-9])/g, // Foo3 => foo-3, foo3 => foo-3
-			/([A-Z])([A-Z][a-z])/g, // FOOBar => foo-bar
-		],
-	} );
-}
-
-/**
- * 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(
-				Object.entries( object ).map( ( [ key, value ] ) => [
-					key,
-					cloneObject( value ),
-				] )
-			),
-		};
-	}
-
-	return 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
@@ -93,27 +9,25 @@ function cloneObject( object ) {
  * @return {Object} Cloned object with the new value set.
  */
 export function setImmutably( object, path, value ) {
-	const normalizedPath = normalizePath( path );
-	const newObject = object ? cloneObject( object ) : {};
+	// Normalize path
+	path = Array.isArray( path ) ? [ ...path ] : [ path ];
 
-	normalizedPath.reduce( ( acc, key, i ) => {
-		if ( acc[ key ] === undefined ) {
-			if ( Number.isInteger( path[ i + 1 ] ) ) {
-				acc[ key ] = [];
-			} else {
-				acc[ key ] = {};
-			}
-		}
-		if ( i === normalizedPath.length - 1 ) {
-			acc[ key ] = value;
-		}
-		return acc[ key ];
-	}, newObject );
+	// Shallowly clone the base of the object
+	object = Array.isArray( object ) ? [ ...object ] : { ...object };
 
-	return newObject;
-}
+	const leaf = path.pop();
+
+	// Traverse object from root to leaf, shallowly cloning at each level
+	let prev = object;
+	for ( const key of path ) {
+		const lvl = prev[ key ];
+		prev = prev[ key ] = Array.isArray( lvl ) ? [ ...lvl ] : { ...lvl };
+	}
+
+	prev[ leaf ] = value;
 
-const stringToPath = memoize( ( path ) => path.split( '.' ) );
+	return object;
+}
 
 /**
  * Helper util to return a value from a certain path of the object.
@@ -128,10 +42,26 @@ const stringToPath = memoize( ( path ) => path.split( '.' ) );
  * @return {*} Value of the object property at the specified path.
  */
 export const getValueFromObjectPath = ( object, path, defaultValue ) => {
-	const normalizedPath = Array.isArray( path ) ? path : stringToPath( path );
+	const arrayPath = Array.isArray( path ) ? path : path.split( '.' );
 	let value = object;
-	normalizedPath.forEach( ( fieldName ) => {
+	arrayPath.forEach( ( fieldName ) => {
 		value = value?.[ fieldName ];
 	} );
 	return value ?? defaultValue;
 };
+
+/**
+ * Helper util to filter out objects with duplicate values for a given property.
+ *
+ * @param {Object[]} array    Array of objects to filter.
+ * @param {string}   property Property to filter unique values by.
+ *
+ * @return {Object[]} Array of objects with unique values for the specified property.
+ */
+export function uniqByProperty( array, property ) {
+	const seen = new Set();
+	return array.filter( ( item ) => {
+		const value = item[ property ];
+		return seen.has( value ) ? false : seen.add( value );
+	} );
+}

package/src/utils/selection.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { RichTextData } from '@wordpress/rich-text';
+
 /**
  * A robust way to retain selection position through various
  * transforms is to insert a special character at the position and
@@ -19,8 +24,10 @@ export function retrieveSelectedAttribute( blockAttributes ) {
 	return Object.keys( blockAttributes ).find( ( name ) => {
 		const value = blockAttributes[ name ];
 		return (
-			typeof value === 'string' &&
-			value.indexOf( START_OF_SELECTED_AREA ) !== -1
+			( typeof value === 'string' || value instanceof RichTextData ) &&
+			// To do: refactor this to use rich text's selection instead, so we
+			// no longer have to use on this hack inserting a special character.
+			value.toString().indexOf( START_OF_SELECTED_AREA ) !== -1
 		);
 	} );
 }

package/src/utils/test/object.js

@@ -1,102 +1,7 @@
 /**
  * Internal dependencies
  */
-import { kebabCase, setImmutably } from '../object';
-
-describe( 'kebabCase', () => {
-	it( 'separates lowercase letters, followed by uppercase letters', () => {
-		expect( kebabCase( 'fooBar' ) ).toEqual( 'foo-bar' );
-	} );
-
-	it( 'separates numbers, followed by uppercase letters', () => {
-		expect( kebabCase( '123FOO' ) ).toEqual( '123-foo' );
-	} );
-
-	it( 'separates numbers, followed by lowercase characters', () => {
-		expect( kebabCase( '123bar' ) ).toEqual( '123-bar' );
-	} );
-
-	it( 'separates uppercase letters, followed by numbers', () => {
-		expect( kebabCase( 'FOO123' ) ).toEqual( 'foo-123' );
-	} );
-
-	it( 'separates lowercase letters, followed by numbers', () => {
-		expect( kebabCase( 'foo123' ) ).toEqual( 'foo-123' );
-	} );
-
-	it( 'separates uppercase groups from capitalized groups', () => {
-		expect( kebabCase( 'FOOBar' ) ).toEqual( 'foo-bar' );
-	} );
-
-	it( 'removes any non-dash special characters', () => {
-		expect(
-			kebabCase( 'foo±§!@#$%^&*()-_=+/?.>,<\\|{}[]`~\'";:bar' )
-		).toEqual( 'foo-bar' );
-	} );
-
-	it( 'removes any spacing characters', () => {
-		expect( kebabCase( ' foo \t \n \r \f \v bar ' ) ).toEqual( 'foo-bar' );
-	} );
-
-	it( 'groups multiple dashes into a single one', () => {
-		expect( kebabCase( 'foo---bar' ) ).toEqual( 'foo-bar' );
-	} );
-
-	it( 'returns an empty string unchanged', () => {
-		expect( kebabCase( '' ) ).toEqual( '' );
-	} );
-
-	it( 'returns an existing kebab case string unchanged', () => {
-		expect( kebabCase( 'foo-123-bar' ) ).toEqual( 'foo-123-bar' );
-	} );
-
-	it( 'returns an empty string if any nullish type is passed', () => {
-		expect( kebabCase( undefined ) ).toEqual( '' );
-		expect( kebabCase( null ) ).toEqual( '' );
-	} );
-
-	it( 'converts any unexpected non-nullish type to a string', () => {
-		expect( kebabCase( 12345 ) ).toEqual( '12345' );
-		expect( kebabCase( [] ) ).toEqual( '' );
-		expect( kebabCase( {} ) ).toEqual( 'object-object' );
-	} );
-
-	/**
-	 * Should cover all test cases of `_wp_to_kebab_case()`.
-	 *
-	 * @see https://developer.wordpress.org/reference/functions/_wp_to_kebab_case/
-	 * @see https://github.com/WordPress/wordpress-develop/blob/76376fdbc3dc0b3261de377dffc350677345e7ba/tests/phpunit/tests/functions/wpToKebabCase.php#L35-L62
-	 */
-	it.each( [
-		[ 'white', 'white' ],
-		[ 'white+black', 'white-black' ],
-		[ 'white:black', 'white-black' ],
-		[ 'white*black', 'white-black' ],
-		[ 'white.black', 'white-black' ],
-		[ 'white black', 'white-black' ],
-		[ 'white	black', 'white-black' ],
-		[ 'white-to-black', 'white-to-black' ],
-		[ 'white2white', 'white-2-white' ],
-		[ 'white2nd', 'white-2nd' ],
-		[ 'white2ndcolor', 'white-2-ndcolor' ],
-		[ 'white2ndColor', 'white-2nd-color' ],
-		[ 'white2nd_color', 'white-2nd-color' ],
-		[ 'white23color', 'white-23-color' ],
-		[ 'white23', 'white-23' ],
-		[ '23color', '23-color' ],
-		[ 'white4th', 'white-4th' ],
-		[ 'font2xl', 'font-2-xl' ],
-		[ 'whiteToWhite', 'white-to-white' ],
-		[ 'whiteTOwhite', 'white-t-owhite' ],
-		[ 'WHITEtoWHITE', 'whit-eto-white' ],
-		[ 42, '42' ],
-		[ "i've done", 'ive-done' ],
-		[ '#ffffff', 'ffffff' ],
-		[ '$ffffff', 'ffffff' ],
-	] )( 'converts %s properly to %s', ( input, expected ) => {
-		expect( kebabCase( input ) ).toEqual( expected );
-	} );
-} );
+import { setImmutably } from '../object';
 
 describe( 'setImmutably', () => {
 	describe( 'handling falsy values properly', () => {