The situation: For my WCAsia Workshop, I created a reference theme with color palette, fonts etc theme.json settings. Then for the workshop I created exercises to rebuild the theme. starting out with the CBT "Blank Theme", which is a great starting point.
I also created some content for the workshop site so students can see their theme come to life with real content.
Now from the reference theme to the workshop theme, the content had references to the color palette, students would recreate in the workshop and made sure the names and the slug matched the reference theme.
Theme color reference
| Name |
Slug |
Color |
| Base |
base |
#2B2B2B |
| Contrast |
contrast |
#F5F0E8 |
| Accent |
accent |
#C8A96E |
| Muted |
muted |
#B0A99A |
| Surface |
surface |
#3A3632 |
| Deep |
deep |
#181614 |
The only place to add colors to a new blank theme is through the Styles > Colors.
Which was all fine, but the content styles in block mark-up work any more with the new theme as all colors had "custom-" prefixes.
<!-- wp:heading {"style":{"typography":{"fontFamily":"var:preset|font-family|playfair-display","fontSize":"2.25rem","fontWeight":"500","lineHeight":"1.15"}},"textColor":"contrast"} -->
<h2 class="wp-block-heading has-contrast-color has-text-color" style="font-family:var(--wp--preset--font-family--playfair-display);font-size:2.25rem;font-weight:500;line-height:1.15">Architecture as an act of listening</h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->
There could be a case to be made to omit the "custom-" prefix for the first set of color palette choices if a user starts out with a blank theme. It might not be that easy and certainly would need more thinking through the flow, but if there are no colors palette settings in the theme.json the "custom-" prefix feels redundant.
For the workshop, I had Claude go through the full content.xml file and replace the color variables with the "custom-" ones, so it would work for the students.
There might even be a case to be made to make setting the main color palette as a separate feature, so changes to an existing color palette can be made through the CBT plugin, without the "custom-" prefix.
The situation: For my WCAsia Workshop, I created a reference theme with color palette, fonts etc theme.json settings. Then for the workshop I created exercises to rebuild the theme. starting out with the CBT "Blank Theme", which is a great starting point.
I also created some content for the workshop site so students can see their theme come to life with real content.
Now from the reference theme to the workshop theme, the content had references to the color palette, students would recreate in the workshop and made sure the names and the slug matched the reference theme.
Theme color reference
base#2B2B2Bcontrast#F5F0E8accent#C8A96Emuted#B0A99Asurface#3A3632deep#181614The only place to add colors to a new blank theme is through the Styles > Colors.
Which was all fine, but the content styles in block mark-up work any more with the new theme as all colors had "custom-" prefixes.
There could be a case to be made to omit the "custom-" prefix for the first set of color palette choices if a user starts out with a blank theme. It might not be that easy and certainly would need more thinking through the flow, but if there are no colors palette settings in the theme.json the "custom-" prefix feels redundant.
For the workshop, I had Claude go through the full content.xml file and replace the color variables with the "custom-" ones, so it would work for the students.
There might even be a case to be made to make setting the main color palette as a separate feature, so changes to an existing color palette can be made through the CBT plugin, without the "custom-" prefix.