WP editor and CSS classname conflict

[shazdeh]

When wp_editor function is used on the front end it also loads wp-includes/css/media-views.min.css file, this stylesheet adds some styles for .attachment classname and so breaks attachment pages in WordPress where .attachment is a body class. Here's an example of the issue seen on the Twenty Fifteen theme: ​http://grab.by/DmPC.
To replicate the issue, please edit the image.php file inside Twenty Fifteen and simply call the wp_editor function somewhere in it.
Since the .attachment classname is very common and the issue is possible to arise in many different themes, felt it's a bug in WP itself and not the theme.

[valendesigns]

I was able to fix this pretty easily by giving the .attachment a little more specificity.

[azaozz]

Don't mind making these more specific but wondering if this may break some plugins that override some of the styling.

(There appears to be a typo in 30878.diff: .selected.attachment is not equal to .selected.media-frame .attachment)

[valendesigns]

Replying to azaozz:

(There appears to be a typo in 30878.diff: .selected.attachment is not equal to .selected.media-frame .attachment)

I've refreshed the patch, sorry about the typo.

[helen]

I'm a little surprised this is the first report of this. It may be better to prefix with the .wp-core-ui scoping class that was introduced for the same issues with the buttons CSS. Also be sure to check how any changes might affect the grid view in the media library.

[valendesigns]

Updating the patch now. I'll double check the grid view to make sure nothing weird is happening, as well.

[valendesigns]

I've uploaded patch 30878.3.diff​ that uses .wp-core-ui for scoping. The media library grid view appears unaffected by this change, as far as I can tell. Everything looks normal to me.

[SergeyBiryukov]

In 31174:

Scope attachment selectors in media views to avoid interfering with attachment pages on front-end.

props valendesigns.
fixes #30878.