Adding block variations in innerBlocks settings when registering a variation

[mellm0]

Description

I want to use the block variation from another block when registering a block variation but this does not seem to be allowed, or is not working.

Step-by-step reproduction instructions

I am using Gutenberg outside of Wordpress CMS (as a JS library), so adding the code snippet in an external JS file and then include it in Wordpress.

Expected behaviour

When inserting this variation into the block editor, it should also insert the share links variation where it has been declared.

Actual behaviour

It throws the following error in the console:

Uncaught TypeError: Cannot read property 'attributes' of undefined

Screenshots or screen recording (optional)

I will upload a screenshot as soon as I have time.

Code snippet (optional)

/* core-columns-extensions.js */
registerBlockVariation('core/columns', {
    name: 'template-article',
    title: 'Article template',
    description: 'This creates a template of an article page',
    innerBlocks: [
      ['core/column', {}, [
          // Here is where I want to use the share-links variation I have created for the core/buttons component. The following does not seem to work.
          ['core/buttons/share-links', {
            variation: 'share-links'
          }],
          ['core/image'],
        ]
      ]
    ]
  });

/* core-buttons-extensions.js */
registerBlockVariation('core/buttons', {
    name: 'share-links',
    title: 'Share links',
    description: 'A group of buttons to share the page',
    innerBlocks: [
       // Bunch of buttons
    ]
  });

WordPress information

• WordPress version: Not applicable, using Gutenberg as a JS library
• Gutenberg version: 8.4.0
• Are all plugins except Gutenberg deactivated? Not applicable, not using it in Wordpress
• Are you using a default theme (e.g. Twenty Twenty-One)? Not applicable, not using it in Wordpress

Device information

• Device: Macbook Pro
• Operating system: MacOS Big Sur
• Browser: Chrome (Latest)

[talldan]

@mi3ll The use case - the buttons block with some initial content could be considered more of a block pattern:

• https://wordpress.org/support/article/block-pattern/
• https://developer.wordpress.org/block-editor/reference-guides/block-api/block-patterns/

Whereas I'd consider a block variation a version of a block with preset attributes (and optionally some inner blocks).

It's up to you though, I thought I'd mention patterns as something you might be interested in.

Right now I think the only way to achieve what you want is to make sure the inner blocks added by your template-article are the same as defined on your share-links variation:

const shareLinkInnerBlocks = [
   // Bunch of buttons
];

/* core-columns-extensions.js */
registerBlockVariation('core/columns', {
    name: 'template-article',
    title: 'Article template',
    description: 'This creates a template of an article page',
    innerBlocks: [
      ['core/column', {}, [
          // Here is where I want to use the share-links variation I have created for the core/buttons component. The following does not seem to work.
          ['core/buttons', {}, shareLinkInnerBlocks],
          ['core/image'],
        ]
      ]
    ]
  });

/* core-buttons-extensions.js */
registerBlockVariation('core/buttons', {
    name: 'share-links',
    title: 'Share links',
    description: 'A group of buttons to share the page',
    innerBlocks: shareLinkInnerBlocks
  });

This should hopefully work because a variation is really just the same as the original block type but with some preset values.