From e28427008701672bec6a918d32cd79730d78da33 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Fri, 12 Apr 2024 13:17:10 -0400 Subject: [PATCH] Improve override indication for editable blocks in synced patterns (#60599) * Apply animation for editable blocks in synced patterns * Remove check for is-outline-mode * add outline for improved visibility * undo outlines * Add rgb synced color to bindingsStyle, use synced color * add outline for improved visibility * undo outlines * Use clearer comment Co-authored-by: Andrei Draganescu * Fix typo Co-authored-by: Andrei Draganescu * add unique affordance for reduced-motion --------- Co-authored-by: richtabor Co-authored-by: jasmussen Co-authored-by: draganescu Co-authored-by: jameskoster Co-authored-by: annezazu --- .../src/components/block-list/content.scss | 53 ++++++++++++------- .../block-list/use-block-props/index.js | 6 ++- .../src/template-part/editor.scss | 6 ++- 3 files changed, 44 insertions(+), 21 deletions(-) diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index 869b565fec3694..9184f3d9355ec7 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -300,30 +300,47 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b } } -@keyframes block-editor-has-editable-outline__fade-out-animation { +// Add fade in/out background for editable blocks in synced patterns. +@keyframes block-editor-is-editable__animation { from { - border-color: rgba(var(--wp-admin-theme-color--rgb), 1); + background-color: rgba(var(--wp-admin-theme-color--rgb), 0.1); } to { - border-color: rgba(var(--wp-admin-theme-color--rgb), 0); + background-color: rgba(var(--wp-admin-theme-color--rgb), 0); } } -.is-root-container:not([inert]) .block-editor-block-list__block.has-editable-outline { - &::after { - content: ""; - position: absolute; - pointer-events: none; - top: 0; - left: 0; - right: 0; - bottom: 0; - border: 1px dotted rgba(var(--wp-admin-theme-color--rgb), 1); - border-radius: $radius-block-ui; - animation: block-editor-has-editable-outline__fade-out-animation 0.3s ease-out; - animation-delay: 1s; - animation-fill-mode: forwards; - @include reduce-motion("animation"); +@keyframes block-editor-is-editable__animation_reduce-motion { + 0% { + background-color: rgba(var(--wp-admin-theme-color--rgb), 0.1); + } + 99% { + background-color: rgba(var(--wp-admin-theme-color--rgb), 0.1); + } + 100% { + background-color: rgba(var(--wp-admin-theme-color--rgb), 0); + } +} + +.is-root-container:not([inert]) .block-editor-block-list__block.is-reusable.is-selected .block-editor-block-list__block.has-editable-outline::after { + animation-name: block-editor-is-editable__animation; + animation-duration: 0.8s; + animation-timing-function: ease-out; + animation-delay: 0.1s; + animation-fill-mode: backwards; + border-radius: $radius-block-ui; + bottom: 0; + content: ""; + left: 0; + pointer-events: none; + position: absolute; + right: 0; + top: 0; + + // Unique reduced-motion affordance to ensure the effect is still visible when reduce motion is enabled. + @media (prefers-reduced-motion: reduce) { + animation-name: block-editor-is-editable__animation_reduce-motion; + animation-delay: 0s; } } diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js index 76e07ebbf0a757..af98f24b98785e 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/index.js +++ b/packages/block-editor/src/components/block-list/use-block-props/index.js @@ -130,7 +130,11 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { const hasBlockBindings = !! blockEditContext[ blockBindingsKey ]; const bindingsStyle = hasBlockBindings && canBindBlock( name ) - ? { '--wp-admin-theme-color': 'var(--wp-block-synced-color)' } + ? { + '--wp-admin-theme-color': 'var(--wp-block-synced-color)', + '--wp-admin-theme-color--rgb': + 'var(--wp-block-synced-color--rgb)', + } : {}; // Ensures it warns only inside the `edit` implementation for the block. diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss index 17f2e79212a799..e5df190c2fe851 100644 --- a/packages/block-library/src/template-part/editor.scss +++ b/packages/block-library/src/template-part/editor.scss @@ -23,8 +23,10 @@ z-index: z-index(".block-library-template-part__selection-search"); } -.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part, -.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable { +// We don't use .is-outline-mode in this case so colors take effect properly in the block editor. +// Will be a better result when outlines are not shadows, but outlines, so we can target outline-color, not redefine the entire shadow. +.block-editor-block-list__block:not(.remove-outline).wp-block-template-part, +.block-editor-block-list__block:not(.remove-outline).is-reusable { &.is-highlighted::after, &.is-selected::after { box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);