[wp-trac] [WordPress Trac] #53560: Dropdown arrow missing in the widget editor (twentytwentyone theme) (was: Twenty Twenty-One: Dropdown arrow missing in the widget editor)

[WordPress Trac]

#53560: Dropdown arrow missing in the widget editor (twentytwentyone theme)
--------------------------+---------------------
 Reporter:  zieladam      |       Owner:  (none)
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  5.8
Component:  General       |     Version:
 Severity:  normal        |  Resolution:
 Keywords:  has-patch     |     Focuses:
--------------------------+---------------------
Changes (by zieladam):

 * component:  Bundled Theme => General


Old description:

> In the widget editor, the <select /> arrow disappears when focused when
> twentytwentyone theme is active:
>
> https://user-images.githubusercontent.com/205419/123951705-5f803100-d9a5
> -11eb-92c6-94d072e01d8a.png
>
> This is caused by `reset.css` overriding `style-editor.css` from the
> theme:
>
> {{{#!css
> /* reset.css */
> .editor-styles-wrapper select:focus {
>     color: revert;
>     border-color: revert;
>     background: revert;
>     box-shadow: revert;
>     text-shadow: revert;
>     cursor: revert;
>     transform: revert;
> }
> }}}
>

> {{{#!css
> /* style-editor.css */
> .editor-styles-wrapper select {
>         border: var(--form--border-width) solid var(--form--border-
> color);
>         border-radius: var(--form--border-radius);
>         color: var(--form--color-text);
>         font-size: var(--form--font-size);
>         -moz-appearance: none;
>         -webkit-appearance: none;
>         appearance: none;
>         padding: var(--form--spacing-unit) calc(3 * var(--form--spacing-
> unit)) var(--form--spacing-unit) var(--form--spacing-unit);
>         background: var(--global--color-white)
> url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'
> width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0
> 5,5'/></svg>) no-repeat;
>         background-position: right var(--form--spacing-unit) top 60%;
> }
>
> }}}
>
> The rogue reset.css rule was introduced in
> https://github.com/WordPress/gutenberg/pull/30141 to remove the
> opinionated style from the theme. At the same time, we want to use at
> least some theme styles here. There are two ways to approach this:
>
> 1. Fully rely on wp-admin core styles when it comes to form elements in
> the widgets editor with "use theme styles" feature enabled
> 2. Make the theme CSS more specific to overcome the .editor-styles-
> wrapper select:focus rule from reset.css in this specific case
>
> I went for 2 because it seems safer, especially at RC1/RC2 stage. I don't
> think this is an ideal solution though – I wonder what y'all think about
> 1. Would it make sense? Or would it completely defeat the purpose of use
> theme styles ? Personally I don't mind seeing the "native" wp-admin CSS
> in the edit mode widgets since, as a user, I mostly care about the
> preview.
>
> This is how it looks like with https://github.com/WordPress/wordpress-
> develop/pull/1454 applied:
>
> https://user-
> images.githubusercontent.com/205419/123951704-5f803100-d9a5-11eb-9366-f22e4bfeba3d.png

New description:

 In the widget editor, the <select /> arrow disappears when focused when
 twentytwentyone theme is active:

 https://user-images.githubusercontent.com/205419/123951705-5f803100-d9a5
 -11eb-92c6-94d072e01d8a.png

 This is caused by `reset.css` overriding `style-editor.css` from the
 theme:

 {{{#!css
 /* reset.css */
 .editor-styles-wrapper select:focus {
     color: revert;
     border-color: revert;
     background: revert;
     box-shadow: revert;
     text-shadow: revert;
     cursor: revert;
     transform: revert;
 }
 }}}


 {{{#!css
 /* style-editor.css */
 .editor-styles-wrapper select {
         border: var(--form--border-width) solid var(--form--border-color);
         border-radius: var(--form--border-radius);
         color: var(--form--color-text);
         font-size: var(--form--font-size);
         -moz-appearance: none;
         -webkit-appearance: none;
         appearance: none;
         padding: var(--form--spacing-unit) calc(3 * var(--form--spacing-
 unit)) var(--form--spacing-unit) var(--form--spacing-unit);
         background: var(--global--color-white)
 url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'
 width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0
 5,5'/></svg>) no-repeat;
         background-position: right var(--form--spacing-unit) top 60%;
 }

 }}}

 The rogue reset.css rule was introduced in
 https://github.com/WordPress/gutenberg/pull/30141 to remove the
 opinionated style from the theme. At the same time, we want to use at
 least some theme styles here. There are two ways to approach this:

 1. Fully rely on wp-admin core styles when it comes to form elements in
 the widgets editor with "use theme styles" feature enabled
 2. Make the theme CSS more specific to overcome the .editor-styles-wrapper
 select:focus rule from reset.css in this specific case

 I went for 2 because it seems safer, especially at RC1/RC2 stage. I don't
 think this is an ideal solution though – I wonder what y'all think about
 1. Would it make sense? Or would it completely defeat the purpose of use
 theme styles ? Personally I don't mind seeing the "native" wp-admin CSS in
 the edit mode widgets since, as a user, I mostly care about the preview.

 This is how it looks like with https://github.com/WordPress/wordpress-
 develop/pull/1454 applied:

 https://user-
 images.githubusercontent.com/205419/123951704-5f803100-d9a5-11eb-9366-f22e4bfeba3d.png

 Props to @spacedmonkey for reporting this in
 https://github.com/WordPress/gutenberg/pull/33040

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/53560#comment:4>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform