From ae9dd169f7e8c614c9997514fb8b824ce4503b8f Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Wed, 20 Mar 2024 21:26:45 +0200
Subject: [PATCH 1/4] don't show movers in zoom out for template parts, try to
 remove movers for immediate siblings blocks

---
 .../src/components/block-mover/index.js       | 43 +++++++++++--------
 .../block-tools/block-selection-button.js     | 43 +++++++++++++++++--
 2 files changed, 66 insertions(+), 20 deletions(-)

diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
index 328160e944e95..4c14d03bba0e5 100644
--- a/packages/block-editor/src/components/block-mover/index.js
+++ b/packages/block-editor/src/components/block-mover/index.js
@@ -19,7 +19,12 @@ import BlockDraggable from '../block-draggable';
 import { BlockMoverUpButton, BlockMoverDownButton } from './button';
 import { store as blockEditorStore } from '../../store';
 
-function BlockMover( { clientIds, hideDragHandle } ) {
+function BlockMover( {
+	clientIds,
+	hideDragHandle,
+	isPrevBlockTemplatePart,
+	isNextBlockTemplatePart,
+} ) {
 	const { canMove, rootClientId, isFirst, isLast, orientation } = useSelect(
 		( select ) => {
 			const {
@@ -80,22 +85,26 @@ function BlockMover( { clientIds, hideDragHandle } ) {
 				</BlockDraggable>
 			) }
 			<div className="block-editor-block-mover__move-button-container">
-				<ToolbarItem>
-					{ ( itemProps ) => (
-						<BlockMoverUpButton
-							clientIds={ clientIds }
-							{ ...itemProps }
-						/>
-					) }
-				</ToolbarItem>
-				<ToolbarItem>
-					{ ( itemProps ) => (
-						<BlockMoverDownButton
-							clientIds={ clientIds }
-							{ ...itemProps }
-						/>
-					) }
-				</ToolbarItem>
+				{ ! isPrevBlockTemplatePart && (
+					<ToolbarItem>
+						{ ( itemProps ) => (
+							<BlockMoverUpButton
+								clientIds={ clientIds }
+								{ ...itemProps }
+							/>
+						) }
+					</ToolbarItem>
+				) }
+				{ ! isNextBlockTemplatePart && (
+					<ToolbarItem>
+						{ ( itemProps ) => (
+							<BlockMoverDownButton
+								clientIds={ clientIds }
+								{ ...itemProps }
+							/>
+						) }
+					</ToolbarItem>
+				) }
 			</div>
 		</ToolbarGroup>
 	);
diff --git a/packages/block-editor/src/components/block-tools/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js
index 0ed295803b612..794e2d31a6970 100644
--- a/packages/block-editor/src/components/block-tools/block-selection-button.js
+++ b/packages/block-editor/src/components/block-tools/block-selection-button.js
@@ -60,6 +60,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				hasBlockMovingClientId,
 				getBlockListSettings,
 				__unstableGetEditorMode,
+				getNextBlockClientId,
 			} = select( blockEditorStore );
 			const { getActiveBlockVariation, getBlockType } =
 				select( blocksStore );
@@ -69,6 +70,26 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 			const orientation =
 				getBlockListSettings( rootClientId )?.orientation;
 			const match = getActiveBlockVariation( name, attributes );
+			const isBlockTemplatePart =
+				blockType?.name === 'core/template-part';
+
+			let isNextBlockTemplatePart = false;
+			const nextClientId = getNextBlockClientId( clientId );
+			if ( nextClientId ) {
+				const { name: nextName } = getBlock( nextClientId );
+				const nextBlockType = getBlockType( nextName );
+				isNextBlockTemplatePart =
+					nextBlockType?.name === 'core/template-part';
+			}
+
+			let isPrevBlockTemplatePart = false;
+			const prevClientId = getNextBlockClientId( clientId );
+			if ( prevClientId ) {
+				const { name: prevName } = getBlock( prevClientId );
+				const prevBlockType = getBlockType( prevName );
+				isPrevBlockTemplatePart =
+					prevBlockType?.name === 'core/template-part';
+			}
 
 			return {
 				blockMovingMode: hasBlockMovingClientId(),
@@ -80,11 +101,22 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 					index + 1,
 					orientation
 				),
+				isBlockTemplatePart,
+				isNextBlockTemplatePart,
+				isPrevBlockTemplatePart,
 			};
 		},
 		[ clientId, rootClientId ]
 	);
