-
Notifications
You must be signed in to change notification settings - Fork 4.6k
BlockVariationTransforms: Refactor DropdownMenu with Menu #71938
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: -132 B (-0.01%) Total Size: 2.37 MB
ℹ️ View Unchanged
|
mirka
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If the toggle button, which is customized to look like a select element, doesn't adhere to the design system, it may need to be refactored in the future.
This exactly. I find it quite harmful to have menus styled like selects. It looks like the label is the selected value. @WordPress/gutenberg-design for a heads-up — let us know if you have any immediate preferences on how to deal with these (I've seen these kinds of "faux-select menus" in consumer mockups as well). If there are no immediate ideas, I'm fine with this refactor as an incremental fix for the click away bug.
|
I agree with all the assessments noted above. If I recall correctly, the original design called for a select, an actual select. If that's not doable, I don't mind replacing this with a button. Probably secondary style. Any other recommendations? |
|
That would be the idea. I think the edit contents button may be too prominent, actually, I could see it going away again. At the same time, I proposed it. But I think it's more valid for this case. I think the block to test is actually navigation items, I think they have a pretty packed inspector already. |
|
Flaky tests detected in 4209bcf. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/18927031828
|
|
This UI was first implemented in #26687, but it seems that several designs were considered. See #26687 (comment) My other suggestion would be to use the CustomSelectControl, but that might be too prominent:
|
|
I'll defer to you all on which component to use. But it's also on my mind that the CustomSelectControl feels a bit dated at this point. Isn't that the old version of the control proposed? |
I know there is a newer CustomSelectControlV2, but this doesn't seem to be used anywhere in the project yet 🤔 |
|
I prefer the
Unrelated to this PR now, but it's likely we'll abandon |
mirka
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice clean up, thank you!




What?
This PR refactors the
DropdownMenucomponent inside the__experimentalBlockVariationTransformscomponent with theMenucomponent.Why?
The reason I decided to refactor using the
Menucomponent was that the popover closing behavior was unstable.There is padding outside the toggle button, and clicking it will not close the popover. Once you click on the padding, focus is removed from the popover, and clicking anywhere else no longer closes the popover. You must either click on the toggle button itself or focus an element inside the popover again:
ce18b0b9604fcd552f4c7c10c68ca01b.mp4
How?
DropdownMenucomponent and solve the problem, I decided to refactor it into aMenucomponent instead andkeep the current UI as unchanged as possible. If the toggle button, which is customized to look like a select element, doesn't adhere to the design system, it may need to be refactored in the future.remove unique button customization from toggle buttons and apply the secondary variant.Testing Instructions