How to add group-row to InnerBlock template?

Question

We are trying to add a group-row to our InnerBlock template.

Now there is a core block called core/group which works when being inserted. The core/group has variations as group-row. But when inserted it always is the default variation.

How can we modify it so it picks the group-row variation?

This is our current template code for the InnerBlocks:

const PRODUCT_CATEGORY_HERO_TEMPLATE = [
  [
    "core/group", <-- this works, but it should take variation group-row
    {},
    [
      ["core/spacer", { height: "50px" }],
      [
        "core/columns",
        {},
        [
          [
            "core/column",
            { width: "100%" },
            [
              ["core/spacer", { height: "30px" }],
              ["test/text-bubble", { shapeUnderActive: true }],
              [
                "test/text-bubble",
                { shapeLeftActive: true, shapeUnderActive: true },
              ],
              ["test/text-bubble", {}],
            ],
          ],
        ],
      ],
    ],
  ],
];

Thanks for your time!

Answer 1

By setting the attributes that the variation is looking for. When you register a variation you're also telling WordPress what attributes determine if a block is that variation.

Figuring It Out From The Editor

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

Then paste them into a text editor ( or a stack exchange answer box ) we get this:

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"grid"}} -->
<div class="wp-block-group"></div>
<!-- /wp:group -->

Revealing the layout and type attributes.

Figuring It Out From The Gutenberg Code

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.