diff --git a/lib/client-assets.php b/lib/client-assets.php index 6bcfff4f67124..6ffb733fc6a9b 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -370,7 +370,7 @@ function gutenberg_register_packages_styles( $styles ) { $styles, 'wp-reset-editor-styles', gutenberg_url( 'build/block-library/reset.css' ), - array(), + array( 'common', 'forms' ), // Make sure the reset is loaded after the default WP Adminn styles. $version ); $styles->add_data( 'wp-reset-editor-styles', 'rtl', 'replace' ); diff --git a/packages/block-library/src/common.scss b/packages/block-library/src/common.scss index 0e96cb1eb63ca..4cd25f750d522 100644 --- a/packages/block-library/src/common.scss +++ b/packages/block-library/src/common.scss @@ -81,3 +81,34 @@ .items-justified-space-between { justify-content: space-between; } + +.screen-reader-text { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal !important; +} + +.screen-reader-text:focus { + background-color: $gray-300; + clip: auto !important; + clip-path: none; + color: #444; + display: block; + font-size: 1em; + height: auto; + left: 5px; + line-height: normal; + padding: 15px 23px 14px; + text-decoration: none; + top: 5px; + width: auto; + z-index: 100000; +} diff --git a/packages/block-library/src/reset.scss b/packages/block-library/src/reset.scss index 41c4affb36325..2890fde40b8a0 100644 --- a/packages/block-library/src/reset.scss +++ b/packages/block-library/src/reset.scss @@ -61,6 +61,8 @@ ol { margin: revert; padding: revert; + list-style-type: revert; + box-sizing: revert; // Remove bottom margin from nested lists. ul, @@ -73,14 +75,6 @@ } } - ul { - list-style-type: revert; - } - - ol { - list-style-type: revert; - } - ul ul, ol ul { list-style-type: revert; @@ -98,4 +92,37 @@ line-height: revert; font-weight: revert; } + + select { + font-family: system-ui; + -webkit-appearance: revert; + color: revert; + border: revert; + border-radius: revert; + background: revert; + box-shadow: revert; + text-shadow: revert; + outline: revert; + cursor: revert; + transform: revert; + font-size: revert; + line-height: revert; + padding: revert; + margin: revert; + min-height: revert; + max-width: revert; + vertical-align: revert; + font-weight: revert; + } + + select:disabled, + select:focus { + color: revert; + border-color: revert; + background: revert; + box-shadow: revert; + text-shadow: revert; + cursor: revert; + transform: revert; + } }