Add additional contextual body classes to editor

[timph]

It would be nice if core provided contextual body classes for the editor like it does on the front end of the site.

For instance, I have a style that is used on my home page template, and a different style applies to my default page template. ( Forgive the CSS it's just a hypothetical example ).

On the front end I might have something like this:

/** Default style **/
.my-style {
    margin-top: 40px;
    font-size: 24px;
}
/** Home template style **/
.page-template-home .my-style {
    margin-top: 125px;
    font-size: 60px;
}
/** Default page template style **/
.page-template-default .my-style {
    margin-top: 0px;
    font-size: 14px;
}

In the editor the style would default to .my-style with would have the 40px margin-top on it, or I can style specifically for the editor view of the content across all templates and zero it out for instance:

.mce-content-body .my-style {
    margin-top: 0;
    font-size: 14px;
}

I would like the ability to be able to provide as close of a WYSIWYG experience from the editor to the front end for the various templates or cpts I might have in a theme that carry different styles for my end users.

Being able to do this out of the box would allow a better visual experience when switching between the editor to front end of the site. I could remove the margin-top :

/** Editor home template **/
.mce-content-body.page-template-home .my-style {
    /** header is not displayed in editor so don't add margin-top here **/
    margin-top: 10px;
    font-size: 80px;
}
/** Editor default page template style **/
.mce-content-body.page-template-default .my-style {
    margin-top: 0;
    font-size: 14px;
}

I can of course add a filter to tinymce for the body class to do this in my theme, but it feels like something that should just be there for me out of the box. This could potentially lead to undesirable results across various themes I think taking the same naming convention. For example a theme sets .page-template-default's padding to 100px, so the editor would also have those applied unless a theme author specifically overrode the style with .mce-content-body to eliminate the excessive padding in the smaller window.

Perhaps adding something like .mce-{$context} would work and be a nice addition to theme and plugin developers who strive to have their themes look as close to the end result as possible in the editor.

A lot of end users find it strange when they do something like change the Page Attributes > template in the box, see no visual changes, and then viewing the front end gives them a dramatically different effect from what they were initially thinking they were doing. So it would be nice if changing the template there also updated these classes to tie the visual editing experience together even more.

[ocean90]

This feature was introduced in 4.7 (#37599) but has a bug, see #39368.