diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index 630456b5f5989..81e8424c65f0e 100644 --- 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 index fc1c8240808ae..d77b1e9bf5145 100644 --- 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 index 91d2a1fe721ef..56586df8eefd2 100644 --- 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(); }