@wordpress/block-editor 16.1.0 → 16.2.0

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

@@ -1,35 +1,45 @@
-/**
- * WordPress dependencies
- */
 import { forwardRef } from '@wordpress/element';
+import ListViewBlockSelectButton from './block-select-button';
+import BlockDraggable from '../block-draggable';
+import { useInsertedBlockClientId, useListViewContext } from './context';
 
 /**
- * Internal dependencies
+ * Renders the additional block content for the row of the block that was just
+ * inserted. Reading the inserted block from its own context keeps an insert
+ * from re-rendering the contents of every other row.
+ *
+ * @param {Object} props          Component props.
+ * @param {string} props.clientId The client ID of the block for this row.
  */
-import ListViewBlockSelectButton from './block-select-button';
-import BlockDraggable from '../block-draggable';
-import { useListViewContext } from './context';
+function InsertedBlockContent( { clientId } ) {
+	const { AdditionalBlockContent, setInsertedBlockClientId } =
+		useListViewContext();
+	const insertedBlockClientId = useInsertedBlockClientId();
+
+	if ( ! AdditionalBlockContent || insertedBlockClientId !== clientId ) {
+		return null;
+	}
+
+	return (
+		<AdditionalBlockContent
+			insertedBlockClientId={ insertedBlockClientId }
+			setInsertedBlockClientId={ setInsertedBlockClientId }
+		/>
+	);
+}
 
 const ListViewBlockContents = forwardRef(
 	(
 		{
 			onClick,
 			onToggleExpanded,
-			block,
-			isSelected,
-			position,
-			siblingBlockCount,
-			level,
+			clientId,
 			isExpanded,
 			selectedClientIds,
 			...props
 		},
 		ref
 	) => {
-		const { clientId } = block;
-		const { AdditionalBlockContent, insertedBlock, setInsertedBlock } =
-			useListViewContext();
-
 		// Only include all selected blocks if the currently clicked on block
 		// is one of the selected blocks. This ensures that if a user attempts
 		// to drag a block that isn't part of the selection, they're still able
@@ -40,13 +50,7 @@ const ListViewBlockContents = forwardRef(
 
 		return (
 			<>
-				{ AdditionalBlockContent && (
-					<AdditionalBlockContent
-						block={ block }
-						insertedBlock={ insertedBlock }
-						setInsertedBlock={ setInsertedBlock }
-					/>
-				) }
+				<InsertedBlockContent clientId={ clientId } />
 				<BlockDraggable
 					appendToOwnerDocument
 					clientIds={ draggableClientIds }
@@ -56,13 +60,9 @@ const ListViewBlockContents = forwardRef(
 						<ListViewBlockSelectButton
 							ref={ ref }
 							className="block-editor-list-view-block-contents"
-							block={ block }
+							clientId={ clientId }
 							onClick={ onClick }
 							onToggleExpanded={ onToggleExpanded }
-							isSelected={ isSelected }
-							position={ position }
-							siblingBlockCount={ siblingBlockCount }
-							level={ level }
 							draggable={ draggable }
 							onDragStart={ onDragStart }
 							onDragEnd={ onDragEnd }

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

@@ -1,39 +1,28 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalHStack as HStack,
-	__experimentalTruncate as Truncate,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { __experimentalTruncate as Truncate } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { Icon, lockSmall as lock, pinSmall, unseen } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import { store as blocksStore } from '@wordpress/blocks';
+import {
+	Icon,
+	lockSmall as lock,
+	pinSmall,
+	symbol,
+	unseen,
+} from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
-
-import { Tooltip } from '@wordpress/ui';
-
-/**
- * Internal dependencies
- */
+import { Stack, Tooltip } from '@wordpress/ui';
 import BlockIcon from '../block-icon';
-import useBlockDisplayInformation from '../use-block-display-information';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import ListViewExpander from './expander';
-import { useBlockLock } from '../block-lock';
 import useListViewImages from './use-list-view-images';
+import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-const { Badge: WCBadge } = unlock( componentsPrivateApis );
-
 function ListViewBlockSelectButton(
 	{
 		className,
-		block: { clientId },
+		clientId,
 		onClick,
 		onContextMenu,
 		onMouseDown,
@@ -50,15 +39,52 @@ function ListViewBlockSelectButton(
 	},
 	ref
 ) {
-	const blockInformation = useBlockDisplayInformation( clientId );
 	const blockTitle = useBlockDisplayTitle( {
 		clientId,
 		context: 'list-view',
 	} );
-	const { isLocked } = useBlockLock( clientId );
+	const { icon, anchor, isSticky, isLocked } = useSelect(
+		( select ) => {
+			const {
+				getBlockName,
+				getBlockAttributes,
+				getBlock,
+				isSectionBlock,
+				isLockedBlock,
+			} = unlock( select( blockEditorStore ) );
+			const { getBlockType, getActiveBlockVariation } =
+				select( blocksStore );
+
+			const attributes = getBlockAttributes( clientId );
+			const blockName = getBlockName( clientId );
+
+			// Pattern-sourced section blocks show the pattern icon.
+			// Everything else resolves its variation or block type icon.
+			let blockIcon = symbol;
+			if (
+				! attributes?.metadata?.patternName ||
+				! isSectionBlock( clientId )
+			) {
+				const match = getActiveBlockVariation(
+					blockName,
+					attributes,
+					undefined,
+					getBlock( clientId )?.innerContent
+				);
+				blockIcon = match?.icon || getBlockType( blockName )?.icon;
+			}
+
+			return {
+				icon: blockIcon,
+				anchor: attributes?.anchor,
+				isSticky: attributes?.style?.position?.type === 'sticky',
+				isLocked: isLockedBlock( clientId ),
+			};
+		},
+		[ clientId ]
+	);
 
 	const shouldShowLockIcon = isLocked;
-	const isSticky = blockInformation?.positionType === 'sticky';
 	const images = useListViewImages( { clientId, isExpanded } );
 
 	// The `href` attribute triggers the browser's native HTML drag operations.
@@ -103,25 +129,21 @@ function ListViewBlockSelectButton(
 			aria-expanded={ isExpanded }
 		>
 			<ListViewExpander onClick={ onToggleExpanded } />
-			<BlockIcon
-				icon={ blockInformation?.icon }
-				showColors
-				context="list-view"
-			/>
-			<HStack
-				alignment="center"
+			<BlockIcon icon={ icon } showColors context="list-view" />
+			<Stack
+				align="center"
 				className="block-editor-list-view-block-select-button__label-wrapper"
 				justify="flex-start"
-				spacing={ 1 }
+				gap="xs"
 			>
 				<span className="block-editor-list-view-block-select-button__title">
 					<Truncate ellipsizeMode="auto">{ blockTitle }</Truncate>
 				</span>
-				{ blockInformation?.anchor && (
+				{ !! anchor && (
 					<span className="block-editor-list-view-block-select-button__anchor-wrapper">
-						<WCBadge className="block-editor-list-view-block-select-button__anchor">
-							{ blockInformation.anchor }
-						</WCBadge>
+						<span className="block-editor-list-view-block-select-button__anchor">
+							{ anchor }
+						</span>
 					</span>
 				) }
 				{ isSticky && (
@@ -172,7 +194,7 @@ function ListViewBlockSelectButton(
 						<Icon icon={ lock } />
 					</span>
 				) }
-			</HStack>
+			</Stack>
 		</a>
 	);
 }

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

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import {
-	hasBlockSupport,
-	switchToBlockType,
-	store as blocksStore,
-} from '@wordpress/blocks';
+import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
 import {
 	__experimentalTreeGridCell as TreeGridCell,
 	__experimentalTreeGridItem as TreeGridItem,
@@ -30,10 +19,6 @@ import { BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { isShallowEqual } from '@wordpress/is-shallow-equal';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
 import { speak } from '@wordpress/a11y';
-
-/**
- * Internal dependencies
- */
 import ListViewLeaf from './leaf';
 import useListViewScrollIntoView from './use-list-view-scroll-into-view';
 import {
@@ -48,16 +33,16 @@ import {
 	focusListItem,
 } from './utils';
 import { store as blockEditorStore } from '../../store';
-import useBlockDisplayInformation from '../use-block-display-information';
-import { useBlockLock } from '../block-lock';
-import { useBlockRename, BlockRenameModal } from '../block-rename';
+import { groupBlocks } from '../../utils/group-blocks';
+import { getPositionTypeLabel } from '../use-block-display-information';
+import { BlockRenameModal } from '../block-rename';
 import AriaReferencedText from './aria-referenced-text';
 import { unlock } from '../../lock-unlock';
 import usePasteStyles from '../use-paste-styles';
 import { getBlockVisibilityLabel } from '../block-visibility';
 
 function ListViewBlock( {
-	block: { clientId },
+	clientId,
 	displacement,
 	isAfterDraggedBlocks,
 	isDragged,
@@ -81,7 +66,6 @@ function ListViewBlock( {
 	const [ isHovered, setIsHovered ] = useState( false );
 	const [ settingsAnchorRect, setSettingsAnchorRect ] = useState();
 	const [ isRenameModalOpen, setIsRenameModalOpen ] = useState( false );
-	const { isLocked } = useBlockLock( clientId );
 
 	const isFirstSelectedBlock =
 		isSelected && selectedClientIds[ 0 ] === clientId;
@@ -122,32 +106,36 @@ function ListViewBlock( {
 	} = useSelect( blockEditorStore );
 	const { getGroupingBlockName } = useSelect( blocksStore );
 
-	const blockInformation = useBlockDisplayInformation( clientId );
-
 	const pasteStyles = usePasteStyles();
 
 	const {
-		block,
 		blockName,
+		blockVisibility,
 		blockEditingMode,
 		allowRightClickOverrides,
 		editedSection,
 		viewportSettings,
 		blockVisibilitySetting,
+		positionLabel,
+		isSynced,
+		isLocked,
 	} = useSelect(
 		( select ) => {
 			const {
-				getBlock,
 				getBlockName,
+				getBlockAttributes,
 				getBlockEditingMode: getBlockEditingModeForClientId,
 				getSettings,
 				getEditedContentOnlySection,
+				isSyncedBlock,
+				isLockedBlock,
 			} = unlock( select( blockEditorStore ) );
 			const settings = getSettings();
+			const attributes = getBlockAttributes( clientId );
 
 			return {
-				block: getBlock( clientId ),
 				blockName: getBlockName( clientId ),
+				blockVisibility: attributes?.metadata?.blockVisibility,
 				blockEditingMode: getBlockEditingModeForClientId( clientId ),
 				allowRightClickOverrides: settings.allowRightClickOverrides,
 				editedSection: getEditedContentOnlySection(),
@@ -155,13 +143,17 @@ function ListViewBlock( {
 				blockVisibilitySetting:
 					settings.__experimentalFeatures?.blockVisibility
 						?.allowEditing,
+				positionLabel: getPositionTypeLabel( attributes ),
+				isSynced: isSyncedBlock( clientId ),
+				isLocked: isLockedBlock( clientId ),
 			};
 		},
 		[ clientId ]
 	);
 
 	const isDisabled = blockEditingMode === 'disabled';
-	const { canRename } = useBlockRename( blockName );
+	const canRename =
+		!! blockName && hasBlockSupport( blockName, 'renaming', true );
 
 	const showBlockActions =
 		// When a block hides its toolbar it also hides the block settings menu,
@@ -172,13 +164,10 @@ function ListViewBlock( {
 	const descriptionId = `list-view-block-select-button__description-${ instanceId }`;
 
 	const {
-		expand,
-		collapse,
-		collapseAll,
 		BlockSettingsMenu,
 		listViewInstanceId,
-		expandedState,
-		setInsertedBlock,
+		updateExpansion,
+		setInsertedBlockClientId,
 		treeGridElementRef,
 		rootClientId,
 	} = useListViewContext();
@@ -375,20 +364,15 @@ function ListViewBlock( {
 			event.preventDefault();
 			const { firstBlockClientId } = getBlocksToUpdate();
 			const blockParents = getBlockParents( firstBlockClientId, false );
-			// Collapse all blocks.
-			collapseAll();
-			// Expand all parents of the current block.
-			expand( blockParents );
+			// Collapse all blocks and expand the block's parents.
+			updateExpansion( { type: 'replace', clientIds: blockParents } );
 		} else if ( isMatch( 'core/block-editor/group', event ) ) {
 			const { blocksToUpdate } = getBlocksToUpdate();
 			if ( blocksToUpdate.length > 1 && isGroupable( blocksToUpdate ) ) {
 				event.preventDefault();
 				const blocks = getBlocksByClientId( blocksToUpdate );
 				const groupingBlockName = getGroupingBlockName();
-				const newBlocks = switchToBlockType(
-					blocks,
-					groupingBlockName
-				);
+				const newBlocks = groupBlocks( blocks, groupingBlockName );
 				replaceBlocks( blocksToUpdate, newBlocks );
 				speak( __( 'Selected blocks are grouped.' ) );
 				const newlySelectedBlocks = getSelectedBlockClientIds();
@@ -473,13 +457,15 @@ function ListViewBlock( {
 			// Prevent shift+click from opening link in a new window when toggling.
 			event.preventDefault();
 			event.stopPropagation();
-			if ( isExpanded === true ) {
-				collapse( clientId );
-			} else if ( isExpanded === false ) {
-				expand( clientId );
+			if ( isExpanded === undefined ) {
+				return;
 			}
+			updateExpansion( {
+				type: isExpanded ? 'collapse' : 'expand',
+				clientIds: [ clientId ],
+			} );
 		},
-		[ clientId, expand, collapse, isExpanded ]
+		[ clientId, updateExpansion, isExpanded ]
 	);
 
 	// Allow right-clicking an item in the List View to open up the block settings dropdown.
@@ -549,7 +535,7 @@ function ListViewBlock( {
 	// When switching between rendering modes (such as template preview and content only),
 	// it is possible for a block to temporarily be unavailable. In this case, we should not
 	// render the leaf, to avoid errors further down the tree.
-	if ( ! block ) {
+	if ( ! blockName ) {
 		return null;
 	}
 
@@ -560,13 +546,13 @@ function ListViewBlock( {
 	);
 
 	const blockPropertiesDescription = getBlockPropertiesDescription(
-		blockInformation,
+		positionLabel,
 		isLocked
 	);
 
 	// Determine label based on where block is hidden (not when/current viewport)
 	const blockVisibilityDescription = getBlockVisibilityLabel(
-		block?.attributes?.metadata?.blockVisibility,
+		blockVisibility,
 		viewportSettings
 	);
 
@@ -598,7 +584,7 @@ function ListViewBlock( {
 		'is-synced-branch': isSyncedBranch,
 		'is-dragging': isDragged,
 		'has-single-cell': ! showBlockActions,
-		'is-synced': blockInformation?.isSynced,
+		'is-synced': isSynced,
 		'is-draggable': canMoveBlock && ! isDisabled,
 		'is-displacement-normal': displacement === 'normal',
 		'is-displacement-up': displacement === 'up',
@@ -656,7 +642,7 @@ function ListViewBlock( {
 				{ ( { ref, tabIndex, onFocus } ) => (
 					<div className="block-editor-list-view-block__contents-container">
 						<ListViewBlockContents
-							block={ block }
+							clientId={ clientId }
 							onClick={ selectEditorBlock }
 							onContextMenu={
 								isDisabled ? undefined : onContextMenu
@@ -665,10 +651,6 @@ function ListViewBlock( {
 							onToggleExpanded={
 								isDisabled ? undefined : toggleExpanded
 							}
-							isSelected={ isSelected }
-							position={ position }
-							siblingBlockCount={ siblingBlockCount }
-							level={ level }
 							ref={ ref }
 							tabIndex={ getListViewBlockTabIndex( tabIndex ) }
 							onFocus={ onFocus }
@@ -730,8 +712,8 @@ function ListViewBlock( {
 				>
 					{ ( { ref, tabIndex, onFocus } ) => (
 						<BlockSettingsMenu
+							clientId={ clientId }
 							clientIds={ dropdownClientIds }
-							block={ block }
 							icon={ moreVertical }
 							label={ __( 'Options' ) }
 							popoverProps={ {
@@ -746,9 +728,10 @@ function ListViewBlock( {
 								size: 'small',
 							} }
 							disableOpenOnArrowDown
-							expand={ expand }
-							expandedState={ expandedState }
-							setInsertedBlock={ setInsertedBlock }
+							updateExpansion={ updateExpansion }
+							setInsertedBlockClientId={
+								setInsertedBlockClientId
+							}
 							__experimentalSelectBlock={
 								updateFocusAndSelection
 							}