Core group block as inner block shows the block variation picker

[upham-ui]

Description

If I try to add a core/group block to the innerBlocks of a block variation (also of the core/group block) the block does not initialize properly, instead I see the experimental block variation picker. This prevents being able to set attributes on those inner blocks or adding inner blocks to them as well.

Expected Behavior

When I add a core/group block to an innerBlock template, that core/group block should be added to the editor fully initialized, assuming those group blocks have the attributes that specify their fully initialized configuration (as a Group, Row, or Stack, for example). Furthermore, any blocks within that group block should be added to the editor.

Actual Behavior

Group blocks in the innerBlocks template are displayed in the editor with the block variation picker and attributes added to them in the template are gone, as are any innerBlocks added to them.

wp.domReady(() => {
  wp.blocks.registerBlockVariation("core/group", {
    name: "accordion",
    title: "Accordion",
    icon: "list-view",
    attributes: {
      className: "folder has-children",
    },
    innerBlocks: [
      [
        "core/group",
        {
          attributes: {
            className: "accordion-button folder-header collapsible",
            layout: {
              type: 'default'
            },
          },
        },
      ],
    ],
    isActive: ["className"],
  })
})

Step-by-step reproduction instructions

1. Add the above code.
2. Try adding the Accordion group block variation to a post.
3. See that the inner group block is not initialized -- instead its waiting for a variation selection.

Screenshots, screen recording, code snippet

Environment info

WP 6.6.1.

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

[talldan]

@upham-ui Could you add what the expected behavior is, and why you believe that it should work that way?

It's unclear to me why the variation picker is not the right thing for the inner group block to show.

[upham-ui]

@talldan sure. I updated the original issue. Here's what I added:

Expected Behavior

When I add a core/group block to an innerBlock template, that core/group block should be added to the editor fully initialized, assuming those group blocks have the attributes that specify their fully initialized configuration (as a Group, Row, or Stack, for example). Furthermore, any blocks within that group block should be added to the editor.

Actual Behavior

Group blocks in the innerBlocks template are displayed in the editor with the block variation picker and attributes added to them in the template are gone, as are any innerBlocks added to them.

[talldan]

There are two separate things happening with your example.

The first is that the outer group block's variation isActive isn't working. From debugging the issue, it looks like the group block's core variations are taking precedence over your one. 'Group' is actually defined as a variation internally. The same issue is documented here - #41303.

There has been some progress on improving the situation - #63100. My advice would be not to use className for isActive, as users can change the classname in the UI, and your variation will become inactive. Perhaps consider adding a new attribute to the group block using the registerBlockType filter or similar that can store some information about the variation. I think it still wouldn't fix your issue though.

The second is the inner group block doesn't retain the classnames specified in the template. You can fix your example by removing the incorrect attributes key in the template, the object itself is the attributes:

wp.domReady(() => {
  wp.blocks.registerBlockVariation("core/group", {
    name: "accordion",
    title: "Accordion",
    icon: "list-view",
    attributes: {
      className: "folder has-children",
    },
    innerBlocks: [
      [
        "core/group",
        {
          className: "accordion-button folder-header collapsible",
          layout: {
            type: 'default'
          },
        },
      ],
    ],
    isActive: ["className"],
  })

To specify some inner blocks you can add a third item in the array:

[
  "core/group",
  {
    className: "accordion-button folder-header collapsible",
    layout: {
      type: 'default'
    },
  },
  [
    [ "core/paragraph", { content: "Test" } ]
  ]
]

[upham-ui]

Incredibly helpful. I had given up on the isActive; I assumed it had to do with core variations or something like that. But I was clueless about the form of the innerBlocks object. Thank you!

[talldan]

Glad it helped. I'll close the issue if that's ok as the remaining problem is already tracked in #41303.