diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss index bb88d981adffa..eba7bbed68304 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 4d5e2e7ea8c49..573231e1b2388 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 cb23838c231ee..377dee64759ab 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 aed27f187ba9c..92141486c4c73 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(); }