Fix for site editor.

WordPress · Apr 8, 2021 · 2be7654 · 2be7654
1 parent 8007a10
commit 2be7654
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 89 deletions.
diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss
@@ -94,10 +94,7 @@
 
 // Block toolbar when fixed to the top of the screen.
 .edit-post-header__block-toolbar {
-	&:empty {
-		display: none;
-	}
-
+	height: $block-toolbar-height;
 	.block-editor-block-toolbar .components-toolbar-group,
 	.block-editor-block-toolbar .components-toolbar {
 		border-top: none;

diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
@@ -1,4 +1,7 @@
+// This CSS is largely copied for the site editor (.edit-site-header).
+// Please keep them in sync.
 .edit-post-header {
+	min-height: $header-height;
 	background: $white;
 	display: flex;
 	justify-content: flex-start;
@@ -11,12 +14,6 @@
 		flex-wrap: nowrap;
 	}
 
-	// Set height of toolbar depending on fixed toolbar toggle.
-	height: $header-height;
-	.has-fixed-toolbar & {
-		height: $header-height + $block-toolbar-height;
-	}
-
 	// Some browsers, most notably IE11, honor an older version of the flexbox spec
 	// which takes absolutely positioned items into account when calculating `space-between`.
 	// https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#abspos-flex-items
@@ -45,6 +42,7 @@
 
 .edit-post-header__toolbar {
 	height: $header-height;
+	justify-content: space-between;
 	border-bottom: $border-width solid $gray-300;
 }
 

diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
@@ -88,8 +88,8 @@ export default function Header( { openEntitiesSavedStates } ) {
 
 	return (
 		<div className="edit-site-header">
-			<div className="edit-site-header_start">
-				<div className="edit-site-header__toolbar">
+			<div className="edit-site-header__toolbar">
+				<div className="edit-site-header__toolbar-actions">
 					<Button
 						ref={ inserterButton }
 						isPrimary
@@ -130,15 +130,8 @@ export default function Header( { openEntitiesSavedStates } ) {
 							/>
 						</>
 					) }
-					{ displayBlockToolbar && (
-						<div className="edit-site-header-toolbar__block-toolbar">
-							<BlockToolbar hideDragHandle />
-						</div>
-					) }
 				</div>
-			</div>
 
-			<div className="edit-site-header_center">
 				{ 'wp_template' === templateType && (
 					<DocumentActions
 						entityTitle={ entityTitle }
@@ -152,15 +145,14 @@ export default function Header( { openEntitiesSavedStates } ) {
 						) }
 					</DocumentActions>
 				) }
+
 				{ 'wp_template_part' === templateType && (
 					<DocumentActions
 						entityTitle={ entityTitle }
 						entityLabel="template part"
 					/>
 				) }
-			</div>
 
-			<div className="edit-site-header_end">
 				<div className="edit-site-header__actions">
 					<PreviewOptions
 						deviceType={ deviceType }
@@ -173,6 +165,12 @@ export default function Header( { openEntitiesSavedStates } ) {
 					<MoreMenu />
 				</div>
 			</div>
+
+			{ displayBlockToolbar && (
+				<div className="edit-site-header-toolbar__block-toolbar">
+					<BlockToolbar hideDragHandle />
+				</div>
+			) }
 		</div>
 	);
 }
diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss
@@ -1,40 +1,26 @@
-$header-toolbar-min-width: 335px;
-
+// This CSS is largely copied for the post editor (.edit-post-header).
+// Please keep them in sync.
 .edit-site-header {
-	align-items: center;
+	min-height: $header-height;
 	background-color: $white;
 	display: flex;
-	height: $header-height;
-	box-sizing: border-box;
-	width: 100%;
-	justify-content: space-between;
+	justify-content: flex-start;
+	flex-direction: column;
+	// The header should never be wider than the viewport, or buttons might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket.
+	max-width: 100vw;
+
+	// Make toolbar sticky on larger breakpoints
+	@include break-zoomed-in {
+		flex-wrap: nowrap;
+	}
 
+	// Add transition for the menu.
 	body.is-fullscreen-mode & {
 		padding-left: 60px;
 		transition: padding-left 20ms linear;
 		transition-delay: 80ms;
 		@include reduce-motion("transition");
 	}
-
-	.edit-site-header_start,
-	.edit-site-header_end {
-		display: flex;
-	}
-
-	.edit-site-header_center {
-		display: flex;
-		align-items: center;
-		height: 100%;
-		// Flex items will, by default, refuse to shrink below a minimum
-		// intrinsic width. In order to shrink this flexbox item, and
-		// subsequently truncate child text, we set an explicit min-width.
-		// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
-		min-width: 0;
-	}
-
-	.edit-site-header_end {
-		justify-content: flex-end;
-	}
 }
 
 // Keeps the document title centered when the sidebar is open
@@ -60,7 +46,24 @@ body.is-navigation-sidebar-open {
 	}
 }
 
+// Make both the default header toolbar and the toggled top toolbar be full-width.
+.edit-site-header__toolbar,
+.edit-site-header__block-toolbar {
+	display: flex;
+	flex-wrap: wrap;
+}
+
 .edit-site-header__toolbar {
+	height: $header-height;
+	justify-content: space-between;
+	border-bottom: $border-width solid $gray-300;
+}
+
+.edit-site-header__block-toolbar {
+	height: $block-toolbar-height;
+}
+
+.edit-site-header__toolbar-actions {
 	display: flex;
 	align-items: center;
 	padding-left: $grid-unit-10;
@@ -165,57 +168,17 @@ body.is-navigation-sidebar-open {
 
 // Block toolbar when fixed to the top of the screen.
 .edit-site-header-toolbar__block-toolbar {
-	// Stack toolbar below Editor Bar.
-	position: absolute;
-	top: $header-height + $border-width;
-	left: 0;
-	right: 0;
-	background: $white;
-	border-bottom: $border-width solid $gray-300;
-
-	&:empty {
-		display: none;
-	}
-
+	height: $block-toolbar-height;
 	.block-editor-block-toolbar .components-toolbar-group,
 	.block-editor-block-toolbar .components-toolbar {
 		border-top: none;
 		border-bottom: none;
 	}
 
-	.is-sidebar-opened & {
-		display: none;
-	}
-
 	@include break-medium {
 		.is-sidebar-opened & {
 			display: block;
 			right: $sidebar-width;
 		}
 	}
-
-	// Move toolbar into top Editor Bar.
-	@include break-wide {
-		padding-left: $grid-unit-10;
-		position: static;
-		left: auto;
-		right: auto;
-		background: none;
-		border-bottom: none;
-
-		.is-sidebar-opened & {
-			right: auto;
-		}
-
-		.block-editor-block-toolbar {
-			border-left: $border-width solid $gray-300;
-		}
-
-		.block-editor-block-toolbar .components-toolbar-group,
-		.block-editor-block-toolbar .components-toolbar {
-			$top-toolbar-padding: ( $header-height - $grid-unit-60 ) / 2;
-			height: $header-height;
-			padding: $top-toolbar-padding 0;
-		}
-	}
 }