WordPress.org
Get WordPress

Make WordPress Core

Opened 13 years ago

Closed 13 years ago

Last modified 6 years ago

#11928 closed enhancement (worksforme)

Recent Comments widget injects unconfigurable CSS (with !important)

Reported by: archon810's profile archon810 Owned by: azaozz's profile azaozz
Milestone: Priority: normal
Severity: normal Version: 2.9.1
Component: Widgets Keywords: has-patch close
Focuses: Cc:

Description

I think this issue is long overdue as I saw people complaining about it for quite some time, myself included.

The Recent Comments sidebar widget, the one from WP core, actually adds inline non-configurable css into <head>: 

<style type="text/css">.recentcomments a{display:inline !important;
padding:0 !important;margin:0 !important;}</style>

This is done in default-widgets.php.

I think it's really bad practice because

  • it's not configurable
  • it's not removable or overridable due to !important - when I tried to remove the filter, I found that it had a non-unique changing name WP_Widget_Recent_Commentsrecent_comments_style25

Somebody even created a blog post about this issue ​here but the solution didn't work for me due to, most likely, changes in later versions of WP.

Specifically, in my case, I need to override the padding property.

Nacin pointed out in [11891] that other widgets and the gallery might use the same tactics, to combat which I would imagine plugins like ​Cleaner WP Galler and such were created. The gallery issue might be kind of separate, so I'll leave it alone here.

Thoughts?

Thanks.

Attachments (1)

11928.patch​ (466 bytes) - added by Utkarsh 13 years ago.

Download all attachments as: .zip

Change History (12)

@Utkarsh
13 years ago

#1 @Utkarsh
13 years ago

  • Cc admin@… added
  • Keywords has-patch added
  • Summary changed from Recent Comments sidebar widget (and probably others) inject unconfigurable CSS (with !important) to Recent Comments widget injects unconfigurable CSS (with !important)

I don't really see why !important declaration was being used here. I removed it, and noticed no change in the display.

#2 @nacin
13 years ago

  • Component changed from General to Widgets
  • Keywords close added
  • Owner set to azaozz
  • Type changed from defect (bug) to enhancement

The CSS is so the widget can look as presentable as possible, by default, in any widget-ready theme.

The declaration can be overridden quite easily via CSS, even with !important throughout.

It is also possible to remove the styles via a plugin. Drop this code into functions.php as an example:

add_action( 'widgets_init', 'my_remove_recent_comments_style' );
function my_remove_recent_comments_style() {
	global $wp_widget_factory;
	remove_action( 'wp_head', array( $wp_widget_factory->widgets['WP_Widget_Recent_Comments'], 'recent_comments_style'  ) );
}

Marking this as an enhancement. Perhaps the CSS should be easier to remove or manipulate, but it's not a defect and it is configurable.

#3 @archon810
13 years ago

Thanks for the code, nacin. It's not as trivial as I thought it would be, without digging through low level WP implementation.

I'd say the style should be moved into the widget itself though.

#4 @archon810
13 years ago

  • Cc admin@… added

#5 follow-up: @nacin
13 years ago

  • Milestone Unassigned deleted
  • Resolution set to worksforme
  • Status changed from new to closed

Going to worksforme this one.

We should however probably include this code in twentyten and style it on our own there.

#7 in reply to: ↑ 5 @ramiy
12 years ago

Replying to nacin:

We should however probably include this code in twentyten and style it on our own there.

+1.

i agree, this should be in the style.css file.

#8 @jamrelian
10 years ago

Fortunately, if you are not using the Recent Comments sidebar widget, the code gets automatically removed from the HTML Head, but ONLY if you make sure the Recent Comments widget is deleted from all sidebars (including all inactive sidebars).

(I'm using WordPress 3.5.1, and a theme derived from the Underscore Theme. I saw this CSS code inserted in the HTML head. I was not even using the default WordPress comments, so I started looking for a solution. Then I discovered that the Recent Comments widget was part of an inactive sidebar.)

#9 @creativeinfusion
10 years ago

There was a filter 'show_recent_comments_widget_style' introduced by [16522] for #15493 that also provides an easy fix for this #11928

#10 @nicelab
9 years ago

In our theme we have decided to implement Content-Security-Policy to provide a bit of XSS protection.
For example in header.php we will do something like this :

<?php header(
"Content-Security-Policy: default-src 'self';
style-src 'self' ​http://fonts.googleapis.com;
font-src 'self' ​http://themes.googleusercontent.com;
img-src 'self' ​http://*.gravatar.com;
"); ?>
<!DOCTYPE html>
...

The default Content Security Policy forbid inline CSS style and automatically kill the recent comment sidebar style (unless you add 'unsafe-inline').

Maybe it's time to move this inline CSS line in the default CSS themes ?

(For now we will use the nacin hack in our theme to avoid unnecessary warnings)

#11 @_smartik_
6 years ago

I'll leave this code here, just in case someone like me comes here for a solution.

Just add this line in functions.php:

add_filter( 'show_recent_comments_widget_style', '__return_false', 99 );
Note: See TracTickets for help on using tickets.