WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 4 months ago

Last modified 4 months ago

#41392 closed defect (bug) (fixed)

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

Reported by: westonruter Owned by: westonruter
Milestone: 4.8.1 Priority: normal
Severity: normal Version: 4.9
Component: Widgets Keywords: has-patch fixed-major
Focuses: Cc:

Description

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.

Attachments (6)

text-widget-with-styles-applied.png (69.2 KB) - added by westonruter 4 months ago.
custom-html-widget-lacking-styles.png (73.9 KB) - added by westonruter 4 months ago.
41392.0.diff (572 bytes) - added by westonruter 4 months ago.
properly-styled-text-widget-in-twentyseventeen.png (64.4 KB) - added by westonruter 4 months ago.
misstyled-custom-html-widget-in-twentyseventeen.png (71.7 KB) - added by westonruter 4 months ago.
41392.2.diff (2.1 KB) - added by westonruter 4 months ago.

Download all attachments as: .zip

Change History (18)

@westonruter
4 months ago

#1 @westonruter
4 months ago

  • Keywords has-patch added

#2 @westonruter
4 months ago

  • Owner set to westonruter
  • Status changed from new to accepted

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


4 months ago

#6 @westonruter
4 months ago

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

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.

#7 @westonruter
4 months ago

  • Keywords fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

#8 @westonruter
4 months ago

  • Keywords fixed-major removed

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

    class WP_Widget_Custom_HTML extends WP_Widget { 
    7575                 */ 
    7676                $content = apply_filters( 'widget_custom_html_content', $content, $instance, $this ); 
    7777 
     78                // Inject the Text widget's container class name alongside this widget's class name for theme styling compatibility. 
     79//              $args['before_widget'] = str_replace( $this->id_base, " $this->id_base widget_text", $args['before_widget'] ); 
     80 
    7881                echo $args['before_widget']; 
    7982                if ( ! empty( $title ) ) { 
    8083                        echo $args['before_title'] . $title . $args['after_title']; 

@westonruter
4 months ago

#9 @westonruter
4 months ago

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

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.

#10 @westonruter
4 months ago

  • Keywords fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

#11 @westonruter
4 months ago

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

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.

#12 @westonruter
4 months ago

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.

Note: See TracTickets for help on using tickets.