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 <[email protected]> * Fix typo Co-authored-by: Andrei Draganescu <[email protected]> * add unique affordance for reduced-motion --------- Co-authored-by: richtabor <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: draganescu <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: annezazu <[email protected]>
WordPress · Apr 12, 2024 · e284270 · e284270
1 parent 85d1c8a
commit e284270
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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);