Figuring It Out From Gutenberg

Figuring It Out From The Gutenberg Code

So, if we insert every variation of the group block and copy those blocks:

Although looking at the example you gave, there is an very high chance that you would have been better served by using block patterns and block styles instead of creating your own blocks. The best way to create a design unit from Figma/etc is to create a block pattern, not a block. You break the pattern down into core blocks, only creating new blocks to fill the functionality gaps. Blocks are more like components, not sections/features, and there is a cost to maintaining and building them.

Figuring It Out From The Editor

If we insert every variation of the group block and copy those blocks:

Revealing the layout and type attributes.

Figuring It Out From Gutenberg

Another way to figure this out is to look at the gutenberg repository in the block library package:

https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src

Each core block is listed in a folder with its implementation, you can find the core/group blocks block.json and read its attributes:

https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/group/block.json

Which reveals that layout doesn't come from the group block, it's a more general feature that the block supports:

    "supports": {
...
        "layout": {
            "allowSizingOnChildren": true
        },

So other blocks that support layout will work the same!

We also see variations.js that lists all the variations of the group block at https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/group/variations.js:

E.g. here is how WordPress defines a group row:

    {
        name: 'group-row',
        title: _x( 'Row', 'single horizontal line' ),
        description: __( 'Arrange blocks horizontally.' ),
        attributes: { layout: { type: 'flex', flexWrap: 'nowrap' } },
        scope: [ 'block', 'inserter', 'transform' ],
        isActive: ( blockAttributes ) =>
            blockAttributes.layout?.type === 'flex' &&
            ( ! blockAttributes.layout?.orientation ||
                blockAttributes.layout?.orientation === 'horizontal' ),
        icon: row,
    },

A Note On Your Example and Patterns

Although looking at the example you gave, there is an very high chance that you would have been better served by using block patterns and block styles instead of creating your own blocks. The best way to create a design unit from Figma/etc is to create a block pattern, not a block. You break the pattern down into core blocks, only creating new blocks to fill the functionality gaps. Blocks are more like components, not sections/features, and there is a cost to maintaining and building them.

Putting It All Together

So we now know that a Row block is a group block that has layout attributes, specifically a type of flex, and flexWrap set to nowrap allowing us to do this:

  [
    "core/group", <-- this works, but it should take variation group-row
    { layout: { type: 'flex', flexWrap: 'nowrap' } },
    [

As you can see I took it directly from the variations.js and I could also have taken it directly from the block attributes I copy pasted.