From 5b1c3284f68f08c73acd505243f4dfafdba8b6ff Mon Sep 17 00:00:00 2001 From: James Koster Date: Fri, 10 Mar 2023 14:59:22 +0000 Subject: [PATCH 1/9] Reduce space around frame --- packages/base-styles/_variables.scss | 2 +- packages/edit-site/src/components/layout/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index 5bf04f5b73474..b577a17ca3808 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -57,7 +57,7 @@ $admin-sidebar-width-big: 190px; $admin-sidebar-width-collapsed: 36px; $modal-min-width: 360px; $spinner-size: 16px; -$canvas-padding: $grid-unit-30; +$canvas-padding: $grid-unit-20; /** diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 2df7c5aa3c482..8426032c5f91a 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -89,7 +89,7 @@ export default function Layout() { } ); const disableMotion = useReducedMotion(); const isMobileViewport = useViewportMatch( 'medium', '<' ); - const canvasPadding = isMobileViewport ? 0 : 24; + const canvasPadding = isMobileViewport ? 0 : 16; const showSidebar = ( isMobileViewport && ! isListPage ) || ( ! isMobileViewport && ( canvasMode === 'view' || ! isEditorPage ) ); From 3d16083ab5032da854241fde4187b2ff21143f8d Mon Sep 17 00:00:00 2001 From: James Koster Date: Fri, 10 Mar 2023 15:05:29 +0000 Subject: [PATCH 2/9] Sidebar base padding --- packages/edit-site/src/components/sidebar/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss index fb8bc46d41878..ee3522e66f0e5 100644 --- a/packages/edit-site/src/components/sidebar/style.scss +++ b/packages/edit-site/src/components/sidebar/style.scss @@ -18,7 +18,7 @@ overflow-x: unset; } -.edit-site-sidebar__content > div { +.edit-site-sidebar__content > .components-navigator-screen { // This matches the logo padding - padding: 0 $grid-unit-15; + padding: 0 $grid-unit-20; } From d192a837a3aedd241e664ee035bf15a031c5e41e Mon Sep 17 00:00:00 2001 From: James Koster Date: Fri, 10 Mar 2023 15:08:16 +0000 Subject: [PATCH 3/9] site hub dimensions --- packages/edit-site/src/components/layout/style.scss | 2 +- packages/edit-site/src/components/site-hub/style.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index eea527d18904f..0b5a965d64152 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -11,7 +11,7 @@ top: 0; left: 0; width: calc(100vw - #{$canvas-padding * 2}); - height: $header-height; + height: $header-height + 4px; z-index: z-index(".edit-site-layout__hub"); .edit-site-layout.is-full-canvas.is-edit-mode & { diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss index 885c24e38b788..f939677b01e40 100644 --- a/packages/edit-site/src/components/site-hub/style.scss +++ b/packages/edit-site/src/components/site-hub/style.scss @@ -10,8 +10,8 @@ } .edit-site-site-hub__view-mode-toggle-container { - height: $header-height; - width: $header-height; + height: $header-height + 4px; + width: $header-height + 4px; flex-shrink: 0; background: $gray-900; } From f8a8b4b438db96940455e1bfe09e29c59bd33602 Mon Sep 17 00:00:00 2001 From: James Koster Date: Fri, 10 Mar 2023 15:14:00 +0000 Subject: [PATCH 4/9] Sidebar internal spacing --- .../edit-site/src/components/sidebar-navigation-screen/index.js | 2 +- .../src/components/sidebar-navigation-screen/style.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js index 6f4115c40a269..03788520ae0ee 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen/index.js @@ -34,7 +34,7 @@ export default function SidebarNavigationScreen( { return ( diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index cc5b7a159ac07..dc6c8e464caf9 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -6,7 +6,7 @@ } .edit-site-sidebar-navigation-screen__content { - margin: 0 $grid-unit-20 $grid-unit-20 $button-size; + margin: 0 0 $grid-unit-20 0; color: $gray-600; } From c1fa7ad2518c66006a4f8d4d153307e08e06ac91 Mon Sep 17 00:00:00 2001 From: James Koster Date: Fri, 10 Mar 2023 15:18:30 +0000 Subject: [PATCH 5/9] Menu item metrics --- .../src/components/sidebar-navigation-item/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-item/style.scss b/packages/edit-site/src/components/sidebar-navigation-item/style.scss index 04c11aa57f5a1..6d8a9e5e0af77 100644 --- a/packages/edit-site/src/components/sidebar-navigation-item/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-item/style.scss @@ -1,6 +1,7 @@ .edit-site-sidebar-navigation-item.components-item { color: $gray-600; - margin: 0 $grid-unit-05; + padding: $grid-unit-10 $grid-unit-20; + min-height: $grid-unit-50; &:hover, &:focus, From 11b0cbdb4f832af9f5ab845bc23c9921ebdb91ca Mon Sep 17 00:00:00 2001 From: James Koster Date: Fri, 10 Mar 2023 15:36:19 +0000 Subject: [PATCH 6/9] Text --- packages/components/src/ui/utils/font-size.ts | 2 +- .../style.scss | 2 +- .../src/components/sidebar-navigation-screen/index.js | 11 +++++++++-- .../components/sidebar-navigation-screen/style.scss | 6 +----- 4 files changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/components/src/ui/utils/font-size.ts b/packages/components/src/ui/utils/font-size.ts index 1393426991c60..995693dba9dac 100644 --- a/packages/components/src/ui/utils/font-size.ts +++ b/packages/components/src/ui/utils/font-size.ts @@ -29,7 +29,7 @@ export const PRESET_FONT_SIZES = { caption: 10, footnote: 11, largeTitle: 28, - subheadline: 12, + subheadline: 16, title: 20, }; diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss index 245f9d867bd7e..5baf04c02a9ed 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss @@ -1,5 +1,5 @@ .edit-site-sidebar-navigation-screen__description { - margin: 0 0 $grid-unit-40 $grid-unit-20; + margin: 0 0 $grid-unit-30 $grid-unit-20; } .edit-site-sidebar-navigation-screen-navigation-menus__placeholder { diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js index 03788520ae0ee..6a5b90a2d4673 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen/index.js @@ -5,6 +5,7 @@ import { __experimentalHStack as HStack, __experimentalVStack as VStack, __experimentalNavigatorToParentButton as NavigatorToParentButton, + __experimentalText as Text, } from '@wordpress/components'; import { isRTL, __ } from '@wordpress/i18n'; import { chevronRight, chevronLeft } from '@wordpress/icons'; @@ -52,9 +53,15 @@ export default function SidebarNavigationScreen( { label={ __( 'Dashboard' ) } /> ) } -

+ { title } -

+ { actions } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index dc6c8e464caf9..442b2feb7b5da 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -29,17 +29,13 @@ position: sticky; top: 0; background: $gray-900; - padding-top: $grid-unit-60 + $header-height; + padding-top: $grid-unit-60 + $header-height + 4px; box-shadow: 0 $grid-unit-10 $grid-unit-20 $gray-900; margin-bottom: $grid-unit-10; padding-bottom: $grid-unit-10; - padding-right: $grid-unit-20; } .edit-site-sidebar-navigation-screen__title { - font-size: calc(1.56 * 13px); - line-height: normal; - font-weight: 500; flex-grow: 1; color: $white; margin: 0; From c44f07fc05096c35ae5bf0e81a845a9d73d321d5 Mon Sep 17 00:00:00 2001 From: James Koster Date: Mon, 13 Mar 2023 10:47:50 +0000 Subject: [PATCH 7/9] Tweak more metrics --- packages/edit-site/src/components/layout/style.scss | 6 ++++++ .../edit-site/src/components/sidebar-button/style.scss | 8 ++++++-- .../sidebar-navigation-screen-navigation-menus/style.scss | 2 +- packages/edit-site/src/components/sidebar/style.scss | 1 + 4 files changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 0b5a965d64152..b267e533bba70 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -17,6 +17,12 @@ .edit-site-layout.is-full-canvas.is-edit-mode & { width: auto; padding-right: 0; + height: $header-height; + + .edit-site-site-hub__view-mode-toggle-container { + height: $header-height; + width: $header-height; + } } @include break-medium { diff --git a/packages/edit-site/src/components/sidebar-button/style.scss b/packages/edit-site/src/components/sidebar-button/style.scss index 8388aae266e3e..51ace6adc1d65 100644 --- a/packages/edit-site/src/components/sidebar-button/style.scss +++ b/packages/edit-site/src/components/sidebar-button/style.scss @@ -1,6 +1,10 @@ -.edit-site-sidebar-button { - color: $gray-200; +.edit-site-sidebar-button.components-button.has-icon { + color: $white; flex-shrink: 0; + min-width: $grid-unit-40; + width: $grid-unit-40; + height: $grid-unit-40; + padding: $grid-unit-05; // Focus (resets default button focus and use focus-visible). &:focus:not(:disabled) { diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss index 5baf04c02a9ed..5331cba3dae86 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss @@ -1,5 +1,5 @@ .edit-site-sidebar-navigation-screen__description { - margin: 0 0 $grid-unit-30 $grid-unit-20; + margin: 0 $grid-unit-20 $grid-unit-30 $grid-unit-20; } .edit-site-sidebar-navigation-screen-navigation-menus__placeholder { diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss index ee3522e66f0e5..d425013c2e4c0 100644 --- a/packages/edit-site/src/components/sidebar/style.scss +++ b/packages/edit-site/src/components/sidebar/style.scss @@ -4,6 +4,7 @@ .components-navigator-screen { @include custom-scrollbars-on-hover; + scrollbar-gutter: auto; } } From 3db05c7fe9204a8e38b8079782cc59a8f3ad62de Mon Sep 17 00:00:00 2001 From: James Koster Date: Mon, 13 Mar 2023 13:00:20 +0000 Subject: [PATCH 8/9] More layout adjustments --- .../src/components/sidebar-navigation-item/style.scss | 1 + packages/edit-site/src/components/site-hub/style.scss | 4 ---- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-item/style.scss b/packages/edit-site/src/components/sidebar-navigation-item/style.scss index 6d8a9e5e0af77..b130c3bf73875 100644 --- a/packages/edit-site/src/components/sidebar-navigation-item/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-item/style.scss @@ -2,6 +2,7 @@ color: $gray-600; padding: $grid-unit-10 $grid-unit-20; min-height: $grid-unit-50; + border: 0; &:hover, &:focus, diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss index f939677b01e40..9b3c0e371f770 100644 --- a/packages/edit-site/src/components/site-hub/style.scss +++ b/packages/edit-site/src/components/site-hub/style.scss @@ -26,7 +26,3 @@ white-space: nowrap; overflow: hidden; } - -.edit-site-site-hub__site-title { - margin-left: $grid-unit-05; -} From d2c73136173692d81ef5b1b74280552ebf5fab0c Mon Sep 17 00:00:00 2001 From: James Koster Date: Wed, 15 Mar 2023 11:25:03 +0000 Subject: [PATCH 9/9] Increase panel title spacing --- .../edit-site/src/components/sidebar-navigation-screen/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js index 6a5b90a2d4673..2dac18b271703 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen/index.js @@ -35,7 +35,7 @@ export default function SidebarNavigationScreen( { return (