From b966ef711e4948ba5f8816e8a70732da9a881c70 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Wed, 10 Jul 2024 12:36:34 -0500
Subject: [PATCH] Refactor block focus style and utilize for region focus style
 (#62881)

---
 packages/base-styles/_mixins.scss              | 18 ++++++++++++++++++
 .../src/components/block-list/content.scss     | 18 ++----------------
 .../higher-order/navigate-regions/style.scss   | 18 +++---------------
 3 files changed, 23 insertions(+), 31 deletions(-)

diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index 8c056905e64d88..1930948052aae7 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -597,3 +597,21 @@
 		}
 	}
 }
+
+@mixin selected-block-outline($widthRatio: 1) {
+	outline-color: var(--wp-admin-theme-color);
+	outline-style: solid;
+	outline-width: calc(#{$widthRatio} * (var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
+	outline-offset: calc(#{$widthRatio} * ((-1 * var(--wp-admin-border-width-focus) ) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
+}
+
+@mixin selected-block-focus($widthRatio: 1) {
+	content: "";
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	@include selected-block-outline($widthRatio);
+}
diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
index 8d55617bea2f99..17ebad06c4d78e 100644
--- a/packages/block-editor/src/components/block-list/content.scss
+++ b/packages/block-editor/src/components/block-list/content.scss
@@ -17,20 +17,6 @@
 	}
 }
 
-@mixin selectedOutline() {
-	content: "";
-	position: absolute;
-	pointer-events: none;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	outline-color: var(--wp-admin-theme-color);
-	outline-style: solid;
-	outline-width: calc(var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
-	outline-offset: calc((-1 * var(--wp-admin-border-width-focus)) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
-}
-
 // Hide selections on this element, otherwise Safari will include it stacked
 // under your actual selection.
 // This uses a CSS hack to show the rules to Safari only. Failing here is okay,
@@ -101,7 +87,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		// We're using a pseudo element to overflow placeholder borders
 		// and any border inside the block itself.
 		&::after {
-			@include selectedOutline();
+			@include selected-block-focus();
 			z-index: 1;
 
 			// Show a light color for dark themes.
@@ -281,7 +267,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	&:not(.rich-text):not([contenteditable="true"]).is-selected {
 
 		&::after {
-			@include selectedOutline();
+			@include selected-block-focus();
 		}
 	}
 }
diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss
index 5c3767e310b8f4..5fc1e210dea871 100644
--- a/packages/components/src/higher-order/navigate-regions/style.scss
+++ b/packages/components/src/higher-order/navigate-regions/style.scss
@@ -1,19 +1,7 @@
-// Allow the position to be easily overridden to e.g. fixed.
-
-@mixin region-selection-outline {
-	outline: 4px solid $components-color-accent;
-	outline-offset: -4px;
-}
+$regionOutlineRatio: 2;
 
 @mixin region-selection-focus {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	content: "";
-	pointer-events: none;
-	@include region-selection-outline;
+	@include selected-block-focus( $regionOutlineRatio );
 	z-index: z-index(".is-focusing-regions {region} :focus::after");
 }
 
@@ -46,6 +34,6 @@
 	.interface-interface-skeleton__actions .editor-layout__toggle-publish-panel,
 	.interface-interface-skeleton__actions .editor-layout__toggle-entities-saved-states-panel,
 	.editor-post-publish-panel {
-		@include region-selection-outline;
+		@include selected-block-outline( $regionOutlineRatio );
 	}
 }