Skip to content

Commit

Permalink
Clean up header toolbar metrics and break points (#56729)
Browse files Browse the repository at this point in the history 
* 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 <joen@automattic.com>
  • Loading branch information
@richtabor @jasmussen
richtabor and jasmussen committed Dec 4, 2023
1 parent c516601 commit 6189c2f
Show file tree
Hide file tree
Showing 7 changed files with 56 additions and 71 deletions.
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/preview-options/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function PreviewOptions( {
label,
showIconLabels,
} ) {
const isMobile = useViewportMatch( 'small', '<' );
const isMobile = useViewportMatch( 'medium', '<' );
if ( isMobile ) return null;

const popoverProps = {
Expand Down
11 changes: 5 additions & 6 deletions packages/edit-post/src/components/header/header-toolbar/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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;
}
}
Expand Down
6 changes: 1 addition & 5 deletions packages/edit-post/src/components/header/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
3 changes: 2 additions & 1 deletion packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,8 @@
color: $gray-800;
min-width: $grid-unit-40;
display: none;
@include break-small() {

@include break-medium() {
display: initial;
}
}
Expand Down
70 changes: 36 additions & 34 deletions packages/edit-site/src/components/header-edit-mode/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
33 changes: 10 additions & 23 deletions packages/edit-site/src/components/header-edit-mode/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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
Expand All @@ -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");
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/interface/src/components/pinned-items/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

1 comment on commit 6189c2f

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 6189c2f.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7092844722
📝 Reported issues:

Please sign in to comment.