Base Styles: Add the editor input reset with increased specificity (#…

…49831) * Base Styles: Add the editor input reset with increased specificity * Swap comment style
WordPress · Apr 17, 2023 · 7c95582 · 7c95582
1 parent 4422131
commit 7c95582
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 42 deletions.
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
@@ -335,6 +335,31 @@
 	}
 }
 
+// The editor input reset with increased specificity to avoid theme styles bleeding in.
+@mixin editor-input-reset() {
+	font-family: $editor-html-font !important;
+	color: $gray-900 !important;
+	background: $white !important;
+	padding: $grid-unit-15 !important;
+	border: $border-width solid $gray-900 !important;
+	box-shadow: none !important;
+	border-radius: $radius-block-ui !important;
+
+	// Fonts smaller than 16px causes mobile safari to zoom.
+	font-size: $mobile-text-min-font-size !important;
+	@include break-small {
+		font-size: $default-font-size !important;
+	}
+
+	&:focus {
+		border-color: var(--wp-admin-theme-color) !important;
+		box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--wp-admin-theme-color) !important;
+
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 2px solid transparent !important;
+	}
+}
+
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */

diff --git a/packages/block-library/src/html/editor.scss b/packages/block-library/src/html/editor.scss
@@ -10,27 +10,8 @@
 	// The editing view for the HTML block is equivalent to block UI.
 	// Therefore we increase specificity to avoid theme styles bleeding in.
 	.block-editor-plain-text {
-		font-family: $editor-html-font !important;
-		color: $gray-900 !important;
-		background: $white !important;
-		padding: $grid-unit-15 !important;
-		border: $border-width solid $gray-900 !important;
-		box-shadow: none !important;
-		border-radius: $radius-block-ui !important;
+		box-sizing: border-box;
 		max-height: 250px;
-
-		/* Fonts smaller than 16px causes mobile safari to zoom. */
-		font-size: $mobile-text-min-font-size !important;
-		@include break-small {
-			font-size: $default-font-size !important;
-		}
-
-		&:focus {
-			border-color: var(--wp-admin-theme-color) !important;
-			box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--wp-admin-theme-color) !important;
-
-			// Windows High Contrast mode will show this outline, but not the box-shadow.
-			outline: 2px solid transparent !important;
-		}
+		@include editor-input-reset();
 	}
 }
diff --git a/packages/block-library/src/shortcode/editor.scss b/packages/block-library/src/shortcode/editor.scss
@@ -7,28 +7,8 @@
 // The editing view for the Shortcode block is equivalent to block UI.
 // Therefore we increase specificity to avoid theme styles bleeding in.
 .blocks-shortcode__textarea {
-	font-family: $editor-html-font !important;
-	color: $gray-900 !important;
-	background: $white !important;
-	padding: $grid-unit-15 !important;
-	border: $border-width solid $gray-900 !important;
-	box-shadow: none !important;
-	border-radius: $radius-block-ui !important;
 	box-sizing: border-box;
 	max-height: 250px;
 	resize: none;
-
-	/* Fonts smaller than 16px causes mobile safari to zoom. */
-	font-size: $mobile-text-min-font-size !important;
-	@include break-small {
-		font-size: $default-font-size !important;
-	}
-
-	&:focus {
-		border-color: var(--wp-admin-theme-color) !important;
-		box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--wp-admin-theme-color) !important;
-
-		// Windows High Contrast mode will show this outline, but not the box-shadow.
-		outline: 2px solid transparent !important;
-	}
+	@include editor-input-reset();
 }