Widget styling - review

[Piotrek Koszuliński]

Inability to achieve certain styling due to lack of class on widget wrappers

Currently widget classes are applied to widget elements. This makes it impossible to achieve various results - e.g. ​http://stackoverflow.com/questions/29704019/how-to-floatleft-a-container-with-an-image-having-a-relative-width

We wanted to keep classes on elements because we thought that it allows to create the same stylesheets for the content inside editor and outside. Unfortunately, due to the wrappers and CSS's limited capabilities it makes it impossible to achieve some pretty standard results.

Note, that it will not be that uncommon to move classes to the wrapper because e.g. image2 already moves alignment classes there. It's a pity that we didn't learn from that fact earlier ;/.

Inability to write s rule matching certain widget wrapper + widget class

Once classes will be moved to wrappers it would be good if it was possible to write rules like:

.image.centered { ... }
.embed.centered { ... }

As I experienced recently centered image's wrapper may need very different styles than that of an embed widget. E.g. image's wrapper must have text-align: center. This affects embed widgets which may be unwanted if we only want to use margin-left/right: auto.

Hence, it will be useful if widget wrapper had classes based on widgets names - e.g. "widget-image", "widget-embed", etc.

Lack of style exclusion (ability to automatically toggle styles)

This is a feature of the styles system which is highly missed. It is not possible to create two styles like "width 50%" and "width 75%" that will not be applicable together. The styles system should toggle between them. This feature is missing in general, but it is most important for object (incl. widget) styles. Also, it is possible to implement it for widgets only due to a separate, simplistic (class based) styles handler.