core/buttons does not respect isDefault for core/button variation

[warudin]

Description

Using isDefault on variations for the core/button block is not resulting in the core/buttons block being pre-populated with your desired variation.

Step-by-step reproduction instructions

1. Register one or more block variations, set isDefault: true for one of them.
2. Add a core/buttons block in your Editor
3. The block is not pre-populated with your preferred (isDefault: true) variation.

Screenshots, screen recording, code snippet

Block Variation Registration:

const { registerBlockVariation } = wp.blocks;

import { button, formatUnderline } from "@wordpress/icons";

const BUTTON_VARIATIONS = [
	{
		name: "default-button",
		title: "Default",
		icon: button,
		attributes: {
			namespace: "default-button",
			backgroundColor: "primary",
			textColor: "white",
			borderColor: "primary",
			style: {
				shadow: "none",
				typography: {
					textDecoration: "none",
					fontWeight: "500",
				},
				border: {
					width: "2px",
					radius: "var(--wp--custom--border-rounded-full)",
				},
			},
			className: "wp-block-button wp-block-button-default-button",
		},
		isDefault: true,
	},
	{
		name: "underlined-button",
		title: "Underlined Button",
		icon: formatUnderline,
		attributes: {
			namespace: "underlined-button",
			backgroundColor: "transparent",
			textColor: "primary",
			borderColor: "",
			style: {
				shadow: "none",
				typography: {
					textDecoration: "underline",
					fontWeight: "500",
				},
				border: {
					width: "0px",
					radius: "var(--wp--custom--border-rounded-full)",
				},
			},
			className: "wp-block-button wp-block-button-underlined-button",
		},
		isDefault: false,
	},
	{
		name: "outline-button",
		title: "Outline",
		icon: "button",
		attributes: {
			namespace: "outline-button",
			backgroundColor: "transparent",
			textColor: "primary",
			borderColor: "primary",
			style: {
				shadow: "none",
				typography: {
					textDecoration: "none",
					fontWeight: "500",
				},
				border: {
					width: "2px",
					radius: "var(--wp--custom--border-rounded-full)",
				},
			},
			className: "wp-block-button wp-block-button-outline-button",
		},
		isDefault: false,
	},
];

BUTTON_VARIATIONS.forEach((buttonSettings) => {
	registerBlockVariation("core/button", {
		...buttonSettings,
		scope: ["transform", "inserter", "block"],
		isActive: (blockAttributes, buttonSettings) => {
			return blockAttributes.className?.includes(buttonSettings?.className);
		},
	});
});

Screen recording:

Schermopname.2023-08-10.om.10.37.33.mov

Environment info

• WordPress 6.3
• Gutenberg 16.4

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

[mrwweb]

I may be seeing something similar, so I'll add it here in case it's relevant.

In WordPress 6.2 (and prior versions), I could use this code to override the default Group block variation so it "inherits" the content layout (very confusing option, btw):

/* Set Group to Inherit Layout by Default */
/* Stopped working in WordPress 6.3. */
/* Results in a duplicate Group block in the inserter and layout attribute is ignored */
wp.blocks.registerBlockVariation('core/group', {
	isDefault: true,
	attributes: {
		layout: {
			inherit: true,
		},
	},
});

In WordPress 6.3, this results in a duplicate Group block in the inserter (and it also doesn't work as desired because it seems the layout attributes were changed). What's relevant here is that I discovered that adding name: 'group' gets rid of the duplicate Group block in the inserter but DOES NOT change the default group block. (So my variation is essentially ignored.)

/* Set Group to Inherit Layout by Default */
/* Stopped working in WordPress 6.3 */
/* block variation appears to be completely ignored */
wp.blocks.registerBlockVariation('core/group', {
	name: 'group'
	isDefault: true,
	attributes: {
		layout: {
			inherit: true,
		},
	},
});

To fully resolve the issues, I've had to resort to unregistering the default Group block variation ('group'), changing the layout attribute definition, and setting an empty style object so the Group block variation selector is skipped and doesn't undo the intended default:

/* Set Group to Inherit Layout by Default */
/* Working in 6.3, though it seems isDefault should make unregisterBlockVariation unnecessary */
unregisterBlockVariation( 'core/group', 'group' );
registerBlockVariation(
	'core/group', {
		name: 'group',
		isDefault: true,
		attributes: {
			layout: {
				type: 'default',
			},
			style: {},
		},
	}
);

@warudin I'm curious if you observe the same odd behavior when omitting the name property.

[ndiego]

Thanks for reporting @warudin. Yeah isDefault does not automatically add that variation into blocks like Buttons. This is one of those bug/enhancements that I would love to see tackled in 6.4.

@mrwweb I am not sure. It does look like the group variation has existed for a while, and I didn't know you could register a variation without name. I guess I never tried 😅

That said this might be a larger issue related to the Group block specifically, perhaps due to its placeholder, and how that interacts with isDefault. I am not seeing anything recent that has changed with the Group block specifically, so this is strange. I was able to replicate what you are seeing. Would mind opening a separate ticket for the issue you are encountering?