WordPress / WordPress/create-block-theme
Palette: auto-fill slug from Name with transliteration support
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 417
- Forks
- 66
- PR merge metrics
- No merged PRs in 30d
Description
Follow-up to #838.
Why
Adding a palette entry in the Edit Theme Settings modal currently requires the user to type both the human-readable Name and a separate slug. The slug must be lowercase alphanumeric + dashes/underscores (server-side sanitize_key()), so users either type it twice or hit save-time errors. Worth auto-deriving slug from name as the user types.
Behavior
- On a new palette row, typing in the Name field auto-fills the Slug field with the slugified name.
- Auto-sync stops the moment the user manually edits the Slug field (per-row sticky flag).
- Existing rows (loaded from
theme.json) do not auto-sync — changing a saved slug is breaking, since CSS variables reference it (--wp--preset--color--<slug>). - If slugification produces an empty string (e.g. a name composed entirely of non-Latin characters), the slug field stays empty and the existing server-side validation surfaces the issue at Update time.
Transliteration
cleanForSlug from @wordpress/url is the JS equivalent of PHP's sanitize_title(). It quietly strips characters it can't normalize:
| Input | cleanForSlug |
Desired (per #812) |
|---|---|---|
Grün |
gr-n |
gruen |
Über rot |
ber-rot |
ueber-rot |
Straße |
strae |
strasse |
Café |
cafe |
cafe ✓ |
色 |
`` (empty) | n/a (manual entry required) |
#812 (reported by @hagege) calls this out as a bug in the existing "Save Changes to Theme" flow — the same transliteration concern applies to both flows.
Mappings the issue asks for:
ä→ae,Ä→Aeö→oe,Ö→Oeü→ue,Ü→Ueß→ss
Other languages with common transliterations (Nordic, Polish, Turkish, etc.) likely deserve coverage too. A general-purpose library (unidecode, transliteration) handles a wide range at the cost of bundle size; a curated map of European-language characters keeps the bundle small but misses long tail. Worth a design discussion in this issue before implementation.
Scope
Implementation should:
- Live in a shared util (
src/utils/slugify.jsor similar) so both the new Edit Theme Settings modal and the existing Save Changes to Theme flow (#812) can use the same logic. - Apply the German-umlaut transliterations from #812 at minimum.
- Decide on coverage for other Latin-script diacritics (Nordic, Polish, Romance languages).
- Be debounced lightly to avoid jitter while typing.
References
- Foundation PR: #845 (currently in draft, closes #838)
- Related bug in existing flow: #812
- Tracking: #836
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the proposed shared utility at src/utils/slugify.js or similar, then inspect the Edit Theme Settings modal and the existing Save Changes to Theme flow referenced by #812. Resolve the transliteration coverage and debounce approach in the issue discussion, then ensure new rows sync Name to Slug until manual editing, existing rows remain unchanged, and the German mappings are covered.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100