From 7d47273c0038b1c3ff11965a36fbfecc39011fad Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Wed, 2 Nov 2022 10:50:53 +1300
Subject: [PATCH 01/28] Add initial colorization code

---
 .../block-editor/src/components/list-view/block.js     |  2 ++
 .../block-editor/src/components/list-view/style.scss   | 10 +++++++++-
 .../components/use-block-display-information/index.js  |  5 +++++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
index f8e19cc6ac3358..1c411a88b7322b 100644
--- a/packages/block-editor/src/components/list-view/block.js
+++ b/packages/block-editor/src/components/list-view/block.js
@@ -207,6 +207,8 @@ function ListViewBlock( {
 		'is-branch-selected': isBranchSelected,
 		'is-dragging': isDragged,
 		'has-single-cell': ! showBlockActions,
+		'is-reusable': blockInformation.isReusable,
+		'is-template-part': blockInformation.isTemplatePart,
 	} );
 
 	// Only include all selected blocks if the currently clicked on block
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 9782dc7027bc7c..c66ee5feaac6f7 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -14,11 +14,19 @@
 .block-editor-list-view-leaf {
 	// Use position relative for row animation.
 	position: relative;
-
+	&.is-template-part {
+		color: #7c4dc3;
+	}
 	// The background has to be applied to the td, not tr, or border-radius won't work.
 	&.is-selected td {
 		background: var(--wp-admin-theme-color);
 	}
+	&.is-selected.is-template-part td {
+		background: #7c4dc3;
+	}
+	&.is-selected.is-reusable td {
+		background: #34948e;
+	}
 	&.is-selected .block-editor-list-view-block-contents,
 	&.is-selected .components-button.has-icon {
 		color: $white;
diff --git a/packages/block-editor/src/components/use-block-display-information/index.js b/packages/block-editor/src/components/use-block-display-information/index.js
index cb8e7a2122f5e5..0cf5db00e1e838 100644
--- a/packages/block-editor/src/components/use-block-display-information/index.js
+++ b/packages/block-editor/src/components/use-block-display-information/index.js
@@ -16,6 +16,7 @@ import { store as blockEditorStore } from '../../store';
  *
  * @typedef {Object} WPBlockDisplayInformation
  *
+ * @property {string} type        Machine readable block type which is used to indicate if color should be applied.
  * @property {string} title       Human-readable block type label.
  * @property {WPIcon} icon        Block type icon.
  * @property {string} description A detailed block type description.
@@ -51,6 +52,9 @@ export default function useBlockDisplayInformation( clientId ) {
 			const attributes = getBlockAttributes( clientId );
 			const match = getActiveBlockVariation( blockName, attributes );
 			const blockTypeInfo = {
+				isReusable:
+					blockType.name === 'core/block' &&
+					blockType.category === 'reusable',
 				title: blockType.title,
 				icon: blockType.icon,
 				description: blockType.description,
@@ -59,6 +63,7 @@ export default function useBlockDisplayInformation( clientId ) {
 			if ( ! match ) return blockTypeInfo;
 
 			return {
+				isTemplatePart: blockType.name === 'core/template-part',
 				title: match.title || blockType.title,
 				icon: match.icon || blockType.icon,
 				description: match.description || blockType.description,

From 920483021fc61c7a8ee7c1e88c7bb84eee4281d2 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Wed, 2 Nov 2022 11:53:21 +1300
Subject: [PATCH 02/28] Tidy up the setting of colors in the list view

---
 packages/base-styles/_colors.scss             |  5 ++++
 .../src/components/list-view/style.scss       | 27 +++++++++++++++----
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss
index 03f6bfbdd566d4..ea6d6243858d7b 100644
--- a/packages/base-styles/_colors.scss
+++ b/packages/base-styles/_colors.scss
@@ -24,3 +24,8 @@ $light-gray-placeholder: rgba($white, 0.65);
 $alert-yellow: #f0b849;
 $alert-red: #cc1818;
 $alert-green: #4ab866;
+
+:root {
+	--wp-block-template-color: #7c4dc3;
+	--wp-block-reusable-color: #34948e;
+}
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index c66ee5feaac6f7..4bf0aa029fd9e3 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -14,18 +14,22 @@
 .block-editor-list-view-leaf {
 	// Use position relative for row animation.
 	position: relative;
-	&.is-template-part {
-		color: #7c4dc3;
-	}
+
 	// The background has to be applied to the td, not tr, or border-radius won't work.
 	&.is-selected td {
 		background: var(--wp-admin-theme-color);
 	}
 	&.is-selected.is-template-part td {
-		background: #7c4dc3;
+		background: var(--wp-block-template-color);
 	}
 	&.is-selected.is-reusable td {
-		background: #34948e;
+		background: var(--wp-block-reusable-color);
+	}
+	&.is-template-part .block-editor-list-view-block-contents {
+		color: var(--wp-block-template-color);
+	}
+	&.is-reusable .block-editor-list-view-block-contents {
+		color: var(--wp-block-reusable-color);
 	}
 	&.is-selected .block-editor-list-view-block-contents,
 	&.is-selected .components-button.has-icon {
@@ -150,6 +154,19 @@
 			}
 		}
 	}
+
+	&.is-template-part .block-editor-list-view-block-contents:focus {
+		&::after {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-template-color);
+		}
+	}
+
+	&.is-reusable .block-editor-list-view-block-contents:focus {
+		&::after {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-reusable-color);
+		}
+	}
+
 	// Fix focus styling width when one row has fewer cells.
 	&.has-single-cell .block-editor-list-view-block-contents:focus::after {
 		right: 0;

From c26150be8869b3d1bbf5e89547f5f1b4612f5b50 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Wed, 2 Nov 2022 11:59:30 +1300
Subject: [PATCH 03/28] Tidy up doc block types

---
 .../use-block-display-information/index.js    | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/block-editor/src/components/use-block-display-information/index.js b/packages/block-editor/src/components/use-block-display-information/index.js
index 0cf5db00e1e838..8b4d0eba95c418 100644
--- a/packages/block-editor/src/components/use-block-display-information/index.js
+++ b/packages/block-editor/src/components/use-block-display-information/index.js
@@ -16,11 +16,12 @@ import { store as blockEditorStore } from '../../store';
  *
  * @typedef {Object} WPBlockDisplayInformation
  *
- * @property {string} type        Machine readable block type which is used to indicate if color should be applied.
- * @property {string} title       Human-readable block type label.
- * @property {WPIcon} icon        Block type icon.
- * @property {string} description A detailed block type description.
- * @property {string} anchor      HTML anchor.
+ * @property {boolean} isReusable     True if is a reusable block
+ * @property {boolean} isTemplatePart True if is a template part block
+ * @property {string}  title          Human-readable block type label.
+ * @property {WPIcon}  icon           Block type icon.
+ * @property {string}  description    A detailed block type description.
+ * @property {string}  anchor         HTML anchor.
  */
 
 /**
@@ -51,10 +52,13 @@ export default function useBlockDisplayInformation( clientId ) {
 			if ( ! blockType ) return null;
 			const attributes = getBlockAttributes( clientId );
 			const match = getActiveBlockVariation( blockName, attributes );
+			const isReusable =
+				blockType.name === 'core/block' &&
+				blockType.category === 'reusable';
+			const isTemplatePart = blockType.name === 'core/template-part';
 			const blockTypeInfo = {
-				isReusable:
-					blockType.name === 'core/block' &&
-					blockType.category === 'reusable',
+				isReusable,
+				isTemplatePart,
 				title: blockType.title,
 				icon: blockType.icon,
 				description: blockType.description,
@@ -63,7 +67,8 @@ export default function useBlockDisplayInformation( clientId ) {
 			if ( ! match ) return blockTypeInfo;
 
 			return {
-				isTemplatePart: blockType.name === 'core/template-part',
+				isReusable,
+				isTemplatePart,
 				title: match.title || blockType.title,
 				icon: match.icon || blockType.icon,
 				description: match.description || blockType.description,

From 27e1cf5c910dd7864e038073c7152d422920b3fa Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Wed, 2 Nov 2022 12:23:48 +1300
Subject: [PATCH 04/28] Add color to block toolbar

---
 .../block-editor/src/components/block-toolbar/index.js | 10 +++++++++-
 .../src/components/block-toolbar/style.scss            |  8 ++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index b2160b3db4b6b6..ecc7cb9e77857b 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -74,6 +74,10 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 		};
 	}, [] );
 
+	const isReusable =
+		blockType.name === 'core/block' && blockType.category === 'reusable';
+	const isTemplatePart = blockType.name === 'core/template-part';
+
 	// Handles highlighting the current block outline on hover or focus of the
 	// block type toolbar area.
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
@@ -112,7 +116,11 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 
 	const classes = classnames(
 		'block-editor-block-toolbar',
-		shouldShowMovers && 'is-showing-movers'
+		shouldShowMovers && 'is-showing-movers',
+		{
+			'is-reusable': isReusable,
+			'is-template-part': isTemplatePart,
+		}
 	);
 
 	return (
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index 00d8d0da47f34e..224bf8777b0f19 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -39,6 +39,14 @@
 		border-right: $border-width solid $gray-300;
 	}
 
+	&.is-reusable .block-editor-block-switcher .components-button {
+		color: var(--wp-block-reusable-color);
+	}
+
+	&.is-template-part .block-editor-block-switcher .components-button {
+		color: var(--wp-block-reusable-color);
+	}
+
 	> :last-child,
 	> :last-child .components-toolbar-group,
 	> :last-child .components-toolbar {

From 1ab821468bb8a926f01227abf1db89dfe21807ff Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Wed, 2 Nov 2022 12:53:41 +1300
Subject: [PATCH 05/28] Add color to template block toolbar

---
 .../block-editor/src/components/block-toolbar/style.scss   | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index 224bf8777b0f19..5f2bad4f1cbcf8 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -43,8 +43,11 @@
 		color: var(--wp-block-reusable-color);
 	}
 
-	&.is-template-part .block-editor-block-switcher .components-button {
-		color: var(--wp-block-reusable-color);
+	&.is-template-part .components-toolbar-button.block-editor-block-switcher__no-switcher-icon {
+		color: var(--wp-block-template-color);
+		&:disabled .block-editor-block-icon.has-colors {
+			color: var(--wp-block-template-color);
+		}
 	}
 
 	> :last-child,

From 93bf9ba5a52596253c81d7a7b3d5ef453c60d060 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Wed, 2 Nov 2022 14:14:12 +1300
Subject: [PATCH 06/28] Add selection box color

---
 packages/base-styles/_colors.scss             |  2 +-
 .../src/components/block-toolbar/style.scss   |  4 ++--
 .../src/components/list-view/style.scss       |  6 ++---
 packages/block-library/src/block/editor.scss  | 16 ++++++++++++++
 .../src/template-part/editor.scss             | 22 +++++++++++++++++--
 5 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss
index ea6d6243858d7b..85fa4bd3a9df6f 100644
--- a/packages/base-styles/_colors.scss
+++ b/packages/base-styles/_colors.scss
@@ -26,6 +26,6 @@ $alert-red: #cc1818;
 $alert-green: #4ab866;
 
 :root {
-	--wp-block-template-color: #7c4dc3;
+	--wp-block-template-part-color: #7c4dc3;
 	--wp-block-reusable-color: #34948e;
 }
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index 5f2bad4f1cbcf8..61f14e1308242b 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -44,9 +44,9 @@
 	}
 
 	&.is-template-part .components-toolbar-button.block-editor-block-switcher__no-switcher-icon {
-		color: var(--wp-block-template-color);
+		color: var(--wp-block-template-part-color);
 		&:disabled .block-editor-block-icon.has-colors {
-			color: var(--wp-block-template-color);
+			color: var(--wp-block-template-part-color);
 		}
 	}
 
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 4bf0aa029fd9e3..fb4c3cf95254eb 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -20,13 +20,13 @@
 		background: var(--wp-admin-theme-color);
 	}
 	&.is-selected.is-template-part td {
-		background: var(--wp-block-template-color);
+		background: var(--wp-block-template-part-color);
 	}
 	&.is-selected.is-reusable td {
 		background: var(--wp-block-reusable-color);
 	}
 	&.is-template-part .block-editor-list-view-block-contents {
-		color: var(--wp-block-template-color);
+		color: var(--wp-block-template-part-color);
 	}
 	&.is-reusable .block-editor-list-view-block-contents {
 		color: var(--wp-block-reusable-color);
@@ -157,7 +157,7 @@
 
 	&.is-template-part .block-editor-list-view-block-contents:focus {
 		&::after {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-template-color);
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-template-part-color);
 		}
 	}
 
diff --git a/packages/block-library/src/block/editor.scss b/packages/block-library/src/block/editor.scss
index b3eb1a67e99459..9b57d229a46814 100644
--- a/packages/block-library/src/block/editor.scss
+++ b/packages/block-library/src/block/editor.scss
@@ -13,4 +13,20 @@
 	.components-disabled .block-list-appender {
 		display: none;
 	}
+
+	&.is-highlighted,
+	&.is-selected {
+		border-radius: $radius-block-ui;
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-reusable-color);
+	}
+
+	&.block-editor-block-list__block:not([contenteditable]):focus {
+		&::after {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-reusable-color);
+			// Show a light color for dark themes.
+			.is-dark-theme & {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
+			}
+		}
+	}
 }
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index c17d37a6078e2d..e807d5bbb8309e 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -5,8 +5,8 @@
 	// and height are used instead of max-(width/height).
 	.components-modal__frame {
 		@include break-small() {
-			width: calc(100% - #{ $grid-unit-20 * 2 });
-			height: calc(100% - #{ $header-height * 2 });
+			width: calc(100% - #{$grid-unit-20 * 2});
+			height: calc(100% - #{$header-height * 2});
 		}
 		@include break-medium() {
 			width: $break-medium - $grid-unit-20 * 2;
@@ -24,3 +24,21 @@
 	padding: $grid-unit-20 0;
 	z-index: z-index(".block-library-template-part__selection-search");
 }
+
+.wp-block-template-part {
+	&.is-highlighted,
+	&.is-selected {
+		border-radius: $radius-block-ui;
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-template-part-color);
+	}
+
+	&.block-editor-block-list__block:not([contenteditable]):focus {
+		&::after {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-template-part-color);
+			// Show a light color for dark themes.
+			.is-dark-theme & {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
+			}
+		}
+	}
+}

From 2a3decac763d4cccd1bae777c09fc876ae833685 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Wed, 2 Nov 2022 14:33:44 +1300
Subject: [PATCH 07/28] Fix scope of styles

---
 packages/block-library/src/block/editor.scss         | 3 ++-
 packages/block-library/src/template-part/editor.scss | 1 -
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/block/editor.scss b/packages/block-library/src/block/editor.scss
index 9b57d229a46814..6496a5339d0a21 100644
--- a/packages/block-library/src/block/editor.scss
+++ b/packages/block-library/src/block/editor.scss
@@ -13,10 +13,11 @@
 	.components-disabled .block-list-appender {
 		display: none;
 	}
+}
 
+.block-library-block__reusable-block-container {
 	&.is-highlighted,
 	&.is-selected {
-		border-radius: $radius-block-ui;
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-reusable-color);
 	}
 
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index e807d5bbb8309e..60f71efed7db77 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -28,7 +28,6 @@
 .wp-block-template-part {
 	&.is-highlighted,
 	&.is-selected {
-		border-radius: $radius-block-ui;
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-template-part-color);
 	}
 

From 22c5977ed89b6a6f3c83ac8558898b1b6a1ada60 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Wed, 2 Nov 2022 16:08:58 +1300
Subject: [PATCH 08/28] Add colors to block selector

---
 .../src/components/inserter-list-item/index.js      | 13 ++++++++++++-
 .../src/components/inserter-list-item/style.scss    | 12 ++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/inserter-list-item/index.js b/packages/block-editor/src/components/inserter-list-item/index.js
index d24df56df241fe..a78efc0ab2f871 100644
--- a/packages/block-editor/src/components/inserter-list-item/index.js
+++ b/packages/block-editor/src/components/inserter-list-item/index.js
@@ -47,6 +47,10 @@ function InserterListItem( {
 		];
 	}, [ item.name, item.initialAttributes, item.initialAttributes ] );
 
+	const isReusable =
+		item.name === 'core/block' && item.category === 'reusable';
+	const isTemplatePart = item.name === 'core/template-part';
+
 	return (
 		<InserterDraggableBlocks
 			isEnabled={ isDraggable && ! item.disabled }
@@ -55,7 +59,14 @@ function InserterListItem( {
 		>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
 				<div
-					className="block-editor-block-types-list__list-item"
+					className={ classnames(
+						'block-editor-block-types-list__list-item',
+
+						{
+							'is-reusable': isReusable,
+							'is-template-part': isTemplatePart,
+						}
+					) }
 					draggable={ draggable }
 					onDragStart={ ( event ) => {
 						isDragging.current = true;
diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss
index b3078adb519f15..c134d29254e389 100644
--- a/packages/block-editor/src/components/inserter-list-item/style.scss
+++ b/packages/block-editor/src/components/inserter-list-item/style.scss
@@ -3,6 +3,18 @@
 	width: 33.33%;
 	padding: 0;
 	margin: 0;
+	&.is-template-part {
+		.block-editor-block-icon.has-colors,
+		.block-editor-block-types-list__item-title {
+			color: var(--wp-block-template-part-color);
+		}
+	}
+	&.is-reusable {
+		.block-editor-block-icon.has-colors,
+		.block-editor-block-types-list__item-title {
+			color: var(--wp-block-reusable-color);
+		}
+	}
 }
 
 .components-button.block-editor-block-types-list__item {

From be58817e2025b6c7a6fae861ce7bc8d5bb092401 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Wed, 2 Nov 2022 17:04:46 +1300
Subject: [PATCH 09/28] fix issue with outline styles

---
 .../src/components/list-view/style.scss       | 12 ------------
 packages/block-library/src/block/editor.scss  | 17 -----------------
 .../src/template-part/editor.scss             | 19 ++++++++++++++++++-
 3 files changed, 18 insertions(+), 30 deletions(-)

diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index fb4c3cf95254eb..e35a522399c55e 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -155,18 +155,6 @@
 		}
 	}
 
-	&.is-template-part .block-editor-list-view-block-contents:focus {
-		&::after {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-template-part-color);
-		}
-	}
-
-	&.is-reusable .block-editor-list-view-block-contents:focus {
-		&::after {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-reusable-color);
-		}
-	}
-
 	// Fix focus styling width when one row has fewer cells.
 	&.has-single-cell .block-editor-list-view-block-contents:focus::after {
 		right: 0;
diff --git a/packages/block-library/src/block/editor.scss b/packages/block-library/src/block/editor.scss
index 6496a5339d0a21..b3eb1a67e99459 100644
--- a/packages/block-library/src/block/editor.scss
+++ b/packages/block-library/src/block/editor.scss
@@ -14,20 +14,3 @@
 		display: none;
 	}
 }
-
-.block-library-block__reusable-block-container {
-	&.is-highlighted,
-	&.is-selected {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-reusable-color);
-	}
-
-	&.block-editor-block-list__block:not([contenteditable]):focus {
-		&::after {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-reusable-color);
-			// Show a light color for dark themes.
-			.is-dark-theme & {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
-			}
-		}
-	}
-}
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 60f71efed7db77..500860062f554c 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -25,7 +25,7 @@
 	z-index: z-index(".block-library-template-part__selection-search");
 }
 
-.wp-block-template-part {
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part {
 	&.is-highlighted,
 	&.is-selected {
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-template-part-color);
@@ -41,3 +41,20 @@
 		}
 	}
 }
+
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable {
+	&.is-highlighted,
+	&.is-selected {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-reusable-color);
+	}
+
+	&.block-editor-block-list__block:not([contenteditable]):focus {
+		&::after {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-reusable-color);
+			// Show a light color for dark themes.
+			.is-dark-theme & {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
+			}
+		}
+	}
+}

From 0d1dbb97b935ca541c1ea9f9bc8c06cfb41a69ab Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Thu, 3 Nov 2022 08:52:53 +1300
Subject: [PATCH 10/28] Switch to using the existing isTemplatePart and
 isReusable methods

---
 .../src/components/block-toolbar/index.js           | 13 ++++++++-----
 .../use-block-display-information/index.js          | 12 +++++++-----
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index ecc7cb9e77857b..f7b68907f5977e 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -9,7 +9,12 @@ import classnames from 'classnames';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRef } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
-import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
+import {
+	getBlockType,
+	hasBlockSupport,
+	isReusableBlock,
+	isTemplatePart as isTemplate,
+} from '@wordpress/blocks';
 import { ToolbarGroup } from '@wordpress/components';
 
 /**
@@ -74,10 +79,6 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 		};
 	}, [] );
 
-	const isReusable =
-		blockType.name === 'core/block' && blockType.category === 'reusable';
-	const isTemplatePart = blockType.name === 'core/template-part';
-
 	// Handles highlighting the current block outline on hover or focus of the
 	// block type toolbar area.
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
@@ -113,6 +114,8 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 
 	const shouldShowVisualToolbar = isValid && isVisual;
 	const isMultiToolbar = blockClientIds.length > 1;
+	const isReusable = isReusableBlock( blockType );
+	const isTemplatePart = isTemplate( blockType );
 
 	const classes = classnames(
 		'block-editor-block-toolbar',
diff --git a/packages/block-editor/src/components/use-block-display-information/index.js b/packages/block-editor/src/components/use-block-display-information/index.js
index 8b4d0eba95c418..c489acef5dc790 100644
--- a/packages/block-editor/src/components/use-block-display-information/index.js
+++ b/packages/block-editor/src/components/use-block-display-information/index.js
@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { store as blocksStore } from '@wordpress/blocks';
+import {
+	store as blocksStore,
+	isReusableBlock,
+	isTemplatePart as isTemplate,
+} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -52,10 +56,8 @@ export default function useBlockDisplayInformation( clientId ) {
 			if ( ! blockType ) return null;
 			const attributes = getBlockAttributes( clientId );
 			const match = getActiveBlockVariation( blockName, attributes );
-			const isReusable =
-				blockType.name === 'core/block' &&
-				blockType.category === 'reusable';
-			const isTemplatePart = blockType.name === 'core/template-part';
+			const isReusable = isReusableBlock( blockType );
+			const isTemplatePart = isTemplate( blockType );
 			const blockTypeInfo = {
 				isReusable,
 				isTemplatePart,

From 3fbf88dbd26cfe7b1869806d62be947357b586dd Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Thu, 3 Nov 2022 08:57:05 +1300
Subject: [PATCH 11/28] another switch to use existing methods

---
 .../src/components/inserter-list-item/index.js             | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/inserter-list-item/index.js b/packages/block-editor/src/components/inserter-list-item/index.js
index a78efc0ab2f871..a4bc92627743f2 100644
--- a/packages/block-editor/src/components/inserter-list-item/index.js
+++ b/packages/block-editor/src/components/inserter-list-item/index.js
@@ -10,6 +10,8 @@ import { useMemo, useRef, memo } from '@wordpress/element';
 import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
+	isReusableBlock,
+	isTemplatePart as isTemplate,
 } from '@wordpress/blocks';
 import { __experimentalTruncate as Truncate } from '@wordpress/components';
 import { ENTER, isAppleOS } from '@wordpress/keycodes';
@@ -47,9 +49,8 @@ function InserterListItem( {
 		];
 	}, [ item.name, item.initialAttributes, item.initialAttributes ] );
 
-	const isReusable =
-		item.name === 'core/block' && item.category === 'reusable';
-	const isTemplatePart = item.name === 'core/template-part';
+	const isReusable = isReusableBlock( item );
+	const isTemplatePart = isTemplate( item );
 
 	return (
 		<InserterDraggableBlocks

From 3e0d7f025f304d3317ba22177244e0c1aadffcb8 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Thu, 3 Nov 2022 16:54:48 +1300
Subject: [PATCH 12/28] Combine the template part and reusable block colors
 under an `isSynced` flag

---
 packages/base-styles/_colors.scss             |  3 +--
 .../src/components/block-toolbar/index.js     |  9 ++++----
 .../src/components/block-toolbar/style.scss   | 10 ++++----
 .../components/inserter-list-item/index.js    |  8 +++----
 .../components/inserter-list-item/style.scss  | 10 ++------
 .../src/components/list-view/block.js         |  3 +--
 .../src/components/list-view/style.scss       | 14 ++++-------
 .../use-block-display-information/index.js    | 23 ++++++++-----------
 .../src/template-part/editor.scss             | 11 +++++----
 9 files changed, 36 insertions(+), 55 deletions(-)

diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss
index 85fa4bd3a9df6f..b99407fd5a767e 100644
--- a/packages/base-styles/_colors.scss
+++ b/packages/base-styles/_colors.scss
@@ -26,6 +26,5 @@ $alert-red: #cc1818;
 $alert-green: #4ab866;
 
 :root {
-	--wp-block-template-part-color: #7c4dc3;
-	--wp-block-reusable-color: #34948e;
+	--wp-block-synced-color: #7a00df;
 }
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index f7b68907f5977e..0ce0764313f689 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -13,7 +13,7 @@ import {
 	getBlockType,
 	hasBlockSupport,
 	isReusableBlock,
-	isTemplatePart as isTemplate,
+	isTemplatePart,
 } from '@wordpress/blocks';
 import { ToolbarGroup } from '@wordpress/components';
 
@@ -114,15 +114,14 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 
 	const shouldShowVisualToolbar = isValid && isVisual;
 	const isMultiToolbar = blockClientIds.length > 1;
-	const isReusable = isReusableBlock( blockType );
-	const isTemplatePart = isTemplate( blockType );
+	const isSynced =
+		isReusableBlock( blockType ) || isTemplatePart( blockType );
 
 	const classes = classnames(
 		'block-editor-block-toolbar',
 		shouldShowMovers && 'is-showing-movers',
 		{
-			'is-reusable': isReusable,
-			'is-template-part': isTemplatePart,
+			'is-synced': isSynced,
 		}
 	);
 
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index 61f14e1308242b..12dcf482a0100f 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -39,14 +39,14 @@
 		border-right: $border-width solid $gray-300;
 	}
 
-	&.is-reusable .block-editor-block-switcher .components-button {
-		color: var(--wp-block-reusable-color);
+	&.is-synced .block-editor-block-switcher .components-button {
+		color: var(--wp-block-synced-color);
 	}
 
-	&.is-template-part .components-toolbar-button.block-editor-block-switcher__no-switcher-icon {
-		color: var(--wp-block-template-part-color);
+	&.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon {
+		color: var(--wp-block-synced-color);
 		&:disabled .block-editor-block-icon.has-colors {
-			color: var(--wp-block-template-part-color);
+			color: var(--wp-block-synced-color);
 		}
 	}
 
diff --git a/packages/block-editor/src/components/inserter-list-item/index.js b/packages/block-editor/src/components/inserter-list-item/index.js
index a4bc92627743f2..2c7e73ffc0f68e 100644
--- a/packages/block-editor/src/components/inserter-list-item/index.js
+++ b/packages/block-editor/src/components/inserter-list-item/index.js
@@ -11,7 +11,7 @@ import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
 	isReusableBlock,
-	isTemplatePart as isTemplate,
+	isTemplatePart,
 } from '@wordpress/blocks';
 import { __experimentalTruncate as Truncate } from '@wordpress/components';
 import { ENTER, isAppleOS } from '@wordpress/keycodes';
@@ -49,8 +49,7 @@ function InserterListItem( {
 		];
 	}, [ item.name, item.initialAttributes, item.initialAttributes ] );
 
-	const isReusable = isReusableBlock( item );
-	const isTemplatePart = isTemplate( item );
+	const isSynced = isReusableBlock( item ) || isTemplatePart( item );
 
 	return (
 		<InserterDraggableBlocks
@@ -64,8 +63,7 @@ function InserterListItem( {
 						'block-editor-block-types-list__list-item',
 
 						{
-							'is-reusable': isReusable,
-							'is-template-part': isTemplatePart,
+							'is-synced': isSynced,
 						}
 					) }
 					draggable={ draggable }
diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss
index c134d29254e389..aefdcaf21a1341 100644
--- a/packages/block-editor/src/components/inserter-list-item/style.scss
+++ b/packages/block-editor/src/components/inserter-list-item/style.scss
@@ -3,16 +3,10 @@
 	width: 33.33%;
 	padding: 0;
 	margin: 0;
-	&.is-template-part {
+	&.is-synced {
 		.block-editor-block-icon.has-colors,
 		.block-editor-block-types-list__item-title {
-			color: var(--wp-block-template-part-color);
-		}
-	}
-	&.is-reusable {
-		.block-editor-block-icon.has-colors,
-		.block-editor-block-types-list__item-title {
-			color: var(--wp-block-reusable-color);
+			color: var(--wp-block-synced-color);
 		}
 	}
 }
diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
index 1c411a88b7322b..74a3ea3b688440 100644
--- a/packages/block-editor/src/components/list-view/block.js
+++ b/packages/block-editor/src/components/list-view/block.js
@@ -207,8 +207,7 @@ function ListViewBlock( {
 		'is-branch-selected': isBranchSelected,
 		'is-dragging': isDragged,
 		'has-single-cell': ! showBlockActions,
-		'is-reusable': blockInformation.isReusable,
-		'is-template-part': blockInformation.isTemplatePart,
+		'is-synced': blockInformation.isSynced,
 	} );
 
 	// Only include all selected blocks if the currently clicked on block
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index e35a522399c55e..8d6f59697f413d 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -19,17 +19,11 @@
 	&.is-selected td {
 		background: var(--wp-admin-theme-color);
 	}
-	&.is-selected.is-template-part td {
-		background: var(--wp-block-template-part-color);
+	&.is-selected.is-synced td {
+		background: var(--wp-block-synced-color);
 	}
-	&.is-selected.is-reusable td {
-		background: var(--wp-block-reusable-color);
-	}
-	&.is-template-part .block-editor-list-view-block-contents {
-		color: var(--wp-block-template-part-color);
-	}
-	&.is-reusable .block-editor-list-view-block-contents {
-		color: var(--wp-block-reusable-color);
+	&.is-synced .block-editor-list-view-block-contents {
+		color: var(--wp-block-synced-color);
 	}
 	&.is-selected .block-editor-list-view-block-contents,
 	&.is-selected .components-button.has-icon {
diff --git a/packages/block-editor/src/components/use-block-display-information/index.js b/packages/block-editor/src/components/use-block-display-information/index.js
index c489acef5dc790..e9b1e8865a05cf 100644
--- a/packages/block-editor/src/components/use-block-display-information/index.js
+++ b/packages/block-editor/src/components/use-block-display-information/index.js
@@ -5,7 +5,7 @@ import { useSelect } from '@wordpress/data';
 import {
 	store as blocksStore,
 	isReusableBlock,
-	isTemplatePart as isTemplate,
+	isTemplatePart,
 } from '@wordpress/blocks';
 
 /**
@@ -20,12 +20,11 @@ import { store as blockEditorStore } from '../../store';
  *
  * @typedef {Object} WPBlockDisplayInformation
  *
- * @property {boolean} isReusable     True if is a reusable block
- * @property {boolean} isTemplatePart True if is a template part block
- * @property {string}  title          Human-readable block type label.
- * @property {WPIcon}  icon           Block type icon.
- * @property {string}  description    A detailed block type description.
- * @property {string}  anchor         HTML anchor.
+ * @property {boolean} isSynced    True if is a reusable block or template part
+ * @property {string}  title       Human-readable block type label.
+ * @property {WPIcon}  icon        Block type icon.
+ * @property {string}  description A detailed block type description.
+ * @property {string}  anchor      HTML anchor.
  */
 
 /**
@@ -56,11 +55,10 @@ export default function useBlockDisplayInformation( clientId ) {
 			if ( ! blockType ) return null;
 			const attributes = getBlockAttributes( clientId );
 			const match = getActiveBlockVariation( blockName, attributes );
-			const isReusable = isReusableBlock( blockType );
-			const isTemplatePart = isTemplate( blockType );
+			const isSynced =
+				isReusableBlock( blockType ) || isTemplatePart( blockType );
 			const blockTypeInfo = {
-				isReusable,
-				isTemplatePart,
+				isSynced,
 				title: blockType.title,
 				icon: blockType.icon,
 				description: blockType.description,
@@ -69,8 +67,7 @@ export default function useBlockDisplayInformation( clientId ) {
 			if ( ! match ) return blockTypeInfo;
 
 			return {
-				isReusable,
-				isTemplatePart,
+				isSynced,
 				title: match.title || blockType.title,
 				icon: match.icon || blockType.icon,
 				description: match.description || blockType.description,
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 500860062f554c..74b3d780032204 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -25,15 +25,16 @@
 	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).wp-block-template-part,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable {
 	&.is-highlighted,
 	&.is-selected {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-template-part-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
 	}
 
 	&.block-editor-block-list__block:not([contenteditable]):focus {
 		&::after {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-template-part-color);
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
 			// Show a light color for dark themes.
 			.is-dark-theme & {
 				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
@@ -45,12 +46,12 @@
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable {
 	&.is-highlighted,
 	&.is-selected {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-reusable-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
 	}
 
 	&.block-editor-block-list__block:not([contenteditable]):focus {
 		&::after {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-reusable-color);
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
 			// Show a light color for dark themes.
 			.is-dark-theme & {
 				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;

From bc38da3c5c7be7c5bdc9cfa6206da769d6d1974e Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Thu, 3 Nov 2022 17:12:01 +1300
Subject: [PATCH 13/28] Remove color from block name and just color icon

---
 packages/block-editor/src/components/block-toolbar/style.scss  | 3 +--
 .../block-editor/src/components/inserter-list-item/style.scss  | 3 +--
 packages/block-editor/src/components/list-view/style.scss      | 2 +-
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index 12dcf482a0100f..41faa1a46eaed2 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -39,12 +39,11 @@
 		border-right: $border-width solid $gray-300;
 	}
 
-	&.is-synced .block-editor-block-switcher .components-button {
+	&.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon {
 		color: var(--wp-block-synced-color);
 	}
 
 	&.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon {
-		color: var(--wp-block-synced-color);
 		&:disabled .block-editor-block-icon.has-colors {
 			color: var(--wp-block-synced-color);
 		}
diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss
index aefdcaf21a1341..67e49db0d6c4d9 100644
--- a/packages/block-editor/src/components/inserter-list-item/style.scss
+++ b/packages/block-editor/src/components/inserter-list-item/style.scss
@@ -4,8 +4,7 @@
 	padding: 0;
 	margin: 0;
 	&.is-synced {
-		.block-editor-block-icon.has-colors,
-		.block-editor-block-types-list__item-title {
+		.block-editor-block-icon.has-colors {
 			color: var(--wp-block-synced-color);
 		}
 	}
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 8d6f59697f413d..5df71cb7467a86 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -22,7 +22,7 @@
 	&.is-selected.is-synced td {
 		background: var(--wp-block-synced-color);
 	}
-	&.is-synced .block-editor-list-view-block-contents {
+	&.is-synced .block-editor-list-view-block-contents .block-editor-block-icon {
 		color: var(--wp-block-synced-color);
 	}
 	&.is-selected .block-editor-list-view-block-contents,

From e0f590511fe4b2d088f0cacb02c6b2d352fd05ac Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Thu, 3 Nov 2022 17:21:00 +1300
Subject: [PATCH 14/28] Apply selected outline color to reusable blocks in the
 post editor

---
 packages/block-library/src/block/editor.scss    | 17 +++++++++++++++++
 .../block-library/src/template-part/editor.scss | 17 -----------------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/block-library/src/block/editor.scss b/packages/block-library/src/block/editor.scss
index b3eb1a67e99459..c49675392a525e 100644
--- a/packages/block-library/src/block/editor.scss
+++ b/packages/block-library/src/block/editor.scss
@@ -14,3 +14,20 @@
 		display: none;
 	}
 }
+
+.edit-post-visual-editor .block-editor-block-list__block:not(.remove-outline).is-reusable {
+	&.is-highlighted,
+	&.is-selected {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+	}
+
+	&.block-editor-block-list__block:not([contenteditable]):focus {
+		&::after {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+			// Show a light color for dark themes.
+			.is-dark-theme & {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
+			}
+		}
+	}
+}
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 74b3d780032204..a847ecec01f94d 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -42,20 +42,3 @@
 		}
 	}
 }
-
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable {
-	&.is-highlighted,
-	&.is-selected {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
-	}
-
-	&.block-editor-block-list__block:not([contenteditable]):focus {
-		&::after {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
-			// Show a light color for dark themes.
-			.is-dark-theme & {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
-			}
-		}
-	}
-}

From 693158644b94770ce6d81b9d5fac93ff8e3a8de0 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Fri, 4 Nov 2022 10:27:14 +1300
Subject: [PATCH 15/28] change colour of focus outline

---
 packages/block-editor/src/components/list-view/style.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 5df71cb7467a86..e269ae0ad34d6e 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -43,6 +43,13 @@
 				0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 	}
+	&.is-selected.is-synced .block-editor-list-view-block-contents:focus {
+		&::after {
+			box-shadow:
+				inset 0 0 0 1px $white,
+				0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+		}
+	}
 	&.is-selected .block-editor-list-view-block__menu:focus {
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white;
 	}

From e5d1f96ea1a0ed734b92acb496095b484a4836a0 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Wed, 23 Nov 2022 09:06:30 +1300
Subject: [PATCH 16/28] Add synced color to block icon in inspector panel
 header

---
 .../block-editor/src/components/block-card/index.js  | 12 +++++++++++-
 .../src/components/block-card/style.scss             |  4 ++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js
index 6362b1b4ca2c7c..afda93d5ece7af 100644
--- a/packages/block-editor/src/components/block-card/index.js
+++ b/packages/block-editor/src/components/block-card/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -17,6 +22,7 @@ function BlockCard( {
 	blockType,
 	parentBlockClientId,
 	handleBackButton,
+	isSynced,
 } ) {
 	if ( blockType ) {
 		deprecated( '`blockType` property in `BlockCard component`', {
@@ -30,7 +36,11 @@ function BlockCard( {
 		window?.__experimentalEnableOffCanvasNavigationEditor === true;
 
 	return (
-		<div className="block-editor-block-card">
+		<div
+			className={ classnames( 'block-editor-block-card', {
+				'is-synced': isSynced,
+			} ) }
+		>
 			{ isOffCanvasNavigationEditorEnabled && parentBlockClientId && (
 				<Button
 					onClick={ handleBackButton }
diff --git a/packages/block-editor/src/components/block-card/style.scss b/packages/block-editor/src/components/block-card/style.scss
index 07bd4d1ef1d8ed..1b2156c19fa797 100644
--- a/packages/block-editor/src/components/block-card/style.scss
+++ b/packages/block-editor/src/components/block-card/style.scss
@@ -28,3 +28,7 @@
 	width: $button-size-small;
 	height: $button-size-small;
 }
+
+.block-editor-block-card.is-synced .block-editor-block-icon {
+	color: var(--wp-block-synced-color);
+}

From 00abab32657ad66ebb35d3239710a4e77d709c88 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Fri, 4 Nov 2022 12:12:17 +1300
Subject: [PATCH 17/28] Add synced color to block hover overlay

---
 packages/base-styles/_colors.scss                           | 3 +++
 .../src/components/block-content-overlay/style.scss         | 6 ++++++
 2 files changed, 9 insertions(+)

diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss
index b99407fd5a767e..5847a66f8b2435 100644
--- a/packages/base-styles/_colors.scss
+++ b/packages/base-styles/_colors.scss
@@ -1,3 +1,5 @@
+@import "./functions";
+
 /**
  * Colors
  */
@@ -27,4 +29,5 @@ $alert-green: #4ab866;
 
 :root {
 	--wp-block-synced-color: #7a00df;
+	--wp-block-synced-color--rgb: #{hex-to-rgb(#7a00df)};
 }
diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss
index 7795bef2525f0b..f83d2683687ea8 100644
--- a/packages/block-editor/src/components/block-content-overlay/style.scss
+++ b/packages/block-editor/src/components/block-content-overlay/style.scss
@@ -23,6 +23,12 @@
 		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
 	}
 
+	&.is-reusable:hover:not(.is-dragging-blocks)::before,
+	&.wp-block-template-part:hover:not(.is-dragging-blocks)::before {
+		background: rgba(var(--wp-block-synced-color--rgb), 0.3);
+		box-shadow: 0 0 0 $border-width var(--wp-block-synced-color) inset;
+	}
+
 	&.is-selected:not(.is-dragging-blocks)::before {
 		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
 	}

From a28dd85f2971b351d9fa4543f395314af389df23 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Fri, 4 Nov 2022 16:16:56 +1300
Subject: [PATCH 18/28] Colorise name in header

---
 .../src/components/header-edit-mode/document-actions/style.scss  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
index b83a65938b19a7..ccf08171086a4e 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
@@ -53,6 +53,7 @@
 		transition: all ease 0.2s;
 		background: $gray-200;
 		border-radius: 2px;
+		color: var(--wp-block-synced-color);
 		@include reduce-motion(transition);
 	}
 

From 878ae16b817d9846fd2ef170044c4782ed90380e Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Thu, 17 Nov 2022 12:55:55 +1300
Subject: [PATCH 19/28] Add icon to site editor template part dropdown

---
 .../document-actions/index.js                 | 23 +++++++++++--------
 .../document-actions/style.scss               |  9 ++++++--
 .../components/template-details/style.scss    |  4 ++++
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
index 2bf1ba13a36a1e..b829e19f01342a 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
@@ -20,7 +20,11 @@ import {
 } from '@wordpress/components';
 import { chevronDown } from '@wordpress/icons';
 import { useState, useMemo } from '@wordpress/element';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	store as blockEditorStore,
+	useBlockDisplayInformation,
+	BlockIcon,
+} from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -52,10 +56,13 @@ function useSecondaryText() {
 		[]
 	);
 
+	const blockInformation = useBlockDisplayInformation( activeEntityBlockId );
+
 	if ( activeEntityBlockId ) {
 		return {
 			label: getBlockDisplayText( getBlock( activeEntityBlockId ) ),
 			isActive: true,
+			icon: blockInformation?.icon,
 		};
 	}
 
@@ -90,9 +97,10 @@ export default function DocumentActions() {
 				templateType: postType,
 			};
 		}, [] );
