@wordpress/block-editor 8.5.7 → 9.1.0

package/src/components/block-list/test/block-list-context.native.js

@@ -0,0 +1,253 @@
+/**
+ * External dependencies
+ */
+import { cloneDeep } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import {
+	DEFAULT_BLOCK_LIST_CONTEXT,
+	deleteBlockLayoutByClientId,
+} from '../block-list-context.native';
+import {
+	BLOCKS_LAYOUTS_DATA,
+	DEEP_NESTED_ID,
+	GROUP_BLOCK_LAYOUT_DATA,
+	NESTED_WITH_INNER_BLOCKS_ID,
+	PARAGRAPH_BLOCK_LAYOUT_DATA,
+	ROOT_LEVEL_ID,
+} from './fixtures/block-list-context.native';
+
+describe( 'findBlockLayoutByClientId', () => {
+	it( "finds a block's layout data at root level", () => {
+		const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
+		const currentBlockLayouts = BLOCKS_LAYOUTS_DATA;
+
+		const blockRootLevel = findBlockLayoutByClientId(
+			currentBlockLayouts,
+			ROOT_LEVEL_ID
+		);
+
+		expect( blockRootLevel ).toEqual(
+			expect.objectContaining( { clientId: ROOT_LEVEL_ID } )
+		);
+	} );
+
+	it( "finds a nested block's layout data with inner blocks", () => {
+		const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
+		const currentBlockLayouts = BLOCKS_LAYOUTS_DATA;
+
+		const nestedBlock = findBlockLayoutByClientId(
+			currentBlockLayouts,
+			NESTED_WITH_INNER_BLOCKS_ID
+		);
+
+		expect( nestedBlock ).toEqual(
+			expect.objectContaining( { clientId: NESTED_WITH_INNER_BLOCKS_ID } )
+		);
+	} );
+
+	it( "finds a deep nested block's layout data", () => {
+		const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
+		const currentBlockLayouts = BLOCKS_LAYOUTS_DATA;
+
+		const deepNestedBlock = findBlockLayoutByClientId(
+			currentBlockLayouts,
+			DEEP_NESTED_ID
+		);
+
+		expect( deepNestedBlock ).toEqual(
+			expect.objectContaining( { clientId: DEEP_NESTED_ID } )
+		);
+	} );
+} );
+
+describe( 'deleteBlockLayoutByClientId', () => {
+	it( "deletes a block's layout data at root level", () => {
+		const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
+		const defaultBlockLayouts = cloneDeep( BLOCKS_LAYOUTS_DATA );
+		const currentBlockLayouts = deleteBlockLayoutByClientId(
+			defaultBlockLayouts,
+			ROOT_LEVEL_ID
+		);
+
+		const findDeletedBlock = findBlockLayoutByClientId(
+			currentBlockLayouts,
+			ROOT_LEVEL_ID
+		);
+
+		expect( findDeletedBlock ).toBeNull();
+	} );
+
+	it( "deletes a nested block's layout data with inner blocks", () => {
+		const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
+		const defaultBlockLayouts = cloneDeep( BLOCKS_LAYOUTS_DATA );
+		const currentBlockLayouts = deleteBlockLayoutByClientId(
+			defaultBlockLayouts,
+			NESTED_WITH_INNER_BLOCKS_ID
+		);
+
+		const findDeletedBlock = findBlockLayoutByClientId(
+			currentBlockLayouts,
+			NESTED_WITH_INNER_BLOCKS_ID
+		);
+
+		expect( findDeletedBlock ).toBeNull();
+	} );
+
+	it( "deletes a deep nested block's layout data", () => {
+		const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
+		const defaultBlockLayouts = cloneDeep( BLOCKS_LAYOUTS_DATA );
+		const currentBlockLayouts = deleteBlockLayoutByClientId(
+			defaultBlockLayouts,
+			DEEP_NESTED_ID
+		);
+
+		const findDeletedBlock = findBlockLayoutByClientId(
+			currentBlockLayouts,
+			DEEP_NESTED_ID
+		);
+
+		expect( findDeletedBlock ).toBeNull();
+	} );
+} );
+
+describe( 'updateBlocksLayouts', () => {
+	it( "adds a new block's layout data at root level with an empty object", () => {
+		const {
+			blocksLayouts,
+			findBlockLayoutByClientId,
+			updateBlocksLayouts,
+		} = DEFAULT_BLOCK_LIST_CONTEXT;
+		const currentBlockLayouts = cloneDeep( blocksLayouts );
+		const BLOCK_CLIENT_ID = PARAGRAPH_BLOCK_LAYOUT_DATA.clientId;
+
+		updateBlocksLayouts( currentBlockLayouts, PARAGRAPH_BLOCK_LAYOUT_DATA );
+
+		const findAddedBlock = findBlockLayoutByClientId(
+			currentBlockLayouts.current,
+			BLOCK_CLIENT_ID
+		);
+
+		expect( findAddedBlock ).toEqual(
+			expect.objectContaining( {
+				clientId: BLOCK_CLIENT_ID,
+				rootClientId: undefined,
+			} )
+		);
+	} );
+
+	it( "adds a new block's layout data at root level with inner blocks", () => {
+		const {
+			findBlockLayoutByClientId,
+			updateBlocksLayouts,
+		} = DEFAULT_BLOCK_LIST_CONTEXT;
+		const currentBlockLayouts = {
+			current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
+		};
+		const PARENT_BLOCK_CLIENT_ID = GROUP_BLOCK_LAYOUT_DATA.clientId;
+
+		// Add parent block
+		updateBlocksLayouts( currentBlockLayouts, GROUP_BLOCK_LAYOUT_DATA );
+
+		const findAddedParentBlock = findBlockLayoutByClientId(
+			currentBlockLayouts.current,
+			PARENT_BLOCK_CLIENT_ID
+		);
+
+		expect( findAddedParentBlock ).toEqual(
+			expect.objectContaining( { clientId: PARENT_BLOCK_CLIENT_ID } )
+		);
+
+		// Add inner block to it's parent
+		updateBlocksLayouts( currentBlockLayouts, {
+			...PARAGRAPH_BLOCK_LAYOUT_DATA,
+			rootClientId: PARENT_BLOCK_CLIENT_ID,
+		} );
+
+		const findAddedInnerBlock = findBlockLayoutByClientId(
+			currentBlockLayouts.current,
+			PARAGRAPH_BLOCK_LAYOUT_DATA.clientId
+		);
+
+		expect( findAddedInnerBlock ).toEqual(
+			expect.objectContaining( {
+				clientId: PARAGRAPH_BLOCK_LAYOUT_DATA.clientId,
+				rootClientId: PARENT_BLOCK_CLIENT_ID,
+			} )
+		);
+	} );
+
+	it( "adds a new block's layout data at deep level", () => {
+		const {
+			findBlockLayoutByClientId,
+			updateBlocksLayouts,
+		} = DEFAULT_BLOCK_LIST_CONTEXT;
+		const currentBlockLayouts = {
+			current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
+		};
+
+		// Add block layout data to it's parents inner blocks
+		updateBlocksLayouts( currentBlockLayouts, {
+			...PARAGRAPH_BLOCK_LAYOUT_DATA,
+			rootClientId: NESTED_WITH_INNER_BLOCKS_ID,
+		} );
+
+		const findAddedInnerBlock = findBlockLayoutByClientId(
+			currentBlockLayouts.current,
+			PARAGRAPH_BLOCK_LAYOUT_DATA.clientId
+		);
+
+		expect( findAddedInnerBlock ).toEqual(
+			expect.objectContaining( {
+				clientId: PARAGRAPH_BLOCK_LAYOUT_DATA.clientId,
+				rootClientId: NESTED_WITH_INNER_BLOCKS_ID,
+			} )
+		);
+	} );
+
+	it( "deletes a block's layout data at root level", () => {
+		const {
+			findBlockLayoutByClientId,
+			updateBlocksLayouts,
+		} = DEFAULT_BLOCK_LIST_CONTEXT;
+		const currentBlockLayouts = {
+			current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
+		};
+
+		updateBlocksLayouts( currentBlockLayouts, {
+			shouldRemove: true,
+			clientId: ROOT_LEVEL_ID,
+		} );
+
+		const findDeletedBlock = findBlockLayoutByClientId(
+			currentBlockLayouts.current,
+			ROOT_LEVEL_ID
+		);
+
+		expect( findDeletedBlock ).toBeNull();
+	} );
+
+	it( "deletes a block's layout data at a deep level", () => {
+		const {
+			findBlockLayoutByClientId,
+			updateBlocksLayouts,
+		} = DEFAULT_BLOCK_LIST_CONTEXT;
+		const currentBlockLayouts = {
+			current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
+		};
+
+		updateBlocksLayouts( currentBlockLayouts, {
+			shouldRemove: true,
+			clientId: DEEP_NESTED_ID,
+		} );
+
+		const findDeletedBlock = findBlockLayoutByClientId(
+			currentBlockLayouts.current,
+			DEEP_NESTED_ID
+		);
+
+		expect( findDeletedBlock ).toBeNull();
+	} );
+} );

