Issue displaying the proper name of the block variation vs default block name in the List View & Settings Panel

[zachmihalko]

Description

I am confused about how the name of the block variation is being applied.

Below I have two screenshots showing focusing on the default block "Heading" and then a block variation "Bullet Heading".

Here is my code for registering the block variation

wp.blocks.registerBlockVariation('core/heading', {
    name: 'bullet-heading',
    title: 'Bullet Heading',
    description: 'This is the custom heading block.',
    isActive: () => true,
    isDefault: false,
    attributes : {
        providerNameSlug: 'bullet-heading',
        className: "is-style-bulleted",
    }
});

NOTE: that I am also applying a block style to the Block Variation. Not sure if that has any affect.

But the ideal output would be that the default "Heading" block stayed named "Heading" and only the custom block variation when added would display in the List View and Settings panel with "Bullet Heading"

I set the isActive: () => true, based on the issue linked below but I think this has to be the wrong use of isActive based on the behavior I am seeing. But this was the only thing that was able to override the default name "Heading". Without isActive: () => true, I was then only seeing the default name "Heading" and it wouldn't show the custom block Variation name in the List View & Settings panels.

#51486

Step-by-step reproduction instructions

1. Add the same block variation to your variations.js
2. Then add both the default and custom block variation to a block editor page
3. You should see that it always shows the custom block variation

Screenshots, screen recording, code snippet

wp.blocks.registerBlockStyle('core/heading', {
    name: 'bulleted',
    label: 'Bulleted',
});

wp.blocks.registerBlockVariation('core/heading', {
    name: 'bullet-heading',
    title: 'Bullet Heading',
    description: 'This is the custom heading block.',
    isActive: () => true,
    isDefault: false,
    attributes : {
        providerNameSlug: 'bullet-heading',
        className: "is-style-bulleted",
    }
});

Environment info

WP Core 6.5.2
Custom WP Theme
Chrome Version 123.0.6312.123

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

[talldan]

Yes, the usage of isActive is incorrect. Setting it to true indicates that that variation is always active for any instance of the heading block. In your case you need to use the arguments provided to isActive to check if the instance of your block has the "is-style-bulleted" classname and only return true if so.

Here are the docs for isActive (I think these could be improved a bit, they don't read very clearly for me):
https://developer.wordpress.org/block-editor/reference-guides/block-api/block-variations/#using-isactive

BTW, this isn't a support forum, so it'd be great if any questions about APIs are made to the discussion board, stack exchange or the WordPress forums in future.

[talldan]

@zachmihalko Here are some updates I'm proposing for the docs, hopefully this is a little bit clearer:
https://github.com/WordPress/gutenberg/blob/33fc9508106a624ec4d28ca01e92a5c419bae63a/docs/reference-guides/block-api/block-variations.md#using-isactive