Color Block Support: Add utilities to retrieve color classes and styles #30869
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 includes two functions. The first collects CSS classes and styles, suitable for a block's save. The second is a hook to also force inline styles so named color selections are respected even when themes do not load their color stylesheets in the editor.
aaronrobertshaw
added
[Type] Enhancement
7 tasks
|
Size Change: +251 B (0%) Total Size: 1.46 MB
ℹ️ View Unchanged
|
7 tasks
7 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.
Description
This adds two utilities to assist in applying color block support classes and styles to inner block elements when choosing to skip serialization.
The first function collects CSS classes and styles in much the same manner as they are generated and applied to the block's wrapper element when not skipping serialization. This function is all that is needed in a block's save.
The second is a hook to also force inline styles so named color selections are respected even when themes do not load their color stylesheets in the editor. This extends the first function above.
How has this been tested?
Manually and running
npm run test-unitto ensure fixtures tests still pass after updating the table and button blocks to use these utilities instead previous ad-hoc approach.The easiest method to test this PR is via the PR updating the button block or table block.
To test the link colors, you can update the block's colors support config to toggle
"link": true. Then inspect via dev tools the correct CSS classes and styles are being applied.Types of changes
New feature.
Checklist:
*.native.jsfiles for terms that need renaming or removal).