Top Toolbar: Fix 'collapsed' state synchronization

WordPress · Feb 22, 2024 · 5b32de9 · 5b32de9
1 parent efe7d2e
commit 5b32de9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
@@ -61,7 +61,7 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 	const blockToolbarRef = useRef();
 	const {
 		isTextEditor,
-		hasBlockSelection,
+		blockSelectionStart,
 		hasActiveMetaboxes,
 		hasFixedToolbar,
 		isPublishSidebarOpened,
@@ -73,8 +73,8 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 
 		return {
 			isTextEditor: getEditorMode() === 'text',
-			hasBlockSelection:
-				!! select( blockEditorStore ).getBlockSelectionStart(),
+			blockSelectionStart:
+				select( blockEditorStore ).getBlockSelectionStart(),
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
 			hasHistory:
 				!! select( editorStore ).getEditorSettings()
@@ -88,13 +88,14 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 
 	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
 		useState( true );
+	const hasBlockSelection = !! blockSelectionStart;
 
 	useEffect( () => {
 		// If we have a new block selection, show the block tools
-		if ( hasBlockSelection ) {
+		if ( blockSelectionStart ) {
 			setIsBlockToolsCollapsed( false );
 		}
-	}, [ hasBlockSelection ] );
+	}, [ blockSelectionStart ] );
 
 	return (
 		<div className="edit-post-header">
@@ -121,7 +122,9 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 							className={ classnames(
 								'selected-block-tools-wrapper',
 								{
-									'is-collapsed': isBlockToolsCollapsed,
+									'is-collapsed':
+										isBlockToolsCollapsed ||
+										! hasBlockSelection,
 								}
 							) }
 						>

diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -134,7 +134,9 @@ export default function HeaderEditMode() {
 								className={ classnames(
 									'selected-block-tools-wrapper',
 									{
-										'is-collapsed': isBlockToolsCollapsed,
+										'is-collapsed':
+											isBlockToolsCollapsed ||
+											! hasBlockSelected,
 									}
 								) }
 							>