WordPress / WordPress/create-block-theme

Blank Theme: Color palette remove "custom-" prefix

Open
#821 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
JavaScript
Stars
417
Forks
66
PR merge metrics
No merged PRs in 30d

Description

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.
Image

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 -->
Image

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No file, test, or entry point is named. Start by tracing how Styles > Colors creates palette slugs when theme.json has no color palette, then compare the generated names with the block markup shown here. Done means the intended prefix behavior is decided, implemented, and covered by tests for blank and configured themes.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.