Custom Core Block Variation details not updated in "Settings Sidebar" section

[2xSamurai]

Description

Issue:

When adding a custom core block variation, the details ( title, icon, description ) are not updated in the "Settings Sidebar" section. Hence there is no way to distinguish between custom core block variations and core blocks once a block is added.

Note: I did report this earlier in core-trac without knowing that it had to be reported here. Below is the core trac reference.

https://core.trac.wordpress.org/ticket/58432

Step-by-step reproduction instructions

1. Add support for block variations to your existing theme.

function prefix_editor_assets() {
	wp_enqueue_script(
		'prefix-block-variations',
		get_template_directory_uri() . '/assets/js/blocks/block-variations.js',
		array( 'wp-blocks' )
	);
}
add_action( 'enqueue_block_editor_assets', 'prefix_editor_assets' );

2. Create a custom core block variation

wp.blocks.registerBlockVariation(
	'core/group',
	{
	    name: 'card-group',
	    title: 'Card group',
            description: 'A group with card styling',
            label: 'Card group',
            icon: 'wordpress',
            attributes: {
	       className: 'card-group',
            },
            innerBlocks: [
                [ 'core/heading', { content: '' } ],
                [ 'core/paragraph', { content: '' } ],
            ]
	}
);

3. Check inside editor for new core block variation.
4. Add new core block variation and check the siderbar with the block selected.

Note: I used the following tutorial by Carolina Nymark to create the variation
https://fullsiteediting.com/lessons/block-variations/

Custom.Core.Block.Variation.mov

Screenshots, screen recording, code snippet

No response

Environment info

WordPress - 6.2.2
Theme - Twenty Twenty-Two

Tried with and without Guttenberg
Gutenberg: 15.9.1

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

[carolinan]

Hi,
According to the documentation, the scope is what decides where the variation should show, and it defaults to block and inserter.
Perhaps there is something in the group block specifically that requires the scope to include transform?

[2xSamurai]

Hi, According to the documentation, the scope is what decides where the variation should show, and it defaults to block and inserter. Perhaps there is something in the group block specifically that requires the scope to include transform?

I'm not entirely sure that you understand the issue I'm facing.

Let's say I created a block variation for a "Group" block and called it "Card Group".

Now I am adding this block variation to a page with other blocks which has default group blocks as well. There is no way to distinguish this "Card Group" block from the "Group" block.

Even if I check the List View, I still see it as a "Group" block and not a "Card Group" block. Which should not be the case right?

Also even in the block settings, it shows up as "Group".

I hope I was able to make it more clear.

Note: I also did try adding transform to the scope and nothing changed.

[Thelmachido]

Now I am adding this block variation to a page with other blocks which has default group blocks as well. There is no way to distinguish this "Card Group" block from the "Group" block.

Hi, @2xSamurai do you get the same results with other blocks or it's just the Group block that's behaving this way for you?

[2xSamurai]

Now I am adding this block variation to a page with other blocks which has default group blocks as well. There is no way to distinguish this "Card Group" block from the "Group" block.

Hi, @2xSamurai do you get the same results with other blocks or it's just the Group block that's behaving this way for you?

Just checked with the 'Paragraph' and 'Columns' blocks. It's the same.
So guessing it's the same behaviour for all the blocks.

[mrwweb]

@2xSamurai @carolinan @Thelmachido I think the issue here may be inconsistency (at least from my expectations) about variations with and without isActive supplied.

Here's a simple example:

wp.blocks.registerBlockVariation(
	'core/spacer',
	{
		name: 'spacer',
		title: 'Custom Spacer',
		isDefault: true,
		description: 'Custom Spacer Description',
	}
);

When using that code, the "Custom Spacer" title and description are used in the Block Inserter but not the Block List View or the Block Sidebar. There, they use the default core Spacer block title and description.

This can be resolved by always returning true for isActive:

wp.blocks.registerBlockVariation(
	'core/spacer',
	{
		name: 'spacer',
		title: 'Custom Spacer',
		isDefault: true,
		description: 'Custom Spacer Description',
		isActive: () => true,
	}
);

With that code, the custom title and description are used everywhere: Inserter, List View, and Sidebar.

So in @2xSamurai's case, I think providing an isActive function would resolve the issue. However, I will say that I think isDefault should possibly impact whether isActive is needed, especially if used with a block that has no variations (e.g. the single variation overrides the default settings and doesn't really create a "new" variation).

@ndiego You mentioned revisiting the registerBlockVariation docs on #53750, so this might be something else to consider as you do that.

[stokesman]

I think providing an isActive function would resolve the issue

It should but the Group block had #41303 that was/is impacting it.

[ndiego]

So in @2xSamurai's case, I think providing an isActive function would resolve the issue. However, I will say that I think isDefault should possibly impact whether isActive is needed, especially if used with a block that has no variations (e.g. the single variation overrides the default settings and doesn't really create a "new" variation).

@ndiego You mentioned revisiting the registerBlockVariation docs on #53750, so this might be something else to consider as you do that.

Yeah I am adding a section that better explains isActive. While it is technically optional, you will often want this to be set. I do think that the Group block is a bit of a unique case, which is why we are seeing all these edge cases. It has functionality that is not typical in most blocks, such as the placeholder.