From 7773280d0dea72d54e925d20c91dca515ea39f35 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 2 May 2024 11:46:05 -0400 Subject: [PATCH 01/19] Use compact buttons, proper gap --- .../components/sidebar-edit-mode/global-styles-sidebar.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js index f339b347847416..3254f594632c4d 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js @@ -136,7 +136,10 @@ export default function GlobalStylesSidebar() { closeLabel={ __( 'Close Styles' ) } panelClassName="edit-site-global-styles-sidebar__panel" header={ - +

{ __( 'Styles' ) } @@ -151,6 +154,7 @@ export default function GlobalStylesSidebar() { } disabled={ shouldClearCanvasContainerView } onClick={ toggleStyleBook } + size="compact" /> @@ -162,6 +166,7 @@ export default function GlobalStylesSidebar() { isPressed={ isRevisionsOpened || isRevisionsStyleBookOpened } + size="compact" /> From 26be3d97f14bb9c7e3a92009272d16a4c1cd4018 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 2 May 2024 11:46:36 -0400 Subject: [PATCH 02/19] Reuse existing class for heading --- .../src/components/sidebar-edit-mode/global-styles-sidebar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js index 3254f594632c4d..fd9a164dfddc62 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js @@ -141,7 +141,7 @@ export default function GlobalStylesSidebar() { gap={ 1 } > -

+

{ __( 'Styles' ) }

From d118258c28f14775acf17ef6e67e6065e7d54f66 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 2 May 2024 11:47:33 -0400 Subject: [PATCH 03/19] Remove unused class --- .../edit-site/src/components/sidebar-edit-mode/style.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-edit-mode/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/style.scss index 186908c88a54b2..1eb445ecd55661 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/style.scss +++ b/packages/edit-site/src/components/sidebar-edit-mode/style.scss @@ -34,10 +34,6 @@ } } -.edit-site-global-styles-sidebar .edit-site-global-styles-sidebar__header-title { - margin: 0; -} - .edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon { margin-left: 0; } From fc87dcc572dc7ddf1b03271d3d01cb9f7faf6fed Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 2 May 2024 11:49:27 -0400 Subject: [PATCH 04/19] Remove unnecessary negative margin top --- packages/edit-site/src/components/sidebar-edit-mode/style.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-edit-mode/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/style.scss index 1eb445ecd55661..881887ebdc22d7 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/style.scss +++ b/packages/edit-site/src/components/sidebar-edit-mode/style.scss @@ -100,6 +100,3 @@ } } -.edit-site-sidebar__panel { - margin-top: -1px; -} From 0acb116fb9f1491f6aad01aed53bb5ed92ea7b61 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 2 May 2024 11:51:10 -0400 Subject: [PATCH 05/19] Use small variant for close in complementary area --- .../interface/src/components/complementary-area-toggle/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/interface/src/components/complementary-area-toggle/index.js b/packages/interface/src/components/complementary-area-toggle/index.js index b6690b7df5fc5d..c5179e0ff718d6 100644 --- a/packages/interface/src/components/complementary-area-toggle/index.js +++ b/packages/interface/src/components/complementary-area-toggle/index.js @@ -39,6 +39,7 @@ function ComplementaryAreaToggle( { enableComplementaryArea( scope, identifier ); } } } + size="small" { ...props } /> ); From 2d1ec05da5752038e8826012c6170420d41a95bc Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 2 May 2024 11:53:28 -0400 Subject: [PATCH 06/19] Remove unused styles --- .../edit-site/src/components/sidebar-edit-mode/style.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-edit-mode/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/style.scss index 881887ebdc22d7..e453208e3c2c5e 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/style.scss +++ b/packages/edit-site/src/components/sidebar-edit-mode/style.scss @@ -34,14 +34,6 @@ } } -.edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon { - margin-left: 0; -} - -.edit-site-global-styles-sidebar__reset-button.components-button { - margin-left: auto; -} - .edit-site-global-styles-sidebar .components-navigation__menu-title-heading { font-size: $default-font-size * 1.2; font-weight: 500; From e2c882338e573556ac24fcb662c8e33173d6cec1 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 2 May 2024 11:54:11 -0400 Subject: [PATCH 07/19] Emulate 'compact' button size, as Dropdown does not support it --- .../src/components/complementary-area-header/style.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/interface/src/components/complementary-area-header/style.scss b/packages/interface/src/components/complementary-area-header/style.scss index 20fbe881d5694c..a7a8187de3256f 100644 --- a/packages/interface/src/components/complementary-area-header/style.scss +++ b/packages/interface/src/components/complementary-area-header/style.scss @@ -35,6 +35,13 @@ display: flex; } } + + // Emulate 'compact' button size, as Dropdown does not support compact yet. + .components-dropdown > .components-button.has-icon { + height: $grid-unit-40; + min-width: $grid-unit-40; + padding: $grid-unit-05; + } } // This overrides the negative margins between two consecutives panels. From 2df7de68dadb03d1ed292d286503d07138bda1c7 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 2 May 2024 11:56:37 -0400 Subject: [PATCH 08/19] Reduce padding right to account for close buttons holistically --- .../src/components/complementary-area-header/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/interface/src/components/complementary-area-header/style.scss b/packages/interface/src/components/complementary-area-header/style.scss index a7a8187de3256f..3efed245948840 100644 --- a/packages/interface/src/components/complementary-area-header/style.scss +++ b/packages/interface/src/components/complementary-area-header/style.scss @@ -17,7 +17,7 @@ .interface-complementary-area-header { background: $white; - padding-right: $grid-unit-05; + padding-right: $grid-unit-15; // Reduced padding to account for close buttons. .interface-complementary-area-header__title { margin: 0; From 1107ee50c2a5735e6a87f102d9bbbd5a9040f416 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 2 May 2024 11:56:48 -0400 Subject: [PATCH 09/19] Remove targeted padding right --- .../src/components/sidebar-edit-mode/settings-header/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss index d74432451e1d4c..c6157519526162 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss +++ b/packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss @@ -1,6 +1,5 @@ .components-panel__header.edit-site-sidebar-edit-mode__panel-tabs { padding-left: 0; - padding-right: $grid-unit-20; .components-button.has-icon { padding: 0; From f3daf21843d4d8c73ac6686e4e9401103c21ac18 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 2 May 2024 11:57:17 -0400 Subject: [PATCH 10/19] Add default gap between controls in complementary header --- .../src/components/complementary-area-header/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/interface/src/components/complementary-area-header/style.scss b/packages/interface/src/components/complementary-area-header/style.scss index 3efed245948840..702b19f6b9a5f2 100644 --- a/packages/interface/src/components/complementary-area-header/style.scss +++ b/packages/interface/src/components/complementary-area-header/style.scss @@ -18,6 +18,7 @@ .interface-complementary-area-header { background: $white; padding-right: $grid-unit-15; // Reduced padding to account for close buttons. + gap: $grid-unit-10; // Always ensure space between contents and close. .interface-complementary-area-header__title { margin: 0; From ceaab0402402de6c8157afb7b987ecf0b13820ff Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 2 May 2024 11:58:32 -0400 Subject: [PATCH 11/19] Remove negative margin override, no longer necessary --- .../src/components/complementary-area-header/style.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/interface/src/components/complementary-area-header/style.scss b/packages/interface/src/components/complementary-area-header/style.scss index 702b19f6b9a5f2..8cd2a5523ce97f 100644 --- a/packages/interface/src/components/complementary-area-header/style.scss +++ b/packages/interface/src/components/complementary-area-header/style.scss @@ -44,11 +44,3 @@ padding: $grid-unit-05; } } - -// This overrides the negative margins between two consecutives panels. -// since the first panel is hidden. -.components-panel__header + .interface-complementary-area-header { - @include break-medium() { - margin-top: 0; - } -} From b958b1c57f9ce48a4268e2fa2804777de603a195 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 2 May 2024 12:02:52 -0400 Subject: [PATCH 12/19] Only make the close icon small --- .../interface/src/components/complementary-area-toggle/index.js | 1 - packages/interface/src/components/complementary-area/index.js | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/interface/src/components/complementary-area-toggle/index.js b/packages/interface/src/components/complementary-area-toggle/index.js index c5179e0ff718d6..b6690b7df5fc5d 100644 --- a/packages/interface/src/components/complementary-area-toggle/index.js +++ b/packages/interface/src/components/complementary-area-toggle/index.js @@ -39,7 +39,6 @@ function ComplementaryAreaToggle( { enableComplementaryArea( scope, identifier ); } } } - size="small" { ...props } /> ); diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js index ca80ae75e2e2f1..681116b9fb0aea 100644 --- a/packages/interface/src/components/complementary-area/index.js +++ b/packages/interface/src/components/complementary-area/index.js @@ -302,6 +302,7 @@ function ComplementaryArea( { smallScreenTitle={ smallScreenTitle } toggleButtonProps={ { label: closeLabel, + size: 'small', shortcut: toggleShortcut, scope, identifier, From c3e7460bfb43f43a3b70027193ca1c07493a614b Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 2 May 2024 12:03:34 -0400 Subject: [PATCH 13/19] Use same font weight as tabs for complementary area --- packages/interface/src/components/complementary-area/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/interface/src/components/complementary-area/style.scss b/packages/interface/src/components/complementary-area/style.scss index 143911c43ecc53..7cbad41fa9118d 100644 --- a/packages/interface/src/components/complementary-area/style.scss +++ b/packages/interface/src/components/complementary-area/style.scss @@ -39,6 +39,7 @@ h2 { font-size: $default-font-size; + font-weight: 500; color: $gray-900; margin-bottom: 1.5em; } From 26c0944f0638647a078331bb07635393cc657d5c Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 2 May 2024 12:05:56 -0400 Subject: [PATCH 14/19] Use compact pin/unpin button --- packages/interface/src/components/complementary-area/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js index 681116b9fb0aea..b37b8b7da33d02 100644 --- a/packages/interface/src/components/complementary-area/index.js +++ b/packages/interface/src/components/complementary-area/index.js @@ -330,6 +330,7 @@ function ComplementaryArea( { } isPressed={ isPinned } aria-expanded={ isPinned } + size="compact" /> ) } From 97f637720fbf19d97c7223331f61219555ff8eab Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Tue, 7 May 2024 14:53:36 +0900 Subject: [PATCH 15/19] Revert "Reuse existing class for heading" This reverts commit e231cb5fe52803a919cedb031a9773a5f7ddd6b9. --- .../src/components/sidebar-edit-mode/global-styles-sidebar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js index fd9a164dfddc62..3254f594632c4d 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js @@ -141,7 +141,7 @@ export default function GlobalStylesSidebar() { gap={ 1 } > -

