@wordpress/block-editor 9.3.0 → 9.6.0

package/src/layouts/test/utils.js

@@ -0,0 +1,138 @@
+/**
+ * Internal dependencies
+ */
+import { appendSelectors, getBlockGapCSS } from '../utils';
+
+const layoutDefinitions = {
+	default: {
+		spacingStyles: [
+			{
+				selector: ' > *',
+				rules: {
+					'margin-block-start': '0',
+					'margin-block-end': '0',
+				},
+			},
+			{
+				selector: ' > * + *',
+				rules: {
+					'margin-block-start': null,
+					'margin-block-end': '0',
+				},
+			},
+		],
+	},
+	flex: {
+		spacingStyles: [
+			{
+				selector: '',
+				rules: {
+					gap: null,
+				},
+			},
+		],
+	},
+};
+
+describe( 'getBlockGapCSS', () => {
+	it( 'should output default blockGap rules', () => {
+		const expected =
+			'.editor-styles-wrapper .my-container > * { margin-block-start: 0; margin-block-end: 0; }.editor-styles-wrapper .my-container > * + * { margin-block-start: 3em; margin-block-end: 0; }';
+
+		const result = getBlockGapCSS(
+			'.my-container',
+			layoutDefinitions,
+			'default',
+			'3em'
+		);
+
+		expect( result ).toBe( expected );
+	} );
+
+	it( 'should output flex blockGap rules', () => {
+		const expected = '.editor-styles-wrapper .my-container { gap: 3em; }';
+
+		const result = getBlockGapCSS(
+			'.my-container',
+			layoutDefinitions,
+			'flex',
+			'3em'
+		);
+
+		expect( result ).toBe( expected );
+	} );
+
+	it( 'should return an empty string if layout type cannot be found', () => {
+		const expected = '';
+
+		const result = getBlockGapCSS(
+			'.my-container',
+			layoutDefinitions,
+			'aTypeThatDoesNotExist',
+			'3em'
+		);
+
+		expect( result ).toBe( expected );
+	} );
+
+	it( 'should return an empty string if layout definitions cannot be found', () => {
+		const expected = '';
+
+		const result = getBlockGapCSS(
+			'.my-container',
+			undefined,
+			'flex',
+			'3em'
+		);
+
+		expect( result ).toBe( expected );
+	} );
+
+	it( 'should return an empty string if blockGap is empty', () => {
+		const expected = '';
+
+		const result = getBlockGapCSS(
+			'.my-container',
+			layoutDefinitions,
+			'flex',
+			null
+		);
+
+		expect( result ).toBe( expected );
+	} );
+
+	it( 'should treat a blockGap string containing 0 as a valid value', () => {
+		const expected = '.editor-styles-wrapper .my-container { gap: 0; }';
+
+		const result = getBlockGapCSS(
+			'.my-container',
+			layoutDefinitions,
+			'flex',
+			'0'
+		);
+
+		expect( result ).toBe( expected );
+	} );
+} );
+
+describe( 'appendSelectors', () => {
+	it( 'should append a subselector without an appended selector', () => {
+		expect( appendSelectors( '.original-selector' ) ).toBe(
+			'.editor-styles-wrapper .original-selector'
+		);
+	} );
+
+	it( 'should append a subselector to a single selector', () => {
+		expect( appendSelectors( '.original-selector', '.appended' ) ).toBe(
+			'.editor-styles-wrapper .original-selector .appended'
+		);
+	} );
+
+	it( 'should append a subselector to multiple selectors', () => {
+		expect(
+			appendSelectors( '.first-selector,.second-selector', '.appended' )
+		).toBe(
+			'.editor-styles-wrapper .first-selector .appended,.editor-styles-wrapper .second-selector .appended'
+		);
+	} );
+} );

package/src/layouts/utils.js

@@ -1,8 +1,8 @@
 /**
  * Utility to generate the proper CSS selector for layout styles.
  *
- * @param {string|string[]} selectors - CSS selectors
- * @param {boolean}         append    - string to append.
+ * @param {string} selectors CSS selector, also supports multiple comma-separated selectors.
+ * @param {string} append    The string to append.
  *
  * @return {string} - CSS selector.
  */
@@ -17,7 +17,48 @@ export function appendSelectors( selectors, append = '' ) {
 		.split( ',' )
 		.map(
 			( subselector ) =>
-				`.editor-styles-wrapper ${ subselector } ${ append }`
+				`.editor-styles-wrapper ${ subselector }${
+					append ? ` ${ append }` : ''
+				}`
 		)
 		.join( ',' );
 }
