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

[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        |   Keywords:
  Focuses:                |
--------------------------+--------------------
 In the widget editor, the <select /> arrow disappears when focused when
 twentytwentyone theme is active:

 [[Image(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:

 [[Image(https://user-
 images.githubusercontent.com/205419/123951704-5f803100-d9a5-11eb-9366-f22e4bfeba3d.png)]]

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