Adding a class field to the text widget
|Reported by:||walkinonwat3r||Owned by:|
The text widget is often used as a catch-all way to enter arbitrary HTML into widget areas. I think it would benefit from a HTML class entry field, which would allow theme designers/developers to apply custom styling at the <div class="widget"> level.
We already do this for body and post classes, and the same logic and benefits apply here.
One example use case that comes up on many client projects is social media links. I often want to add a custom background to the entire widget, not just the text area. Right now, if I want to do this, I need to either
a) Give up: Forego the background on the widget title, and just apply it to the text area.
b) Repetition/Overkill: Write a custom widget with exactly the same code as the text widget, just with one extra class.
c) Loss of dragability: Use nth-child to target the widget
d) Divorcing styling from meaning: Use the widget's ID
Being able to add a '.social-links' class to the widget, along with the content, would allow making targeted CSS changes over the entire widget, while requiring less specificity and eliminating the concern of losing widget-specific styles due to reordering or re-spawning the widget, as may occur with an :nth-child or ID-based solution.
Per-widget classes are more modular and more semantic. In terms of implementation, this could be handled the same as menu item classes, i.e. with a screen option to toggle the field's visibility. Ideally, I think all widget types should have this field, but the text widget is an especially strong case, since it can be used for so many different purposes.