Shortcode: Prevent external styling of editing UI (#49723)

* Shortcode: Prevent external styling of editing UI * Disable resizing
WordPress · Apr 12, 2023 · 293ea89 · 293ea89 · github-actions · Apr 12, 2023
1 parent 4258f97
commit 293ea89
Showing 1 changed file with 26 additions and 5 deletions.
diff --git a/packages/block-library/src/shortcode/editor.scss b/packages/block-library/src/shortcode/editor.scss
@@ -1,13 +1,34 @@
 [data-type="core/shortcode"] {
-	.block-editor-plain-text {
-		max-height: 250px;
-	}
-
 	&.components-placeholder {
 		min-height: 0;
 	}
 }
 
+// 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 {
-	@include input-control;
+	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;
+	}
 }