@wordpress/block-editor 8.0.11 → 8.0.14

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/hooks/color.js

@@ -32,8 +32,6 @@ import useSetting from '../components/use-setting';
 
 export const COLOR_SUPPORT_KEY = 'color';
 
-const EMPTY_OBJECT = {};
-
 const hasColorSupport = ( blockType ) => {
 	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
 	return (
@@ -232,7 +230,17 @@ export function ColorEdit( props ) {
 		],
 		[ userPalette, themePalette, defaultPalette ]
 	);
-	const gradientsPerOrigin = useSetting( 'color.gradients' ) || EMPTY_OBJECT;
+	const userGradientPalette = useSetting( 'color.gradients.custom' );
+	const themeGradientPalette = useSetting( 'color.gradients.theme' );
+	const defaultGradientPalette = useSetting( 'color.gradients.default' );
+	const allGradients = useMemo(
+		() => [
+			...( userGradientPalette || [] ),
+			...( themeGradientPalette || [] ),
+			...( defaultGradientPalette || [] ),
+		],
+		[ userGradientPalette, themeGradientPalette, defaultGradientPalette ]
+	);
 	const areCustomSolidsEnabled = useSetting( 'color.custom' );
 	const areCustomGradientsEnabled = useSetting( 'color.customGradient' );
 	const isBackgroundEnabled = useSetting( 'color.background' );
@@ -244,17 +252,8 @@ export function ColorEdit( props ) {
 
 	const gradientsEnabled =
 		areCustomGradientsEnabled ||
-		! gradientsPerOrigin?.theme ||
-		gradientsPerOrigin?.theme?.length > 0;
-
-	const allGradients = useMemo(
-		() => [
-			...( gradientsPerOrigin?.custom || [] ),
-			...( gradientsPerOrigin?.theme || [] ),
-			...( gradientsPerOrigin?.default || [] ),
-		],
-		[ gradientsPerOrigin ]
-	);
+		! themeGradientPalette ||
+		themeGradientPalette?.length > 0;
 
 	// Shouldn't be needed but right now the ColorGradientsPanel
 	// can trigger both onChangeColor and onChangeBackground

package/src/hooks/layout.js

@@ -215,6 +215,7 @@ export const withLayoutStyles = createHigherOrderComponent(
 						<LayoutStyle
 							selector={ `.wp-container-${ id }` }
 							layout={ usedLayout }
+							style={ attributes?.style }
 						/>,
 						element
 					) }

package/src/hooks/style.js

@@ -74,6 +74,7 @@ function compileStyleValue( uncompiledValue ) {
  * @return {Object} Flattened CSS variables declaration.
  */
 export function getInlineStyles( styles = {} ) {
+	const ignoredStyles = [ 'spacing.blockGap' ];
 	const output = {};
 	Object.keys( STYLE_PROPERTY ).forEach( ( propKey ) => {
 		const path = STYLE_PROPERTY[ propKey ].value;
@@ -93,7 +94,7 @@ export function getInlineStyles( styles = {} ) {
 						output[ name ] = compileStyleValue( value );
 					}
 				} );
-			} else {
+			} else if ( ! ignoredStyles.includes( path.join( '.' ) ) ) {
 				output[ propKey ] = compileStyleValue( get( styles, path ) );
 			}
 		}

package/src/hooks/test/style.js

@@ -30,7 +30,6 @@ describe( 'getInlineStyles', () => {
 				},
 			} )
 		).toEqual( {
-			'--wp--style--block-gap': '1em',
 			backgroundColor: 'black',
 			borderColor: '#21759b',
 			borderRadius: '10px',
@@ -104,7 +103,6 @@ describe( 'getInlineStyles', () => {
 				},
 			} )
 		).toEqual( {
-			'--wp--style--block-gap': '1em',
 			margin: '10px',
 			padding: '20px',
 		} );

package/src/layouts/flex.js

@@ -84,58 +84,35 @@ export default {
 			</BlockControls>
 		);
 	},
-	save: function FlexLayoutStyle( { selector, layout } ) {
-		const {
-			orientation = 'horizontal',
-			setCascadingProperties = false,
-		} = layout;
+	save: function FlexLayoutStyle( { selector, layout, style } ) {
+		const { orientation = 'horizontal' } = layout;
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
 		const hasBlockGapStylesSupport = blockGapSupport !== null;
+		const blockGapValue =
+			style?.spacing?.blockGap ?? 'var( --wp--style--block-gap, 0.5em )';
 		const justifyContent =
 			justifyContentMap[ layout.justifyContent ] ||
 			justifyContentMap.left;
 		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 ) } {
 					display: flex;
-					gap: ${
-						hasBlockGapStylesSupport
-							? 'var( --wp--style--block-gap, 0.5em )'
-							: '0.5em'
-					};
+					gap: ${ hasBlockGapStylesSupport ? blockGapValue : '0.5em' };
 					flex-wrap: ${ flexWrap };
 					${ orientation === 'horizontal' ? rowOrientation : columnOrientation }
 				}

