theme.json docs: clarify naming schema for CSS Custom Properties #28639
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
oandregal
requested review from
ajitbohra,
chrisvanpatten and
mkaz
as code owners
oandregal
added
[Type] Developer Documentation
oandregal
commented
Feb 1, 2021
|
|
||
| - **Presets**: [color palettes](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-color-palettes), [font sizes](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-font-sizes), or [gradients](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-gradient-presets) declared by the theme are converted to CSS Custom Properties and enqueued both the front-end and the editors. | ||
|
|
||
| {% codetabs %} |
There was a problem hiding this comment.
I'm not sure this codetabs thing is going to work the way I expected it to work. This has been used to show ES5/ESNext code examples side by side. Can we use it for other things as well?
I thought I'd figure it out by pushing the changes to the handbook and see. If it works well, I think it can be expanded to a few things in this document.
There was a problem hiding this comment.
Clever use, I think it will work. 👍
There was a problem hiding this comment.
It didn't go very well :( I've created #28655 to see if I can fix it. Comparing it to other codetabs uses, I don't see any missing markup.
There was a problem hiding this comment.
Using single words fixed it 💪
|
Size Change: +405 B (0%) Total Size: 1.37 MB
ℹ️ View Unchanged
|
mkaz
approved these changes
Feb 1, 2021
There was a problem hiding this comment.
This makes sense to me and offers clarification and guidance around naming conventions.
I don't have any suggestions myself, so will approve but will leave open if @jasmussen wants to push anything up prior to merge. 👍
jasmussen
approved these changes
Feb 2, 2021
There was a problem hiding this comment.
Thank you, so helpful! I think this is the key bit:
**Presets** such as `--wp--preset--color--black` can be divided into the following chunks:
- `--wp`: prefix to namespace the CSS variable.
- `preset `: indicates is a CSS variable that belongs to the presets.
- `color`: indicates which preset category the variable belongs to. It can be `color`, `font-size`, `gradients`.
- `black`: the `slug` of the particular preset value.
I think this structure makes a lot of sense. In most cases, I'd prefer a prefix, and a very short variable name. But for global styles, and because of how it works, I understand it's important with a structured system for these, in addition to the preset. So this seems good.
Question, though, what does the -- mean instead of just -? I'm guessing it's a BEM-like category separator, whereas a single dash is just meant as a word-hyphen?
@youknowriad is AFK at the moment, but just wanted to leave a ping in his inbox for when he's back!
Thank you André!
Hadn't thought about it in terms of its similarity to BEM naming, but it's definitely similar: it separates "categories". The rationale for using
|
|
ok, I've added a new section called "why using |
oandregal
changed the title
This was referenced Feb 2, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR updates the theme.json docs to include more information about the naming schema of CSS Custom Properties generated by the system.
View docs live.