Better match existing responsiveness

WordPress · Jun 18, 2024 · 9eaadad · 9eaadad
1 parent dca8335
commit 9eaadad
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js
@@ -60,6 +60,7 @@ function Header( {
 } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
+	const isMobileViewport = useViewportMatch( 'mobile' );
 	const {
 		isTextEditor,
 		isPublishSidebarOpened,
@@ -105,7 +106,7 @@ function Header( {
 	return (
 		<div
 			className={ clsx( 'editor-header edit-post-header', {
-				'has-center': showDocumentBar,
+				'has-center': isMobileViewport && showDocumentBar,
 			} ) }
 		>
 			<motion.div
@@ -124,7 +125,7 @@ function Header( {
 				/>
 				{ blockToolbar }
 			</motion.div>
-			{ ( title || showDocumentBar ) && (
+			{ isMobileViewport && ( title || showDocumentBar ) && (
 				<motion.div
 					className="editor-header__center"
 					variants={ toolbarVariations }

diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss
@@ -3,12 +3,18 @@
 	background: $white;
 	display: grid;
 	grid-auto-flow: row;
-	$width-of-four-buttons-and-gap: $grid-unit-50 * 4;
-	grid-template: auto / $header-height minmax($width-of-four-buttons-and-gap, max-content) minmax(min-content, 1fr) $header-height;
+	grid-template: auto / $header-height minmax(0, max-content) minmax(min-content, 1fr) $header-height;
+	// This class applies when the Document Bar is showing which is from mobile breakpoint unless the
+	// collapsible block toolbar is expanded.
 	&.has-center {
-		grid-template: auto / $header-height minmax(min-content, 1fr) 2fr minmax(min-content, 1fr) $header-height;
+		grid-template: auto / $header-height min-content 1fr min-content $header-height;
+		@include break-medium {
+			grid-template: auto / $header-height minmax(min-content, 1fr) 2fr minmax(min-content, 1fr) $header-height;
+		}
+	}
+	@include break-mobile {
+		gap: $grid-unit-20;
 	}
-	gap: $grid-unit-20;
 	align-items: center;
 	// 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;
@@ -26,6 +32,19 @@
 	// Make narrowing to less than content width possible. Block toolbar will hide overflow and allow scrolling on fixed toolbar.
 	min-width: 0;
 	align-items: center;
+	// Clip the box while leaving room for focus rings.
+	clip-path: inset(-2px);
+
+	& > :first-child {
+		margin-inline: $grid-unit-20 0;
+	}
+	@include break-mobile {
+		clip-path: none;
+
+		& > :first-child {
+			margin-inline: 0;
+		}
+	}
 
 	.table-of-contents {
 		display: none;