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 <me@andreidraganescu.info>

* Fix typo

Co-authored-by: Andrei Draganescu <me@andreidraganescu.info>

* add unique affordance for reduced-motion

---------

Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>

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;
 	}
 }
 

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.

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);