package/src/components/block-list/test/fixtures/block-list-context.native.js

@@ -0,0 +1,79 @@
+export const ROOT_LEVEL_ID = 'e59528f8-fb35-4ec1-aec6-5a065c236fa1';
+export const ROOT_LEVEL_WITH_INNER_BLOCKS_ID =
+	'72a9220f-4c3d-4b00-bae1-4506513f63d8';
+export const NESTED_WITH_INNER_BLOCKS_ID =
+	'9f3d1f1e-df85-485d-af63-dc8cb1b93cbc';
+export const DEEP_NESTED_ID = 'abec845a-e4de-43fb-96f7-80dc3d51ad7a';
+
+export const BLOCKS_LAYOUTS_DATA = {
+	[ ROOT_LEVEL_ID ]: {
+		clientId: ROOT_LEVEL_ID,
+		width: 390,
+		height: 54,
+		x: 0,
+		y: 83,
+		innerBlocks: {},
+	},
+	[ ROOT_LEVEL_WITH_INNER_BLOCKS_ID ]: {
+		clientId: ROOT_LEVEL_WITH_INNER_BLOCKS_ID,
+		width: 390,
+		height: 386,
+		x: 0,
+		y: 137,
+		innerBlocks: {
+			'62839858-48b0-44ed-b834-1343a1357e54': {
+				clientId: '62839858-48b0-44ed-b834-1343a1357e54',
+				rootClientId: ROOT_LEVEL_WITH_INNER_BLOCKS_ID,
+				width: 390,
+				height: 54,
+				x: 0,
+				y: 0,
+				innerBlocks: {},
+			},
+			[ NESTED_WITH_INNER_BLOCKS_ID ]: {
+				clientId: NESTED_WITH_INNER_BLOCKS_ID,
+				rootClientId: ROOT_LEVEL_WITH_INNER_BLOCKS_ID,
+				width: 390,
+				height: 332,
+				x: 0,
+				y: 54,
+				innerBlocks: {
+					'435d62a4-afa7-457c-a894-b04390d7b447': {
+						clientId: '435d62a4-afa7-457c-a894-b04390d7b447',
+						rootClientId: NESTED_WITH_INNER_BLOCKS_ID,
+						width: 358,
+						height: 54,
+						x: 0,
+						y: 0,
+						innerBlocks: {},
+					},
+					[ DEEP_NESTED_ID ]: {
+						clientId: DEEP_NESTED_ID,
+						rootClientId: NESTED_WITH_INNER_BLOCKS_ID,
+						width: 358,
+						height: 98,
+						x: 0,
+						y: 54,
+						innerBlocks: {},
+					},
+				},
+			},
+		},
+	},
+};
+
+export const PARAGRAPH_BLOCK_LAYOUT_DATA = {
+	clientId: '22dda04f-4718-45b2-8cd2-36cedb9eae4d',
+	width: 390,
+	height: 98,
+	x: 0,
+	y: 83,
+};
+
+export const GROUP_BLOCK_LAYOUT_DATA = {
+	clientId: 'e18249d9-ec06-4f54-b71e-6ec59be5213e',
+	width: 390,
+	height: 164,
+	x: 0,
+	y: 83,
+};