package/src/layouts/flow.js

@@ -105,12 +105,14 @@ export default {
 	toolBarControls: function DefaultLayoutToolbarControls() {
 		return null;
 	},
-	save: function DefaultLayoutStyle( { selector, layout = {} } ) {
+	save: function DefaultLayoutStyle( { selector, layout = {}, style } ) {
 		const { contentSize, wideSize } = layout;
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
 		const hasBlockGapStylesSupport = blockGapSupport !== null;
+		const blockGapValue =
+			style?.spacing?.blockGap ?? 'var( --wp--style--block-gap )';
 
-		let style =
+		let output =
 			!! contentSize || !! wideSize
 				? `
 					${ appendSelectors( selector, '> *' ) } {
@@ -129,7 +131,7 @@ export default {
 				`
 				: '';
 
-		style += `
+		output += `
 			${ appendSelectors( selector, '> [data-align="left"]' ) } {
 				float: left;
 				margin-right: 2em;
@@ -143,18 +145,18 @@ export default {
 		`;
 
 		if ( hasBlockGapStylesSupport ) {
-			style += `
+			output += `
 				${ appendSelectors( selector, '> *' ) } {
 					margin-top: 0;
 					margin-bottom: 0;
 				}
 				${ appendSelectors( selector, '> * + *' ) } {
-					margin-top: var( --wp--style--block-gap );
+					margin-top: ${ blockGapValue };
 				}
 			`;
 		}
 
-		return <style>{ style }</style>;
+		return <style>{ output }</style>;
 	},
 	getOrientation() {
 		return 'vertical';

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

@@ -737,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.
@@ -754,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

@@ -30,6 +30,7 @@ import {
 	parse,
 } from '@wordpress/blocks';
 import { Platform } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
 import { symbol } from '@wordpress/icons';
 
 /**
@@ -826,6 +827,7 @@ export const isAncestorMultiSelected = createSelector(
 		state.selection.selectionEnd.clientId,
 	]
 );
+
 /**
  * Returns the client ID of the block which begins the multi-selection set, or
  * null if there is no multi-selection.
@@ -890,11 +892,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 );
 }
 
@@ -1259,15 +1261,43 @@ const canInsertBlockTypeUnmemoized = (
 		parentName
 	);
 
-	if ( hasParentAllowedBlock !== null && hasBlockAllowedParent !== null ) {
-		return hasParentAllowedBlock || hasBlockAllowedParent;
-	} else if ( hasParentAllowedBlock !== null ) {
-		return hasParentAllowedBlock;
-	} else if ( hasBlockAllowedParent !== null ) {
-		return hasBlockAllowedParent;
+	const canInsert =
+		( hasParentAllowedBlock === null && hasBlockAllowedParent === null ) ||
+		hasParentAllowedBlock === true ||
+		hasBlockAllowedParent === true;
+
+	if ( ! canInsert ) {
+		return canInsert;
 	}
 
-	return true;
+	/**
+	 * This filter is an ad-hoc solution to prevent adding template parts inside post content.
+	 * Conceptually, having a filter inside a selector is bad pattern so this code will be
+	 * replaced by a declarative API that doesn't the following drawbacks:
+	 *
+	 * Filters are not reactive: Upon switching between "template mode" and non "template mode",
+	 * the filter and selector won't necessarily be executed again. For now, it doesn't matter much
+	 * because you can't switch between the two modes while the inserter stays open.
+	 *
+	 * Filters are global: Once they're defined, they will affect all editor instances and all registries.
+	 * An ideal API would only affect specific editor instances.
+	 */
+	return applyFilters(
+		'blockEditor.__unstableCanInsertBlockType',
+		canInsert,
+		blockType,
+		rootClientId,
+		{
+			// Pass bound selectors of the current registry. If we're in a nested
+			// context, the data will differ from the one selected from the root
+			// registry.
+			getBlock: getBlock.bind( null, state ),
+			getBlockParentsByBlockName: getBlockParentsByBlockName.bind(
+				null,
+				state
+			),
+		}
+	);
 };
 
 /**

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