Restore missing <select /> dropdown icon from the widget editor form

[adamziel]

Problem:

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

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

reset.css

.editor-styles-wrapper select:focus {
    color: revert;
    border-color: revert;
    background: revert;
    box-shadow: revert;
    text-shadow: revert;
    cursor: revert;
    transform: revert;
}

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 WordPress/gutenberg#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 when the "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 as I mostly care about the preview.

Test plan:

1. Activate TwentyTwentyOne theme
2. Install Web stories plugin
3. Go to the widgets editor
4. Add "Web stories" widget
5. Put focus on any select in the form
6. Confirm the dropdown arrow is visible

Trac ticket: #53560

[tellthemachines]

Thanks! Tested and this is working well, but needs the changes from WordPress/gutenberg#33040 in order to do so. Specifically the change from background to background-color, as otherwise the custom dropdown icon being set as a background-image gets overridden 😅
(That PR has been backported already so merging this one should just work)

[desrosj]

Merged into Core in https://core.trac.wordpress.org/changeset/51288.