Allow setting multiple block styles. #21714
Open
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 PR allows setting multiple active block styles for a block. Closes #14598 .
To better distinguish between active and inactive styles I added a check mark to the top right corner of the style preview (see screenshot). A similar check mark can be seen in the media library when selecting images.
How has this been tested?
Tested with a fresh wp-env environment. Made sure that setting multiple styles work in the Gutenberg editor and that they are correctly rendered on front end. Passes the entire test suite.
Screenshots
Types of changes
This changes the behavior of block styles so that multiple can be active at once. This doesn't break using just a single style and if no styles are selected the default style is still enforced. However since multiple styles can be selected, the user interaction changes a bit: choosing a style no longer disables the previous selected style.
One thing to consider is that this makes it possible to activate styles that conflict with each other. Most of the time it's probably obvious like setting multiple styles that affect background or border, but maybe not in all cases. Unfortunately I can't see any bulletproof solution to this as discussed here #14598 .
Checklist: