From b3284fdca9868f3a33dc676c63a8cd6fe0b0394a Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 19 Oct 2022 18:41:29 +0200 Subject: [PATCH 1/7] Block Mover button: do not show focus styles on pointer interactions in Block toolbar --- packages/components/src/toolbar/style.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss index d24a3317328d64..a1339b7b2de17d 100644 --- a/packages/components/src/toolbar/style.scss +++ b/packages/components/src/toolbar/style.scss @@ -67,9 +67,15 @@ } // Focus style. - &:focus::before { + &:focus-visible::before { @include block-toolbar-button-style__focus(); } + // Fallback for browsers without :focus-visible support + @supports not selector(:focus-visible) { + &:focus::before { + @include block-toolbar-button-style__focus(); + } + } // Ensure the icon buttons remain square. // This needs specificity. From d9702f76a960db3efee499f253e82a7c8e80c6b1 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 19 Oct 2022 18:44:22 +0200 Subject: [PATCH 2/7] Block Mover button: do not show focus styles on pointer interactions in List view --- packages/block-editor/src/components/list-view/style.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index ce5539dbe3aa7f..a4968d2d37b714 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -261,9 +261,15 @@ outline: none; } - &:focus::before { + &:focus-visible::before { @include block-toolbar-button-style__focus(); } + /* Fallback for browsers without :focus-visible support */ + @supports not selector(:focus-visible) { + &:focus::before { + @include block-toolbar-button-style__focus(); + } + } // Focus and toggle pseudo elements. &::before { From 45d474bbc3352d63142c0c853e4ba94d46a4e47c Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 20 Oct 2022 11:22:34 +0200 Subject: [PATCH 3/7] Use focus-visible only for block mover buttons, remaining toolbar buttons use same focus styles as on trunk --- packages/components/src/toolbar/style.scss | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss index a1339b7b2de17d..e25b1128725850 100644 --- a/packages/components/src/toolbar/style.scss +++ b/packages/components/src/toolbar/style.scss @@ -66,15 +66,22 @@ } } - // Focus style. - &:focus-visible::before { + // Focus style but toolbar buttons, execpt block movers. + &:not(.block-editor-block-mover-button):focus::before { @include block-toolbar-button-style__focus(); } - // Fallback for browsers without :focus-visible support - @supports not selector(:focus-visible) { - &:focus::before { + + // Focus style for block mover buttons (using :focus-visible instead of :focus) + &.block-editor-block-mover-button { + &:focus-visible::before { @include block-toolbar-button-style__focus(); } + // Fallback for browsers without :focus-visible support + @supports not selector(:focus-visible) { + &:focus::before { + @include block-toolbar-button-style__focus(); + } + } } // Ensure the icon buttons remain square. From 625def161e731773c607659f260cc24e24a238e5 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 20 Oct 2022 11:48:13 +0200 Subject: [PATCH 4/7] Remnove fallback styles --- .../block-editor/src/components/list-view/style.scss | 6 ------ packages/components/src/toolbar/style.scss | 12 ++---------- 2 files changed, 2 insertions(+), 16 deletions(-) diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index a4968d2d37b714..cb23838c231ee9 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -264,12 +264,6 @@ &:focus-visible::before { @include block-toolbar-button-style__focus(); } - /* Fallback for browsers without :focus-visible support */ - @supports not selector(:focus-visible) { - &:focus::before { - @include block-toolbar-button-style__focus(); - } - } // Focus and toggle pseudo elements. &::before { diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss index e25b1128725850..813cf73e0bba49 100644 --- a/packages/components/src/toolbar/style.scss +++ b/packages/components/src/toolbar/style.scss @@ -72,16 +72,8 @@ } // Focus style for block mover buttons (using :focus-visible instead of :focus) - &.block-editor-block-mover-button { - &:focus-visible::before { - @include block-toolbar-button-style__focus(); - } - // Fallback for browsers without :focus-visible support - @supports not selector(:focus-visible) { - &:focus::before { - @include block-toolbar-button-style__focus(); - } - } + &.block-editor-block-mover-button:focus-visible::before { + @include block-toolbar-button-style__focus(); } // Ensure the icon buttons remain square. From d07f62f63f737bb86f7a23fd941f2ae4887dcc39 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 20 Oct 2022 18:56:20 +0200 Subject: [PATCH 5/7] Fix typo --- packages/components/src/toolbar/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss index 813cf73e0bba49..aed27f187ba9ce 100644 --- a/packages/components/src/toolbar/style.scss +++ b/packages/components/src/toolbar/style.scss @@ -66,7 +66,7 @@ } } - // Focus style but toolbar buttons, execpt block movers. + // Focus style for toolbar buttons, except block movers. &:not(.block-editor-block-mover-button):focus::before { @include block-toolbar-button-style__focus(); } From cc1ab595bf2e980e558678e860a4ca26ebaa808e Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 20 Oct 2022 20:09:52 +0200 Subject: [PATCH 6/7] Move focus styles closer to original component --- .../src/components/block-mover/style.scss | 35 +++++++++++++++++++ .../src/components/list-view/block.js | 2 +- .../src/components/list-view/style.scss | 29 +-------------- packages/components/src/toolbar/style.scss | 9 ++--- 4 files changed, 39 insertions(+), 36 deletions(-) diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss index bb88d981adffab..eba7bbed683045 100644 --- a/packages/block-editor/src/components/block-mover/style.scss +++ b/packages/block-editor/src/components/block-mover/style.scss @@ -61,3 +61,38 @@ overflow: hidden; } } + +// Specificity is necessary to override block toolbar button styles. +.components-button.block-editor-block-mover-button { + // Focus and toggle pseudo elements. + &::before { + content: ""; + position: absolute; + display: block; + border-radius: $radius-block-ui; + height: $grid-unit-40; + + // Position the focus rectangle. + left: $grid-unit-10; + right: $grid-unit-10; + z-index: -1; + + // Animate in. + animation: components-button__appear-animation 0.1s ease; + animation-fill-mode: forwards; + @include reduce-motion("animation"); + } + + // Don't show the focus inherited by the Button component. + &:focus, + &:focus:enabled, + // Override focus styles from the block toolbar + &:focus::before { + box-shadow: none; + outline: none; + } + + &:focus-visible::before { + @include block-toolbar-button-style__focus(); + } +} diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js index 4d5e2e7ea8c49f..573231e1b23886 100644 --- a/packages/block-editor/src/components/list-view/block.js +++ b/packages/block-editor/src/components/list-view/block.js @@ -134,7 +134,7 @@ function ListViewBlock( { const { isTreeGridMounted, expand, collapse } = useListViewContext(); const hasSiblings = siblingBlockCount > 0; - const hasRenderedMovers = showBlockMovers && hasSiblings; + const hasRenderedMovers = true && hasSiblings; const moverCellClassName = classnames( 'block-editor-list-view-block__mover-cell', { 'is-visible': isHovered || isSelected } diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index cb23838c231ee9..377dee64759aba 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -249,39 +249,12 @@ } } - // Don't show the focus inherited by the Button component. - &:focus:enabled { - box-shadow: none; - outline: none; - } - - // Focus style. - &:focus { - box-shadow: none; - outline: none; - } - - &:focus-visible::before { - @include block-toolbar-button-style__focus(); - } - - // Focus and toggle pseudo elements. + // Tweak size and position of focus ring. &::before { - content: ""; - position: absolute; - display: block; - border-radius: $radius-block-ui; height: 16px; min-width: 100%; - - // Position the focus rectangle. left: 0; right: 0; - - // Animate in. - animation: components-button__appear-animation 0.1s ease; - animation-fill-mode: forwards; - @include reduce-motion("animation"); } } diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss index aed27f187ba9ce..92141486c4c73f 100644 --- a/packages/components/src/toolbar/style.scss +++ b/packages/components/src/toolbar/style.scss @@ -66,13 +66,8 @@ } } - // Focus style for toolbar buttons, except block movers. - &:not(.block-editor-block-mover-button):focus::before { - @include block-toolbar-button-style__focus(); - } - - // Focus style for block mover buttons (using :focus-visible instead of :focus) - &.block-editor-block-mover-button:focus-visible::before { + // Focus style + &:focus::before { @include block-toolbar-button-style__focus(); } From 98d8a5b9bb59402f99bd54d710dfa95d0d0e81bc Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 24 Oct 2022 15:16:17 +0200 Subject: [PATCH 7/7] Undo unnecessary changes --- packages/block-editor/src/components/list-view/block.js | 2 +- packages/components/src/toolbar/style.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js index 573231e1b23886..4d5e2e7ea8c49f 100644 --- a/packages/block-editor/src/components/list-view/block.js +++ b/packages/block-editor/src/components/list-view/block.js @@ -134,7 +134,7 @@ function ListViewBlock( { const { isTreeGridMounted, expand, collapse } = useListViewContext(); const hasSiblings = siblingBlockCount > 0; - const hasRenderedMovers = true && hasSiblings; + const hasRenderedMovers = showBlockMovers && hasSiblings; const moverCellClassName = classnames( 'block-editor-list-view-block__mover-cell', { 'is-visible': isHovered || isSelected } diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss index 92141486c4c73f..d24a3317328d64 100644 --- a/packages/components/src/toolbar/style.scss +++ b/packages/components/src/toolbar/style.scss @@ -66,7 +66,7 @@ } } - // Focus style + // Focus style. &:focus::before { @include block-toolbar-button-style__focus(); }