Gutenberg: Add custom page template class to backend to detect a current page template

[khoipro]

Is your feature request related to a problem? Please describe.
I wish to create some full-width section and push them in a full-width template, but we need to match both backend and frontend styling. Currently, a default style in Gutenberg keep too narrow width and can't override for a custom page template.

Describe the solution you'd like
Add page template class after a page with a custom template was saved. It should be stay in one of these elements::

edit-post-visual-editor editor-styles-wrapper
edit-post-layout__content

For example, I can use:

.editor-styles-wrapper.template-page-fullwidth .wp-block {
  max-width: 100%;
}

It will help us keep a custom page template separate from other posts.

Describe alternatives you've considered

Looking for section method to replace it. Check https://github.com/WordPress/gutenberg/issues/4900

[spencerfinnell]

@khoipro I made a plugin that does this:

https://github.com/bigboxwc/wp-editor-page-template-class
https://github.com/bigboxwc/wp-editor-page-template-class/releases/tag/1.0.0

[khoipro]

Thanks for your contribute @spencerfinnell, but I still something can be a Pull Request to Gutenberg, because it should be apart of core.

[dougwollison]

+1

I'd like the styles wrapper to also include the post type class; I frequently build sites where the base styling varies from post type to post type, not to mention simulating options like colorschemes and other options I may add controls for that need to be reflected in the visual editor.

I'm currently using a modified version of @spencerfinnell's solution, but it doesn't get re-applied when switching between Code and Visual mode, which while an edge case does make things annoying.

There needs to be some way of both detecting when the editor switches modes (spent all morning trying to find a way, no dice thus far), or otherwise one of the following:

• register additional classes on the .editor-styles-wrapper div within the editor (with the ability add/remove them on the fly and have them preserved when toggling visual/code mode).
• support for a special selector prefix that will prevent the editor from blindly rewriting all selectors in the editor-styles CSS to be prefixed with .editor-styles-wrapper.

[tatof]

+1 This should indeed be a core function

[strarsis]

+1!

[anteksiler]

+1