core/button variations doesn't appear in core/buttons inserter

[petitphp]

Description

Variation of core/button block are not available in the core/buttons inserter.

I expect to see the variations when adding button.

Step-by-step reproduction instructions

1. Add the code snippet provided below to WordPress
2. Create or edit a post
3. Add a "Buttons" block

Only the basic block "button" is available, the variations can't be used.

4. Open the browser devtools
5. In the console, run wp.blocks.getBlockVariations('core/button');

The two registered variations are correctly listed as a result.

Screenshots, screen recording, code snippet

Small code snippet to demonstrate the issue.

<?php
add_action( 'enqueue_block_editor_assets', function () {
	wp_enqueue_script( 'wp-blocks', );
	wp_add_inline_script(
		'wp-blocks',
		"
        wp.blocks.registerBlockVariation('core/button', {
            name: 'custom-button',
            label: 'My custom button',
            attributes: {className: 'my-custom-button'},
        });
        
        wp.blocks.registerBlockVariation('core/button', {
            name: 'custom-button-default',
            label: 'My custom button (Default variation)',
            attributes: {className: 'my-custom-button-default'},
            isDefault: true
        });
        ",
        'after'
	);
} );

Environment info

• WordPress 6.3, Gutenberg 16.4.0, TwentyTwentyThree
• Firefox / Chrome
• Desktop mac 13

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[ndiego]

Hi @petitphp, thanks for reporting this issue. You will need to add scope to the variation. Also note that label needs to be updated to title. Give this code a try:

wp.blocks.registerBlockVariation('core/button', {
	name: 'custom-button',
	title: 'My custom button',
	scope: ['transform', 'inserter', 'block'],
	attributes: {className: 'my-custom-button'},
});

That said, there is another issue where isDefault does not actually replace the default block that gets added to the Buttons block. This is reported in #53517

Let me know if I can answer any additional questions or if this can be closed. Thanks!

[petitphp]

@ndiego Thanks for the answer. I was expecting to see the variation show up in the inserter like with the "Social links" blocks.

Block "Buttons" inserter

Block "Social links" inserter

Do you think we could we have the same behavior between the two blocks ?

[youknowriad]

I'm seeing that the "buttons" block has this flag for its inner blocks directInsert: true, while the social icons block doesn't. I suspect that it's probably related.

I think personally that it's reasonable to expect the inserter to show all the variations and override the "direct insert" config if there are multiple possible variations/blocks as child blocks.