Style Engine: Add a WP_Style_Engine_Processor object #42463
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
This was referenced Jul 15, 2022
|
Size Change: 0 B Total Size: 1.26 MB ℹ️ View Unchanged
|
ramonjd
added
[Package] Style Engine
There was a problem hiding this comment.
I like the direction this is taking, too! Just added a small comment to discuss naming.
I was also wondering if there are performance considerations for us to consider with doing an MD5 check on each declaration? For example, if we're json_encodeing to a string, can we do a string comparison on the JSON instead of the additional step of using an MD5 check, or is there a benefit from the extra step? PHP performance is definitely not my strong suit, so I wasn't sure on balance which is faster (comparing potentially really long strings, or doing an MD5 check first, and then comparing short strings) 🤔
This is a great point, and it's something I've had in the back of my head as we add more overhead. I've added a task to the project board to integrate some performance/speed tests. |
|
I added some tests, hope you don't mind! I like to see the output under various conditions. It's looking great! Especially the combine/merging functionality. |
ramonjd
force-pushed
the
add/style-engine/renderer
branch
from
fe6e002
to
5baaf51
Compare
Good point. I removed the extra |
aristath
changed the title
|
I believe this is now ready for a final review... Once this gets in we can start refactoring global-styles and block-supports to use the Style Engine 🎉 |
25 tasks
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.
Following discussions in other tickets for the Style Engine, this PR adds a
RendererProcessorto the style engine.Usage:
A complete example that can be used to test this:
With the above code, the
$cssat the end is.wp-block-button a:hover {color: var(--block-button-link-hover-color); background-color: #000;}.foo,.bar {color: red; font-size: 1em;}Please note the following in the final CSS:
.wp-block-button a:hoverselector we're addingbackground-color: black, and thenbackground-color: #000. In the final CSS the latter overrides the former so there are no duplicate entries for CSS properties under the same selector. This was part of previous PRs so not specifically a part of the Renderer, but worth highlighting since it is a big improvement over what we have now with strings concatenations..fooand.bar, but they have the same declarations so in the final CSS they get combined to.foo,.bar(reusing the concept from Add an inline styles handler #41896)