Theme styles for Text widget do not apply to Custom HTML widget

[westonruter]

In #40907 we introduced a Custom HTML widget that is dedicated for showing HTML. This was added because the Text widget is now managed by TinyMCE (#35243) which can undesirably modify custom HTML added by a user. In #40951 some pointers were added to the Text widget when the user clicked on the Text tab to edit HTML or when they attempted to paste HTML into the Visual tab. These pointers direct the user to consider using the Custom HTML widget for adding arbitrary HTML, HTML which is not general content like a user may enter for post content, as in the post editor. So it is expected that users will be placing HTML that they would formerly have placed in the Text widget to instead place in the Custom HTML widget. A problem here for styling is that themes are targeting the .textwidget to add the necessary styles for HTML that a user may put into such a widget. The Custom HTML widget has no such class name, and so it is currently not getting the proper styles in themes.

To fix this, an element with the same textwidget class name needs to be added as a wrapper around the content in the Custom HTML widget.

[westonruter]

With 41392.0.diff​ the Custom HTML widget in custom-html-widget-lacking-styles.png​ looks the same as text-widget-with-styles-applied.png​.

[obenland]

LGTM!

[westonruter]

In 41115:

Widgets: Improve theme styling compatibility for Custom HTML widget by adding container with textwidget class.

The same styling from the Text widget should apply to the Custom HTML widget since users are expected to copy HTML from the (legacy) Text widget into the latter.

Amends [40893].
See #40907.
Fixes #41392.

[westonruter]

I just realized that themes are not just targeting .textwidget. They are _also_ selecting the parent element, .widget_text.. And actually, core themes use both, about half and half.

Text widget looks like this in Twenty Seventeen: properly-styled-text-widget-in-twentyseventeen.png​

The same HTML looks quite wrong in the Custom HTML widget in Twenty Seventeen: misstyled-custom-html-widget-in-twentyseventeen.png​

The best way I can think of to fix this up is to inject the widget_text class name to appear alongside the widget_custom_html class name, like so when printing out:

src/wp-includes/widgets/class-wp-widget-custom-html.php

@@ -75 +75 @@
                  */
                 $content = apply_filters( 'widget_custom_html_content', $content, $instance, $this );
 
+                // Inject the Text widget's container class name alongside this widget's class name for theme styling compatibility.
+//              $args['before_widget'] = str_replace( $this->id_base, " $this->id_base widget_text", $args['before_widget'] );
+
                 echo $args['before_widget'];
                 if ( ! empty( $title ) ) {
                         echo $args['before_title'] . $title . $args['after_title'];

[westonruter]

In 41116:

Widgets: Include widget_text class name on Custom HTML widget wrapper for theme styling compatibility, in addition to previously-added textwidget class on nested content container.

Amends [40893], [41115].
See #40907.
Fixes #41392 for trunk.

[westonruter]

In 41117:

Widgets: Improve theme styling compatibility for Custom HTML widget by adding content container with textwidget class and widget_text class on widget wrapper element.

The same styling from the Text widget should apply to the Custom HTML widget since users are expected to copy HTML from the (legacy) Text widget into the latter.

Merges [41115] and partially [41116] onto 4.8 branch.
Amends [40893].
See #40907.
Fixes #41392 for 4.8.1.

[westonruter]

In 41118:

Widgets: Fix typo in phpunit test for Custom HTML widget in [41116].

Fixed was applied in 4.8 branch via [41117].
See #41392.