WordPress nested block variation

  • I have two blocks?parent?and?child. I would like to create variation of both of them (parentV?and?childV) and have the?childV?as inner block of the?parentV. But when I try it with registerBlockVariation() I am getting error, that?childV?does not exists. Is there something special I need to do for?childV?variation registration.

    Example what I have

    {
  "name": "child",
  "title": "Child",
  "parent": ["parent"]
}

{
  "name": "parent",
  "title": "Parent"
}

    Parent has the child in allowedBlocks.

    Then I have TS

    domReady( function () {
  registerBlockVariation( 'child',
    {
      name: 'childV',
      title: 'ChildV',
      attributes: {
        className: 'child-v',
      },
    }
  );

  registerBlockVariation( 'parent',
    {
      name: 'parentV',
      title: 'Parent V',
      attributes: {
        className: 'parent-v',
      },
      innerBlocks: [
        {
          name: 'childV',
        },
      ],
    }
  );
});
    • Am I missing something?
    • Is it event possible to create variations like this?

    Thank you for help ??

Viewing 1 replies (of 1 total)

  • It seems like you’re trying to create block variations for both a parent block and its child block, where the child block is an inner block of the parent block variation. While it’s technically possible to create block variations in this manner, there are some considerations to keep in mind.

    When registering block variations with inner blocks, you need to ensure that the inner block variation is registered before it’s referenced in the parent block variation.

    Here’s how you can modify your code to ensure that the child block variation (childV) is registered before being used as an inner block variation in the parent block variation (parentV):

    domReady(function () {
  // Register the child block variation first
  registerBlockVariation('child', {
    name: 'childV',
    title: 'ChildV',
    attributes: {
      className: 'child-v',
    },
  });

  // Then register the parent block variation with the childV inner block
  registerBlockVariation('parent', {
    name: 'parentV',
    title: 'Parent V',
    attributes: {
      className: 'parent-v',
    },
    innerBlocks: [
      {
        name: 'childV',
      },
    ],
  });
});

    By ensuring that the childV block variation is registered before it’s referenced in the parentV block variation, you should be able to avoid the error you encountered.

    Additionally, make sure that the child block supports being used as an inner block by specifying its parent attribute correctly in its registration. If you haven’t already done so, you can specify parent: ["parent"] to indicate that child can be used as an inner block of parent.

    Once you’ve made these adjustments, you should be able to successfully register block variations with inner blocks as desired.

Viewing 1 replies (of 1 total)
  • The topic ‘WordPress nested block variation’ is closed to new replies.