Different background-colors for pages

[davidspeyerdesign]

Description

I am able to define a global background-color, but it is not possible to define background-colors for different pages. I have used custom css to add different background-colors via the body class "page-id", but this is only visible in the frontend and not in the editor. So I tried to create different templates and created group blocks with a background-color or added the background-color to the content block. But also this is not visible in the backend editor.

Step-by-step reproduction instructions

CSS issue

1. Use the additional css section and add styles depending on body class "page-id".
2. Edit the page with that id and see that those styles are not working, because there is no "page-id" class in the backend editor.

Template issue

1. Define a global background-color in the editor styles settings (Appearance > Editor > Styles > Colors).
2. Create a new template where for example the content block has a different background-color.
3. Create a new page and assign the new template to that page. You can see that the content does not have that background-color.
4. Also if this would work, the editor would look silly, because the page title section (.wp-block-post-title) would have the global background-color.

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.6.2
• Gutenberg not installed
• Theme Twenty Twenty-Four

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[mtias]

Hello! This is something we want to do as part of what #40318 unlocks. Essentially being able to apply styles to a specific post, page, or template with the same theme.json mechanisms.

[davidspeyerdesign]

Thank you 👍