ListView: reduce subs per item

WordPress · Feb 1, 2024 · dd525ea · dd525ea
1 parent c3358a5
commit dd525ea
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 33 deletions.
diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
@@ -78,15 +78,13 @@ function ParentSelectorMenuItem( { parentClientId, parentBlockType } ) {
 }
 
 export function BlockSettingsDropdown( {
-	block,
+	currentClientId,
 	clientIds,
 	__experimentalSelectBlock,
 	children,
 	__unstableDisplayLocation,
 	...props
 } ) {
-	// Get the client id of the current block for this menu, if one is set.
-	const currentClientId = block?.clientId;
 	const blockClientIds = Array.isArray( clientIds )
 		? clientIds
 		: [ clientIds ];

diff --git a/packages/block-editor/src/components/list-view/block-contents.js b/packages/block-editor/src/components/list-view/block-contents.js
@@ -22,7 +22,7 @@ const ListViewBlockContents = forwardRef(
 		{
 			onClick,
 			onToggleExpanded,
-			block,
+			clientId,
 			isSelected,
 			position,
 			siblingBlockCount,
@@ -33,8 +33,6 @@ const ListViewBlockContents = forwardRef(
 		},
 		ref
 	) => {
-		const { clientId } = block;
-
 		const { blockMovingClientId, selectedBlockInBlockEditor } = useSelect(
 			( select ) => {
 				const { hasBlockMovingClientId, getSelectedBlockClientId } =
@@ -69,7 +67,7 @@ const ListViewBlockContents = forwardRef(
 			<>
 				{ AdditionalBlockContent && (
 					<AdditionalBlockContent
-						block={ block }
+						clientId={ clientId }
 						insertedBlock={ insertedBlock }
 						setInsertedBlock={ setInsertedBlock }
 					/>
@@ -83,7 +81,7 @@ const ListViewBlockContents = forwardRef(
 						<ListViewBlockSelectButton
 							ref={ ref }
 							className={ className }
-							block={ block }
+							clientId={ clientId }
 							onClick={ onClick }
 							onToggleExpanded={ onToggleExpanded }
 							isSelected={ isSelected }

diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -36,7 +36,7 @@ import { useListViewContext } from './context';
 function ListViewBlockSelectButton(
 	{
 		className,
-		block: { clientId },
+		clientId,
 		onClick,
 		onContextMenu,
 		onMouseDown,

diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
@@ -6,7 +6,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { hasBlockSupport } from '@wordpress/blocks';
+import {
+	store as blocksStore,
+	isReusableBlock,
+	isTemplatePart,
+	hasBlockSupport,
+} from '@wordpress/blocks';
 import {
 	__experimentalTreeGridCell as TreeGridCell,
 	__experimentalTreeGridItem as TreeGridItem,
@@ -37,8 +42,6 @@ import ListViewBlockContents from './block-contents';
 import { useListViewContext } from './context';
 import { getBlockPositionDescription, focusListItem } from './utils';
 import { store as blockEditorStore } from '../../store';
-import useBlockDisplayInformation from '../use-block-display-information';
-import { useBlockLock } from '../block-lock';
 import AriaReferencedText from './aria-referenced-text';
 
 function ListViewBlock( {
@@ -66,8 +69,6 @@ function ListViewBlock( {
 	const [ isHovered, setIsHovered ] = useState( false );
 	const [ settingsAnchorRect, setSettingsAnchorRect ] = useState();
 
-	const { isLocked, canEdit, canMove } = useBlockLock( clientId );
-
 	const isFirstSelectedBlock =
 		isSelected && selectedClientIds[ 0 ] === clientId;
 	const isLastSelectedBlock =
@@ -76,28 +77,61 @@ function ListViewBlock( {
 
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
-	const blockInformation = useBlockDisplayInformation( clientId );
-	const blockTitle =
-		blockInformation?.name || blockInformation?.title || __( 'Untitled' );
-
-	const { block, blockName, blockEditingMode } = useSelect(
+	const selected = useSelect(
 		( select ) => {
-			const { getBlock, getBlockName, getBlockEditingMode } =
-				select( blockEditorStore );
+			const {
+				getBlockName,
+				getBlockEditingMode,
+				getSettings,
+				getBlockAttributes,
+				__experimentalGetReusableBlockTitle,
+				getBlockRootClientId,
+				canEditBlock,
+				canMoveBlock,
+				canRemoveBlock,
+			} = select( blockEditorStore );
+			const { getBlockType, getActiveBlockVariation } =
+				select( blocksStore );
+			const attributes = getBlockAttributes( clientId );
+			const blockName = getBlockName( clientId );
+			const blockType = getBlockType( blockName );
+			const isReusable = isReusableBlock( blockType );
+			const resusableTitle = isReusable
+				? __experimentalGetReusableBlockTitle( attributes.ref )
+				: undefined;
+			const rootClientId = getBlockRootClientId( clientId );
+			const canEdit = canEditBlock( clientId );
+			const canMove = canMoveBlock( clientId, rootClientId );
+			const canRemove = canRemoveBlock( clientId, rootClientId );
 
 			return {
-				block: getBlock( clientId ),
-				blockName: getBlockName( clientId ),
+				blockName,
 				blockEditingMode: getBlockEditingMode( clientId ),
+				allowRightClickOverrides:
+					getSettings().allowRightClickOverrides,
+				blockTitle:
+					attributes?.metadata?.name ||
+					getActiveBlockVariation( blockName, attributes )?.title ||
+					resusableTitle ||
+					blockType.title,
+				isSynced: isReusable || isTemplatePart( blockType ),
+				isLocked: ! canEdit || ! canMove || ! canRemove,
+				canEdit,
+				canMove,
 			};
 		},
 		[ clientId ]
 	);
-	const allowRightClickOverrides = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getSettings().allowRightClickOverrides,
-		[]
-	);
+	const {
+		blockName,
+		blockEditingMode,
+		allowRightClickOverrides,
+		blockTitle = __( 'Untitled' ),
+		isSynced,
+		isLocked,
+		canEdit,
+		canMove,
+	} = selected;
 
 	const showBlockActions =
 		// When a block hides its toolbar it also hides the block settings menu,
@@ -288,7 +322,7 @@ function ListViewBlock( {
 		'is-synced-branch': isSyncedBranch,
 		'is-dragging': isDragged,
 		'has-single-cell': ! showBlockActions,
-		'is-synced': blockInformation?.isSynced,
+		'is-synced': isSynced,
 		'is-draggable': canMove,
 		'is-displacement-normal': displacement === 'normal',
 		'is-displacement-up': displacement === 'up',
@@ -336,7 +370,7 @@ function ListViewBlock( {
 				{ ( { ref, tabIndex, onFocus } ) => (
 					<div className="block-editor-list-view-block__contents-container">
 						<ListViewBlockContents
-							block={ block }
+							clientId={ clientId }
 							onClick={ selectEditorBlock }
 							onContextMenu={ onContextMenu }
 							onMouseDown={ onMouseDown }
@@ -403,7 +437,7 @@ function ListViewBlock( {
 					{ ( { ref, tabIndex, onFocus } ) => (
 						<BlockSettingsMenu
 							clientIds={ dropdownClientIds }
-							block={ block }
+							currentClientId={ clientId }
 							icon={ moreVertical }
 							label={ settingsAriaLabel }
 							popoverProps={ {

diff --git a/packages/block-library/src/navigation/edit/menu-inspector-controls.js b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
@@ -34,13 +34,17 @@ const BLOCKS_WITH_LINK_UI_SUPPORT = [
 ];
 const { PrivateListView } = unlock( blockEditorPrivateApis );
 
-function AdditionalBlockContent( { block, insertedBlock, setInsertedBlock } ) {
+function AdditionalBlockContent( {
+	clientId,
+	insertedBlock,
+	setInsertedBlock,
+} ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
 	const supportsLinkControls = BLOCKS_WITH_LINK_UI_SUPPORT?.includes(
 		insertedBlock?.name
 	);
-	const blockWasJustInserted = insertedBlock?.clientId === block.clientId;
+	const blockWasJustInserted = insertedBlock?.clientId === clientId;
 	const showLinkControls = supportsLinkControls && blockWasJustInserted;
 
 	if ( ! showLinkControls ) {