-	const { label, icon, blockMovingMode, editorMode } = selected;
+	const {
+		label,
+		icon,
+		blockMovingMode,
+		editorMode,
+		isBlockTemplatePart,
+		isNextBlockTemplatePart,
+		isPrevBlockTemplatePart,
+	} = selected;
 	const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore );
 	const ref = useRef();
 
@@ -252,8 +284,13 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 					<BlockIcon icon={ icon } showColors />
 				</FlexItem>
 				<FlexItem>
-					{ editorMode === 'zoom-out' && (
-						<BlockMover clientIds={ [ clientId ] } hideDragHandle />
+					{ editorMode === 'zoom-out' && ! isBlockTemplatePart && (
+						<BlockMover
+							clientIds={ [ clientId ] }
+							hideDragHandle
+							isPrevBlockTemplatePart={ isPrevBlockTemplatePart }
+							isNextBlockTemplatePart={ isNextBlockTemplatePart }
+						/>
 					) }
 					{ editorMode === 'navigation' && (
 						<BlockDraggable clientIds={ [ clientId ] }>

From bca7a8b1675c309013ae3d234378637a024dc8a0 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Wed, 20 Mar 2024 22:18:35 +0200
Subject: [PATCH 2/4] fix bug because of typo in function name

---
 .../src/components/block-tools/block-selection-button.js     | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js
index 794e2d31a6970..fcd58c80b977b 100644
--- a/packages/block-editor/src/components/block-tools/block-selection-button.js
+++ b/packages/block-editor/src/components/block-tools/block-selection-button.js
@@ -61,6 +61,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				getBlockListSettings,
 				__unstableGetEditorMode,
 				getNextBlockClientId,
+				getPreviousBlockClientId,
 			} = select( blockEditorStore );
 			const { getActiveBlockVariation, getBlockType } =
 				select( blocksStore );
@@ -74,7 +75,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				blockType?.name === 'core/template-part';
 
 			let isNextBlockTemplatePart = false;
-			const nextClientId = getNextBlockClientId( clientId );
+			const nextClientId = getNextBlockClientId();
 			if ( nextClientId ) {
 				const { name: nextName } = getBlock( nextClientId );
 				const nextBlockType = getBlockType( nextName );
@@ -83,7 +84,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 			}
 
 			let isPrevBlockTemplatePart = false;
-			const prevClientId = getNextBlockClientId( clientId );
+			const prevClientId = getPreviousBlockClientId();
 			if ( prevClientId ) {
 				const { name: prevName } = getBlock( prevClientId );
 				const prevBlockType = getBlockType( prevName );

From f50d47d667e05ee17cbd342ff468f77aa0f05b00 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Fri, 22 Mar 2024 19:23:11 +0200
Subject: [PATCH 3/4] don't hide the movers, disable them

---
 .../src/components/block-mover/button.js      |  5 ++-
 .../src/components/block-mover/index.js       | 38 +++++++++----------
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/packages/block-editor/src/components/block-mover/button.js b/packages/block-editor/src/components/block-mover/button.js
index 2b820a481b583..f6e8a8f11abea 100644
--- a/packages/block-editor/src/components/block-mover/button.js
+++ b/packages/block-editor/src/components/block-mover/button.js
@@ -65,6 +65,7 @@ const BlockMoverButton = forwardRef(
 			? clientIds
 			: [ clientIds ];
 		const blocksCount = normalizedClientIds.length;
+		const { disabled } = props;
 
 		const {
 			blockType,
@@ -98,7 +99,9 @@ const BlockMoverButton = forwardRef(
 
 				return {
 					blockType: block ? getBlockType( block.name ) : null,
-					isDisabled: direction === 'up' ? isFirstBlock : isLastBlock,
+					isDisabled:
+						disabled ||
+						( direction === 'up' ? isFirstBlock : isLastBlock ),
 					rootClientId: blockRootClientId,
 					firstIndex: firstBlockIndex,
 					isFirst: isFirstBlock,
diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
index 4c14d03bba0e5..59e0cde3fc05e 100644
--- a/packages/block-editor/src/components/block-mover/index.js
+++ b/packages/block-editor/src/components/block-mover/index.js
@@ -85,26 +85,24 @@ function BlockMover( {
 				</BlockDraggable>
 			) }
 			<div className="block-editor-block-mover__move-button-container">
-				{ ! isPrevBlockTemplatePart && (
-					<ToolbarItem>
-						{ ( itemProps ) => (
-							<BlockMoverUpButton
-								clientIds={ clientIds }
-								{ ...itemProps }
-							/>
-						) }
-					</ToolbarItem>
-				) }
-				{ ! isNextBlockTemplatePart && (
-					<ToolbarItem>
-						{ ( itemProps ) => (
-							<BlockMoverDownButton
-								clientIds={ clientIds }
-								{ ...itemProps }
-							/>
-						) }
-					</ToolbarItem>
-				) }
+				<ToolbarItem>
+					{ ( itemProps ) => (
+						<BlockMoverUpButton
+							disabled={ isPrevBlockTemplatePart }
+							clientIds={ clientIds }
+							{ ...itemProps }
+						/>
+					) }
+				</ToolbarItem>
+				<ToolbarItem>
+					{ ( itemProps ) => (
+						<BlockMoverDownButton
+							disabled={ isNextBlockTemplatePart }
+							clientIds={ clientIds }
+							{ ...itemProps }
+						/>
+					) }
+				</ToolbarItem>
 			</div>
 		</ToolbarGroup>
 	);

From 2e1930a2c3f0a6ace393f1583827c165bfafa84a Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Fri, 22 Mar 2024 19:28:53 +0200
Subject: [PATCH 4/4] rename props to be more generic

---
 packages/block-editor/src/components/block-mover/index.js | 8 ++++----
 .../src/components/block-tools/block-selection-button.js  | 8 ++++++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
index 59e0cde3fc05e..57336d56d4ed9 100644
--- a/packages/block-editor/src/components/block-mover/index.js
+++ b/packages/block-editor/src/components/block-mover/index.js
@@ -22,8 +22,8 @@ import { store as blockEditorStore } from '../../store';
 function BlockMover( {
 	clientIds,
 	hideDragHandle,
-	isPrevBlockTemplatePart,
-	isNextBlockTemplatePart,
+	isBlockMoverUpButtonDisabled,
+	isBlockMoverDownButtonDisabled,
 } ) {
 	const { canMove, rootClientId, isFirst, isLast, orientation } = useSelect(
 		( select ) => {
@@ -88,7 +88,7 @@ function BlockMover( {
 				<ToolbarItem>
 					{ ( itemProps ) => (
 						<BlockMoverUpButton
-							disabled={ isPrevBlockTemplatePart }
+							disabled={ isBlockMoverUpButtonDisabled }
 							clientIds={ clientIds }
 							{ ...itemProps }
 						/>
@@ -97,7 +97,7 @@ function BlockMover( {
 				<ToolbarItem>
 					{ ( itemProps ) => (
 						<BlockMoverDownButton
-							disabled={ isNextBlockTemplatePart }
+							disabled={ isBlockMoverDownButtonDisabled }
 							clientIds={ clientIds }
 							{ ...itemProps }
 						/>
diff --git a/packages/block-editor/src/components/block-tools/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js
index fcd58c80b977b..e8fad9a62a5f1 100644
--- a/packages/block-editor/src/components/block-tools/block-selection-button.js
+++ b/packages/block-editor/src/components/block-tools/block-selection-button.js
@@ -289,8 +289,12 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 						<BlockMover
 							clientIds={ [ clientId ] }
 							hideDragHandle
-							isPrevBlockTemplatePart={ isPrevBlockTemplatePart }
-							isNextBlockTemplatePart={ isNextBlockTemplatePart }
+							isBlockMoverUpButtonDisabled={
+								isPrevBlockTemplatePart
+							}
+							isBlockMoverDownButtonDisabled={
+								isNextBlockTemplatePart
+							}
 						/>
 					) }
 					{ editorMode === 'navigation' && (