-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
BlockToolbar: Show Group button in toolbar when multiple blocks are selected #39710
Conversation
I've just added a few folks as reviewers who've recently touched similar files — while this change is fairly small code wise, it's pretty visible, so I wanted to confidence check that the addition seems reasonable! 🙂 |
Size Change: +281 B (0%) Total Size: 1.21 MB
ℹ️ View Unchanged
|
A small note: we should probably hide the button if one of the blocks has removal locked. See #39541 |
Ah, perfect, thanks @Mamaduka, I'm glad I pinged you! 😀 I'll update. |
Thank you, @andrewserong. I'll try to do full testing/review shortly. |
No rush! I'm about to wrap up for the day. Thanks again for the 👀! 🙇 |
Nice, works well, I select multiple blocks and see this: This will be useful. Since we have a Row block that's a variant of the group already, and a Stack underway, this could be a neat opportunity to both add unique icons for each. We could also surface these variants in the multi select toolbar: For these group variants, we can also do better than the "Transform to variation" dropdown in the inspector, how about this? To be clear, I'm not suggesting all of this happen in this one single PR. But if we were to show both Row and Stack blocks next to the Group button, we'd need new icons for them anyway. What do you think? Speaking of the icons, I'm still tinkering a bit with the ones shown above. Work in progress! |
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.
It works as expected. Group button only visible if selected blocks can be grouped.
Thanks, @andrewserong.
packages/block-editor/src/components/convert-to-group-buttons/toolbar.js
Outdated
Show resolved
Hide resolved
|
||
return ( | ||
<ToolbarGroup> | ||
<ToolbarButton |
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.
Let's add the variations of Group here as well — Row, Stack.
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.
Yes — I thought I'd look into that in a follow up PR. At the moment we have the same icon, so there's a couple ways we could do it, either adding additional icons in the row, or turn the Group button into a dropdown where you can then select which of the variations you'd like to convert to.
I'll have a play after this PR lands, and ping everyone again 😄
Edit: once Joen's neat new icons are ready, it looks like they'll be perfect for the toolbar 👍
Looking good! Let's definitely try the variations of Group block as well with those icons. We can do it in follow ups if necessary. |
Thanks for the feedback and designs @jasmussen, they look terrific! I'll try to land this PR with just the Group block icon in the shorter-term, and then do a follow up adding in the other variations once the icons are ready. Do you want to ping me once you've got the icons ready, and I can open up a follow-up?
I was just thinking yesterday that the drop-down isn't very intuitive, so I love that button approach for switching variations — again, I'd be very happy to work on trying to implement that! |
d29a703
to
9e5c213
Compare
I think this one's ready to land now. E2E tests are failing on |
…elected Co-authored-by: Jitesh Dhamaniya <46275049+jiteshdhamaniya@users.noreply.github.com>
9e5c213
to
76a5535
Compare
Just managed to rebase this so that tests pass before I finish up for the week, so I'll merge this in now. Will follow up next week with looking into adding the remaining buttons. Thanks, all! |
Great update, small but impactful :) |
Great work @andrewserong and thanks for the mention. i will close my PR now. |
I thought I'd have a go at this in a follow-up, so I've opened up a PR #40036 to explore adding in buttons for the Transform to Variation when each variation has a unique icon (the PR falls back to the dropdown menu if each variation does not have a unique icon). |
What?
Part of #34461
In this PR we expose a "Group" control in the block toolbar when multiple blocks are selected.
This PR borrows the implementation from #37619 (kudos @jiteshdhamaniya for opening that PR and kicking off this work! This PR is just a few tweaks on top of that one.)
Why?
As raised in #34461, it will be helpful for users working with grouping together multiple blocks to have the control more visible and available in the block toolbar. After this PR lands, we could extend the approach to also include grouping multiple blocks into other containers e.g. Row and Cover blocks.
How?
Add a
BlockGroupToolbar
component and conditionally render it in the block toolbar if multiple blocks are selected. If blocks cannot be grouped, we don't render that toolbar group.Testing Instructions
Screenshots or screencast
For reference, here is a screenshot of the Group button not being rendered when multiple social link blocks are selected: