Clean up header toolbar metrics and break points (#56729)

* Use medium break point, clean up gaps * post editor * Update gap and margins. * Always use 10 gap * Pinned items to also use 8 * Add check for isLargeViewport on PreviewOptions * Update style.scss * Add back the negative margin right --------- Co-authored-by: jasmussen <[email protected]>
WordPress · Dec 4, 2023 · 6189c2f · 6189c2f · github-actions · Dec 4, 2023
1 parent c516601
commit 6189c2f
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 71 deletions.
diff --git a/packages/block-editor/src/components/preview-options/index.js b/packages/block-editor/src/components/preview-options/index.js
@@ -21,7 +21,7 @@ export default function PreviewOptions( {
 	label,
 	showIconLabels,
 } ) {
-	const isMobile = useViewportMatch( 'small', '<' );
+	const isMobile = useViewportMatch( 'medium', '<' );
 	if ( isMobile ) return null;
 
 	const popoverProps = {

diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss
@@ -82,14 +82,15 @@
 .edit-post-header-toolbar__left {
 	display: inline-flex;
 	align-items: center;
-	padding-left: $grid-unit-10;
+	padding-left: $grid-unit-20;
+	gap: $grid-unit-10;
 
 	// Some plugins add buttons here despite best practices.
 	// Push them a bit rightwards to fit the top toolbar.
 	margin-right: $grid-unit-10;
 
-	@include break-small() {
-		padding-left: $grid-unit-30;
+	@include break-medium() {
+		padding-left: $grid-unit-50 * 0.5;
 	}
 
 	@include break-wide() {
@@ -98,16 +99,14 @@
 }
 
 .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-icon {
-	margin-right: $grid-unit-10;
-	// Special dimensions for this button.
 	min-width: $button-size-compact;
 	width: $button-size-compact;
 	height: $button-size-compact;
 	padding: 0;
 
 	.show-icon-labels & {
 		width: auto;
-		height: 36px;
+		height: $button-size-compact;
 		padding: 0 $grid-unit-10;
 	}
 }

diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
@@ -93,11 +93,7 @@
 		padding-right: $grid-unit-20 - ($grid-unit-15 * 0.5);
 	}
 
-	gap: $grid-unit-05;
-
-	@include break-small() {
-		gap: $grid-unit-10;
-	}
+	gap: $grid-unit-10;
 }
 
 .edit-post-header-preview__grouping-external {

diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
@@ -93,7 +93,8 @@
 	color: $gray-800;
 	min-width: $grid-unit-40;
 	display: none;
-	@include break-small() {
+
+	@include break-medium() {
 		display: initial;
 	}
 }

diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -216,41 +216,43 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 					variants={ toolbarVariants }
 					transition={ toolbarTransition }
 				>
-					<div
-						className={ classnames(
-							'edit-site-header-edit-mode__preview-options',
-							{ 'is-zoomed-out': isZoomedOutView }
-						) }
-					>
-						<PreviewOptions
-							deviceType={ deviceType }
-							setDeviceType={ setPreviewDeviceType }
-							label={ __( 'View' ) }
-							isEnabled={
-								! isFocusMode && hasDefaultEditorCanvasView
-							}
-							showIconLabels={ showIconLabels }
-						>
-							{ ( { onClose } ) => (
-								<MenuGroup>
-									<MenuItem
-										href={ homeUrl }
-										target="_blank"
-										icon={ external }
-										onClick={ onClose }
-									>
-										{ __( 'View site' ) }
-										<VisuallyHidden as="span">
-											{
-												/* translators: accessibility text */
-												__( '(opens in a new tab)' )
-											}
-										</VisuallyHidden>
-									</MenuItem>
-								</MenuGroup>
+					{ isLargeViewport && (
+						<div
+							className={ classnames(
+								'edit-site-header-edit-mode__preview-options',
+								{ 'is-zoomed-out': isZoomedOutView }
 							) }
-						</PreviewOptions>
-					</div>
+						>
+							<PreviewOptions
+								deviceType={ deviceType }
+								setDeviceType={ setPreviewDeviceType }
+								label={ __( 'View' ) }
+								isEnabled={
+									! isFocusMode && hasDefaultEditorCanvasView
+								}
+								showIconLabels={ showIconLabels }
+							>
+								{ ( { onClose } ) => (
+									<MenuGroup>
+										<MenuItem
+											href={ homeUrl }
+											target="_blank"
+											icon={ external }
+											onClick={ onClose }
+										>
+											{ __( 'View site' ) }
+											<VisuallyHidden as="span">
+												{
+													/* translators: accessibility text */
+													__( '(opens in a new tab)' )
+												}
+											</VisuallyHidden>
+										</MenuItem>
+									</MenuGroup>
+								) }
+							</PreviewOptions>
+						</div>
+					) }
 					<SaveButton />
 					{ ! isDistractionFree && (
 						<PinnedItems.Slot scope="core/edit-site" />

diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss
@@ -25,7 +25,9 @@ $header-toolbar-min-width: 335px;
 		// is visible on toolbar buttons.
 		height: 100%;
 		// Allow focus ring to be fully visible on furthest right button.
-		padding-right: 2px;
+		@include break-medium() {
+			padding-right: 2px;
+		}
 	}
 
 	.edit-site-header-edit-mode__end {
@@ -38,7 +40,7 @@ $header-toolbar-min-width: 335px;
 		align-items: center;
 		height: 100%;
 		flex-grow: 1;
-		margin: 0 $grid-unit-10;
+		margin: 0 $grid-unit-20;
 		justify-content: center;
 		// Flex items will, by default, refuse to shrink below a minimum
 		// intrinsic width. In order to shrink this flexbox item, and
@@ -55,23 +57,18 @@ $header-toolbar-min-width: 335px;
 .edit-site-header-edit-mode__toolbar {
 	display: flex;
 	align-items: center;
-	padding-left: $grid-unit-10;
+	padding-left: $grid-unit-20;
+	gap: $grid-unit-10;
 
-	@include break-small() {
-		padding-left: $grid-unit-30;
+	@include break-medium() {
+		padding-left: $grid-unit-50 * 0.5;
 	}
 
 	@include break-wide() {
 		padding-right: $grid-unit-10;
 	}
 
 	.edit-site-header-edit-mode__inserter-toggle {
-		margin-right: $grid-unit-10;
-		min-width: $grid-unit-40;
-		width: $grid-unit-40;
-		height: $grid-unit-40;
-		padding: 0;
-
 		svg {
 			transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
 			@include reduce-motion("transition");
@@ -92,17 +89,8 @@ $header-toolbar-min-width: 335px;
 .edit-site-header-edit-mode__actions {
 	display: inline-flex;
 	align-items: center;
-	padding-right: $grid-unit-05;
-
-	@include break-small () {
-		padding-right: $grid-unit-20 - ($grid-unit-15 * 0.5);
-	}
-
-	gap: $grid-unit-05;
-
-	@include break-small() {
-		gap: $grid-unit-10;
-	}
+	padding-right: $grid-unit-10;
+	gap: $grid-unit-10;
 }
 
 .edit-site-header-edit-mode__preview-options {
@@ -144,7 +132,6 @@ $header-toolbar-min-width: 335px;
 	}
 
 	.edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-icon {
-		margin-right: $grid-unit-10;
 		// Special dimensions for this button.
 		min-width: $button-size-compact;
 		width: $button-size-compact;

diff --git a/packages/interface/src/components/pinned-items/style.scss b/packages/interface/src/components/pinned-items/style.scss
@@ -26,7 +26,7 @@
 	}
 
 	// Gap between pinned items.
-	gap: $grid-unit-05;
+	gap: $grid-unit-10;
 
 	// Account for larger grid from parent container gap.
 	margin-right: -$grid-unit-05;