Make WordPress Core

Opened 7 years ago

Closed 7 years ago

#40755 closed defect (bug) (fixed)

Textarea in HTML text widget has 1px border

Reported by: johnjamesjacoby's profile johnjamesjacoby Owned by: westonruter's profile westonruter
Milestone: 4.8 Priority: normal
Severity: normal Version: 4.8
Component: Widgets Keywords: has-patch has-screenshots commit
Focuses: administration Cc:


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

Attachments (5)

Screen Shot 2017-05-13 at 10.39.17 AM.png (59.8 KB) - added by johnjamesjacoby 7 years ago.
No border
Screen Shot 2017-05-13 at 10.39.00 AM.png (73.2 KB) - added by johnjamesjacoby 7 years ago.
1px border
40755.patch (581 bytes) - added by johnjamesjacoby 7 years ago.
40755.1.diff (584 bytes) - added by westonruter 7 years ago.
40755.2.diff (731 bytes) - added by westonruter 7 years ago.

Download all attachments as: .zip

Change History (12)

#1 @johnjamesjacoby
7 years ago

  • Focuses administration added
  • Keywords has-patch 2nd-opinion has-screenshots added

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 :)

This ticket was mentioned in Slack in #core-customize by melchoyce. View the logs.

7 years ago

#3 @timmydcrawford
7 years ago

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.

#4 @westonruter
7 years ago

  • Keywords 2nd-opinion removed
  • Milestone changed from Awaiting Review to 4.8

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 :)

7 years ago

#5 @westonruter
7 years ago

  • Keywords commit added
  • Owner set to westonruter
  • Status changed from new to accepted

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

7 years ago

#6 @westonruter
7 years ago

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.

#7 @westonruter
7 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

Note: See TracTickets for help on using tickets.