BlockToolbar: Show Group button in toolbar when multiple blocks are selected #39710
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
andrewserong
added
[Feature] Block Multi Selection
|
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! 🙂 |
7 tasks
|
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! |
Mamaduka
approved these changes
Mar 24, 2022
There was a problem hiding this comment.
It works as expected. Group button only visible if selected blocks can be grouped.
Thanks, @andrewserong.
Mamaduka
reviewed
Mar 24, 2022
packages/block-editor/src/components/convert-to-group-buttons/toolbar.js
Outdated
Show resolved
Hide resolved
mtias
reviewed
Mar 24, 2022
|
|
||
| return ( | ||
| <ToolbarGroup> | ||
| <ToolbarButton |
There was a problem hiding this comment.
Let's add the variations of Group here as well — Row, Stack.
There was a problem hiding this comment.
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! |
30 tasks
andrewserong
force-pushed
the
add/group-option-to-multi-select-toolbar
branch
from
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>
andrewserong
force-pushed
the
add/group-option-to-multi-select-toolbar
branch
from
9e5c213
to
76a5535
Compare
2 tasks
|
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). |
30 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.
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
BlockGroupToolbarcomponent 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: