Twenty Fourteen: float-clearing rules can break plugin output

[iandunn]

style.css:750 (from r25021 / #24858) uses overly broad selectors, which can unintentionally target elements generated by plugins.

For example, an element like <div class="{pluginslug}-content"> or <p class="{pluginslug}-select-site"> will have empty content added before/after it, and its display changed to fixed, which could break the layout.

For an observable example, visit ​WordCamp Dayton 2016's schedule, inspect td.wcb-session-site-maintenance, and disable the following rules (which were ​added to work around this problem):

.wcpt-schedule [class*="content"]:before,
.wcpt-schedule [class*="content"]:after,
.wcpt-schedule [class*="site"]:before,
.wcpt-schedule [class*="site"]:after {
    content: none;
    display: inherit;
}

Other Core themes use broad selectors like these, but they only target align, wp-image, and attachment, which are probably less common in plugin class names than site and content (although I would guess that they're still common enough to avoid using without a wp-specific prefix).

Maybe explicitly targeting TwentyFourteen's classes (site-content, content-area, etc) would be a way to avoid this problem, while still maintaining backwards-compatibility?

[karmatosed]

I think in this case explicitly targeting makes sense. Want to rustle up a patch?

[karmatosed]

@iandunn can you work on a patch for this?

[iandunn]

Hey, sorry, it's been on my list for awhile, but I haven't found time yet. It doesn't look like I'll have time soon, but I'll keep it on the list just in case.

[ianbelanger]

Explicitly target all instances of site or content classes

[ianbelanger]

35779.diff should explicitly target all instances of either site or content in any of the classes contained in the theme markup.

[ianbelanger]

Patch still applies cleanly, setting to 5.3 milestone so we can get this fix in.

[davidbaumwald]

@ianbelanger The patch appears to still be good. Is this still on your radar for 5.3?

[ianbelanger]

This also looks good to go @davidbaumwald. Tagging for commit

[afercia]

Worth noting core uses a .wp-clearfix CSS class for this purpose. Not sure the huge pile of selectors used by Twenty Twenty is the best option :) when it would be as simple as using an utility CSS class and add it where necessary.

[SergeyBiryukov]

Unless I'm missing something, .wp-clearfix is only available in the admin and is not used in any of the default themes. It might be a good idea to explore its usage in a new ticket.

I'm not a fan of the huge pile of selectors either, but it seems to be the most straightforward fix here for now.

[SergeyBiryukov]

In 46430:

Twenty Fourteen: Replace overly broad float-clearing selectors with more specific ones, to avoid unintentionally targeting elements generated by plugins.

Props ianbelanger, iandunn, karmatosed.
Fixes #35779.