No way to specify template-specific styles

[lunule]

Description

I wasn't sure where to post this (bug report vs feature request), but the current "Custom templates" implementation is terribly limited, especially with consideration to the fact that custom templating is and was one of the most often used feature with WordPress themes.

The bug: there's just no way to specify template-specific styles.

For instance, if the client needs a custom page template with a special background color, and with special heading colors and font sizes, currently there's no way for an FSE theme developer to implement this request.

While, theoretically, custom styles can be added in the theme stylesheet for the frontend, this can't be used as a professional solution either, as it's impossible to apply these custom styles as editor styles in the backend (it's still and also impossible to detect the selected template on a page edit screen).

My questions are:

• Is this an intentional/conscious decision, and templates won't ever allow template-specific styles?
• How should I communicate to my clients that the templates feature is not ready - while the new editing experience is advertised as a production-ready set of new features?
• Is this problem monitored, and if it is, are there any plans to make the fixes a high priority - and is there an estimated date for the completion of template-specific styling features?

Step-by-step reproduction instructions

When a user creates a custom template, she has the expectation that she can add custom styles to this template.
But she hasn't as global styling is only available in a sitewide manner.

If she selects a custom template, and then clicks the Styles button in the top right corner, she expects the custom styles she defines will be applied on the selected template only.
But they aren't - so this is also a misleading UI pattern or button placement.

By clients expectation, templates should offer template-specific global styles, e.g. page background should be black, and h1 color should be yellow on all pages associated with xy custom template. And also, from a developer point of view, it seems very strange why the site editor offers custom templating at all, if it allows zero template-specific style customization options.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[jordesign]

Hi @lanule - this sounds similar to this proposal for Section Styles:
#57537

Does that cover the kind of thing you're talking about?

[lunule]

Hi @jordesign - thanks for the swift reply, but I'm not sure the two are related.

I'm talking about template-specific global styles, not block or section styles.

The typical example is template-specific background color - it's a typical requirement that a custom template should have a custom background color. This requirement is currently impossible to implement with the site editor, both on site owner/editor and developer levels.

[aaronrobertshaw]

👋 Thanks for writing up this issue @lunule.

I'm not sure the two are related.
...
I'm talking about template-specific global styles, not block or section styles.

I see a lot of overlap here between styles for a template and section styles. In the larger scheme of things, a template is just the largest type of section you could be styling before hitting the global level of styling.

One workaround given the limitations of current section styling would be to add a Group wrapper to a template. Then apply block style variations to that Group wrapper to achieve the per-template styling.

A possible benefit to leaning into the block style variations would be if multiple templates wanted to share styles, there'd be less to configure, tweak, or keep in sync.

The obvious shortfall at the moment though is highlighted by the typical example of the background-color per template:

The typical example is template-specific background color

If that background color is to appear as though it was the background on the body element, then the theme would need to do a little setup and style things such that the .wp-site-blocks container fills the available real estate and so too does the Group block wrapper added to the template.

If that is done and combined with the extended block style variations proposed in #57537 & #57908, which allows variations to style inner elements and block types, then I think you could effectively achieve the per template styling. Better yet, that could be available via Gutenberg early in the next release cycle.

[lunule]

Hi @aaronrobertshaw - thanks for your reply and for the ticket references.

I just tested your idea of using a group block as a parent block around everything else in the template.
And it works like a charm! 👍 Problem solved.

Before closing this, a question - do you know if there are plans to actually show the selected template in the content editor? Or is this something that would also be handled by the new extended block style variations feature?

(My only concern with the group block fix, and basically with the way templates are currently working with Gutenberg, is that the editor shows the editor styles, and there's no way to make it show the styles and design patterns associated with a selected non-default template.)

[aaronrobertshaw]

Apologies for the slow reply @lunule

do you know if there are plans to actually show the selected template in the content editor?

If I understand the question correctly, the current template is already displayed in both the post and site editors within the sidebar under the Post/Page tab.

Site Editor	Post Editor

the editor shows the editor styles, and there's no way to make it show the styles and design patterns associated with a selected non-default template

I expect that when per-template styling is added, this will be a core part of that feature. I know the feature has been discussed in various places but unfortunately, I don't have a dedicated issue I can point to at the moment.

[lunule]

Thanks for your reply @aaronrobertshaw.

The (remaining) issue is not related to the template selector, but to the fact that developers don't have an option to apply designs for specific templates (only) - while the template class in the body element is available on the frontend, it is not in the Editor, and as a result, these custom styles are not applied in the backend. This is what I meant by "do you know if there are plans to actually show the selected template in the content editor?" - because this is still a huge issue.

Example: just apply some specific style (e.g. yellow background) on the .page-template-default template in the theme stylesheet - the change will be applied on the front-end, but not in the editor.

I'm not sure what the plans are for the "per-template styling" feature, or what's the status of the implementation - I just hope it will include the fix of this specific problem as well.

[aaronrobertshaw]

Thanks for the clarification @lunule 👍

actually show the selected template

So rather than "showing" what template is selected, what you were getting at was more "are there plans to apply or indicate within the markup in the content editor, the current template". Is that correct?

Something that can be hooked onto if required and generally ensures the template gets all its appropriate styles within the editor.

because this is still a huge issue

It is definitely on the radar.

As I mentioned, I don't have an overview issue I can point to at this stage as some foundational pieces are being worked on currently that will likely make the implementation of this feature much easier. For example, the work around styling sections could provide the mechanism for template-specific styles.

[lunule]

(...) what you were getting at was more "are there plans to apply or indicate within the markup in the content editor, the current template". Is that correct?

Something that can be hooked onto if required and generally ensures the template gets all its appropriate styles within the editor.

👍 Thanks, @aaronrobertshaw - yes, this is exactly what I have in mind.

I just gave the referenced feature request #57537 a more thorough read, and I agree, the new Styling Sections implementation would most probably fix the template-specific styling as well.

For the moment, I would appreciate if we could keep this issue open until the new feature is ready to be tested.