package/src/components/block-list/use-block-props/index.js

@@ -12,7 +12,7 @@ import {
 	__unstableGetBlockProps as getBlockProps,
 	getBlockType,
 } from '@wordpress/blocks';
-import { useMergeRefs } from '@wordpress/compose';
+import { useMergeRefs, useDisabled } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import warning from '@wordpress/warning';
 
@@ -50,14 +50,18 @@ const BLOCK_ANIMATION_THRESHOLD = 200;
  * also pass any other props through this hook, and they will be merged and
  * returned.
  *
- * @param {Object}  props                    Optional. Props to pass to the element. Must contain
- *                                           the ref if one is defined.
- * @param {Object}  options                  Options for internal use only.
+ * @param {Object}  props                        Optional. Props to pass to the element. Must contain
+ *                                               the ref if one is defined.
+ * @param {Object}  options                      Options for internal use only.
  * @param {boolean} options.__unstableIsHtml
+ * @param {boolean} options.__unstableIsDisabled Whether the block should be disabled.
  *
  * @return {Object} Props to pass to the element to mark as a block.
  */
-export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
+export function useBlockProps(
+	props = {},
+	{ __unstableIsHtml, __unstableIsDisabled = false } = {}
+) {
 	const { clientId, className, wrapperProps = {}, isAligned } = useContext(
 		BlockListBlockContext
 	);
@@ -125,6 +129,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			enableAnimation,
 			triggerAnimationOnChange: index,
 		} ),
