Try has-expanded-toolbar

WordPress · Apr 25, 2024 · 14de550 · 14de550
1 parent 16ec131
commit 14de550
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 27 deletions.
diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -98,17 +98,12 @@ export default function HeaderEditMode() {
 		<div
 			className={ classnames( 'edit-site-header-edit-mode', {
 				'show-icon-labels': showIconLabels,
+				'show-block-toolbar': ! isBlockToolsCollapsed && showTopToolbar,
 			} ) }
 		>
 			{ hasDefaultEditorCanvasView && (
 				<motion.div
-					className={ classnames(
-						'edit-site-header-edit-mode__start',
-						{
-							'is-opened':
-								! isBlockToolsCollapsed && showTopToolbar,
-						}
-					) }
+					className="edit-site-header-edit-mode__start"
 					variants={ toolbarVariants }
 					transition={ toolbarTransition }
 				>
@@ -126,15 +121,7 @@ export default function HeaderEditMode() {
 			) }
 
 			{ ! isDistractionFree && (
-				<div
-					className={ classnames(
-						'edit-site-header-edit-mode__center',
-						{
-							'is-collapsed':
-								! isBlockToolsCollapsed && showTopToolbar,
-						}
-					) }
-				>
+				<div className="edit-site-header-edit-mode__center">
 					{ ! hasDefaultEditorCanvasView ? (
 						getEditorCanvasContainerTitle( editorCanvasView )
 					) : (

diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss
@@ -10,6 +10,19 @@
 	border-bottom: $border-width solid $gray-200;
 	padding-left: $header-height;
 
+	// When top toolbar is engaged and should expand fully.
+	&.show-block-toolbar {
+
+		.edit-site-header-edit-mode__start,
+		.edit-site-header-edit-mode__end {
+			flex-basis: auto;
+		}
+
+		.edit-site-header-edit-mode__center {
+			display: none;
+		}
+	}
+
 	.edit-site-header-edit-mode__start {
 		display: flex;
 		border: none;
@@ -29,11 +42,6 @@
 			// the toolbar to grow outside of the allowed container space.
 			overflow: hidden;
 		}
-
-		&.is-opened {
-			// When top toolbar is engaged and should expand fully.
-			flex-basis: 100%;
-		}
 	}
 
 	.edit-site-header-edit-mode__end {
@@ -188,12 +196,6 @@
 	}
 }
 
-.has-fixed-toolbar {
-	.edit-site-header-edit-mode__center.is-collapsed {
-		display: none;
-	}
-}
-
 .components-popover.more-menu-dropdown__content {
 	z-index: z-index(".components-popover.more-menu__content");
 }