From db6f1a0ef2c883e95741d8c3c95630b9719bc3e4 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Mon, 18 Nov 2024 13:04:55 +0100
Subject: [PATCH 1/4] DFW: reset zombie state on unmount

---
 .../src/components/collapsible-block-toolbar/index.js     | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/editor/src/components/collapsible-block-toolbar/index.js b/packages/editor/src/components/collapsible-block-toolbar/index.js
index cafbfecb72516..a259e61e2dc2b 100644
--- a/packages/editor/src/components/collapsible-block-toolbar/index.js
+++ b/packages/editor/src/components/collapsible-block-toolbar/index.js
@@ -42,6 +42,14 @@ export default function CollapsibleBlockToolbar( { isCollapsed, onToggle } ) {
 		}
 	}, [ blockSelectionStart, onToggle ] );
 
+	// Reset isCollapsed when the collapsible block toolbar unmounts.
+	useEffect(
+		() => () => {
+			onToggle( true );
+		},
+		[ onToggle ]
+	);
+
 	if ( ! hasBlockToolbar ) {
 		return null;
 	}

From d6d4c2ddb83bc5c9e90bf6dea707f96c0cf3fcec Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Mon, 18 Nov 2024 13:11:40 +0100
Subject: [PATCH 2/4] improve comment

---
 .../editor/src/components/collapsible-block-toolbar/index.js   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/editor/src/components/collapsible-block-toolbar/index.js b/packages/editor/src/components/collapsible-block-toolbar/index.js
index a259e61e2dc2b..d6f1542f68490 100644
--- a/packages/editor/src/components/collapsible-block-toolbar/index.js
+++ b/packages/editor/src/components/collapsible-block-toolbar/index.js
@@ -42,7 +42,8 @@ export default function CollapsibleBlockToolbar( { isCollapsed, onToggle } ) {
 		}
 	}, [ blockSelectionStart, onToggle ] );
 
