[wp-trac] [WordPress Trac] #39366: Add additional contextual body classes to editor

[WordPress Trac]

#39366: Add additional contextual body classes to editor
-----------------------------+-----------------------------
 Reporter:  timph            |      Owner:
     Type:  feature request  |     Status:  new
 Priority:  normal           |  Milestone:  Awaiting Review
Component:  Editor           |    Version:  trunk
 Severity:  normal           |   Keywords:
  Focuses:                   |
-----------------------------+-----------------------------
 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.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/39366>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform