#11928 closed enhancement (worksforme)
Recent Comments widget injects unconfigurable CSS (with !important)
Reported by: |
|
Owned by: |
|
---|---|---|---|
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)
Change History (12)
#1
@
15 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)
#2
@
15 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
@
15 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.
#5
follow-up:
↓ 7
@
15 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
@
14 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
@
12 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.)
#10
@
11 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)
I don't really see why !important declaration was being used here. I removed it, and noticed no change in the display.