@wordpress/block-editor 8.0.9 → 8.0.12

package/src/components/inspector-controls/block-support-tools-panel.js

@@ -11,37 +11,73 @@ import { store as blockEditorStore } from '../../store';
 import { cleanEmptyObject } from '../../hooks/utils';
 
 export default function BlockSupportToolsPanel( { children, group, label } ) {
-	const { clientId, attributes } = useSelect( ( select ) => {
-		const { getBlockAttributes, getSelectedBlockClientId } = select(
-			blockEditorStore
-		);
+	const { attributes, clientIds, panelId } = useSelect( ( select ) => {
+		const {
+			getBlockAttributes,
+			getMultiSelectedBlockClientIds,
+			getSelectedBlockClientId,
+			hasMultiSelection,
+		} = select( blockEditorStore );
+
+		// When we currently have a multi-selection, the value returned from
+		// `getSelectedBlockClientId()` is `null`. When a `null` value is used
+		// for the `panelId`, a `ToolsPanel` will still allow panel items to
+		// register themselves despite their panelIds not matching.
 		const selectedBlockClientId = getSelectedBlockClientId();
 
+		if ( hasMultiSelection() ) {
+			const selectedBlockClientIds = getMultiSelectedBlockClientIds();
+			const selectedBlockAttributes = selectedBlockClientIds.reduce(
+				( blockAttributes, blockId ) => {
+					blockAttributes[ blockId ] = getBlockAttributes( blockId );
+					return blockAttributes;
+				},
+				{}
+			);
+
+			return {
+				panelId: selectedBlockClientId,
+				clientIds: selectedBlockClientIds,
+				attributes: selectedBlockAttributes,
+			};
+		}
+
 		return {
-			clientId: selectedBlockClientId,
-			attributes: getBlockAttributes( selectedBlockClientId ),
+			panelId: selectedBlockClientId,
+			clientIds: [ selectedBlockClientId ],
+			attributes: {
+				[ selectedBlockClientId ]: getBlockAttributes(
+					selectedBlockClientId
+				),
+			},
 		};
 	}, [] );
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
 	const resetAll = ( resetFilters = [] ) => {
-		const { style } = attributes;
-		let newAttributes = { style };
+		const newAttributes = {};
+
+		clientIds.forEach( ( clientId ) => {
+			const { style } = attributes[ clientId ];
+			let newBlockAttributes = { style };
 
-		resetFilters.forEach( ( resetFilter ) => {
-			newAttributes = {
-				...newAttributes,
-				...resetFilter( newAttributes ),
+			resetFilters.forEach( ( resetFilter ) => {
+				newBlockAttributes = {
+					...newBlockAttributes,
+					...resetFilter( newBlockAttributes ),
+				};
+			} );
+
+			// Enforce a cleaned style object.
+			newBlockAttributes = {
+				...newBlockAttributes,
+				style: cleanEmptyObject( newBlockAttributes.style ),
 			};
-		} );
 
-		// Enforce a cleaned style object.
-		newAttributes = {
-			...newAttributes,
-			style: cleanEmptyObject( newAttributes.style ),
-		};
+			newAttributes[ clientId ] = newBlockAttributes;
+		} );
 
-		updateBlockAttributes( clientId, newAttributes );
+		updateBlockAttributes( clientIds, newAttributes, true );
 	};
 
 	return (
@@ -49,8 +85,8 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 			className={ `${ group }-block-support-panel` }
 			label={ label }
 			resetAll={ resetAll }
-			key={ clientId }
-			panelId={ clientId }
+			key={ panelId }
+			panelId={ panelId }
 			hasInnerWrapper={ true }
 			shouldRenderPlaceholderItems={ true } // Required to maintain fills ordering.
 		>

package/src/components/list-view/use-list-view-drop-zone.js

@@ -226,7 +226,7 @@ export default function useListViewDropZone() {
 					return {
 						clientId,
 						rootClientId,
-						blockIndex: getBlockIndex( clientId, rootClientId ),
+						blockIndex: getBlockIndex( clientId ),
 						element: blockElement,
 						isDraggedBlock: isBlockDrag
 							? draggedBlockClientIds.includes( clientId )

package/src/components/provider/use-block-sync.js

@@ -7,7 +7,7 @@ import { last, noop } from 'lodash';
  * WordPress dependencies
  */
 import { useEffect, useRef } from '@wordpress/element';
-import { useRegistry } from '@wordpress/data';
+import { useRegistry, useSelect } from '@wordpress/data';
 import { cloneBlock } from '@wordpress/blocks';
 
 /**
@@ -83,6 +83,15 @@ export default function useBlockSync( {
 		__unstableMarkNextChangeAsNotPersistent,
 	} = registry.dispatch( blockEditorStore );
 	const { getBlockName, getBlocks } = registry.select( blockEditorStore );
+	const isControlled = useSelect(
+		( select ) => {
+			return (
+				! clientId ||
+				select( blockEditorStore ).areInnerBlocksControlled( clientId )
+			);
+		},
+		[ clientId ]
+	);
 
 	const pendingChanges = useRef( { incoming: null, outgoing: [] } );
 	const subscribed = useRef( false );
@@ -97,15 +106,21 @@ export default function useBlockSync( {
 		// and so it would already be persisted.
 		__unstableMarkNextChangeAsNotPersistent();
 		if ( clientId ) {
-			setHasControlledInnerBlocks( clientId, true );
-			__unstableMarkNextChangeAsNotPersistent();
-			const storeBlocks = controlledBlocks.map( ( block ) =>
-				cloneBlock( block )
-			);
-			if ( subscribed.current ) {
-				pendingChanges.current.incoming = storeBlocks;
-			}
-			replaceInnerBlocks( clientId, storeBlocks );
+			// It is important to batch here because otherwise,
+			// as soon as `setHasControlledInnerBlocks` is called
+			// the effect to restore might be triggered
+			// before the actual blocks get set properly in state.
+			registry.batch( () => {
+				setHasControlledInnerBlocks( clientId, true );
+				const storeBlocks = controlledBlocks.map( ( block ) =>
+					cloneBlock( block )
+				);
+				if ( subscribed.current ) {
+					pendingChanges.current.incoming = storeBlocks;
+				}
+				__unstableMarkNextChangeAsNotPersistent();
+				replaceInnerBlocks( clientId, storeBlocks );
+			} );
 		} else {
 			if ( subscribed.current ) {
 				pendingChanges.current.incoming = controlledBlocks;
@@ -157,6 +172,15 @@ export default function useBlockSync( {
 		}
 	}, [ controlledBlocks, clientId ] );
 
+	useEffect( () => {
+		// When the block becomes uncontrolled, it means its inner state has been reset
+		// we need to take the blocks again from the external value property.
+		if ( ! isControlled ) {
+			pendingChanges.current.outgoing = [];
+			setControlledBlocks();
+		}
+	}, [ isControlled ] );
+
 	useEffect( () => {
 		const {
 			getSelectionStart,
@@ -164,6 +188,7 @@ export default function useBlockSync( {
 			getSelectedBlocksInitialCaretPosition,
 			isLastBlockChangePersistent,
 			__unstableIsLastBlockChangeIgnored,
+			areInnerBlocksControlled,
 		} = registry.select( blockEditorStore );
 
 		let blocks = getBlocks( clientId );
@@ -182,8 +207,17 @@ export default function useBlockSync( {
 			if ( clientId !== null && getBlockName( clientId ) === null )
 				return;
 
-			const newIsPersistent = isLastBlockChangePersistent();
+			// When RESET_BLOCKS on parent blocks get called, the controlled blocks
+			// can reset to uncontrolled, in these situations, it means we need to populate
+			// the blocks again from the external blocks (the value property here)
+			// and we should stop triggering onChange
+			const isStillControlled =
+				! clientId || areInnerBlocksControlled( clientId );
+			if ( ! isStillControlled ) {
+				return;
+			}
 
+			const newIsPersistent = isLastBlockChangePersistent();
 			const newBlocks = getBlocks( clientId );
 			const areBlocksDifferent = newBlocks !== blocks;
 			blocks = newBlocks;

package/src/components/use-on-block-drop/index.js

@@ -95,10 +95,7 @@ export function onBlockDrop(
 
 		// If the user is moving a block
 		if ( dropType === 'block' ) {
-			const sourceBlockIndex = getBlockIndex(
-				sourceClientIds[ 0 ],
-				sourceRootClientId
-			);
+			const sourceBlockIndex = getBlockIndex( sourceClientIds[ 0 ] );
 
 			// If the user is dropping to the same position, return early.
 			if (

package/src/components/use-setting/index.js

@@ -15,6 +15,8 @@ import { __EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE } from '@wordpress/
 import { useBlockEditContext } from '../block-edit';
 import { store as blockEditorStore } from '../../store';
 
+const blockedPaths = [ 'color', 'border', 'typography', 'spacing' ];
+
 const deprecatedFlags = {
 	'color.palette': ( settings ) =>
 		settings.colors === undefined ? undefined : settings.colors,
@@ -104,6 +106,13 @@ export default function useSetting( path ) {
 
 	const setting = useSelect(
 		( select ) => {
+			if ( blockedPaths.includes( path ) ) {
+				// eslint-disable-next-line no-console
+				console.warn(
+					'Top level useSetting paths are disabled. Please use a subpath to query the information needed.'
+				);
+				return undefined;
+			}
 			const settings = select( blockEditorStore ).getSettings();
 
 			// 1 - Use __experimental features, if available.

package/src/layouts/flex.js

@@ -85,10 +85,7 @@ export default {
 		);
 	},
 	save: function FlexLayoutStyle( { selector, layout } ) {
-		const {
-			orientation = 'horizontal',
-			setCascadingProperties = false,
-		} = layout;
+		const { orientation = 'horizontal' } = layout;
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
 		const hasBlockGapStylesSupport = blockGapSupport !== null;
 		const justifyContent =
@@ -97,36 +94,18 @@ export default {
 		const flexWrap = flexWrapOptions.includes( layout.flexWrap )
 			? layout.flexWrap
 			: 'wrap';
-		let rowOrientation = `
+		const rowOrientation = `
 		flex-direction: row;
 		align-items: center;
 		justify-content: ${ justifyContent };
 		`;
-		if ( setCascadingProperties ) {
-			// --layout-justification-setting allows children to inherit the value
-			// regardless or row or column direction.
-			rowOrientation += `
-			--layout-justification-setting: ${ justifyContent };
-			--layout-direction: row;
-			--layout-wrap: ${ flexWrap };
-			--layout-justify: ${ justifyContent };
-			--layout-align: center;
-			`;
-		}
 		const alignItems =
 			alignItemsMap[ layout.justifyContent ] || alignItemsMap.left;
-		let columnOrientation = `
+		const columnOrientation = `
 		flex-direction: column;
 		align-items: ${ alignItems };
 		`;
-		if ( setCascadingProperties ) {
-			columnOrientation += `
-			--layout-justification-setting: ${ alignItems };
-			--layout-direction: column;
-			--layout-justify: initial;
-			--layout-align: ${ alignItems };
-			`;
-		}
+
 		return (
 			<style>{ `
 				${ appendSelectors( selector ) } {

package/src/store/actions.js

@@ -1170,8 +1170,7 @@ export const duplicateBlocks = ( clientIds, updateSelection = true ) => ( {
 
 	const rootClientId = select.getBlockRootClientId( clientIds[ 0 ] );
 	const lastSelectedIndex = select.getBlockIndex(
-		last( castArray( clientIds ) ),
-		rootClientId
+		last( castArray( clientIds ) )
 	);
 	const clonedBlocks = blocks.map( ( block ) =>
 		__experimentalCloneSanitizedBlock( block )
@@ -1206,7 +1205,7 @@ export const insertBeforeBlock = ( clientId ) => ( { select, dispatch } ) => {
 		return;
 	}
 
-	const firstSelectedIndex = select.getBlockIndex( clientId, rootClientId );
+	const firstSelectedIndex = select.getBlockIndex( clientId );
 	return dispatch.insertDefaultBlock( {}, rootClientId, firstSelectedIndex );
 };
 
@@ -1225,7 +1224,7 @@ export const insertAfterBlock = ( clientId ) => ( { select, dispatch } ) => {
 		return;
 	}
 
-	const firstSelectedIndex = select.getBlockIndex( clientId, rootClientId );
+	const firstSelectedIndex = select.getBlockIndex( clientId );
 	return dispatch.insertDefaultBlock(
 		{},
 		rootClientId,

package/src/store/reducer.js

@@ -14,7 +14,6 @@ import {
 	isEmpty,
 	identity,
 	omitBy,
-	pickBy,
 } from 'lodash';
 
 /**
@@ -122,48 +121,6 @@ function getFlattenedBlockAttributes( blocks ) {
 	return flattenBlocks( blocks, ( block ) => block.attributes );
 }
 
-/**
- * Given a block order map object, returns *all* of the block client IDs that are
- * a descendant of the given root client ID.
- *
- * Calling this with `rootClientId` set to `''` results in a list of client IDs
- * that are in the post. That is, it excludes blocks like fetched reusable
- * blocks which are stored into state but not visible. It also excludes
- * InnerBlocks controllers, like template parts.
- *
- * It is important to exclude the full inner block controller and not just the
- * inner blocks because in many cases, we need to persist the previous value of
- * an inner block controller. To do so, it must be excluded from the list of
- * client IDs which are considered to be part of the top-level entity.
- *
- * @param {Object}  blocksOrder           Object that maps block client IDs to a list of
- *                                        nested block client IDs.
- * @param {?string} rootClientId          The root client ID to search. Defaults to ''.
- * @param {?Object} controlledInnerBlocks The InnerBlocks controller state.
- *
- * @return {Array} List of descendant client IDs.
- */
-function getNestedBlockClientIds(
-	blocksOrder,
-	rootClientId = '',
-	controlledInnerBlocks = {}
-) {
-	return reduce(
-		blocksOrder[ rootClientId ],
-		( result, clientId ) => {
-			if ( !! controlledInnerBlocks[ clientId ] ) {
-				return result;
-			}
-			return [
-				...result,
-				clientId,
-				...getNestedBlockClientIds( blocksOrder, clientId ),
-			];
-		},
-		[]
-	);
-}
-
 /**
  * Returns an object against which it is safe to perform mutating operations,
  * given the original object and its current working copy.
@@ -369,9 +326,14 @@ const withBlockTree = ( reducer ) => ( state = {}, action ) => {
 					...omit(
 						newState.tree,
 						action.replacedClientIds.concat(
-							action.replacedClientIds.map(
-								( clientId ) => 'controlled||' + clientId
-							)
+							// Controlled inner blocks are only removed
+							// if the block doesn't move to another position
+							// otherwise their content will be lost.
+							action.replacedClientIds
+								.filter( ( clientId ) => ! subTree[ clientId ] )
+								.map(
+									( clientId ) => 'controlled||' + clientId
+								)
 						)
 					),
 					...subTree,
@@ -637,70 +599,17 @@ const withInnerBlocksRemoveCascade = ( reducer ) => ( state, action ) => {
  */
 const withBlockReset = ( reducer ) => ( state, action ) => {
 	if ( action.type === 'RESET_BLOCKS' ) {
-		/**
-		 * A list of client IDs associated with the top level entity (like a
-		 * post or template). It excludes the client IDs of blocks associated
-		 * with other entities, like inner block controllers or reusable blocks.
-		 */
-		const visibleClientIds = getNestedBlockClientIds(
-			state?.order ?? {},
-			'',
-			state?.controlledInnerBlocks ?? {}
-		);
-
-		// pickBy returns only the truthy values from controlledInnerBlocks
-		const controlledInnerBlocks = Object.keys(
-			pickBy( state?.controlledInnerBlocks ?? {} )
-		);
-
-		/**
-		 * Each update operation consists of a few parts:
-		 * 1. First, the client IDs associated with the top level entity are
-		 *    removed from the existing state key, leaving in place controlled
-		 *    blocks (like reusable blocks and inner block controllers).
-		 * 2. Second, the blocks from the reset action are used to calculate the
-		 *    individual state keys. This will re-populate the clientIDs which
-		 *    were removed in step 1.
-		 * 3. In some cases, we remove the recalculated inner block controllers,
-		 *    letting their old values persist. We need to do this because the
-		 *    reset block action from a top-level entity is not aware of any
-		 *    inner blocks inside InnerBlock controllers. So if the new values
-		 *    were used, it would not take into account the existing InnerBlocks
-		 *    which already exist in the state for inner block controllers. For
-		 *    example, `attributes` uses the newly computed value for controllers
-		 *    since attributes are stored in the top-level entity. But `order`
-		 *    uses the previous value for the controllers since the new value
-		 *    does not include the order of controlled inner blocks. So if the
-		 *    new value was used, template parts would disappear from the editor
-		 *    whenever you try to undo a change in the top level entity.
-		 */
 		const newState = {
 			...state,
-			byClientId: {
-				...omit( state?.byClientId, visibleClientIds ),
-				...getFlattenedBlocksWithoutAttributes( action.blocks ),
-			},
-			attributes: {
-				...omit( state?.attributes, visibleClientIds ),
-				...getFlattenedBlockAttributes( action.blocks ),
-			},
-			order: {
-				...omit( state?.order, visibleClientIds ),
-				...omit(
-					mapBlockOrder( action.blocks ),
-					controlledInnerBlocks
-				),
-			},
-			parents: {
-				...omit( state?.parents, visibleClientIds ),
-				...mapBlockParents( action.blocks ),
-			},
-			controlledInnerBlocks: state?.controlledInnerBlocks || {},
+			byClientId: getFlattenedBlocksWithoutAttributes( action.blocks ),
+			attributes: getFlattenedBlockAttributes( action.blocks ),
+			order: mapBlockOrder( action.blocks ),
+			parents: mapBlockParents( action.blocks ),
+			controlledInnerBlocks: {},
 		};
 
 		const subTree = buildBlockTree( newState, action.blocks );
 		newState.tree = {
-			...omit( state?.tree, visibleClientIds ),
 			...subTree,
 			// Root
 			'': {
@@ -828,6 +737,27 @@ const withSaveReusableBlock = ( reducer ) => ( state, action ) => {
 
 	return reducer( state, action );
 };
+/**
+ * Higher-order reducer which removes blocks from state when switching parent block controlled state.
+ *
+ * @param {Function} reducer Original reducer function.
+ *
+ * @return {Function} Enhanced reducer function.
+ */
+const withResetControlledBlocks = ( reducer ) => ( state, action ) => {
+	if ( action.type === 'SET_HAS_CONTROLLED_INNER_BLOCKS' ) {
+		// when switching a block from controlled to uncontrolled or inverse,
+		// we need to remove its content first.
+		const tempState = reducer( state, {
+			type: 'REPLACE_INNER_BLOCKS',
+			rootClientId: action.clientId,
+			blocks: [],
+		} );
+		return reducer( tempState, action );
+	}
+
+	return reducer( state, action );
+};
 
 /**
  * Reducer returning the blocks state.
@@ -845,7 +775,8 @@ export const blocks = flow(
 	withReplaceInnerBlocks, // needs to be after withInnerBlocksRemoveCascade
 	withBlockReset,
 	withPersistentBlockChange,
-	withIgnoredBlockChange
+	withIgnoredBlockChange,
+	withResetControlledBlocks
 )( {
 	byClientId( state = {}, action ) {
 		switch ( action.type ) {

package/src/store/selectors.js

@@ -890,11 +890,11 @@ export function getBlockOrder( state, rootClientId ) {
  *
  * @param {Object}  state        Editor state.
  * @param {string}  clientId     Block client ID.
- * @param {?string} rootClientId Optional root client ID of block list.
  *
  * @return {number} Index at which block exists in order.
  */
-export function getBlockIndex( state, clientId, rootClientId ) {
+export function getBlockIndex( state, clientId ) {
+	const rootClientId = getBlockRootClientId( state, clientId );
 	return getBlockOrder( state, rootClientId ).indexOf( clientId );
 }
 

package/src/store/test/reducer.js

@@ -2050,6 +2050,41 @@ describe( 'state', () => {
 					expect( state.isIgnoredChange ).toBe( true );
 				} );
 			} );
+
+			describe( 'controlledInnerBlocks', () => {
+				it( 'should remove the content of the block if it switches from controlled to uncontrolled or opposite', () => {
+					const original = blocks( undefined, {
+						type: 'RESET_BLOCKS',
+						blocks: [
+							{
+								clientId: 'chicken',
+								name: 'core/test-block',
+								attributes: {},
+								innerBlocks: [
+									{
+										clientId: 'child',
+										name: 'core/test-block',
+										attributes: {},
+										innerBlocks: [],
+									},
+								],
+							},
+						],
+					} );
+
+					const state = blocks( original, {
+						type: 'SET_HAS_CONTROLLED_INNER_BLOCKS',
+						clientId: 'chicken',
+						hasControlledInnerBlocks: true,
+					} );
+
+					expect( state.controlledInnerBlocks.chicken ).toBe( true );
+					// The previous content of the block should be removed
+					expect( state.byClientId.child ).toBeUndefined();
+					expect( state.tree.child ).toBeUndefined();
+					expect( state.tree.chicken.innerBlocks ).toEqual( [] );
+				} );
+			} );
 		} );
 	} );
 

package/src/store/test/selectors.js

@@ -1358,7 +1358,7 @@ describe( 'selectors', () => {
 				},
 			};
 
-			expect( getBlockIndex( state, 56, '123' ) ).toBe( 1 );
+			expect( getBlockIndex( state, 56 ) ).toBe( 1 );
 		} );
 	} );
 

package/src/utils/transform-styles/index.js

@@ -23,23 +23,20 @@ import wrap from './transforms/wrap';
  * @return {Array} converted rules.
  */
 const transformStyles = ( styles, wrapperClassName = '' ) => {
-	return map(
-		styles,
-		( { css, baseURL, __experimentalNoWrapper = false } ) => {
-			const transforms = [];
-			if ( wrapperClassName && ! __experimentalNoWrapper ) {
-				transforms.push( wrap( wrapperClassName ) );
-			}
-			if ( baseURL ) {
-				transforms.push( urlRewrite( baseURL ) );
-			}
-			if ( transforms.length ) {
-				return traverse( css, compose( transforms ) );
-			}
-
-			return css;
+	return map( styles, ( { css, baseURL } ) => {
+		const transforms = [];
+		if ( wrapperClassName ) {
+			transforms.push( wrap( wrapperClassName ) );
+		}
+		if ( baseURL ) {
+			transforms.push( urlRewrite( baseURL ) );
 		}
-	);
+		if ( transforms.length ) {
+			return traverse( css, compose( transforms ) );
+		}
+
+		return css;
+	} );
 };
 
 export default transformStyles;