-	// Reset isCollapsed when the collapsible block toolbar unmounts.
+	// Reset isCollapsed when the collapsible block toolbar unmounts. It is true
+	// by default.
 	useEffect(
 		() => () => {
 			onToggle( true );

From ee499273966ec10717e07939a4550d0a1a012909 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Mon, 18 Nov 2024 13:38:58 +0100
Subject: [PATCH 3/4] use css

---
 .../collapsible-block-toolbar/index.js        | 24 ++++---------------
 .../collapsible-block-toolbar/style.scss      |  3 +++
 .../editor/src/components/header/index.js     | 15 ++----------
 3 files changed, 9 insertions(+), 33 deletions(-)

diff --git a/packages/editor/src/components/collapsible-block-toolbar/index.js b/packages/editor/src/components/collapsible-block-toolbar/index.js
index d6f1542f68490..131364d9417d2 100644
--- a/packages/editor/src/components/collapsible-block-toolbar/index.js
+++ b/packages/editor/src/components/collapsible-block-toolbar/index.js
@@ -11,7 +11,7 @@ import {
 	store as blockEditorStore,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { Button, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { next, previous } from '@wordpress/icons';
@@ -24,7 +24,7 @@ import { unlock } from '../../lock-unlock';
 
 const { useHasBlockToolbar } = unlock( blockEditorPrivateApis );
 
-export default function CollapsibleBlockToolbar( { isCollapsed, onToggle } ) {
+export default function CollapsibleBlockToolbar() {
 	const { blockSelectionStart } = useSelect( ( select ) => {
 		return {
 			blockSelectionStart:
@@ -32,25 +32,10 @@ export default function CollapsibleBlockToolbar( { isCollapsed, onToggle } ) {
 		};
 	}, [] );
 	const hasBlockToolbar = useHasBlockToolbar();
+	const [ isCollapsed, setIsCollapsed ] = useState( false );
 
 	const hasBlockSelection = !! blockSelectionStart;
 
-	useEffect( () => {
-		// If we have a new block selection, show the block tools
-		if ( blockSelectionStart ) {
-			onToggle( false );
-		}
-	}, [ blockSelectionStart, onToggle ] );
-
-	// Reset isCollapsed when the collapsible block toolbar unmounts. It is true
-	// by default.
-	useEffect(
-		() => () => {
-			onToggle( true );
-		},
-		[ onToggle ]
-	);
-
 	if ( ! hasBlockToolbar ) {
 		return null;
 	}
@@ -65,12 +50,11 @@ export default function CollapsibleBlockToolbar( { isCollapsed, onToggle } ) {
 				<BlockToolbar hideDragHandle />
 			</div>
 			<Popover.Slot name="block-toolbar" />
-
 			<Button
 				className="editor-collapsible-block-toolbar__toggle"
 				icon={ isCollapsed ? next : previous }
 				onClick={ () => {
-					onToggle( ! isCollapsed );
+					setIsCollapsed( ! isCollapsed );
 				} }
 				label={
 					isCollapsed
diff --git a/packages/editor/src/components/collapsible-block-toolbar/style.scss b/packages/editor/src/components/collapsible-block-toolbar/style.scss
index f559e1a055cdc..d3ca7a6738fa1 100644
--- a/packages/editor/src/components/collapsible-block-toolbar/style.scss
+++ b/packages/editor/src/components/collapsible-block-toolbar/style.scss
@@ -77,3 +77,6 @@
 	}
 }
 
+.editor-header__toolbar:has(.editor-collapsible-block-toolbar:not(.is-collapsed)) + .editor-header__center {
+	display: none;
+}
diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js
index 2a5629b080caf..830d6b77d46c3 100644
--- a/packages/editor/src/components/header/index.js
+++ b/packages/editor/src/components/header/index.js
@@ -6,7 +6,6 @@ import { useSelect } from '@wordpress/data';
 import { useMediaQuery, useViewportMatch } from '@wordpress/compose';
 import { __unstableMotion as motion } from '@wordpress/components';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { useState } from '@wordpress/element';
 import { PinnedItems } from '@wordpress/interface';
 
 /**
@@ -63,7 +62,6 @@ function Header( {
 		isPublishSidebarOpened,
 		showIconLabels,
 		hasFixedToolbar,
-		hasBlockSelection,
 	} = useSelect( ( select ) => {
 		const { get: getPreference } = select( preferencesStore );
 		const {
@@ -93,12 +91,6 @@ function Header( {
 		PATTERN_POST_TYPE,
 	].includes( postType );
 
-	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
-		useState( true );
-
-	const hasCenter =
-		( ! hasBlockSelection || isBlockToolsCollapsed ) &&
-		! isTooNarrowForDocumentBar;
 	const hasBackButton = useHasBackButton();
 	/*
 	 * The edit-post-header classname is only kept for backward compatability
@@ -124,13 +116,10 @@ function Header( {
 					disableBlockTools={ forceDisableBlockTools || isTextEditor }
 				/>
 				{ hasFixedToolbar && isLargeViewport && (
-					<CollapsibleBlockToolbar
-						isCollapsed={ isBlockToolsCollapsed }
-						onToggle={ setIsBlockToolsCollapsed }
-					/>
+					<CollapsibleBlockToolbar />
 				) }
 			</motion.div>
-			{ hasCenter && (
+			{ ! isTooNarrowForDocumentBar && (
 				<motion.div
 					className="editor-header__center"
 					variants={ toolbarVariations }

From 853165c88d0690b1f319ed10358ad88ca1407a03 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Mon, 18 Nov 2024 16:58:47 +0100
Subject: [PATCH 4/4] Restore effect

---
 .../src/components/collapsible-block-toolbar/index.js    | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/editor/src/components/collapsible-block-toolbar/index.js b/packages/editor/src/components/collapsible-block-toolbar/index.js
index 131364d9417d2..f73775a8e3f67 100644
--- a/packages/editor/src/components/collapsible-block-toolbar/index.js
+++ b/packages/editor/src/components/collapsible-block-toolbar/index.js
@@ -11,7 +11,7 @@ import {
 	store as blockEditorStore,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import { useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import { Button, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { next, previous } from '@wordpress/icons';
@@ -36,6 +36,13 @@ export default function CollapsibleBlockToolbar() {
 
 	const hasBlockSelection = !! blockSelectionStart;
 
+	useEffect( () => {
+		// If we have a new block selection, show the block tools
+		if ( blockSelectionStart ) {
+			setIsCollapsed( false );
+		}
+	}, [ blockSelectionStart ] );
+
 	if ( ! hasBlockToolbar ) {
 		return null;
 	}