Textarea in HTML text widget has 1px border

[johnjamesjacoby]

In the new TinyMCE text widget, when switching from Visual to Text, the textarea element has an additional 1px border that isn't normally present.

Screenshots imminent.

Related: #35760

[johnjamesjacoby]

No border

[johnjamesjacoby]

1px border

[johnjamesjacoby]

40755.patch addresses the following:

• Removes 1px border
• Sets the line-height to 0 for the wp-editor-container to remove the gap between the bottom of the textarea and the bottom of the container
• Removes the shadow applied to all textarea elements when in focus

A few things I'm not 100% sure about:

• Is widgets.css the correct file for this (vs. maybe forms.css?)
• Is this the best way to target this textarea (can this class be overridden in a plugin, is there something faster, or does something already exist that we can use?)
• Doing line-height: 0; on things always feels like a kludge for a bigger line-height issue, but I'm not going down that rabbit hole here :)

[timmydcrawford]

I verified the patch fixes the issue in Chrome and Firefox. I think the selectors look fine to me - not sure if we need to add another classname here as there likely will never be multiple textareas in the widget... also widgets.css seems a logical spot too.

[westonruter]

I think the root ancestor selector should be more specific. So instead of .widget it should be .text-widget-fields. There would very unlikely be another textarea that would get added to that container element. Nevertheless, I think using textarea.text would still be preferred since as soon as we assume something to never happen, that's when it will :)

[westonruter]

@johnjamesjacoby looks like the better solution than line-height:0 is to give the textarea a display:block. See 40755.1.diff​.

[westonruter]

And actually, I think the problem is just that we neglected from the start to include the wp-editor-area class name. When we add that, all of the styles form the edit post screen get applied. See 40755.2.diff​.

[westonruter]

In 40675:

Widgets: Add missing wp-editor-area CSS class for textarea in the TinyMCE-extended Text widget to ensure proper styles are applied.

Removes extra border around TinyMCE-wrapped textarea and removes gap at bottom due to lack of display:block.

Props johnjamesjacoby, westonruter.
See #35243.
Fixes #40755.