Style Engine: add elements to the frontend #41732
Merged
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
ramonjd
added
[Type] Experimental
|
Size Change: +125 B (0%) Total Size: 1.25 MB
ℹ️ View Unchanged
|
ramonjd
commented
Jun 15, 2022
ramonjd
commented
Jun 15, 2022
25 tasks
ramonjd
force-pushed
the
update/style-engine-frontend-elements
branch
from
05571c1 to
d151bd1
Compare
kevin940726
reviewed
Jun 20, 2022
ramonjd
force-pushed
the
update/style-engine-frontend-elements
branch
from
9480abe to
5a9c149
Compare
|
Thanks for testing this branch and for helping to make it better @kevin940726 !! |
|
@ramonjd When testing this I noticed there is a difference in the handling of specificity of element styles between the editor and the frontend - seems to be the same on trunk as well though, so maybe out of the scope of this PR. If I set an and also set it under The frontend shows the but in the editor it shows |
Oh! Thanks for testing this @glendaviesnz Interesting. In empty theme, I'm seeing it working on trunk:
And breaking on this PR
On the frontend. 🤷 theme.json{
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "840px",
"wideSize": "1100px"
}
},
"styles": {
"elements": {
"h2": {
"color": {
"text": "white",
"background": "pink"
}
}
},
"blocks": {
"core/heading": {
"elements": {
"h2": {
"color": {
"text": "black",
"background": "red"
}
}
}
}
}
},
"patterns": [
"short-text-surrounded-by-round-images",
"partner-logos"
]
}
I'll investigate |
ramonjd
force-pushed
the
update/style-engine-frontend-elements
branch
from
5a9c149 to
639ac0b
Compare
I rebased this branch and it seems okay to me now. Using the theme.json I used in the above comment, the
|
aristath
reviewed
Jul 5, 2022
Migrate elements style generation to the style engine. Split parsing of elements and other styles in hooks/style using style engine methods
Dismissing Styles Welcome Guide :D
Dismissing Styles Welcome Guide :D
Removing isEmpty Cleaning up optional chaining
ramonjd
force-pushed
the
update/style-engine-frontend-elements
branch
from
3d47f59 to
bd5a4e2
Compare
getdave
reviewed
Jul 6, 2022
glendaviesnz
approved these changes
Jul 14, 2022
There was a problem hiding this comment.
This tested well for me, and the issue with root element and block element specificity seems to be resolved, ie. both editor and front end now apply these in the same order.
I tested with color setting for an h2 element setting in styles.element which displayed until it was overrriden by the setting of a different h2 element setting in styles.blocks.h2 and this displayed until overrriden by another h2 element setting in styles.blocks.column.
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?
Migrates elements style generation to the style engine.
This PR affects the editor only.
The related backend PR took care of the element styles for the frontend site:
Tracking PR:
Why?
To continue the perilous journey of style generation consolidation!
How?
The style engine now checks for anelementsproperty, and the loops over each element's styles to generate the style rules.I've decided to bring the frontend to the same status as the backend (#40987).
We'll need to think about how, and if, we want to generate styles using the entire elements object.
Testing Instructions
I'm using Empty Theme.
Create a new post and add the following block code. Or roll your own!
Test block HTML
Check that the editor links appear and behave as you'd expect.
Run the tests!