@wordpress/block-editor 7.0.4 → 8.0.0

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

@@ -1,154 +1,174 @@
 /**
  * External dependencies
  */
-import { map, compact } from 'lodash';
+import { compact } from 'lodash';
 
 /**
  * WordPress dependencies
  */
+import { memo } from '@wordpress/element';
 import { AsyncModeProvider } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import ListViewBlock from './block';
-import ListViewAppender from './appender';
-import { isClientIdSelected } from './utils';
 import { useListViewContext } from './context';
+import { isClientIdSelected } from './utils';
+
+/**
+ * Given a block, returns the total number of blocks in that subtree. This is used to help determine
+ * the list position of a block.
+ *
+ * When a block is collapsed, we do not count their children as part of that total. In the current drag
+ * implementation dragged blocks and their children are not counted.
+ *
+ * @param {Object} block            block tree
+ * @param {Object} expandedState    state that notes which branches are collapsed
+ * @param {Array}  draggedClientIds a list of dragged client ids
+ * @return {number} block count
+ */
+function countBlocks( block, expandedState, draggedClientIds ) {
+	const isDragged = draggedClientIds?.includes( block.clientId );
+	if ( isDragged ) {
+		return 0;
+	}
+	const isExpanded = expandedState[ block.clientId ] ?? true;
+	if ( isExpanded ) {
+		return (
+			1 +
+			block.innerBlocks.reduce(
+				countReducer( expandedState, draggedClientIds ),
+				0
+			)
+		);
+	}
+	return 1;
+}
+const countReducer = ( expandedState, draggedClientIds ) => (
+	count,
+	block
+) => {
+	const isDragged = draggedClientIds?.includes( block.clientId );
+	if ( isDragged ) {
+		return count;
+	}
+	const isExpanded = expandedState[ block.clientId ] ?? true;
+	if ( isExpanded && block.innerBlocks.length > 0 ) {
+		return count + countBlocks( block, expandedState, draggedClientIds );
+	}
+	return count + 1;
+};
 