+		useDisabled( { isDisabled: ! __unstableIsDisabled } ),
 	] );
 
 	const blockEditContext = useBlockEditContext();

package/src/components/block-list/use-block-props/use-block-class-names.js

@@ -33,12 +33,8 @@ export function useBlockClassNames( clientId ) {
 				getSettings,
 				hasSelectedInnerBlock,
 				isTyping,
-				__experimentalGetActiveBlockIdByBlockNames: getActiveBlockIdByBlockNames,
 			} = select( blockEditorStore );
-			const {
-				__experimentalSpotlightEntityBlocks: spotlightEntityBlocks,
-				outlineMode,
-			} = getSettings();
+			const { outlineMode } = getSettings();
 			const isDragging = isBlockBeingDragged( clientId );
 			const isSelected = isBlockSelected( clientId );
 			const name = getBlockName( clientId );
@@ -48,9 +44,6 @@ export function useBlockClassNames( clientId ) {
 				clientId,
 				checkDeep
 			);
-			const activeEntityBlockId = getActiveBlockIdByBlockNames(
-				spotlightEntityBlocks
-			);
 			return classnames( {
 				'is-selected': isSelected,
 				'is-highlighted': isBlockHighlighted( clientId ),
@@ -58,9 +51,6 @@ export function useBlockClassNames( clientId ) {
 				'is-reusable': isReusableBlock( getBlockType( name ) ),
 				'is-dragging': isDragging,
 				'has-child-selected': isAncestorOfSelectedBlock,
-				'has-active-entity': activeEntityBlockId,
-				// Determine if there is an active entity area to spotlight.
-				'is-active-entity': activeEntityBlockId === clientId,
 				'remove-outline': isSelected && outlineMode && isTyping(),
 			} );
 		},

package/src/components/block-list/use-in-between-inserter.js

