Skip to content
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

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

Closed
petitphp opened this issue Aug 9, 2023 · 3 comments · Fixed by #53783
Closed

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

petitphp opened this issue Aug 9, 2023 · 3 comments · Fixed by #53783
Labels
[Block] Buttons Affects the Buttons Block [Type] Enhancement A suggestion for improvement.

Comments

@petitphp
Copy link
Contributor

petitphp commented Aug 9, 2023

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.

  1. Open the browser devtools
  2. 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

@t-hamano t-hamano added Needs Testing Needs further testing to be confirmed. [Block] Buttons Affects the Buttons Block labels Aug 10, 2023
@ndiego
Copy link
Member

ndiego commented Aug 15, 2023

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!

@ndiego ndiego removed the Needs Testing Needs further testing to be confirmed. label Aug 15, 2023
@petitphp
Copy link
Contributor Author

@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_buttons_inserter

Block "Social links" inserter
block_social_links_inserter

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

@youknowriad
Copy link
Contributor

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.

@youknowriad youknowriad added the [Type] Enhancement A suggestion for improvement. label Aug 17, 2023
stokesman pushed a commit that referenced this issue Sep 11, 2023
* Buttons Block: Show inserter if button have variations (#53498)

* Combine `useSelect` variations with the existing one

* Add comment about the custom check for the `directInsert` option value that should be handled in the `Inserter`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Buttons Affects the Buttons Block [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants