From 51e6acd14d8395390ff999098ad9de639859a8f8 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Wed, 25 Nov 2020 10:57:27 +0000
Subject: [PATCH 01/11] Reveal block boundaries on hover, and colorise template
 parts

---
 .../src/components/block-list/style.scss      |  2 +-
 .../src/template-part/editor.scss             | 64 ++++++++++++-------
 2 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index b236abdb36a7d3..83039cc378e2e9 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -208,7 +208,7 @@
 
 	// Active entity spotlight.
 	&.has-active-entity:not(.is-focus-mode) {
-		opacity: 0.5;
+		//opacity: 0.5;
 		transition: opacity 0.1s linear;
 		@include reduce-motion("transition");
 
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 9c1b5275bf4db1..3fbef91ea390f9 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -90,35 +90,55 @@
 	}
 }
 
-.block-editor-block-list__block[data-type="core/template-part"] {
-	&.is-selected,
-	&.has-child-selected {
-		&::after {
-			top: $border-width;
-			bottom: $border-width;
-			left: $border-width;
-			right: $border-width;
-			border-radius: $radius-block-ui - $border-width; // Border is outset, so so subtract the width to achieve correct radius.
+.block-editor-block-list__layout {
+	.block-editor-block-list__block[data-type="core/template-part"] {
+		&.is-selected,
+		&.has-child-selected {
+			&::after {
+				top: $border-width;
+				bottom: $border-width;
+				left: $border-width;
+				right: $border-width;
+				border-radius: $radius-block-ui - $border-width; // Border is outset, so so subtract the width to achieve correct radius.
+			}
 		}
-	}
 
-	&.is-selected {
-		&::after {
-			// 2px outside.
-			box-shadow: 0 0 0 $border-width-focus var(--wp-admin-theme-color);
-			// Show a light color for dark themes.
-			.is-dark-theme & {
-				box-shadow: 0 0 0 $border-width-focus $dark-theme-focus;
+		&.is-selected,
+		&.is-hovered,
+		&:focus {
+			&::after, {
+				// 2px outside.
+				box-shadow: 0 0 0 $border-width-focus $alert-red;
+				// Show a light color for dark themes.
+				.is-dark-theme & {
+					box-shadow: 0 0 0 $border-width-focus $dark-theme-focus;
+				}
 			}
 		}
+
+		/*&.has-child-selected {
+			&::after {
+				box-shadow: 0 0 0 $border-width $gray-300;
+
+				.is-dark-theme & {
+					box-shadow: 0 0 0 $border-width-focus $gray-700;
+				}
+			}
+		}*/
 	}
 
-	&.has-child-selected {
-		&::after {
-			box-shadow: 0 0 0 $border-width $gray-300;
+	&.edit-site-block-editor__block-list {
+		.is-hovered {
+			&::after {
+				box-shadow: 0 0 0 $border-width $gray-900;
+			}
+		}
 
-			.is-dark-theme & {
-				box-shadow: 0 0 0 $border-width-focus $gray-700;
+		.block-editor-rich-text__editable {
+			&.is-selected.is-hovered {
+				&::after {
+					box-shadow: none;
+				}
 			}
 		}
 	}

From 855042cf62286be9d63e502d6fbb5b4fc683be3f Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Wed, 25 Nov 2020 11:34:57 +0000
Subject: [PATCH 02/11] Hover boundary width

---
 packages/block-library/src/template-part/editor.scss | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 3fbef91ea390f9..850b2632eccf27 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -103,8 +103,18 @@
 			}
 		}
 
+		&.is-hovered {
+			&::after, {
+				// 2px outside.
+				box-shadow: 0 0 0 $border-width $alert-red;
+				// Show a light color for dark themes.
+				.is-dark-theme & {
+					box-shadow: 0 0 0 $border-width $dark-theme-focus;
+				}
+			}
+		}
+
 		&.is-selected,
-		&.is-hovered,
 		&:focus {
 			&::after, {
 				// 2px outside.

From d09dc61fc526057937047013c28e374b862ef37d Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Wed, 25 Nov 2020 14:19:04 +0000
Subject: [PATCH 03/11] Remove focus and selected styles

---
 .../src/template-part/editor.scss             | 37 ++-----------------
 1 file changed, 3 insertions(+), 34 deletions(-)

diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 850b2632eccf27..3cbd3dc59d92e8 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -102,48 +102,17 @@
 				border-radius: $radius-block-ui - $border-width; // Border is outset, so so subtract the width to achieve correct radius.
 			}
 		}
-
-		&.is-hovered {
-			&::after, {
-				// 2px outside.
-				box-shadow: 0 0 0 $border-width $alert-red;
-				// Show a light color for dark themes.
-				.is-dark-theme & {
-					box-shadow: 0 0 0 $border-width $dark-theme-focus;
-				}
-			}
-		}
-
-		&.is-selected,
-		&:focus {
-			&::after, {
-				// 2px outside.
-				box-shadow: 0 0 0 $border-width-focus $alert-red;
-				// Show a light color for dark themes.
-				.is-dark-theme & {
-					box-shadow: 0 0 0 $border-width-focus $dark-theme-focus;
-				}
-			}
-		}
-
-		/*&.has-child-selected {
-			&::after {
-				box-shadow: 0 0 0 $border-width $gray-300;
-
-				.is-dark-theme & {
-					box-shadow: 0 0 0 $border-width-focus $gray-700;
-				}
-			}
-		}*/
 	}
 
 	&.edit-site-block-editor__block-list {
 		.is-hovered {
 			&::after {
-				box-shadow: 0 0 0 $border-width $gray-900;
+				box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
 			}
 		}
 
+
+		// Do not display a border on rich text blocks when hovered and selected
 		.block-editor-rich-text__editable {
 			&.is-selected.is-hovered {
 				&::after {

From cfcad791c1060c1b9c59363b4587320329d29c5f Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Thu, 26 Nov 2020 10:35:09 +0000
Subject: [PATCH 04/11] fix clipping issue and better align hover outline

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

diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 3cbd3dc59d92e8..9ed4b3c519c5f1 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -105,12 +105,17 @@
 	}
 
 	&.edit-site-block-editor__block-list {
-		.is-hovered {
+		.block-editor-block-list__block {
 			&::after {
-				box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+				outline: 2px solid transparent;
 			}
-		}
 
+			&.is-hovered:not(.is-selected) {
+				&::after {
+					box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
+				}
+			}
+		}
 
 		// Do not display a border on rich text blocks when hovered and selected
 		.block-editor-rich-text__editable {

From 10e1974783aa089fc93b992bc14c60650ee97efd Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Thu, 26 Nov 2020 13:23:42 +0000
Subject: [PATCH 05/11] Apply 1px black border when selected, but not focussed

---
 packages/block-library/src/template-part/editor.scss | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 9ed4b3c519c5f1..91e84fe5ca14e3 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -110,6 +110,18 @@
 				outline: 2px solid transparent;
 			}
 
+			&.is-selected {
+				&::after {
+					box-shadow: 0 0 0 $border-width $gray-900;
+				}
+
+				&:focus {
+					&::after {
+						box-shadow: 0 0 0 $border-width-focus var(--wp-admin-theme-color);
+					}
+				}
+			}
+
 			&.is-hovered:not(.is-selected) {
 				&::after {
 					box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);

From bfb85072f781ec7d152a0d99ffad3da1c3dcbf43 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Thu, 26 Nov 2020 13:23:58 +0000
Subject: [PATCH 06/11] Default cursor on hover

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

diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 91e84fe5ca14e3..86a59d42bf2dff 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -123,6 +123,8 @@
 			}
 
 			&.is-hovered:not(.is-selected) {
+				cursor: default;
+
 				&::after {
 					box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
 				}

From fa73c8833cf9c0456185b92dbf57fb32664dfbf6 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Thu, 26 Nov 2020 17:17:46 +0000
Subject: [PATCH 07/11] Only hide the outline on text editable blocks whilst
 typing

---
 packages/block-library/src/template-part/editor.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 86a59d42bf2dff..147df15d5bfaa0 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -133,7 +133,7 @@
 
 		// Do not display a border on rich text blocks when hovered and selected
 		.block-editor-rich-text__editable {
-			&.is-selected.is-hovered {
+			&.is-selected.is-hovered.is-typing {
 				&::after {
 					box-shadow: none;
 				}

From 4d3847b600e403d07805d651ab1c0592bc9556c6 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Thu, 26 Nov 2020 17:28:03 +0000
Subject: [PATCH 08/11] outline alignment

---
 .../block-library/src/template-part/editor.scss     | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 147df15d5bfaa0..57e916d8fb6d38 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -126,7 +126,18 @@
 				cursor: default;
 
 				&::after {
-					box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
+					box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+				}
+			}
+
+			&:not([contenteditable]) {
+				&:focus {
+					&::after {
+						top: 0;
+						left: 0;
+						right: 0;
+						bottom: 0;
+					}
 				}
 			}
 		}

From ee94f0d979f8d4501f40870490958f0ef51e5971 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Fri, 27 Nov 2020 09:49:28 +0000
Subject: [PATCH 09/11] Even more alignment fixes...

---
 .../src/template-part/editor.scss             | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 57e916d8fb6d38..e91485ac3b2514 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -113,6 +113,10 @@
 			&.is-selected {
 				&::after {
 					box-shadow: 0 0 0 $border-width $gray-900;
+					top: 1px;
+					left: 1px;
+					right: 1px;
+					bottom: 1px;
 				}
 
 				&:focus {
@@ -126,20 +130,13 @@
 				cursor: default;
 
 				&::after {
+					top: 1px;
+					left: 1px;
+					right: 1px;
+					bottom: 1px;
 					box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
 				}
 			}
-
-			&:not([contenteditable]) {
-				&:focus {
-					&::after {
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
-					}
-				}
-			}
 		}
 
 		// Do not display a border on rich text blocks when hovered and selected

From b47f73bca6857318255f4995fda638e227f8402d Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Fri, 27 Nov 2020 13:06:54 +0000
Subject: [PATCH 10/11] Remove the pseudo-spotlight effect on template parts

---
 packages/block-editor/src/components/block-list/style.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 83039cc378e2e9..40c8eb871793ce 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -208,7 +208,6 @@
 
 	// Active entity spotlight.
 	&.has-active-entity:not(.is-focus-mode) {
-		//opacity: 0.5;
 		transition: opacity 0.1s linear;
 		@include reduce-motion("transition");
 

From 072db8fc03014db86c594e742c5cdaa2ff36b2ef Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Mon, 30 Nov 2020 21:09:35 +0000
Subject: [PATCH 11/11] Remove template part spotlight and move outline styles

---
 .../src/components/block-list/style.scss      | 14 -----
 .../src/template-part/editor.scss             | 60 -------------------
 .../src/components/block-editor/style.scss    | 47 +++++++++++++++
 3 files changed, 47 insertions(+), 74 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 40c8eb871793ce..4b21c753e0a166 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -206,20 +206,6 @@
 		}
 	}
 
-	// Active entity spotlight.
-	&.has-active-entity:not(.is-focus-mode) {
-		transition: opacity 0.1s linear;
-		@include reduce-motion("transition");
-
-		&.is-active-entity,
-		&.has-child-selected,
-		&:not(.has-child-selected) .block-editor-block-list__block,
-		&.is-active-entity .block-editor-block-list__block,
-		.is-active-entity .block-editor-block-list__block {
-			opacity: 1;
-		}
-	}
-
 	/**
 	* Block styles and alignments
 	*/
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index e91485ac3b2514..aed32baffd118f 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -89,63 +89,3 @@
 		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
 	}
 }
-
-.block-editor-block-list__layout {
-	.block-editor-block-list__block[data-type="core/template-part"] {
-		&.is-selected,
-		&.has-child-selected {
-			&::after {
-				top: $border-width;
-				bottom: $border-width;
-				left: $border-width;
-				right: $border-width;
-				border-radius: $radius-block-ui - $border-width; // Border is outset, so so subtract the width to achieve correct radius.
-			}
-		}
-	}
-
-	&.edit-site-block-editor__block-list {
-		.block-editor-block-list__block {
-			&::after {
-				outline: 2px solid transparent;
-			}
-
-			&.is-selected {
-				&::after {
-					box-shadow: 0 0 0 $border-width $gray-900;
-					top: 1px;
-					left: 1px;
-					right: 1px;
-					bottom: 1px;
-				}
-
-				&:focus {
-					&::after {
-						box-shadow: 0 0 0 $border-width-focus var(--wp-admin-theme-color);
-					}
-				}
-			}
-
-			&.is-hovered:not(.is-selected) {
-				cursor: default;
-
-				&::after {
-					top: 1px;
-					left: 1px;
-					right: 1px;
-					bottom: 1px;
-					box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
-				}
-			}
-		}
-
-		// Do not display a border on rich text blocks when hovered and selected
-		.block-editor-rich-text__editable {
-			&.is-selected.is-hovered.is-typing {
-				&::after {
-					box-shadow: none;
-				}
-			}
-		}
-	}
-}
diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
index bd84864f61aa1f..909ea6a88f016a 100644
--- a/packages/edit-site/src/components/block-editor/style.scss
+++ b/packages/edit-site/src/components/block-editor/style.scss
@@ -11,3 +11,50 @@
 		padding: 6px;
 	}
 }
+
+.block-editor-block-list__layout {
+	&.edit-site-block-editor__block-list {
+		.block-editor-block-list__block {
+			&::after {
+				outline: 2px solid transparent;
+			}
+
+			&.is-selected {
+				&::after {
+					box-shadow: 0 0 0 $border-width $gray-900; // Selected not focussed
+					top: $border-width;
+					left: $border-width;
+					right: $border-width;
+					bottom: $border-width;
+				}
+
+				&:focus {
+					&::after {
+						box-shadow: 0 0 0 $border-width-focus var(--wp-admin-theme-color);
+					}
+				}
+			}
+
+			&.is-hovered:not(.is-selected) {
+				cursor: default;
+
+				&::after {
+					top: $border-width;
+					left: $border-width;
+					right: $border-width;
+					bottom: $border-width;
+					box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+				}
+			}
+		}
+
+		// Do not display a border on rich text blocks when hovered and selected
+		.block-editor-rich-text__editable {
+			&.is-selected.is-hovered.is-typing {
+				&::after {
+					box-shadow: none;
+				}
+			}
+		}
+	}
+}