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 #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

[strarsis]

+1 again! This is important for feature-parity to the classic editor.

[tomphilpotts]

I have just come across this problem, trying to adjust the editor width for a specific page template. It doesn't make sense that this isn't in core.

[benedict-w]

+1

[dashkevych]

+1

It would be great to see this functionality in the core.

[khoipro]

I believe this case is no longer need because with core/group we could wrap it well.

[dougwollison]

@khoipro could you elaborate? It sounds like you're suggesting manually wrapping an entire page's content in a group block and applying an arbitrary class to it, which I can't see as being a viable solution.

[anteksiler]

@khoipro it is not the same thing :)

[smerriman]

For reference, the BigBox workaround plugin mentioned above doesn't work very well now, because of #64534 - if you use a selector of body.page-template-something, it will be automatically rewritten to body.page-template-something :where(.editor-styles-wrapper) which no longer matches.

This is probably a bug with that change @talldan , but I'm putting it here in case anyone else comes across the same issue. A workaround is now changing the CSS to .editor-styles-wrapper.page-template-something, though it would still be nice if the original issue of not needing a workaround plugin would be integrated.