+
+/**
+ * Get generated blockGap CSS rules based on layout definitions provided in theme.json
+ * Falsy values in the layout definition's spacingStyles rules will be swapped out
+ * with the provided `blockGapValue`.
+ *
+ * @param {string} selector          The CSS selector to target for the generated rules.
+ * @param {Object} layoutDefinitions Layout definitions object from theme.json.
+ * @param {string} layoutType        The layout type (e.g. `default` or `flex`).
+ * @param {string} blockGapValue     The current blockGap value to be applied.
+ * @return {string} The generated CSS rules.
+ */
+export function getBlockGapCSS(
+	selector,
+	layoutDefinitions,
+	layoutType,
+	blockGapValue
+) {
+	let output = '';
+	if (
+		layoutDefinitions?.[ layoutType ]?.spacingStyles?.length &&
+		blockGapValue
+	) {
+		layoutDefinitions[ layoutType ].spacingStyles.forEach( ( gapStyle ) => {
+			output += `${ appendSelectors(
+				selector,
+				gapStyle.selector.trim()
+			) } { `;
+			output += Object.entries( gapStyle.rules )
+				.map(
+					( [ cssProperty, value ] ) =>
+						`${ cssProperty }: ${ value ? value : blockGapValue }`
+				)
+				.join( '; ' );
+			output += '; }';
+		} );
+	}
+	return output;
+}

package/src/store/actions.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray, findKey, first, isObject, last, some } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -26,6 +21,13 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import { mapRichTextSettings } from './utils';
+import {
+	retrieveSelectedAttribute,
+	START_OF_SELECTED_AREA,
+} from '../utils/selection';
+
+const castArray = ( maybeArray ) =>
+	Array.isArray( maybeArray ) ? maybeArray : [ maybeArray ];
 
 /**
  * Action which will insert a default block insert action if there
@@ -392,7 +394,7 @@ export const replaceBlocks =
 			castArray( blocks ),
 			select.getSettings()
 		);
-		const rootClientId = select.getBlockRootClientId( first( clientIds ) );
+		const rootClientId = select.getBlockRootClientId( clientIds[ 0 ] );
 		// Replace is valid if the new blocks can be inserted in the root block.
 		for ( let index = 0; index < blocks.length; index++ ) {
 			const block = blocks[ index ];
@@ -579,7 +581,7 @@ export const insertBlocks =
 	) =>
 	( { select, dispatch } ) => {
 		/* eslint-enable jsdoc/valid-types */
-		if ( isObject( initialPosition ) ) {
+		if ( initialPosition !== null && typeof initialPosition === 'object' ) {
 			meta = initialPosition;
 			initialPosition = 0;
 			deprecated(
@@ -771,10 +773,6 @@ export const __unstableDeleteSelection =
 			...mapRichTextSettings( attributeDefinitionB ),
 		} );
 
-		// A robust way to retain selection position through various transforms
-		// is to insert a special character at the position and then recover it.
-		const START_OF_SELECTED_AREA = '\u0086';
-
 		valueA = remove( valueA, selectionA.offset, valueA.text.length );
 		valueB = insert( valueB, START_OF_SELECTED_AREA, 0, selectionB.offset );
 
@@ -822,12 +820,7 @@ export const __unstableDeleteSelection =
 			);
 		}
 
-		const newAttributeKey = findKey(
-			updatedAttributes,
-			( v ) =>
-				typeof v === 'string' &&
-				v.indexOf( START_OF_SELECTED_AREA ) !== -1
-		);
+		const newAttributeKey = retrieveSelectedAttribute( updatedAttributes );
 
 		const convertedHtml = updatedAttributes[ newAttributeKey ];
 		const convertedValue = create( {
@@ -1052,10 +1045,6 @@ export const mergeBlocks =
 			}
 		}
 
-		// A robust way to retain selection position through various transforms
-		// is to insert a special character at the position and then recover it.
-		const START_OF_SELECTED_AREA = '\u0086';
-
 		// Clone the blocks so we don't insert the character in a "live" block.
 		const cloneA = cloneBlock( blockA );
 		const cloneB = cloneBlock( blockB );
