No post format classes added for styling in the editor

[laurelfulford]

Describe the bug

The Classic editor includes a class on the body of the editor content, loaded in the iframe, that indicates the current post's post format (eg .post-format-aside). This is helpful to adjust styles to match how that post format looks on the front end. Gutenberg doesn't include those classes.

Twenty Thirteen is one theme that uses these classes to create a more accurate WYSIWYG experience in the classic editor. Having the same ability with Gutenberg would help create a more consistent experience in the new editor.

This came up in this ticket here: https://core.trac.wordpress.org/ticket/45041

#8948 covers a similar issue (no page template classes are added to the editor); just let me know if it would make more sense to move this report over there.

[designsimply]

(Asking just in case) can the theme add the body classes it needs? I noticed there is a similar discussion recommended that at #4418 (comment) but I also see that request is for page template body classes on the rendered page, which seems different enough that I am not sure the same reply is warranted.

[joyously]

The classic editor does it with whatever code it uses. The new editor should just use the same code. It's already part of WordPress. Just call it.

[laurelfulford]

@designsimply It sounds like it might be possible, but I'm not sure it'd be something we'd want to do in a default theme :) #8948 is probably closer in spirit to this ticket than #4418. In #4418 they're talking about adding new body classes to posts and pages that use blocks. #8948 is about adding a existing body class that's used on the front end and classic editor to the Gutenberg editor.

I might've confused things by creating a second issue for the post format classes -- the general issue is that the body classes that are available in the Classic editor aren't available in Gutenberg. Just let me know if it makes more sense to roll this into #8948!

[designsimply]

Thanks for the open discussion. Adding post_class to the editor wrapper sounds cool and (I think) should cover both cases so I'll close #8948 in favor of this one since this one has attention from the docs group.

[designsimply]

Related: #10067 (comment)

[laurelfulford]

In the same vein, something else that would be helpful (and perhaps better covered in another ticket) would be to also pull in the body/post classes that the current theme adds.

The main use case I can think of is themes that add classes like .is-sidebar when there are sidebar widgets. This class is often used to do stuff like change the content area width, which would be awesome to reflect in the editor!

[joyously]

Can someone put a higher priority on this, please?
The theme should not have to supply JS code for editor specifics in order to get the appropriate styles. There should be a way for the theme to filter in some body classes easily, just like the old editor (editor_settings).
Those classes should be applied to the editor container (editor_styles_wrapper?), not the body of the admin page.
Every environment, not just WordPress post editor, would want to be able to specify classes on the editor container. Please make it happen!

[celloexpressions]

This is still broken. It is impossible for themes using this long-present feature to make editor styles resemble the front end. Including Twenty Thirteen. This is particularly problematic for the themes that use different color schemes or font sizes for different post formats.

The editor should either be based in the front end, or exactly replicate its markup, to correctly represent the result of users' work. This issue is still a regression relative to WordPress 4.9.

[dashkevych]

This functionality would be really handy for fixing style inconsistency between the Editor and the front-end.

[antonyjsmith]

This is really needed and another several hours I've wasted to end up at an open Gutenberg issue that as @celloexpressions says is a regression compared to 4.9 :(

[strarsis]

Any plans for adding this in the near future?
Being able to style a page/post by its template (slug) is a feature in TinyMCE that I also would like to see in Gutenberg.