-export default function ListViewBranch( props ) {
+function ListViewBranch( props ) {
 	const {
 		blocks,
 		selectBlock,
-		showAppender,
 		showBlockMovers,
 		showNestedBlocks,
-		parentBlockClientId,
+		selectedClientIds,
 		level = 1,
-		terminatedLevels = [],
-		path = [],
+		path = '',
 		isBranchSelected = false,
-		isLastOfBranch = false,
+		listPosition = 0,
+		fixedListWindow,
 	} = props;
 
 	const {
 		expandedState,
-		expand,
-		collapse,
 		draggedClientIds,
-		selectedClientIds,
+		__experimentalPersistentListViewFeatures,
 	} = useListViewContext();
 
-	const isTreeRoot = ! parentBlockClientId;
 	const filteredBlocks = compact( blocks );
-	const itemHasAppender = ( parentClientId ) =>
-		showAppender &&
-		! isTreeRoot &&
-		isClientIdSelected( parentClientId, selectedClientIds );
-	const hasAppender = itemHasAppender( parentBlockClientId );
-	// Add +1 to the rowCount to take the block appender into account.
 	const blockCount = filteredBlocks.length;
-	const rowCount = hasAppender ? blockCount + 1 : blockCount;
-	const appenderPosition = rowCount;
+	let nextPosition = listPosition;
 
 	return (
 		<>
-			{ map( filteredBlocks, ( block, index ) => {
+			{ filteredBlocks.map( ( block, index ) => {
 				const { clientId, innerBlocks } = block;
+
+				if ( index > 0 ) {
+					nextPosition += countBlocks(
+						filteredBlocks[ index - 1 ],
+						expandedState,
+						draggedClientIds
+					);
+				}
+
+				const usesWindowing = __experimentalPersistentListViewFeatures;
+
+				const { itemInView } = fixedListWindow;
+
+				const blockInView =
+					! usesWindowing || itemInView( nextPosition );
+
 				const position = index + 1;
-				const isLastRowAtLevel = rowCount === position;
-				const updatedTerminatedLevels = isLastRowAtLevel
-					? [ ...terminatedLevels, level ]
-					: terminatedLevels;
-				const updatedPath = [ ...path, position ];
+				const updatedPath =
+					path.length > 0
+						? `${ path }_${ position }`
+						: `${ position }`;
 				const hasNestedBlocks =
 					showNestedBlocks && !! innerBlocks && !! innerBlocks.length;
-				const hasNestedAppender = itemHasAppender( clientId );
-				const hasNestedBranch = hasNestedBlocks || hasNestedAppender;
-
-				const isSelected = isClientIdSelected(
-					clientId,
-					selectedClientIds
-				);
-				const isSelectedBranch =
-					isBranchSelected || ( isSelected && hasNestedBranch );
 
-				// Logic needed to target the last item of a selected branch which might be deeply nested.
-				// This is currently only needed for styling purposes. See: `.is-last-of-selected-branch`.
-				const isLastBlock = index === blockCount - 1;
-				const isLast = isSelected || ( isLastOfBranch && isLastBlock );
-				const isLastOfSelectedBranch =
-					isLastOfBranch && ! hasNestedBranch && isLastBlock;
-
-				const isExpanded = hasNestedBranch
+				const isExpanded = hasNestedBlocks
 					? expandedState[ clientId ] ?? true
 					: undefined;
 
-				const selectBlockWithClientId = ( event ) => {
-					event.stopPropagation();
-					selectBlock( clientId );
-				};
+				const isDragged = !! draggedClientIds?.includes( clientId );
 
-				const toggleExpanded = ( event ) => {
-					event.stopPropagation();
-					if ( isExpanded === true ) {
-						collapse( clientId );
-					} else if ( isExpanded === false ) {
-						expand( clientId );
-					}
-				};
+				const showBlock = isDragged || blockInView;
 
 				// Make updates to the selected or dragged blocks synchronous,
 				// but asynchronous for any other block.
-				const isDragged = !! draggedClientIds?.includes( clientId );
-
+				const isSelected = isClientIdSelected(
+					clientId,
+					selectedClientIds
+				);
+				const isSelectedBranch =
+					isBranchSelected || ( isSelected && hasNestedBlocks );
 				return (
 					<AsyncModeProvider key={ clientId } value={ ! isSelected }>
-						<ListViewBlock
-							block={ block }
-							onClick={ selectBlockWithClientId }
-							onToggleExpanded={ toggleExpanded }
-							isDragged={ isDragged }
-							isSelected={ isSelected }
-							isBranchSelected={ isSelectedBranch }
-							isLastOfSelectedBranch={ isLastOfSelectedBranch }
-							level={ level }
-							position={ position }
-							rowCount={ rowCount }
-							siblingBlockCount={ blockCount }
-							showBlockMovers={ showBlockMovers }
-							terminatedLevels={ terminatedLevels }
-							path={ updatedPath }
-							isExpanded={ isExpanded }
-						/>
-						{ hasNestedBranch && isExpanded && ! isDragged && (
+						{ showBlock && (
+							<ListViewBlock
+								block={ block }
+								selectBlock={ selectBlock }
+								isSelected={ isSelected }
+								isBranchSelected={ isSelectedBranch }
+								isDragged={ isDragged }
+								level={ level }
+								position={ position }
+								rowCount={ blockCount }
+								siblingBlockCount={ blockCount }
+								showBlockMovers={ showBlockMovers }
+								path={ updatedPath }
+								isExpanded={ isExpanded }
+								listPosition={ nextPosition }
+							/>
+						) }
+						{ ! showBlock && (
+							<tr>
+								<td className="block-editor-list-view-placeholder" />
+							</tr>
+						) }
+						{ hasNestedBlocks && isExpanded && ! isDragged && (
 							<ListViewBranch
 								blocks={ innerBlocks }
 								selectBlock={ selectBlock }
-								isBranchSelected={ isSelectedBranch }
-								isLastOfBranch={ isLast }
-								showAppender={ showAppender }
 								showBlockMovers={ showBlockMovers }
 								showNestedBlocks={ showNestedBlocks }
-								parentBlockClientId={ clientId }
 								level={ level + 1 }
-								terminatedLevels={ updatedTerminatedLevels }
 								path={ updatedPath }
+								listPosition={ nextPosition + 1 }
+								fixedListWindow={ fixedListWindow }
+								isBranchSelected={ isSelectedBranch }
+								selectedClientIds={ selectedClientIds }
 							/>
 						) }
 					</AsyncModeProvider>
 				);
 			} ) }
-			{ hasAppender && (
-				<ListViewAppender
-					parentBlockClientId={ parentBlockClientId }
-					position={ rowCount }
-					rowCount={ appenderPosition }
-					level={ level }
-					terminatedLevels={ terminatedLevels }
-					path={ [ ...path, appenderPosition ] }
-				/>
-			) }
 		</>
 	);
 }
@@ -156,3 +176,5 @@ export default function ListViewBranch( props ) {
 ListViewBranch.defaultProps = {
 	selectBlock: () => {},
 };
+
+export default memo( ListViewBranch );

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

@@ -1,10 +1,12 @@
 /**
  * WordPress dependencies
  */
-
-import { useMergeRefs } from '@wordpress/compose';
+import {
+	useMergeRefs,
+	__experimentalUseFixedWindowList as useFixedWindowList,
+} from '@wordpress/compose';
 import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';
-import { AsyncModeProvider, useDispatch } from '@wordpress/data';
+import { AsyncModeProvider, useDispatch, useSelect } from '@wordpress/data';
 import {
 	useCallback,
 	useEffect,
@@ -46,32 +48,46 @@ const expanded = ( state, action ) => {
  * @param {Array}    props.blocks                                   Custom subset of block client IDs to be used instead of the default hierarchy.
  * @param {Function} props.onSelect                                 Block selection callback.
  * @param {boolean}  props.showNestedBlocks                         Flag to enable displaying nested blocks.
- * @param {boolean}  props.showOnlyCurrentHierarchy                 Flag to limit the list to the current hierarchy of blocks.
+ * @param {boolean}  props.showBlockMovers                          Flag to enable block movers
  * @param {boolean}  props.__experimentalFeatures                   Flag to enable experimental features.
  * @param {boolean}  props.__experimentalPersistentListViewFeatures Flag to enable features for the Persistent List View experiment.
+ * @param {boolean}  props.__experimentalHideContainerBlockActions  Flag to hide actions of top level blocks (like core/widget-area)
  * @param {Object}   ref                                            Forwarded ref
  */
 function ListView(
 	{
 		blocks,
-		showOnlyCurrentHierarchy,
 		onSelect = noop,
 		__experimentalFeatures,
 		__experimentalPersistentListViewFeatures,
+		__experimentalHideContainerBlockActions,
+		showNestedBlocks,
+		showBlockMovers,
 		...props
 	},
 	ref
 ) {
 	const {
 		clientIdsTree,
-		selectedClientIds,
 		draggedClientIds,
-	} = useListViewClientIds(
-		blocks,
-		showOnlyCurrentHierarchy,
-		__experimentalPersistentListViewFeatures
-	);
+		selectedClientIds,
+	} = useListViewClientIds( blocks );
 	const { selectBlock } = useDispatch( blockEditorStore );
+	const { visibleBlockCount } = useSelect(
+		( select ) => {
+			const { getGlobalBlockCount, getClientIdsOfDescendants } = select(
+				blockEditorStore
+			);
+			const draggedBlockCount =
+				draggedClientIds?.length > 0
+					? getClientIdsOfDescendants( draggedClientIds ).length + 1
+					: 0;
+			return {
+				visibleBlockCount: getGlobalBlockCount() - draggedBlockCount,
+			};
+		},
+		[ draggedClientIds ]
+	);
 	const selectEditorBlock = useCallback(
 		( clientId ) => {
 			selectBlock( clientId );
@@ -90,6 +106,19 @@ function ListView(
 		isMounted.current = true;
 	}, [] );
 
+	// List View renders a fixed number of items and relies on each having a fixed item 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.
+	const [ fixedListWindow ] = useFixedWindowList(
+		elementRef,
+		36,
+		visibleBlockCount,
+		{
+			useWindowing: __experimentalPersistentListViewFeatures,
+			windowOverscan: 40,
+		}
+	);
+
 	const expand = useCallback(
 		( clientId ) => {
 			if ( ! clientId ) {
@@ -108,20 +137,26 @@ function ListView(
 		},
 		[ setExpandedState ]
 	);
-	const expandRow = ( row ) => {
-		expand( row?.dataset?.block );
-	};
-	const collapseRow = ( row ) => {
-		collapse( row?.dataset?.block );
-	};
+	const expandRow = useCallback(
+		( row ) => {
+			expand( row?.dataset?.block );
+		},
+		[ expand ]
+	);
+	const collapseRow = useCallback(
+		( row ) => {
+			collapse( row?.dataset?.block );
+		},
+		[ collapse ]
+	);
 
 	const contextValue = useMemo(
 		() => ( {
 			__experimentalFeatures,
 			__experimentalPersistentListViewFeatures,
+			__experimentalHideContainerBlockActions,
 			isTreeGridMounted: isMounted.current,
 			draggedClientIds,
-			selectedClientIds,
 			expandedState,
 			expand,
 			collapse,
@@ -129,9 +164,9 @@ function ListView(
 		[
 			__experimentalFeatures,
 			__experimentalPersistentListViewFeatures,
+			__experimentalHideContainerBlockActions,
 			isMounted.current,
 			draggedClientIds,
-			selectedClientIds,
 			expandedState,
 			expand,
 			collapse,
@@ -155,6 +190,10 @@ function ListView(
 					<ListViewBranch
 						blocks={ clientIdsTree }
 						selectBlock={ selectEditorBlock }
+						showNestedBlocks={ showNestedBlocks }
+						showBlockMovers={ showBlockMovers }
+						fixedListWindow={ fixedListWindow }
+						selectedClientIds={ selectedClientIds }
 						{ ...props }
 					/>
 				</ListViewContext.Provider>

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

@@ -30,7 +30,7 @@ export default function ListViewLeaf( {
 		isSelected,
 		adjustScrolling: false,
 		enableAnimation: true,
-		triggerAnimationOnChange: path.join( '_' ),
+		triggerAnimationOnChange: path,
 	} );
 
 	return (

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

@@ -57,14 +57,14 @@
 	&.is-branch-selected:not(.is-selected) .block-editor-list-view-block-contents {
 		border-radius: 0;
 	}
-	&.is-branch-selected.is-last-of-selected-branch .block-editor-list-view-block-contents {
-		border-radius: 0 0 2px 2px;
-	}
 
 	&.is-dragging {
 		display: none;
 	}
 
+	// 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.
 	.block-editor-list-view-block-contents {
 		display: flex;
 		align-items: center;
@@ -115,6 +115,11 @@
 			}
 		}
 	}
+	// Fix focus styling width when one row has fewer cells.
+	&.has-single-cell .block-editor-list-view-block-contents:focus::after {
+		right: 0;
+	}
+
 	.block-editor-list-view-block__menu:focus {
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		z-index: 1;
@@ -355,3 +360,9 @@ $block-navigation-max-indent: 8;
 	box-shadow: none;
 }
 
+.block-editor-list-view-placeholder {
+	padding: 0;
+	margin: 0;
+	height: 36px;
+}
+

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

@@ -7,82 +7,23 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { isClientIdSelected } from './utils';
 import { store as blockEditorStore } from '../../store';
 
-const useListViewClientIdsTree = (
-	blocks,
-	selectedClientIds,
-	showOnlyCurrentHierarchy
-) =>
-	useSelect(
+export default function useListViewClientIds( blocks ) {
+	return useSelect(
 		( select ) => {
 			const {
-				getBlockHierarchyRootClientId,
-				__unstableGetClientIdsTree,
-				__unstableGetClientIdWithClientIdsTree,
-			} = select( blockEditorStore );
-
-			if ( blocks ) {
-				return blocks;
-			}
-
-			const isSingleBlockSelected =
-				selectedClientIds && ! Array.isArray( selectedClientIds );
-			if ( ! showOnlyCurrentHierarchy || ! isSingleBlockSelected ) {
-				return __unstableGetClientIdsTree();
-			}
-
-			const rootBlock = __unstableGetClientIdWithClientIdsTree(
-				getBlockHierarchyRootClientId( selectedClientIds )
-			);
-			if ( ! rootBlock ) {
-				return __unstableGetClientIdsTree();
-			}
-
-			const hasHierarchy =
-				! isClientIdSelected( rootBlock.clientId, selectedClientIds ) ||
-				( rootBlock.innerBlocks && rootBlock.innerBlocks.length !== 0 );
-			if ( hasHierarchy ) {
-				return [ rootBlock ];
-			}
-
-			return __unstableGetClientIdsTree();
-		},
-		[ blocks, selectedClientIds, showOnlyCurrentHierarchy ]
-	);
-
-export default function useListViewClientIds(
-	blocks,
-	showOnlyCurrentHierarchy,
-	__experimentalPersistentListViewFeatures
-) {
-	const { selectedClientIds, draggedClientIds } = useSelect(
-		( select ) => {
-			const {
-				getSelectedBlockClientId,
-				getSelectedBlockClientIds,
 				getDraggedBlockClientIds,
+				getSelectedBlockClientIds,
+				__unstableGetClientIdsTree,
 			} = select( blockEditorStore );
 
-			if ( __experimentalPersistentListViewFeatures ) {
-				return {
-					selectedClientIds: getSelectedBlockClientIds(),
-					draggedClientIds: getDraggedBlockClientIds(),
-				};
-			}
-
 			return {
-				selectedClientIds: getSelectedBlockClientId(),
+				selectedClientIds: getSelectedBlockClientIds(),
 				draggedClientIds: getDraggedBlockClientIds(),
+				clientIdsTree: blocks ? blocks : __unstableGetClientIdsTree(),
 			};
 		},
-		[ __experimentalPersistentListViewFeatures ]
-	);
-	const clientIdsTree = useListViewClientIdsTree(
-		blocks,
-		selectedClientIds,
-		showOnlyCurrentHierarchy
+		[ blocks ]
 	);
-	return { clientIdsTree, selectedClientIds, draggedClientIds };
 }

package/src/components/rich-text/embed-handler-picker.native.js

@@ -58,6 +58,7 @@ const EmbedHandlerPicker = forwardRef( ( {}, ref ) => {
 			ref={ pickerRef }
 			options={ pickerOptions }
 			onChange={ onPickerSelect }
+			testID="embed-handler-picker"
 			hideCancelButton
 			leftAlign
 		/>

package/src/components/rich-text/format-edit.js

@@ -1,7 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { getActiveFormat, getActiveObject } from '@wordpress/rich-text';
+import {
+	getActiveFormat,
+	getActiveObject,
+	isCollapsed,
+} from '@wordpress/rich-text';
+/**
+ * External dependencies
+ */
+import { find } from 'lodash';
 
 export default function FormatEdit( {
 	formatTypes,
@@ -18,11 +26,37 @@ export default function FormatEdit( {
 		}
 
 		const activeFormat = getActiveFormat( value, name );
-		const isActive = activeFormat !== undefined;
+		let isActive = activeFormat !== undefined;
 		const activeObject = getActiveObject( value );
 		const isObjectActive =
 			activeObject !== undefined && activeObject.type === name;
 
+		// Edge case: un-collapsed link formats.
+		// If there is a missing link format at either end of the selection
+		// then we shouldn't show the Edit UI because the selection has exceeded
+		// the bounds of the link format.
+		// Also if the format objects don't match then we're dealing with two separate
+		// links so we should not allow the link to be modified over the top.
+		if ( name === 'core/link' && ! isCollapsed( value ) ) {
+			const formats = value.formats;
+
+			const linkFormatAtStart = find( formats[ value.start ], {
+				type: 'core/link',
+			} );
+
+			const linkFormatAtEnd = find( formats[ value.end - 1 ], {
+				type: 'core/link',
+			} );
+
+			if (
+				! linkFormatAtStart ||
+				! linkFormatAtEnd ||
+				linkFormatAtStart !== linkFormatAtEnd
+			) {
+				isActive = false;
+			}
+		}
+
 		return (
 			<Edit
 				key={ name }

package/src/components/rich-text/format-toolbar/index.js

@@ -51,6 +51,9 @@ const FormatToolbar = () => {
 											toggleProps.className,
 											{ 'is-pressed': hasActive }
 										),
+										describedBy: __(
+											'Displays more block tools'
+										),
 									} }
 									controls={ orderBy(
 										fills.map( ( [ { props } ] ) => props ),

package/src/components/url-input/index.js

@@ -60,7 +60,10 @@ class URLInput extends Component {
 
 	componentDidUpdate( prevProps ) {
 		const { showSuggestions, selectedSuggestion } = this.state;
-		const { value } = this.props;
+		const {
+			value,
+			__experimentalShowInitialSuggestions = false,
+		} = this.props;
 
 		// only have to worry about scrolling selected suggestion into view
 		// when already expanded
@@ -84,12 +87,19 @@ class URLInput extends Component {
 			}, 100 );
 		}
 
-		// Only attempt an update on suggestions if the input value has actually changed.
+		// Update suggestions when the value changes
 		if (
 			prevProps.value !== value &&
-			this.shouldShowInitialSuggestions()
+			! this.props.disableSuggestions &&
+			! this.isUpdatingSuggestions
 		) {
-			this.updateSuggestions();
+			if ( value?.length ) {
+				// If the new value is not empty we need to update with suggestions for it
+				this.updateSuggestions( value );
+			} else if ( __experimentalShowInitialSuggestions ) {
+				// If the new value is empty and we can show initial suggestions, then show initial suggestions
+				this.updateSuggestions();
+			}
 		}
 	}