@wordpress/block-editor 12.0.0 → 12.2.0

package/src/components/list-view/block.js

@@ -38,9 +38,10 @@ import { getBlockPositionDescription } from './utils';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
+import { unlock } from '../../lock-unlock';
 
 function ListViewBlock( {
-	block,
+	block: { clientId },
 	isDragged,
 	isSelected,
 	isBranchSelected,
@@ -58,51 +59,42 @@ function ListViewBlock( {
 	const cellRef = useRef( null );
 	const rowRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
-	const { clientId } = block;
 
-	const { isLocked, isContentLocked, canEdit } = useBlockLock( clientId );
-	const forceSelectionContentLock = useSelect(
-		( select ) => {
-			if ( isSelected ) {
-				return false;
-			}
-			if ( ! isContentLocked ) {
-				return false;
-			}
-			return select( blockEditorStore ).hasSelectedInnerBlock(
-				clientId,
-				true
-			);
-		},
-		[ isContentLocked, clientId, isSelected ]
-	);
+	const { isLocked, canEdit } = useBlockLock( clientId );
 
-	const canExpand = isContentLocked ? false : canEdit;
 	const isFirstSelectedBlock =
-		forceSelectionContentLock ||
-		( isSelected && selectedClientIds[ 0 ] === clientId );
+		isSelected && selectedClientIds[ 0 ] === clientId;
 	const isLastSelectedBlock =
-		forceSelectionContentLock ||
-		( isSelected &&
-			selectedClientIds[ selectedClientIds.length - 1 ] === clientId );
+		isSelected &&
+		selectedClientIds[ selectedClientIds.length - 1 ] === clientId;
 
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const blockTitle = blockInformation?.title || __( 'Untitled' );
+	const block = useSelect(
+		( select ) => select( blockEditorStore ).getBlock( clientId ),
+		[ clientId ]
+	);
 	const blockName = useSelect(
 		( select ) => select( blockEditorStore ).getBlockName( clientId ),
 		[ clientId ]
 	);
-
-	// When a block hides its toolbar it also hides the block settings menu,
-	// since that menu is part of the toolbar in the editor canvas.
-	// List View respects this by also hiding the block settings menu.
-	const showBlockActions = hasBlockSupport(
-		blockName,
-		'__experimentalToolbar',
-		true
+	const blockEditingMode = useSelect(
+		( select ) =>
+			unlock( select( blockEditorStore ) ).getBlockEditingMode(
+				clientId
+			),
+		[ clientId ]
 	);
+
+	const showBlockActions =
+		// When a block hides its toolbar it also hides the block settings menu,
+		// since that menu is part of the toolbar in the editor canvas.
+		// List View respects this by also hiding the block settings menu.
+		hasBlockSupport( blockName, '__experimentalToolbar', true ) &&
+		// Don't show the settings menu if block is disabled or content only.
+		blockEditingMode === 'default';
 	const instanceId = useInstanceId( ListViewBlock );
 	const descriptionId = `list-view-block-select-button__${ instanceId }`;
 	const blockPositionDescription = getBlockPositionDescription(
@@ -131,6 +123,8 @@ function ListViewBlock( {
 		collapse,
 		BlockSettingsMenu,
 		listViewInstanceId,
+		expandedState,
+		setInsertedBlock,
 	} = useListViewContext();
 
 	const hasSiblings = siblingBlockCount > 0;
@@ -200,7 +194,7 @@ function ListViewBlock( {
 	}
 
 	const classes = classnames( {
-		'is-selected': isSelected || forceSelectionContentLock,
+		'is-selected': isSelected,
 		'is-first-selected': isFirstSelectedBlock,
 		'is-last-selected': isLastSelectedBlock,
 		'is-branch-selected': isBranchSelected,
@@ -244,14 +238,14 @@ function ListViewBlock( {
 			path={ path }
 			id={ `list-view-${ listViewInstanceId }-block-${ clientId }` }
 			data-block={ clientId }
-			data-expanded={ canExpand ? isExpanded : undefined }
+			data-expanded={ canEdit ? isExpanded : undefined }
 			ref={ rowRef }
 		>
 			<TreeGridCell
 				className="block-editor-list-view-block__contents-cell"
 				colSpan={ colSpan }
 				ref={ cellRef }
-				aria-selected={ !! isSelected || forceSelectionContentLock }
+				aria-selected={ !! isSelected }
 			>
 				{ ( { ref, tabIndex, onFocus } ) => (
 					<div className="block-editor-list-view-block__contents-container">
@@ -268,7 +262,7 @@ function ListViewBlock( {
 								currentlyEditingBlockInCanvas ? 0 : tabIndex
 							}
 							onFocus={ onFocus }
-							isExpanded={ canExpand ? isExpanded : undefined }
+							isExpanded={ canEdit ? isExpanded : undefined }
 							selectedClientIds={ selectedClientIds }
 							ariaLabel={ blockAriaLabel }
 							ariaDescribedBy={ descriptionId }
@@ -317,7 +311,7 @@ function ListViewBlock( {
 			{ showBlockActions && BlockSettingsMenu && (
 				<TreeGridCell
 					className={ listViewBlockSettingsClassName }
-					aria-selected={ !! isSelected || forceSelectionContentLock }
+					aria-selected={ !! isSelected }
 				>
 					{ ( { ref, tabIndex, onFocus } ) => (
 						<BlockSettingsMenu
@@ -333,6 +327,9 @@ function ListViewBlock( {
 							} }
 							disableOpenOnArrowDown
 							__experimentalSelectBlock={ updateSelection }
+							expand={ expand }
+							expandedState={ expandedState }
+							setInsertedBlock={ setInsertedBlock }
 						/>
 					) }
 				</TreeGridCell>

package/src/components/list-view/branch.js

@@ -109,13 +109,7 @@ function ListViewBranch( props ) {
 			if ( ! parentId ) {
 				return true;
 			}
-
-			const isContentLocked =
-				select( blockEditorStore ).getTemplateLock( parentId ) ===
-				'contentOnly';
-			const canEdit = select( blockEditorStore ).canEditBlock( parentId );
-
-			return isContentLocked ? false : canEdit;
+			return select( blockEditorStore ).canEditBlock( parentId );
 		},
 		[ parentId ]
 	);

package/src/components/list-view/index.js

@@ -16,6 +16,7 @@ import {
 	useRef,
 	useReducer,
 	forwardRef,
+	useState,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
@@ -56,16 +57,18 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
 /**
  * Show a hierarchical list of blocks.
  *
- * @param {Object}         props                   Components props.
- * @param {string}         props.id                An HTML element id for the root element of ListView.
- * @param {Array}          props.blocks            _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.
- * @param {?boolean}       props.showBlockMovers   Flag to enable block movers. Defaults to `false`.
- * @param {?boolean}       props.isExpanded        Flag to determine whether nested levels are expanded by default. Defaults to `false`.
- * @param {?boolean}       props.showAppender      Flag to show or hide the block appender. Defaults to `false`.
- * @param {?ComponentType} props.blockSettingsMenu Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
- * @param {string}         props.rootClientId      The client id of the root block from which we determine the blocks to show in the list.
- * @param {string}         props.description       Optional accessible description for the tree grid component.
- * @param {Ref}            ref                     Forwarded ref
+ * @param {Object}         props                         Components props.
+ * @param {string}         props.id                      An HTML element id for the root element of ListView.
+ * @param {Array}          props.blocks                  _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.
+ * @param {?boolean}       props.showBlockMovers         Flag to enable block movers. Defaults to `false`.
+ * @param {?boolean}       props.isExpanded              Flag to determine whether nested levels are expanded by default. Defaults to `false`.
+ * @param {?boolean}       props.showAppender            Flag to show or hide the block appender. Defaults to `false`.
+ * @param {?ComponentType} props.blockSettingsMenu       Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
+ * @param {string}         props.rootClientId            The client id of the root block from which we determine the blocks to show in the list.
+ * @param {string}         props.description             Optional accessible description for the tree grid component.
+ * @param {?Function}      props.onSelect                Optional callback to be invoked when a block is selected. Receives the block object that was selected.
+ * @param {Function}       props.renderAdditionalBlockUI Function that renders additional block content UI.
+ * @param {Ref}            ref                           Forwarded ref
  */
 function ListViewComponent(
 	{
@@ -77,6 +80,8 @@ function ListViewComponent(
 		blockSettingsMenu: BlockSettingsMenu = BlockSettingsDropdown,
 		rootClientId,
 		description,
+		onSelect,
+		renderAdditionalBlockUI,
 	},
 	ref
 ) {
@@ -95,6 +100,7 @@ function ListViewComponent(
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
 		useListViewClientIds( { blocks, rootClientId } );
 
+	const { getBlock } = useSelect( blockEditorStore );
 	const { visibleBlockCount, shouldShowInnerBlocks } = useSelect(
 		( select ) => {
 			const {
@@ -123,16 +129,22 @@ function ListViewComponent(
 	const treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] );
 
 	const isMounted = useRef( false );
+
+	const [ insertedBlock, setInsertedBlock ] = useState( null );
+
 	const { setSelectedTreeId } = useListViewExpandSelectedItem( {
 		firstSelectedBlockClientId: selectedClientIds[ 0 ],
 		setExpandedState,
 	} );
 	const selectEditorBlock = useCallback(
-		( event, clientId ) => {
-			updateBlockSelection( event, clientId );
-			setSelectedTreeId( clientId );
+		( event, blockClientId ) => {
+			updateBlockSelection( event, blockClientId );
+			setSelectedTreeId( blockClientId );
+			if ( onSelect ) {
+				onSelect( getBlock( blockClientId ) );
+			}
 		},
-		[ setSelectedTreeId, updateBlockSelection ]
+		[ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ]
 	);
 	useEffect( () => {
 		isMounted.current = true;
@@ -203,6 +215,9 @@ function ListViewComponent(
 			collapse,
 			BlockSettingsMenu,
 			listViewInstanceId: instanceId,
+			renderAdditionalBlockUI,
+			insertedBlock,
+			setInsertedBlock,
 		} ),
 		[
 			draggedClientIds,
@@ -211,11 +226,14 @@ function ListViewComponent(
 			collapse,
 			BlockSettingsMenu,
 			instanceId,
+			renderAdditionalBlockUI,
+			insertedBlock,
+			setInsertedBlock,
 		]
 	);
 
-	// If there are no blocks to show, do not render the list view.
-	if ( ! clientIdsTree.length ) {
+	// If there are no blocks to show and we're not showing the appender, do not render the list view.
+	if ( ! clientIdsTree.length && ! showAppender ) {
 		return null;
 	}
 
@@ -254,16 +272,23 @@ function ListViewComponent(
 		</AsyncModeProvider>
 	);
 }
+
+// This is the private API for the ListView component.
+// It allows access to all props, not just the public ones.
 export const PrivateListView = forwardRef( ListViewComponent );
 
+// This is the public API for the ListView component.
+// We wrap the PrivateListView component to hide some props from the public API.
 export default forwardRef( ( props, ref ) => {
 	return (
 		<PrivateListView
 			ref={ ref }
 			{ ...props }
 			showAppender={ false }
-			blockSettingsMenu={ BlockSettingsDropdown }
 			rootClientId={ null }
+			onSelect={ null }
+			renderAdditionalBlockUI={ null }
+			blockSettingsMenu={ undefined }
 		/>
 	);
 } );

package/src/components/list-view/style.scss

@@ -15,10 +15,10 @@
 	// Use position relative for row animation.
 	position: relative;
 
-	.components-button {
+	.block-editor-list-view-block-select-button {
 		// When a row is expanded, retain the dark color.
 		&[aria-expanded="true"] {
-			color: $gray-900;
+			color: inherit;
 		}
 
 		// Ensure that on hover, the admin color is still used.
@@ -123,7 +123,6 @@
 		border-radius: 0;
 	}
 
-
 	// List View renders a fixed number of items and relies on each item having a fixed height of 36px.
 	// If this value changes, we should also change the itemHeight value set in useFixedWindowList.
 	// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
@@ -214,19 +213,17 @@
 		line-height: 0;
 		width: $button-size;
 		vertical-align: middle;
-		@include reduce-motion("transition");
 
 		> * {
-			will-change: opacity;
 			opacity: 0;
 		}
 
-		// Show on hover, visible, and show above to keep the hit area size.
+		// Show on hover, visible, when focused, and show above to keep the hit area size.
 		&:hover,
+		&:focus-within,
 		&.is-visible {
 			> * {
 				opacity: 1;
-				@include edit-post__fade-in-animation;
 			}
 		}
 
@@ -376,6 +373,9 @@ $block-navigation-max-indent: 8;
 	}
 }
 
+// When updating the margin for each indentation level, the corresponding
+// indentation in `use-list-view-drop-zone.js` must be updated as well
+// to ensure the drop zone is aligned with the indentation.
 @for $i from 0 to $block-navigation-max-indent {
 	.block-editor-list-view-leaf[aria-level="#{ $i + 1 }"] .block-editor-list-view__expander {
 		@if $i - 1 >= 0 {

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

@@ -1,7 +1,10 @@
 /**
  * Internal dependencies
  */
-import { getListViewDropTarget } from '../use-list-view-drop-zone';
+import {
+	getListViewDropTarget,
+	NESTING_LEVEL_INDENTATION,
+} from '../use-list-view-drop-zone';
 
 describe( 'getListViewDropTarget', () => {
 	const blocksData = [
@@ -15,10 +18,10 @@ describe( 'getListViewDropTarget', () => {
 					top: 50,
 					bottom: 100,
 					left: 10,
-					right: 100,
+					right: 300,
 					x: 10,
 					y: 50,
-					width: 90,
+					width: 290,
 					height: 50,
 				} ),
 			},
@@ -26,6 +29,7 @@ describe( 'getListViewDropTarget', () => {
 			isDraggedBlock: false,
 			isExpanded: true,
 			rootClientId: '',
+			nestingLevel: 1,
 		},
 		{
 			blockIndex: 0,
@@ -37,32 +41,56 @@ describe( 'getListViewDropTarget', () => {
 					top: 100,
 					bottom: 150,
 					left: 10,
-					right: 100,
+					right: 300,
 					x: 10,
 					y: 100,
-					width: 90,
+					width: 290,
 					height: 50,
 				} ),
 			},
-			innerBlockCount: 0,
+			innerBlockCount: 1,
 			isDraggedBlock: false,
-			isExpanded: false,
+			isExpanded: true,
 			rootClientId: 'block-1',
+			nestingLevel: 2,
 		},
 		{
-			blockIndex: 1,
+			blockIndex: 0,
 			canInsertDraggedBlocksAsChild: true,
 			canInsertDraggedBlocksAsSibling: true,
 			clientId: 'block-3',
 			element: {
 				getBoundingClientRect: () => ( {
 					top: 150,
-					bottom: 150,
+					bottom: 200,
 					left: 10,
-					right: 100,
+					right: 300,
 					x: 10,
 					y: 150,
-					width: 90,
+					width: 290,
+					height: 50,
+				} ),
+			},
+			innerBlockCount: 0,
+			isDraggedBlock: false,
+			isExpanded: true,
+			rootClientId: 'block-2',
+			nestingLevel: 3,
+		},
+		{
+			blockIndex: 1,
+			canInsertDraggedBlocksAsChild: true,
+			canInsertDraggedBlocksAsSibling: true,
+			clientId: 'block-4',
+			element: {
+				getBoundingClientRect: () => ( {
+					top: 200,
+					bottom: 250,
+					left: 10,
+					right: 300,
+					x: 10,
+					y: 200,
+					width: 290,
 					height: 50,
 				} ),
 			},
@@ -70,6 +98,7 @@ describe( 'getListViewDropTarget', () => {
 			isDraggedBlock: false,
 			isExpanded: false,
 			rootClientId: '',
+			nestingLevel: 1,
 		},
 	];
 
@@ -96,8 +125,55 @@ describe( 'getListViewDropTarget', () => {
 		} );
 	} );
 
+	it( 'should nest when dragging a block over the right side of the bottom half of a block nested to three levels', () => {
+		const position = { x: 250, y: 180 };
+		const target = getListViewDropTarget( blocksData, position );
+
+		expect( target ).toEqual( {
+			blockIndex: 0,
+			dropPosition: 'inside',
+			rootClientId: 'block-3',
+		} );
+	} );
+
+	it( 'should drag below when positioned at the bottom half of a block nested to three levels, and over the third level horizontally', () => {
+		const position = { x: 10 + NESTING_LEVEL_INDENTATION * 3, y: 180 };
+		const target = getListViewDropTarget( blocksData, position );
+
+		expect( target ).toEqual( {
+			blockIndex: 1,
+			clientId: 'block-3',
+			dropPosition: 'bottom',
+			rootClientId: 'block-2',
+		} );
+	} );
+
+	it( 'should drag one level up below when positioned at the bottom half of a block nested to three levels, and over the second level horizontally', () => {
+		const position = { x: 10 + NESTING_LEVEL_INDENTATION * 2, y: 180 };
+		const target = getListViewDropTarget( blocksData, position );
+
+		expect( target ).toEqual( {
+			blockIndex: 1,
+			clientId: 'block-3',
+			dropPosition: 'bottom',
+			rootClientId: 'block-1',
+		} );
+	} );
+
+	it( 'should drag two levels up below when positioned at the bottom half of a block nested to three levels, and over the first level horizontally', () => {
+		const position = { x: 10 + NESTING_LEVEL_INDENTATION, y: 180 };
+		const target = getListViewDropTarget( blocksData, position );
+
+		expect( target ).toEqual( {
+			blockIndex: 1,
+			clientId: 'block-3',
+			dropPosition: 'bottom',
+			rootClientId: '',
+		} );
+	} );
+
 	it( 'should nest when dragging a block over the right side and bottom half of a collapsed block with children', () => {
-		const position = { x: 70, y: 90 };
+		const position = { x: 160, y: 90 };
 
 		const collapsedBlockData = [ ...blocksData ];
 

package/src/components/list-view/use-list-view-client-ids.js

@@ -8,6 +8,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 export default function useListViewClientIds( { blocks, rootClientId } ) {
 	return useSelect(
@@ -16,14 +17,30 @@ export default function useListViewClientIds( { blocks, rootClientId } ) {
 				getDraggedBlockClientIds,
 				getSelectedBlockClientIds,
 				__unstableGetClientIdsTree,
-			} = select( blockEditorStore );
+				getBlockEditingMode,
+			} = unlock( select( blockEditorStore ) );
+
+			const removeDisabledBlocks = ( tree ) => {
+				return tree.flatMap( ( { clientId, innerBlocks, ...rest } ) => {
+					if ( getBlockEditingMode( clientId ) === 'disabled' ) {
+						return removeDisabledBlocks( innerBlocks );
+					}
+					return [
+						{
+							clientId,
+							innerBlocks: removeDisabledBlocks( innerBlocks ),
+							...rest,
+						},
+					];
+				} );
+			};
 
 			return {
 				selectedClientIds: getSelectedBlockClientIds(),
 				draggedClientIds: getDraggedBlockClientIds(),
-				clientIdsTree: blocks
-					? blocks
-					: __unstableGetClientIdsTree( rootClientId ),
+				clientIdsTree: removeDisabledBlocks(
+					blocks ?? __unstableGetClientIdsTree( rootClientId )
+				),
 			};
 		},
 		[ blocks, rootClientId ]