@@ -1098,12 +1087,8 @@ export const mergeBlocks =
 		);
 
 		if ( canRestoreTextSelection ) {
-			const newAttributeKey = findKey(
-				updatedAttributes,
-				( v ) =>
-					typeof v === 'string' &&
-					v.indexOf( START_OF_SELECTED_AREA ) !== -1
-			);
+			const newAttributeKey =
+				retrieveSelectedAttribute( updatedAttributes );
 			const convertedHtml = updatedAttributes[ newAttributeKey ];
 			const convertedValue = create( {
 				html: convertedHtml,
@@ -1517,7 +1502,7 @@ export const duplicateBlocks =
 
 		// Return early if blocks don't exist.
 		const blocks = select.getBlocksByClientId( clientIds );
-		if ( some( blocks, ( block ) => ! block ) ) {
+		if ( blocks.some( ( block ) => ! block ) ) {
 			return;
 		}
 
@@ -1533,8 +1518,9 @@ export const duplicateBlocks =
 		}
 
 		const rootClientId = select.getBlockRootClientId( clientIds[ 0 ] );
+		const clientIdsArray = castArray( clientIds );
 		const lastSelectedIndex = select.getBlockIndex(
-			last( castArray( clientIds ) )
+			clientIdsArray[ clientIdsArray.length - 1 ]
 		);
 		const clonedBlocks = blocks.map( ( block ) =>
 			__experimentalCloneSanitizedBlock( block )
@@ -1547,8 +1533,8 @@ export const duplicateBlocks =
 		);
 		if ( clonedBlocks.length > 1 && updateSelection ) {
 			dispatch.multiSelect(
-				first( clonedBlocks ).clientId,
-				last( clonedBlocks ).clientId
+				clonedBlocks[ 0 ].clientId,
+				clonedBlocks[ clonedBlocks.length - 1 ].clientId
 			);
 		}
 		return clonedBlocks.map( ( block ) => block.clientId );

package/src/store/index.js

@@ -15,8 +15,6 @@ import { STORE_NAME } from './constants';
  * Block editor data store configuration.
  *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#registerStore
- *
- * @type {Object}
  */
 export const storeConfig = {
 	reducer,
@@ -28,8 +26,6 @@ export const storeConfig = {
  * Store definition for the block editor namespace.
  *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
- *
- * @type {Object}
  */
 export const store = createReduxStore( STORE_NAME, {
 	...storeConfig,

package/src/store/reducer.js

@@ -9,10 +9,8 @@ import {
 	omit,
 	without,
 	mapValues,
-	keys,
 	isEqual,
 	isEmpty,
-	identity,
 	omitBy,
 } from 'lodash';
 
@@ -27,6 +25,8 @@ import { store as blocksStore } from '@wordpress/blocks';
 import { PREFERENCES_DEFAULTS, SETTINGS_DEFAULTS } from './defaults';
 import { insertAt, moveTo } from './array';
 
+const identity = ( x ) => x;
+
 /**
  * Given an array of blocks, returns an object where each key is a nesting
  * context, the value of which is an array of block client IDs existing within
@@ -148,7 +148,7 @@ function getMutateSafeObject( original, working ) {
  * @return {boolean} Whether the two objects have the same keys.
  */
 export function hasSameKeys( a, b ) {
-	return isEqual( keys( a ), keys( b ) );
+	return isEqual( Object.keys( a ), Object.keys( b ) );
 }
 
 /**
@@ -399,13 +399,12 @@ const withBlockTree =
 				const updatedBlockUids = [];
 				if ( action.fromRootClientId ) {
 					updatedBlockUids.push( action.fromRootClientId );
+				} else {
+					updatedBlockUids.push( '' );
 				}
 				if ( action.toRootClientId ) {
 					updatedBlockUids.push( action.toRootClientId );
 				}
-				if ( ! action.fromRootClientId || ! action.fromRootClientId ) {
-					updatedBlockUids.push( '' );
-				}
 				newState.tree = updateParentInnerBlocksInTree(
 					newState,
 					newState.tree,
@@ -428,7 +427,7 @@ const withBlockTree =
 				break;
 			}
 			case 'SAVE_REUSABLE_BLOCK_SUCCESS': {
-				const updatedBlockUids = keys(
+				const updatedBlockUids = Object.keys(
 					omitBy( newState.attributes, ( attributes, clientId ) => {
 						return (
 							newState.byClientId[ clientId ].name !==
@@ -690,9 +689,9 @@ const withReplaceInnerBlocks = ( reducer ) => ( state, action ) => {
 			index: 0,
 		} );
 
-		// We need to re-attach the block order of the controlled inner blocks.
-		// Otherwise, an inner block controller's blocks will be deleted entirely
-		// from its entity..
+		// We need to re-attach the controlled inner blocks to the blocks tree and
+		// preserve their block order. Otherwise, an inner block controller's blocks
+		// will be deleted entirely from its entity.
 		stateAfterInsert.order = {
 			...stateAfterInsert.order,
 			...reduce(
@@ -706,6 +705,20 @@ const withReplaceInnerBlocks = ( reducer ) => ( state, action ) => {
 				{}
 			),
 		};
+		stateAfterInsert.tree = {
+			...stateAfterInsert.tree,
+			...reduce(
+				nestedControllers,
+				( result, value, _key ) => {
+					const key = `controlled||${ _key }`;
+					if ( state.tree[ key ] ) {
+						result[ key ] = state.tree[ key ];
+					}
+					return result;
+				},
+				{}
+			),
+		};
 	}
 	return stateAfterInsert;
 };
@@ -1678,7 +1691,7 @@ export function lastBlockAttributesChange( state, action ) {
 /**
  * Reducer returning automatic change state.
  *
- * @param {boolean} state  Current state.
+ * @param {?string} state  Current state.
  * @param {Object}  action Dispatched action.
  *
  * @return {string} Updated state.

package/src/store/selectors.js

@@ -4,7 +4,6 @@
 import {
 	castArray,
 	first,
-	isBoolean,
 	last,
 	map,
 	reduce,
@@ -1382,7 +1381,7 @@ export function getBlockInsertionPoint( state ) {
 
 	if ( clientId ) {
 		rootClientId = getBlockRootClientId( state, clientId ) || undefined;
-		index = getBlockIndex( state, selectionEnd.clientId, rootClientId ) + 1;
+		index = getBlockIndex( state, selectionEnd.clientId ) + 1;
 	} else {
 		index = getBlockOrder( state ).length;
 	}
@@ -1445,7 +1444,7 @@ export function getTemplateLock( state, rootClientId ) {
 }
 
 const checkAllowList = ( list, item, defaultResult = null ) => {
-	if ( isBoolean( list ) ) {
+	if ( typeof list === 'boolean' ) {
 		return list;
 	}
 	if ( Array.isArray( list ) ) {
@@ -2218,7 +2217,7 @@ export const __experimentalGetDirectInsertBlock = createSelector(
 );
 
 const checkAllowListRecursive = ( blocks, allowedBlockTypes ) => {
-	if ( isBoolean( allowedBlockTypes ) ) {
+	if ( typeof allowedBlockTypes === 'boolean' ) {
 		return allowedBlockTypes;
 	}
 

package/src/store/test/reducer.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { values, omit } from 'lodash';
+import { omit } from 'lodash';
 import deepFreeze from 'deep-freeze';
 
 /**
@@ -666,7 +666,7 @@ describe( 'state', () => {
 				} );
 
 				expect( Object.keys( state.byClientId ) ).toHaveLength( 1 );
-				expect( values( state.byClientId )[ 0 ].clientId ).toBe(
+				expect( Object.values( state.byClientId )[ 0 ].clientId ).toBe(
 					'bananas'
 				);
 				expect( state.order ).toEqual( {
@@ -729,7 +729,9 @@ describe( 'state', () => {
 			} );
 
 			expect( Object.keys( state.byClientId ) ).toHaveLength( 2 );
-			expect( values( state.byClientId )[ 1 ].clientId ).toBe( 'ribs' );
+			expect( Object.values( state.byClientId )[ 1 ].clientId ).toBe(
+				'ribs'
+			);
 			expect( state.order ).toEqual( {
 				'': [ 'chicken', 'ribs' ],
 				chicken: [],
@@ -773,10 +775,12 @@ describe( 'state', () => {
 			} );
 
 			expect( Object.keys( state.byClientId ) ).toHaveLength( 1 );
-			expect( values( state.byClientId )[ 0 ].name ).toBe(
+			expect( Object.values( state.byClientId )[ 0 ].name ).toBe(
 				'core/freeform'
 			);
-			expect( values( state.byClientId )[ 0 ].clientId ).toBe( 'wings' );
+			expect( Object.values( state.byClientId )[ 0 ].clientId ).toBe(
+				'wings'
+			);
 			expect( state.order ).toEqual( {
 				'': [ 'wings' ],
 				wings: [],
@@ -930,15 +934,15 @@ describe( 'state', () => {
 			} );
 
 			expect( Object.keys( replacedState.byClientId ) ).toHaveLength( 1 );
-			expect( values( originalState.byClientId )[ 0 ].name ).toBe(
+			expect( Object.values( originalState.byClientId )[ 0 ].name ).toBe(
 				'core/test-block'
 			);
-			expect( values( replacedState.byClientId )[ 0 ].name ).toBe(
+			expect( Object.values( replacedState.byClientId )[ 0 ].name ).toBe(
 				'core/freeform'
 			);
-			expect( values( replacedState.byClientId )[ 0 ].clientId ).toBe(
-				'chicken'
-			);
+			expect(
+				Object.values( replacedState.byClientId )[ 0 ].clientId
+			).toBe( 'chicken' );
 			expect( replacedState.order ).toEqual( {
 				'': [ 'chicken' ],
 				chicken: [],
@@ -2090,6 +2094,130 @@ describe( 'state', () => {
 					expect( state.tree.child ).toBeUndefined();
 					expect( state.tree.chicken.innerBlocks ).toEqual( [] );
 				} );
+				it( 'should preserve the controlled blocks in state and re-attach them in other pieces of state(order, tree, etc..), when we replace inner blocks', () => {
+					const initialState = {
+						byClientId: {
+							'group-id': {
+								clientId: 'group-id',
+								name: 'core/group',
+								isValid: true,
+							},
+							'reusable-id': {
+								clientId: 'reusable-id',
+								name: 'core/block',
+								isValid: true,
+							},
+							'paragraph-id': {
+								clientId: 'paragraph-id',
+								name: 'core/paragraph',
+								isValid: true,
+							},
+						},
+						order: {
+							'': [ 'group-id' ],
+							'group-id': [ 'reusable-id' ],
+							'reusable-id': [ 'paragraph-id' ],
+							'paragraph-id': [],
+						},
+						controlledInnerBlocks: {
+							'reusable-id': true,
+						},
+						parents: {
+							'group-id': '',
+							'reusable-id': 'group-id',
+							'paragraph-id': 'reusable-id',
+						},
+						tree: {
+							'group-id': {
+								clientId: 'group-id',
+								name: 'core/group',
+								isValid: true,
+								innerBlocks: [
+									{
+										clientId: 'reusable-id',
+										name: 'core/block',
+										isValid: true,
+										attributes: {
+											ref: 687,
+										},
+										innerBlocks: [],
+									},
+								],
+							},
+							'reusable-id': {
+								clientId: 'reusable-id',
+								name: 'core/block',
+								isValid: true,
+								attributes: {
+									ref: 687,
+								},
+								innerBlocks: [],
+							},
+							'': {
+								innerBlocks: [
+									{
+										clientId: 'group-id',
+										name: 'core/group',
+										isValid: true,
+										innerBlocks: [
+											{
+												clientId: 'reusable-id',
+												name: 'core/block',
+												isValid: true,
+												attributes: {
+													ref: 687,
+												},
+												innerBlocks: [],
+											},
+										],
+									},
+								],
+							},
+							'paragraph-id': {
+								clientId: 'paragraph-id',
+								name: 'core/paragraph',
+								isValid: true,
+								innerBlocks: [],
+							},
+							'controlled||reusable-id': {
+								innerBlocks: [
+									{
+										clientId: 'paragraph-id',
+										name: 'core/paragraph',
+										isValid: true,
+										innerBlocks: [],
+									},
+								],
+							},
+						},
+					};
+					// We will dispatch an action that replaces the inner
+					// blocks with the same inner blocks, which contain
+					// a controlled block (`reusable-id`).
+					const action = {
+						type: 'REPLACE_INNER_BLOCKS',
+						rootClientId: 'group-id',
+						blocks: [
+							{
+								clientId: 'reusable-id',
+								name: 'core/block',
+								isValid: true,
+								attributes: {
+									ref: 687,
+								},
+								innerBlocks: [],
+							},
+						],
+						updateSelection: false,
+					};
+					const state = blocks( initialState, action );
+					expect( state.order ).toEqual(
+						expect.objectContaining( initialState.order )
+					);
+					expect( state.tree ).toEqual(
+						expect.objectContaining( initialState.tree )
+					);
+				} );
 			} );
 		} );
 	} );

package/src/store/test/selectors.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -83,7 +78,9 @@ describe( 'selectors', () => {
 	let cachedSelectors;
 
 	beforeAll( () => {
-		cachedSelectors = filter( selectors, ( selector ) => selector.clear );
+		cachedSelectors = Object.entries( selectors )
+			.filter( ( [ , selector ] ) => selector.clear )
+			.map( ( [ , selector ] ) => selector );
 	} );
 
 	beforeEach( () => {