How to set the background color of a template part (Header/Footer) in Twenty Twentythree?

Question

In Wordpress's shiny new Twenty Twentythree theme, how can you assign a background color to the header or foother template parts? Can this be done in a child theme - through theme.json? Or somehow else?

---

The obvious approach of adding a css class to the child theme's styles.css file, like, for example:

.ownclass {
    background-color: crimson !important;
    color: green !important;
}

And assigning it in Gutenberg under Advanced-> Additional CSS class(es) to the header (or any other) block, doesn't have any effect. But even if this would work, assigning (hard coding?) the background color through theme.json would be preferred over manually assigning it in Gutenberg.

Do you have any other ideas about how to set a template part's background color in a child theme?

You advise is very much appreciated. Thank you.

Answer 1

The Twenty Twenty-Three theme comes with an inbuilt "Editor" option that exists under the "Appearance" menu.

Appearance >> Editor

Once you click on the "Editor(beta)" option then you can select the header or footer area and after that, you can customize their stylings like Background Color, Text Color, and Link Color.

The theme also provides many more customization options. You can explore the theme by visiting the below links:

https://wordpress.org/news/2022/11/introducing-twenty-twenty-three/