Block Styles: Switch block style selection to select dropdown with color swatches #57331
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
aaronrobertshaw
added
[Type] Experimental
|
This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress. If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged. If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack. Thank you! ❤️ View changed files❔ lib/block-editor-settings.php ❔ lib/experimental/class-wp-rest-block-editor-settings-controller.php |
|
Size Change: +3.26 kB (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 6e5287a. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7393562283
|
aaronrobertshaw
force-pushed
the
try/adding-swatches-to-block-style-controls
branch
from
59e661a
to
6e5287a
Compare
This was referenced Jan 4, 2024
aaronrobertshaw
force-pushed
the
try/extending-block-style-variations
branch
from
bfa61f1
to
597159c
Compare
aaronrobertshaw
force-pushed
the
try/extending-block-style-variations
branch
from
6c222f5
to
75ec95c
Compare
aaronrobertshaw
force-pushed
the
try/adding-swatches-to-block-style-controls
branch
2 times, most recently
from
a6a2bb7
to
76150f1
Compare
|
I've split out the component related updates from this into a new PR available for review in #57703. |
|
Hey @aaronrobertshaw 👋 At this point in time, the new version of Having said that, your usecase is definitely helpful in gathering more information about what consumers of the component may require — I'll continue the conversation directly in #57703 |
Thanks for the additional context @ciampo, appreciate it. Unfortunately, the existing 
Am I correct in thinking there wouldn't be any appetite to make this major change to the existing I'll respond to specifics over on the other PR. cc/ @SaxonF this might be a bit of a blocker to improving the UI for block style varaitions. |
|
It's exciting to see a use case and interest in the new version of CustomSelectControl that we've been working on! 😄
This is something we are exploring now, here: #57000. With the goal of being able to use the new component, while keeping the backward compatibility for existing usages of CustomSelectControl. |
aaronrobertshaw
force-pushed
the
try/extending-block-style-variations
branch
from
875938a
to
562a9fa
Compare
We need a means of ensuring that the select popover has sufficient z-index to render above controls below it in the inspector. Additionally, we want to be able to avoid visually rendering the select's label.
aaronrobertshaw
force-pushed
the
try/adding-swatches-to-block-style-controls
branch
from
76150f1
to
3cedbd0
Compare
|
As @brookewp says, our goal is to rewrite |
|
I'm closing this PR given the v2 custom select control isn't quite ready yet. There's an alternative approach using a dropdown in #57780. When the time comes to make the switch to a select control, this PR may or may not still be relevant but it can at least provide some direction. |
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.
Related:
🚧 Warning - Do not merge 🚧
This PR requires updates to the experimental V2
CustomSelectControl. The changes for that have been split out into a separate PR (#57703) for review and must land before this can be rebased, reviewed, and merged.What?
Updates the controls for selecting a block style variation to a custom select with color swatches pulled from the variation's theme.json styles if available.
Why?
#56540 (comment)
As the block styles feature is leveraged further for section-related styling, individual buttons for each block style will take up too much real estate in the inspector. The color swatches will also help ease style selection for users.
How?
__experimentalStylesto the block editor store for access to global styles data.CustomSelect(v2 CustomSelectControl) to the components package's private APIsCustomSelectto allow visually hiding the label and controlling popover propsBlockStylescomponent to use the new custom select controlTesting Instructions
Screenshots or screencast
Screen.Recording.2023-12-22.at.2.45.59.pm.mp4