My transform variations code partially fulfills its mission

[realthemes]

Description

I find that the documentation on the topic of transform variations is not fully disclosed and I'm stuck at the initial stage, I make a block that represent a section of three types, full width section, section with sidebar on the left side, and section with sidebar on the right side, I adapted the columns block code to make it work in Editor ( used variations,js file, and __experimentalBlockVariationPicker component for Editor ), now I want add transform variations to Editor Sidebar, so I add 'transform' to variations scope property, this added three buttons in Editor Sidebar but when I click on them the only thing happaned is changing variation attributes, two things are missing, when you click on the button, it should change the state to pressed for currently selected variation, and I also counted on InnerBlocks will also changing as I indicated in variations innerBlocks property, I can quickly show my variations.js file (I removed icon property it for simplicity):

Step-by-step reproduction instructions

1. Look at my code
2. Tell me what to do next

Screenshots, screen recording, code snippet

variations.js

const variations = [
	{
		name: 'full',
		title: __( 'Full width section' ),
		description: __( 'Full width section' ),
		innerBlocks: [ [ 'unior-blocks/unior-section-content' ] ],
		scope: [ 'block', 'transform' ],
		isDefault: true,
		attributes: { sidebarPosition: 'none' },
	},
	{
		name: 'with-sidebar-left',
		title: __( 'Sidebar on the left' ),
		description: __( 'Section with sidebar on the left side' ),
		innerBlocks: [
			[ 'unior-blocks/unior-section-content' ],
			[ 'unior-blocks/unior-section-sidebar' ],
		],
		scope: [ 'block', 'transform' ],
		attributes: { sidebarPosition: 'left' },
	},
	{
		name: 'with-sidebar-right',
		title: __( 'Sidebar on the right' ),
		description: __( 'Section with sidebar on the right side' ),
		innerBlocks: [
			[ 'unior-blocks/unior-section-content' ],
			[ 'unior-blocks/unior-section-sidebar' ],
		],
		scope: [ 'block', 'transform' ],
		attributes: { sidebarPosition: 'right' },
	}
];

export default variations;

Environment info

WP 6.2.2, Gutenberg 15.9.1, Custom Theme
Chrome
Windows 11, Desktop

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

[realthemes]

Here is screenshot of sidebar transform variations buttons

[realthemes]

I partially solved the problem, isActive is responsible for the pressed state of the button, it's great, but the main problem is still exist, it lies in the fact that I indicated in the first variation only one innerBlocks - innerBlocks: [ [ 'unior-blocks/unior-section-content' ] ] and both next two variations indicated as two innerBlocks -

innerBlocks: [
			[ 'unior-blocks/unior-section-content' ],
			[ 'unior-blocks/unior-section-sidebar' ],
		],

When I click on transform variations button in Editor Sidebar block transformation does not occur, for example, if there are two blocks - unior-section-content and unior-section-sidebar they didn't transform to single inner block unior-section-content.
Is this the bug or what, please help someone

[t-hamano]

Hi @realthemes,

I think it is a specification, not a bug, that the innerBlocks is maintained after changing the block variation.

The block editor handbook mentions the following:

innerBlocks (optional, type Array[]) – Initial configuration of nested blocks.

Therefore, I believe the innerBlocks property only defines the template when the block is first inserted.

I haven't tried it, but I think you may explicitly replace innerBlocks template when certain attributes are changed, (i.e., when a variation is changed).

useEffect( () => {
	const newInnerBlocks = [
		// ...
	];

	replaceInnerBlocks( clientId, newInnerBlocks );
}, [ attributes.sidebarPosition ] );

[realthemes]

Thank you @t-hamano for reply, most likely you are right, despite the fact that I could not get the replaceInnerBlocks function to work.
Please can you quick look on my useEffect function? it recive error in console (react-dom.min.js?ver=18:1 TypeError: e is not iterable (cannot read property undefined))

Here is the simple code that must change inner blocks to single innre block (just for example):

function replaceSectionInnerBlocks( attributes, clientId ) {
	const { replaceInnerBlocks } = useDispatch( blockEditorStore );

	useEffect( () => {
		
		const newInnerBlocks = [
			[ 'unior-blocks/unior-section-content' ]
		]; 
		
		replaceInnerBlocks( clientId, newInnerBlocks );
	}, [ attributes.sidebarPosition ] );
}

[t-hamano]

As I recall, the hooks (useDispatch, useEffect) could only be used at the root level of the component. You appear to be using those hooks in your function.

Also, I don't think this topic is an issue, so let's move it to Discussions.

[realthemes]

@t-hamano, your first message are right answer, but I still encountering an error related to replaceInnerBlocks() function, even after moving useDispatch and useEffect to root level of my component