Refactor block focus style and utilize for region focus style (#62881)

WordPress · Jul 10, 2024 · b966ef7 · b966ef7
1 parent c007389
commit b966ef7
Show file tree

Hide file tree

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