@@ -110,7 +110,7 @@ export function useInBetweenInserter() {
 				// Don't show the insertion point if a parent block has an "overlay"
 				// See https://github.com/WordPress/gutenberg/pull/34012#pullrequestreview-727762337
 				const parentOverlay = element.parentElement?.closest(
-					'.block-editor-block-content-overlay.overlay-active'
+					'.block-editor-block-content-overlay'
 				);
 				if ( parentOverlay ) {
 					return;

package/src/components/block-lock/modal.js

@@ -13,7 +13,8 @@ import {
 } from '@wordpress/components';
 import { lock as lockIcon, unlock as unlockIcon } from '@wordpress/icons';
 import { useInstanceId } from '@wordpress/compose';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { isReusableBlock, getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -24,7 +25,18 @@ import { store as blockEditorStore } from '../../store';
 
 export default function BlockLockModal( { clientId, onClose } ) {
 	const [ lock, setLock ] = useState( { move: false, remove: false } );
-	const { canMove, canRemove } = useBlockLock( clientId );
+	const { canEdit, canMove, canRemove } = useBlockLock( clientId );
+	const { isReusable } = useSelect(
+		( select ) => {
+			const { getBlockName } = select( blockEditorStore );
+			const blockName = getBlockName( clientId );
+
+			return {
+				isReusable: isReusableBlock( getBlockType( blockName ) ),
+			};
+		},
+		[ clientId ]
+	);
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const instanceId = useInstanceId(
@@ -36,8 +48,9 @@ export default function BlockLockModal( { clientId, onClose } ) {
 		setLock( {
 			move: ! canMove,
 			remove: ! canRemove,
+			...( isReusable ? { edit: ! canEdit } : {} ),
 		} );
-	}, [ canMove, canRemove ] );
+	}, [ canEdit, canMove, canRemove, isReusable ] );
 
 	const isAllChecked = Object.values( lock ).every( Boolean );
 	const isMixed = Object.values( lock ).some( Boolean ) && ! isAllChecked;
@@ -81,10 +94,36 @@ export default function BlockLockModal( { clientId, onClose } ) {
 							setLock( {
 								move: newValue,
 								remove: newValue,
+								...( isReusable ? { edit: newValue } : {} ),
 							} )
 						}
 					/>
 					<ul className="block-editor-block-lock-modal__checklist">
+						{ isReusable && (
+							<li className="block-editor-block-lock-modal__checklist-item">
+								<CheckboxControl
+									label={
+										<>
+											{ __( 'Restrict editing' ) }
+											<Icon
+												icon={
+													lock.edit
+														? lockIcon
+														: unlockIcon
+												}
+											/>
+										</>
+									}
+									checked={ !! lock.edit }
+									onChange={ ( edit ) =>
+										setLock( ( prevLock ) => ( {
+											...prevLock,
+											edit,
+										} ) )
+									}
+								/>
+							</li>
+						) }
 						<li className="block-editor-block-lock-modal__checklist-item">
 							<CheckboxControl
 								label={

package/src/components/block-lock/toolbar.js

@@ -15,7 +15,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 
 export default function BlockLockToolbar( { clientId } ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const { canMove, canRemove, canLock } = useBlockLock( clientId );
+	const { canEdit, canMove, canRemove, canLock } = useBlockLock( clientId );
 
 	const [ isModalOpen, toggleModal ] = useReducer(
 		( isActive ) => ! isActive,
@@ -26,7 +26,7 @@ export default function BlockLockToolbar( { clientId } ) {
 		return null;
 	}
 
-	if ( canMove && canRemove ) {
+	if ( canEdit && canMove && canRemove ) {
 		return null;
 	}
 

package/src/components/block-lock/use-block-lock.js

@@ -19,6 +19,7 @@ export default function useBlockLock( clientId ) {
 	return useSelect(
 		( select ) => {
 			const {
+				canEditBlock,
 				canMoveBlock,
 				canRemoveBlock,
 				canLockBlockType,
@@ -27,14 +28,16 @@ export default function useBlockLock( clientId ) {
 			} = select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientId );
 
+			const canEdit = canEditBlock( clientId );
 			const canMove = canMoveBlock( clientId, rootClientId );
 			const canRemove = canRemoveBlock( clientId, rootClientId );
 
 			return {
+				canEdit,
 				canMove,
 				canRemove,
 				canLock: canLockBlockType( getBlockName( clientId ) ),
-				isLocked: ! canMove || ! canRemove,
+				isLocked: ! canEdit || ! canMove || ! canRemove,
 			};
 		},
 		[ clientId ]

package/src/components/block-mobile-toolbar/index.native.js

@@ -15,6 +15,7 @@ import { useState, useEffect } from '@wordpress/element';
  */
 import styles from './style.scss';
 import BlockMover from '../block-mover';
+import BlockDraggable from '../block-draggable';
 import BlockActionsMenu from './block-actions-menu';
 import { BlockSettingsButton } from '../block-settings';
 import { store as blockEditorStore } from '../../store';
@@ -33,6 +34,7 @@ const BlockMobileToolbar = ( {
 	blockWidth,
 	anchorNodeRef,
 	isFullWidth,
+	draggingClientId,
 } ) => {
 	const [ fillsLength, setFillsLength ] = useState( null );
 	const [ appenderWidth, setAppenderWidth ] = useState( 0 );
@@ -73,7 +75,12 @@ const BlockMobileToolbar = ( {
 				/>
 			) }
 
-			<View style={ styles.spacer } />
+			<BlockDraggable
+				clientId={ clientId }
+				draggingClientId={ draggingClientId }
+			>
+				{ () => <View style={ styles.spacer } /> }
+			</BlockDraggable>
 
 			<BlockSettingsButton.Slot>
 				{ /* Render only one settings icon even if we have more than one fill - need for hooks with controls. */ }

package/src/components/block-mover/button.js

@@ -8,7 +8,7 @@ import { castArray, first, last } from 'lodash';
  * WordPress dependencies
  */
 import { getBlockType } from '@wordpress/blocks';
-import { Button } from '@wordpress/components';
+import { Button, VisuallyHidden } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { forwardRef } from '@wordpress/element';
@@ -139,12 +139,10 @@ const BlockMoverButton = forwardRef(
 					aria-describedby={ descriptionId }
 					{ ...props }
 					onClick={ isDisabled ? null : onClick }
-					aria-disabled={ isDisabled }
+					disabled={ isDisabled }
+					__experimentalIsFocusable
 				/>
-				<span
-					id={ descriptionId }
-					className="block-editor-block-mover-button__description"
-				>
+				<VisuallyHidden id={ descriptionId }>
 					{ getBlockMoverDescription(
 						blocksCount,
 						blockType && blockType.title,
@@ -154,7 +152,7 @@ const BlockMoverButton = forwardRef(
 						direction === 'up' ? -1 : 1,
 						orientation
 					) }
-				</span>
+				</VisuallyHidden>
 			</>
 		);
 	}