Make the Buttons block a variation of Row, and allow folks to insert a single Button once again

[jameskoster]

The Buttons block makes it convenient to add a row of buttons, but I always find the UX frustrating when I just want to insert a single button.

As far as I can tell, the new Row block is basically a richer version of the Buttons block, that will accept any inner block type.

So I'm wondering if we should make the existing Buttons block a variation of Row, and expose both that and the singular Button block in the Inserter? This makes it easier to insert either a single button, or a row.

We could make it possible to transform a single button in to a row via the block transform menu.

[youknowriad]

I think that's a possibility, here are the challenges I foresee:

• How to make sure only "button" blocks are allowed (an allowedBlocks attribute might be needed in the group block, I think we did this approach in columns maybe previously)
• How to "deprecate" Buttons block and transform it to a group block. We don't support cross block types deprecations yet, is it an opportunity to introduce these?
• Existing themes might be relying on the classNames of the buttons block (dev note might be enough but we need to assess impact)
• Existing content is not going to be migrated automatically, meaning we might have to keep the styles of the buttons block forever?

[jasmussen]

How to make sure only "button" blocks are allowed (an allowedBlocks attribute might be needed in the group block, I think we did this approach in columns maybe previously)

Some of the stuff being explored for #34041 involves being able to set a "default" block that's inserted instantly on click, instead of opening the quick inserter. That could be leveraged here.

There might be an opportunity there to converge the containers for Buttons, Social Icons and Navigation to be variations of the Row block with similar layout controls, with a mostly shared code structure. It depends a bit on the value of the code shared, though, and whether the fact that we need additional block level controls for blocks like Social Links and Navigation are possible to add to those variations in a sensible way.

[youknowriad]

I think a simpler alternative might be to just hide the "Buttons" block from the inserter, make the "Button" block visible again in the inserter and potentially provide some buttons patterns (row + button blocks inside it)

[jameskoster]

That sounds good.

Some transform options could be useful too. EG if I insert two Button blocks, select both, an option to transform them in to a Row could be present.

[stacimc]

This is a really interesting idea, and might even help with some issues I'm running into with styling backwards compatibility as I try to add Gap support to the Buttons block (#34546). Just thinking out loud, we could preserve existing margin-based styles only for buttons within a Buttons container, and then elsewhere defer handling of Gap/margins to the Row/Group 🤔

[shaunandrews]

I think this could be resolved by highlighting block patterns when inserting a Button(s) block:

Button.Block.Previews.mp4

[audunmb]

yes, please. Adding one button is an annoyance now, with lots of extra unecessary work (and code).

Should go for the Social Media block as well. It's just a row with icons, why have it as a separate block.