From db29cdddc8205e888cce323198657fc28a0f3f73 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 13 Jan 2023 09:21:44 +0100 Subject: [PATCH 1/5] Site editor: Update resize handle. --- .../edit-site/src/components/block-editor/style.scss | 12 ++++++++---- packages/edit-site/src/components/layout/style.scss | 1 - 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss index 35c2649b8b0c3b..889e69bdbdf3ed 100644 --- a/packages/edit-site/src/components/block-editor/style.scss +++ b/packages/edit-site/src/components/block-editor/style.scss @@ -99,7 +99,7 @@ height: 100%; &::after { - width: 1px; + width: 4px; border-radius: 0; background: $gray-800; left: auto; @@ -112,10 +112,10 @@ &::after { position: absolute; - top: 0; + top: $grid-unit-40; left: $grid-unit-05; right: 0; - bottom: 0; + bottom: $grid-unit-40; content: ""; width: $grid-unit-05; background: $gray-600; @@ -137,7 +137,6 @@ background: $gray-400; } &.is-variation-separator::after { - width: 2px; background: var(--wp-admin-theme-color); } } @@ -145,4 +144,9 @@ &:focus::after { box-shadow: 0 0 0 1px $gray-800, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color); } + + &.is-variation-separator:focus::after { + border-radius: $radius-block-ui; + box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color); + } } diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index f5db7df0c0732e..57a98ed02a93bd 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -63,7 +63,6 @@ $hub-height: $grid-unit-20 * 2 + $button-size; .edit-site-layout__content { flex-grow: 1; display: flex; - gap: $canvas-padding; // Hide scrollbars during the edit/view animation. overflow: hidden; From 098c4cd0cf879f629460cdb2976aee3710e08dce Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 13 Jan 2023 09:31:08 +0100 Subject: [PATCH 2/5] Fix --- .../edit-site/src/components/block-editor/style.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss index 889e69bdbdf3ed..dd1937f980e498 100644 --- a/packages/edit-site/src/components/block-editor/style.scss +++ b/packages/edit-site/src/components/block-editor/style.scss @@ -99,11 +99,11 @@ height: 100%; &::after { - width: 4px; + width: 2px; border-radius: 0; background: $gray-800; - left: auto; - right: 50%; + left: 0; + right: 0; transition: all ease 0.2s; transition-delay: 0.1s; @include reduce-motion; @@ -112,10 +112,10 @@ &::after { position: absolute; - top: $grid-unit-40; + top: $grid-unit-30; left: $grid-unit-05; right: 0; - bottom: $grid-unit-40; + bottom: $grid-unit-30; content: ""; width: $grid-unit-05; background: $gray-600; From 28e6a9db25b60b6d8129e8170c3f29fd84ae4d87 Mon Sep 17 00:00:00 2001 From: James Koster Date: Fri, 13 Jan 2023 18:20:11 +0000 Subject: [PATCH 3/5] Update handle --- packages/edit-site/src/components/block-editor/style.scss | 7 +++++-- packages/edit-site/src/components/layout/index.js | 1 - packages/edit-site/src/components/layout/style.scss | 4 ---- 3 files changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss index dd1937f980e498..075cf2d5c3cd04 100644 --- a/packages/edit-site/src/components/block-editor/style.scss +++ b/packages/edit-site/src/components/block-editor/style.scss @@ -97,12 +97,15 @@ &.is-variation-separator { height: 100%; + width: $grid-unit-30; + right: 0; &::after { width: 2px; border-radius: 0; - background: $gray-800; - left: 0; + background: transparent; + left: 50%; + transform: translateX( -1px ); right: 0; transition: all ease 0.2s; transition-delay: 0.1s; diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 9a6d4373edc27d..daced260258877 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -234,7 +234,6 @@ export default function Layout( { onError } ) { handleComponent={ { right: ( ), diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 57a98ed02a93bd..5c49ed0901c638 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -84,10 +84,6 @@ $hub-height: $grid-unit-20 * 2 + $button-size; top: 0; } - .resizable-editor__drag-handle.is-right { - right: math.div(-$grid-unit-15, 2); - } - > div { overflow-y: auto; min-height: 100%; From e2f0381e8f04499228f1b3621b4b87bce9e7885b Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 16 Jan 2023 09:48:10 +0100 Subject: [PATCH 4/5] Fix linting. --- packages/edit-site/src/components/block-editor/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss index 075cf2d5c3cd04..0eca3b7c529b48 100644 --- a/packages/edit-site/src/components/block-editor/style.scss +++ b/packages/edit-site/src/components/block-editor/style.scss @@ -105,7 +105,7 @@ border-radius: 0; background: transparent; left: 50%; - transform: translateX( -1px ); + transform: translateX(-1px); right: 0; transition: all ease 0.2s; transition-delay: 0.1s; From bf7423dc6e3a69a860349d73ed2280cf6e333a94 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 16 Jan 2023 10:03:38 +0100 Subject: [PATCH 5/5] More linting --- packages/edit-site/src/components/layout/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index daced260258877..5f0f78b64fd4c2 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -233,9 +233,7 @@ export default function Layout( { onError } ) { } } handleComponent={ { right: ( - + ), } } handleClasses={ undefined }