Adds example state to link element #41331
Closed
Conversation
This file contains hidden or 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
draganescu
added
[Feature] Themes
Contributor
|
Does this also work in the Site Editor? You might need to update the array here too |
Member
|
Hello! Just cross-linking to an open style engine PR that generates styles for the existing It currently outputs the link colors as before. I don't see any conflicts here, and am happy to test things further. Cheers! |
Contributor
Author
|
@scruffian thanks for the tip 😁 done in 6d24868 |
|
Size Change: +193 B (0%) Total Size: 1.24 MB
ℹ️ View Unchanged
|
getdave
reviewed
May 26, 2022
Contributor
getdave
left a comment
getdave
left a comment
There was a problem hiding this comment.
This looks like a good start.
Screen.Capture.on.2022-05-26.at.16-14-48.mp4
I tried this on the Nav block to try and style the :hover effect on all a elements. I thought it wasn't working but then when I forced the :hover state via devtools it worked. Is there a pointer-events stopping this :hover applying via normal mouseover?
| */ | ||
| const ELEMENTS = array( | ||
| 'link' => 'a', | ||
| 'link:hover' => 'a:hover', |
Contributor
There was a problem hiding this comment.
I have to confess I was expecting:
"link" {
"color": {
"text": "red"
},
":hover": {
"color": {
"text": "hotpink"
}
}
}
But now I'm thinking what you have looks more like CSS whereas my expectations is more like SASS.
We could also look to auto map the :hover. So from link mapping to a we can automatically create the mapping for link:hover => a:hover. This would also allow us to map for various other pseudo classes such as :focusand:active`.
Contributor
Author
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.
What?
Exploration start for #38277
Why?
We should have a way to define via
theme.jsonstate based styles for elements (and blocks?).How?
Just adding a state as a selector mapping to
WP_Theme_JSON::ELEMENTSTesting Instructions
theme.jsonin TwentyTwentyTwo by adding the code below under styles > elements:Screenshots or screencast
simple-state-fix.mp4