WordPress
Extending style possibilities with custom presets
This is possibly a bad idea.
If the theme is going to use style.css, we can add CSS classes to the header and footer template parts, and use the theme.json custom variables to add for example background colors to these parts.
Basic example:
variation.json
"custom": {
"footer-background": "var(--wp--preset--color--contrast)",
"footer-text": "var(--wp--preset--color--base)"
}
template.html
<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer"} /-->
style.css The reason why we would target the group is so that users can change the colors in the editor:
.site-footer .wp-block-group {
background: var(--wp--custom--footer-background);
color: var(--wp--custom--footer-text);
}
So interestingly enough I came up with a similar idea today except my solution was to edit the style.css with some common areas that we might want to surface for styling instead of editing the templates. I definitely don't know if this is the right way to go and there would have to be decisions about what things to create placeholders for in style.css and variables the base theme.json with non-destructive values.
style.css
footer {
background-color: var(--wp--custom--footer--background);
}
header {
background-color: var(--wp--custom--header--background);
}
variation.json
"custom": {
"wp-block-post": {
"background": "var(--wp--preset--color--primary)",
"border-radius": "5px"
},
"header": {
"background": "var(--wp--preset--color--primary)"
},
"footer": {
"background": "var(--wp--preset--color--primary)"
}
}
Ultimately this feels like a good tension to solve at the Gutenberg level but I was trying to think creatively about what could be done with what we have to work with today. There's a big part of me that wants to have at least one variation that has a real wow factor, like something you wouldn't expect to be able to have accomplished without changing markup.
I would just like to take a moment to recognize the care and courage that this leadership of ideas expresses. The WordPress community is inspirational and aspirational for me, and thanks @carolinan for all your fantastic work, and passion, and for starting this conversation! ❤️ ❤️
There's a big part of me that wants to have at least one variation that has a real wow factor, like something you wouldn't expect to be able to have accomplished without changing markup.
💯 I love this! 🔥
I think this kind of exploration is interesting.
Considerations that may help stoke the experimentation:
- Since the Navigation block is enclosed within the header template part. How might the text and background colors be influenced within, including
:hover,:active,:focus