+
 	const entityLabel =
 		templateType === 'wp_template_part' ? 'template part' : 'template';
-	const { label } = useSecondaryText();
+	const { label, icon } = useSecondaryText();
 
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
@@ -150,13 +158,10 @@ export default function DocumentActions() {
 					</VisuallyHidden>
 					{ decodeEntities( entityTitle ) }
 				</Text>
-
-				<Text
-					size="body"
-					className="edit-site-document-actions__secondary-item"
-				>
-					{ label ?? '' }
-				</Text>
+				<div className="edit-site-document-actions__secondary-item">
+					<BlockIcon icon={ icon } showColors />
+					<Text size="body">{ label ?? '' }</Text>
+				</div>
 
 				<Dropdown
 					popoverProps={ popoverProps }
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
index ccf08171086a4e..1109f9cf824ab9 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
@@ -44,6 +44,8 @@
 	}
 
 	.edit-site-document-actions__secondary-item {
+		display: flex;
+		align-items: center;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -51,10 +53,13 @@
 		opacity: 0;
 		padding: 0;
 		transition: all ease 0.2s;
-		background: $gray-200;
+		background: rgba(var(--wp-block-synced-color--rgb), 0.3);
 		border-radius: 2px;
-		color: var(--wp-block-synced-color);
 		@include reduce-motion(transition);
+
+		.block-editor-block-icon.has-colors {
+			color: var(--wp-block-synced-color);
+		}
 	}
 
 	&.has-secondary-label {
diff --git a/packages/edit-site/src/components/template-details/style.scss b/packages/edit-site/src/components/template-details/style.scss
index 531d4d2487d126..ee840be7c43db7 100644
--- a/packages/edit-site/src/components/template-details/style.scss
+++ b/packages/edit-site/src/components/template-details/style.scss
@@ -20,6 +20,10 @@
 	.edit-site-template-details__template-areas-item {
 		position: relative;
 
+		.components-menu-items__item-icon {
+			color: var(--wp-block-synced-color);
+		}
+
 		.edit-site-template-details__template-areas-item-more {
 			position: absolute;
 			right: 0;

From a9d184856ce1793c2aa2fdf1d942fd0e25433562 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Thu, 17 Nov 2022 13:42:13 +1300
Subject: [PATCH 20/28] Add brightness to background color

---
 .../block-editor/src/components/block-content-overlay/style.scss | 1 +
 .../src/components/header-edit-mode/document-actions/style.scss  | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss
index f83d2683687ea8..9de1177bd323b7 100644
--- a/packages/block-editor/src/components/block-content-overlay/style.scss
+++ b/packages/block-editor/src/components/block-content-overlay/style.scss
@@ -25,6 +25,7 @@
 
 	&.is-reusable:hover:not(.is-dragging-blocks)::before,
 	&.wp-block-template-part:hover:not(.is-dragging-blocks)::before {
+		filter: brightness(0.95);
 		background: rgba(var(--wp-block-synced-color--rgb), 0.3);
 		box-shadow: 0 0 0 $border-width var(--wp-block-synced-color) inset;
 	}
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
index 1109f9cf824ab9..560854119ba3b6 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
@@ -53,6 +53,7 @@
 		opacity: 0;
 		padding: 0;
 		transition: all ease 0.2s;
+		filter: brightness(0.95);
 		background: rgba(var(--wp-block-synced-color--rgb), 0.3);
 		border-radius: 2px;
 		@include reduce-motion(transition);

From 31a7b11bbe4137bd19e382ace5d9c143cb5af39d Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Fri, 18 Nov 2022 10:41:34 +1300
Subject: [PATCH 21/28] Add extra class to denote synced branches

---
 packages/block-editor/src/components/list-view/block.js  | 2 ++
 packages/block-editor/src/components/list-view/branch.js | 7 +++++++
 2 files changed, 9 insertions(+)

diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
index 74a3ea3b688440..c79f463b5ed26e 100644
--- a/packages/block-editor/src/components/list-view/block.js
+++ b/packages/block-editor/src/components/list-view/block.js
@@ -54,6 +54,7 @@ function ListViewBlock( {
 	isExpanded,
 	selectedClientIds,
 	preventAnnouncement,
+	isSyncedBranch,
 } ) {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
@@ -205,6 +206,7 @@ function ListViewBlock( {
 		'is-first-selected': isFirstSelectedBlock,
 		'is-last-selected': isLastSelectedBlock,
 		'is-branch-selected': isBranchSelected,
+		'is-synced-branch': isSyncedBranch,
 		'is-dragging': isDragged,
 		'has-single-cell': ! showBlockActions,
 		'is-synced': blockInformation.isSynced,
diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js
index d2ba24065a3282..1ee073445ee448 100644
--- a/packages/block-editor/src/components/list-view/branch.js
+++ b/packages/block-editor/src/components/list-view/branch.js
@@ -14,6 +14,7 @@ import ListViewBlock from './block';
 import { useListViewContext } from './context';
 import { isClientIdSelected } from './utils';
 import { store as blockEditorStore } from '../../store';
+import useBlockDisplayInformation from '../use-block-display-information';
 
 /**
  * Given a block, returns the total number of blocks in that subtree. This is used to help determine
@@ -92,8 +93,12 @@ function ListViewBranch( props ) {
 		isExpanded,
 		parentId,
 		shouldShowInnerBlocks = true,
+		isSyncedBranch = false,
 	} = props;
 
+	const parentBlockInformation = useBlockDisplayInformation( parentId );
+	const syncedBranch = isSyncedBranch || !! parentBlockInformation?.isSynced;
+
 	const canParentExpand = useSelect(
 		( select ) => {
 			if ( ! parentId ) {
@@ -179,6 +184,7 @@ function ListViewBranch( props ) {
 								isExpanded={ shouldExpand }
 								listPosition={ nextPosition }
 								selectedClientIds={ selectedClientIds }
+								isSyncedBranch={ syncedBranch }
 							/>
 						) }
 						{ ! showBlock && (
@@ -199,6 +205,7 @@ function ListViewBranch( props ) {
 								isBranchSelected={ isSelectedBranch }
 								selectedClientIds={ selectedClientIds }
 								isExpanded={ isExpanded }
+								isSyncedBranch={ syncedBranch }
 							/>
 						) }
 					</AsyncModeProvider>

From d4e1e7d9b95e542601e8e792842a60fb7f1000cf Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Fri, 18 Nov 2022 09:00:32 +1300
Subject: [PATCH 22/28] Add synced color to list view branch items

---
 packages/base-styles/_colors.scss                         | 1 -
 .../src/components/block-content-overlay/style.scss       | 4 +++-
 packages/block-editor/src/components/list-view/style.scss | 8 +++++++-
 .../header-edit-mode/document-actions/style.scss          | 5 +++--
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss
index 5847a66f8b2435..38a92fbf58486d 100644
--- a/packages/base-styles/_colors.scss
+++ b/packages/base-styles/_colors.scss
@@ -29,5 +29,4 @@ $alert-green: #4ab866;
 
 :root {
 	--wp-block-synced-color: #7a00df;
-	--wp-block-synced-color--rgb: #{hex-to-rgb(#7a00df)};
 }
diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss
index 9de1177bd323b7..7e20e143b3ffa7 100644
--- a/packages/block-editor/src/components/block-content-overlay/style.scss
+++ b/packages/block-editor/src/components/block-content-overlay/style.scss
@@ -26,7 +26,9 @@
 	&.is-reusable:hover:not(.is-dragging-blocks)::before,
 	&.wp-block-template-part:hover:not(.is-dragging-blocks)::before {
 		filter: brightness(0.95);
-		background: rgba(var(--wp-block-synced-color--rgb), 0.3);
+		background:
+			linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)),
+			linear-gradient(var(--wp-block-synced-color), var(--wp-block-synced-color));
 		box-shadow: 0 0 0 $border-width var(--wp-block-synced-color) inset;
 	}
 
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index e269ae0ad34d6e..c5a92857948345 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -71,12 +71,18 @@
 	&.is-last-selected td:last-child {
 		border-bottom-right-radius: $radius-block-ui;
 	}
-	&.is-branch-selected:not(.is-selected) {
+	&.is-branch-selected:not(.is-selected):not(.is-synced-branch) {
 		// Lighten a CSS variable without introducing a new SASS variable
 		background:
 			linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)),
 			linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color));
 	}
+	&.is-synced-branch:not(.is-selected) {
+		// Lighten a CSS variable without introducing a new SASS variable
+		background:
+			linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)),
+			linear-gradient(var(--wp-block-synced-color), var(--wp-block-synced-color));
+	}
 	&.is-branch-selected.is-first-selected td:first-child {
 		border-top-left-radius: $radius-block-ui;
 	}
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
index 560854119ba3b6..6e93d435e488a7 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
@@ -53,8 +53,9 @@
 		opacity: 0;
 		padding: 0;
 		transition: all ease 0.2s;
-		filter: brightness(0.95);
-		background: rgba(var(--wp-block-synced-color--rgb), 0.3);
+		background:
+			linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)),
+			linear-gradient(var(--wp-block-synced-color), var(--wp-block-synced-color));
 		border-radius: 2px;
 		@include reduce-motion(transition);
 

From 00846fb462e1fd4d86f8de328aef25bd20f15b92 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Fri, 18 Nov 2022 09:49:49 +1300
Subject: [PATCH 23/28] Make sure child leaves are colored correctly

---
 .../src/components/list-view/style.scss             | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index c5a92857948345..b355ed7d7832df 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -16,13 +16,15 @@
 	position: relative;
 
 	// The background has to be applied to the td, not tr, or border-radius won't work.
-	&.is-selected td {
+	&.is-selected:not(.is-synced-branch) td {
 		background: var(--wp-admin-theme-color);
 	}
-	&.is-selected.is-synced td {
+	&.is-selected.is-synced td,
+	&.is-selected.is-synced-branch td {
 		background: var(--wp-block-synced-color);
 	}
-	&.is-synced .block-editor-list-view-block-contents .block-editor-block-icon {
+	&.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon,
+	&.is-synced-branch:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
 		color: var(--wp-block-synced-color);
 	}
 	&.is-selected .block-editor-list-view-block-contents,
@@ -36,14 +38,15 @@
 			color: $gray-900;
 		}
 	}
-	&.is-selected .block-editor-list-view-block-contents:focus {
+	&.is-selected:not(.is-synced-branch) .block-editor-list-view-block-contents:focus {
 		&::after {
 			box-shadow:
 				inset 0 0 0 1px $white,
 				0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 	}
-	&.is-selected.is-synced .block-editor-list-view-block-contents:focus {
+	&.is-selected.is-synced .block-editor-list-view-block-contents:focus,
+	&.is-selected.is-synced-branch .block-editor-list-view-block-contents:focus {
 		&::after {
 			box-shadow:
 				inset 0 0 0 1px $white,

From e93470df9f521d93f2441d3e6bf6328ca1faaf07 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Fri, 18 Nov 2022 10:28:29 +1300
Subject: [PATCH 24/28] Standardise opacity as 0.04

---
 packages/base-styles/_colors.scss                      |  1 +
 .../src/components/block-content-overlay/style.scss    |  7 ++-----
 .../block-editor/src/components/list-view/style.scss   | 10 ++--------
 .../header-edit-mode/document-actions/style.scss       |  4 +---
 4 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss
index 38a92fbf58486d..5847a66f8b2435 100644
--- a/packages/base-styles/_colors.scss
+++ b/packages/base-styles/_colors.scss
@@ -29,4 +29,5 @@ $alert-green: #4ab866;
 
 :root {
 	--wp-block-synced-color: #7a00df;
+	--wp-block-synced-color--rgb: #{hex-to-rgb(#7a00df)};
 }
diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss
index 7e20e143b3ffa7..17fd28ae07279a 100644
--- a/packages/block-editor/src/components/block-content-overlay/style.scss
+++ b/packages/block-editor/src/components/block-content-overlay/style.scss
@@ -19,16 +19,13 @@
 	}
 
 	&:hover:not(.is-dragging-blocks)::before {
-		background: rgba(var(--wp-admin-theme-color--rgb), 0.3);
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
 	}
 
 	&.is-reusable:hover:not(.is-dragging-blocks)::before,
 	&.wp-block-template-part:hover:not(.is-dragging-blocks)::before {
-		filter: brightness(0.95);
-		background:
-			linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)),
-			linear-gradient(var(--wp-block-synced-color), var(--wp-block-synced-color));
+		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
 		box-shadow: 0 0 0 $border-width var(--wp-block-synced-color) inset;
 	}
 
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index b355ed7d7832df..43f16f3df03d74 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -75,16 +75,10 @@
 		border-bottom-right-radius: $radius-block-ui;
 	}
 	&.is-branch-selected:not(.is-selected):not(.is-synced-branch) {
-		// Lighten a CSS variable without introducing a new SASS variable
-		background:
-			linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)),
-			linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color));
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 	}
 	&.is-synced-branch:not(.is-selected) {
-		// Lighten a CSS variable without introducing a new SASS variable
-		background:
-			linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)),
-			linear-gradient(var(--wp-block-synced-color), var(--wp-block-synced-color));
+		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
 	}
 	&.is-branch-selected.is-first-selected td:first-child {
 		border-top-left-radius: $radius-block-ui;
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
index 6e93d435e488a7..9129a025d52616 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
@@ -53,9 +53,7 @@
 		opacity: 0;
 		padding: 0;
 		transition: all ease 0.2s;
-		background:
-			linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)),
-			linear-gradient(var(--wp-block-synced-color), var(--wp-block-synced-color));
+		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
 		border-radius: 2px;
 		@include reduce-motion(transition);
 

From d50750c857f04f039c6e4b23cc619264044f02b8 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Wed, 23 Nov 2022 08:54:15 +1300
Subject: [PATCH 25/28] Revert "Make sure child leaves are colored correctly"

This reverts commit 5ff8bd6b0d3e39602296a021e343bbce21881176.
---
 .../src/components/list-view/style.scss             | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 43f16f3df03d74..9e41f50f2606cb 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -16,15 +16,13 @@
 	position: relative;
 
 	// The background has to be applied to the td, not tr, or border-radius won't work.
-	&.is-selected:not(.is-synced-branch) td {
+	&.is-selected td {
 		background: var(--wp-admin-theme-color);
 	}
-	&.is-selected.is-synced td,
-	&.is-selected.is-synced-branch td {
+	&.is-selected.is-synced td {
 		background: var(--wp-block-synced-color);
 	}
-	&.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon,
-	&.is-synced-branch:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
+	&.is-synced .block-editor-list-view-block-contents .block-editor-block-icon {
 		color: var(--wp-block-synced-color);
 	}
 	&.is-selected .block-editor-list-view-block-contents,
@@ -38,15 +36,14 @@
 			color: $gray-900;
 		}
 	}
-	&.is-selected:not(.is-synced-branch) .block-editor-list-view-block-contents:focus {
+	&.is-selected .block-editor-list-view-block-contents:focus {
 		&::after {
 			box-shadow:
 				inset 0 0 0 1px $white,
 				0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 	}
-	&.is-selected.is-synced .block-editor-list-view-block-contents:focus,
-	&.is-selected.is-synced-branch .block-editor-list-view-block-contents:focus {
+	&.is-selected.is-synced .block-editor-list-view-block-contents:focus {
 		&::after {
 			box-shadow:
 				inset 0 0 0 1px $white,

From 8fb97ddd704e37b381f19a166b4970549526cfad Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Wed, 23 Nov 2022 09:00:57 +1300
Subject: [PATCH 26/28] Standardise format in classnames

---
 .../src/components/block-toolbar/index.js             | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index 0ce0764313f689..6727851e1647bf 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -117,13 +117,10 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 	const isSynced =
 		isReusableBlock( blockType ) || isTemplatePart( blockType );
 
-	const classes = classnames(
-		'block-editor-block-toolbar',
-		shouldShowMovers && 'is-showing-movers',
-		{
-			'is-synced': isSynced,
-		}
-	);
+	const classes = classnames( 'block-editor-block-toolbar', {
+		'is-showing-movers': shouldShowMovers,
+		'is-synced': isSynced,
+	} );
 
 	return (
 		<div className={ classes }>

From 2333a271d072d74604063755f6e01215590aa4ba Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Wed, 23 Nov 2022 09:11:34 +1300
Subject: [PATCH 27/28] Fix icon color

---
 packages/block-editor/src/components/list-view/style.scss | 2 +-
 1 file changed, 1 insertion(+), 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 9e41f50f2606cb..9c30798830dae3 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -22,7 +22,7 @@
 	&.is-selected.is-synced td {
 		background: var(--wp-block-synced-color);
 	}
-	&.is-synced .block-editor-list-view-block-contents .block-editor-block-icon {
+	&.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
 		color: var(--wp-block-synced-color);
 	}
 	&.is-selected .block-editor-list-view-block-contents,

From 0ea11cb337927729ffba1b20cf9702f7579ee70e Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Wed, 23 Nov 2022 16:32:46 +1300
Subject: [PATCH 28/28] Fix failing e2e tests

---
 packages/blocks/src/api/registration.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/blocks/src/api/registration.js b/packages/blocks/src/api/registration.js
index f8f5ac996173b6..6c34fea8d95a8d 100644
--- a/packages/blocks/src/api/registration.js
+++ b/packages/blocks/src/api/registration.js
@@ -618,7 +618,7 @@ export function isReusableBlock( blockOrType ) {
  * @return {boolean} Whether the given block is a template part.
  */
 export function isTemplatePart( blockOrType ) {
-	return blockOrType.name === 'core/template-part';
+	return blockOrType?.name === 'core/template-part';
 }
 
 /**