+

{ __( 'Styles' ) }

From 13540963d65f381c6078afd673fd148d0352079f Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Tue, 7 May 2024 14:54:21 +0900 Subject: [PATCH 16/19] Add back the style --- .../edit-site/src/components/sidebar-edit-mode/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/edit-site/src/components/sidebar-edit-mode/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/style.scss index e453208e3c2c5e..1f631eb24057c9 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/style.scss +++ b/packages/edit-site/src/components/sidebar-edit-mode/style.scss @@ -34,6 +34,10 @@ } } +.edit-site-global-styles-sidebar .edit-site-global-styles-sidebar__header-title { + margin: 0; +} + .edit-site-global-styles-sidebar .components-navigation__menu-title-heading { font-size: $default-font-size * 1.2; font-weight: 500; From b748cf8c880bdcab44d61b1a3e05864f8c1bf497 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Tue, 7 May 2024 15:01:58 +0900 Subject: [PATCH 17/19] Pass toggleProps compact size --- packages/edit-site/src/components/global-styles/ui.js | 6 +++++- .../src/components/complementary-area-header/style.scss | 7 ------- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index b50e09550f7079..09c1a8b341f8fc 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -76,7 +76,11 @@ function GlobalStylesActionMenu() { return ( - + { ( { onClose } ) => ( <> diff --git a/packages/interface/src/components/complementary-area-header/style.scss b/packages/interface/src/components/complementary-area-header/style.scss index 8cd2a5523ce97f..1e5a000a1bbfb2 100644 --- a/packages/interface/src/components/complementary-area-header/style.scss +++ b/packages/interface/src/components/complementary-area-header/style.scss @@ -36,11 +36,4 @@ display: flex; } } - - // Emulate 'compact' button size, as Dropdown does not support compact yet. - .components-dropdown > .components-button.has-icon { - height: $grid-unit-40; - min-width: $grid-unit-40; - padding: $grid-unit-05; - } } From 8d3941dd8c51dfaa9e92389f278902a56e964b3f Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 8 May 2024 11:56:29 +0900 Subject: [PATCH 18/19] Tweak inline comment. Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com> --- .../src/components/complementary-area-header/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/interface/src/components/complementary-area-header/style.scss b/packages/interface/src/components/complementary-area-header/style.scss index 1e5a000a1bbfb2..a6b9b532069602 100644 --- a/packages/interface/src/components/complementary-area-header/style.scss +++ b/packages/interface/src/components/complementary-area-header/style.scss @@ -18,7 +18,7 @@ .interface-complementary-area-header { background: $white; padding-right: $grid-unit-15; // Reduced padding to account for close buttons. - gap: $grid-unit-10; // Always ensure space between contents and close. + gap: $grid-unit-10; // Always ensure space between contents and close buttons. .interface-complementary-area-header__title { margin: 0; From d2eadf00670fb774c269111341ad021c6f004b26 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 8 May 2024 12:06:34 +0900 Subject: [PATCH 19/19] Remove unnecessary - margin top --- packages/edit-post/src/components/sidebar/style.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss index 1921c5cfd7b312..7a20cc5f0f54ff 100644 --- a/packages/edit-post/src/components/sidebar/style.scss +++ b/packages/edit-post/src/components/sidebar/style.scss @@ -12,7 +12,3 @@ } } } - -.edit-post-sidebar__panel { - margin-top: -1px; -}