From 6c0eaed2763c53cacbee88c1dc9d0748674e2129 Mon Sep 17 00:00:00 2001 From: Utsav Patel Date: Wed, 19 Jun 2024 15:54:21 +0530 Subject: [PATCH 1/5] fix: wp icon focus issue --- packages/edit-site/src/components/layout/style.scss | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 01c31de0d65d6..4c342c893681b 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -164,7 +164,9 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) { } &:focus { - box-shadow: none; + box-shadow: + inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), + inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); } &::before { @@ -181,13 +183,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) { box-shadow: none; } - // Lightened spot color focus. - &:focus::before { - box-shadow: - inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), - inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); - } - .edit-site-layout__view-mode-toggle-icon { display: flex; height: $grid-unit-80; From 9bda51a0f68eadf3ffb51a04f1b462704548b4f2 Mon Sep 17 00:00:00 2001 From: Utsav Patel Date: Mon, 24 Jun 2024 22:25:24 +0530 Subject: [PATCH 2/5] update: shadow and added focus visible --- packages/edit-site/src/components/layout/style.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 4c342c893681b..0eb7edffdcc2c 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -163,10 +163,11 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) { color: $white; } + &:focus-visible, &:focus { - box-shadow: - inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), - inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + box-shadow: 0 0 0 3px #1e1e1e, 0 0 0 6px var(--wp-admin-theme-color); + outline: 4px solid #0000; + outline-offset: 4px; } &::before { From 5248a6db459726fed1528a227c903a68fa4de20a Mon Sep 17 00:00:00 2001 From: Utsav Patel Date: Mon, 15 Jul 2024 01:10:14 +0530 Subject: [PATCH 3/5] Fix: editor focus style issue --- .../edit-site/src/components/layout/style.scss | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 4ceb9bbf527b3..053c91195fd3c 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -251,3 +251,21 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) { padding-left: 16px; padding-right: 16px; } + +.edit-site-layout.is-full-canvas { + .edit-site-layout__view-mode-toggle.components-button { + &:focus-visible, + &:focus { + + box-shadow: none; + outline: none; + outline-offset: 0; + + .edit-site-site-icon svg { + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #3858e9); + outline: 3px solid #0000; + } + + } + } +} From 5cef0400c7abdae7d25c187dacb7599d18ab2b4f Mon Sep 17 00:00:00 2001 From: Utsav Patel Date: Tue, 16 Jul 2024 22:30:03 +0530 Subject: [PATCH 4/5] Fix: svg dimentions & padding issue --- packages/edit-site/src/components/layout/style.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 053c91195fd3c..f8c314b2f3c3a 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -264,6 +264,9 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) { .edit-site-site-icon svg { box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #3858e9); outline: 3px solid #0000; + height: 40px; + width: 40px; + padding: 2px; } } From 342b3ca132136ffd50eb40f50f9ad1286b87213c Mon Sep 17 00:00:00 2001 From: Utsav Patel Date: Tue, 16 Jul 2024 22:34:20 +0530 Subject: [PATCH 5/5] Fix: border radius issue on editor focus --- packages/edit-site/src/components/layout/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index f8c314b2f3c3a..09898a530e445 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -267,6 +267,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) { height: 40px; width: 40px; padding: 2px; + border-radius: 2px; } }