Migrate existing single button blocks to buttons/button block (wrapped)

[strarsis]

Describe the bug
When editing pages that contain singular button blocks that had been edited before the buttons block has been introduced, there is no automatic or easy way for converting/upgrading these singular button blocks into button blocks that are wrapped by a buttons block.
The easiest approach would just mimic what is already done with any other elements and wrapping it into a group block: When a singular button block is selected that isn't wrapped by a buttons block yet, the transform menu should not only offer "Wrap into group" as with all other blocks, but also "Wrap into buttons block".
Additionally, an extra option that auto-wraps all the singular button blocks into buttons blocks would be a nice addition. Some pages can have lots of these singular buttons.

To reproduce
Edit a page that had been created when Gutenberg had no buttons block yet.
Select a singular, unwrapped button block, open the transform options.
Notice that there is no transformation that wraps this singular button block into a buttons block.

Expected behavior
A transform option for wrapping a singular button block into a buttons block.

[talldan]

Yep, makes sense that there's a transform from Button to Buttons. 👍

[Ringish]

I'm working on this!

[talldan]

Thanks @Ringish. If you need any code to reference, there's a similar transform from Image to Galleries:

gutenberg/packages/block-library/src/gallery/transforms.js

Lines 26 to 58 in 056d7c1

	from: [
	{
	type: 'block',
	isMultiBlock: true,
	blocks: [ 'core/image' ],
	transform: ( attributes ) => {
	// Init the align and size from the first item which may be either the placeholder or an image.
	let { align, sizeSlug } = attributes[ 0 ];
	// Loop through all the images and check if they have the same align and size.
	align = every( attributes, [ 'align', align ] )
	? align
	: undefined;
	sizeSlug = every( attributes, [ 'sizeSlug', sizeSlug ] )
	? sizeSlug
	: undefined;
	const validImages = filter( attributes, ( { url } ) => url );
	return createBlock( 'core/gallery', {
	images: validImages.map(
	( { id, url, alt, caption } ) => ( {
	id,
	url,
	alt,
	caption,
	} )
	),
	ids: validImages.map( ( { id } ) => id ),
	align,
	sizeSlug,
	} );
	},
	},

isMultiBlock: true is pretty handy as it means a single selected image or multiple selected images can be converted to a gallery. Seems like the same should be possible for the button block.

and the docs for transforms are here:
https://developer.wordpress.org/block-editor/developers/block-api/block-registration/#transforms-optional

[Ringish]

@talldan @strarsis
Got it working on my fork and the branch here.

Is this correct and expected behaviour?

[talldan]

@Ringish That looks great! You should be able to open a pull request against this repo using the branch on your fork.

Let me know if you need any assistance with that. I anticipate some tests will need to be updated, this fixture here I think just needs to be manually updated with the new transform:
https://github.com/WordPress/gutenberg/blob/master/packages/e2e-tests/fixtures/block-transforms.js

You can run unit tests locally by using npm run test or npm run test:watch, and end to end tests are npm run test-e2e or npm run test-e2e:watch.

[strarsis]

Maybe it would make sense to add a 'vertical' list as the buttons block default style so the button blocks wrapped by buttons block are still on separate lines.

[talldan]

@strarsis True. At the moment you can add separate Buttons blocks, but that doesn't seem completely intuitive.

I think this would have to be a separate issue though, is that something you'd be happy to create?

[strarsis]

@talldan: #20081

[talldan]

Thanks!