v1 (instead of v2) Container Block Loading in Custom Block

  • Hello. I’m having an issue with a custom block I created. I’m using the GenerateBlocks container block as an InnerBlock within a wrapper block (simple div). Some example code below:

    
    const template = [
      [
        "generateblocks/container",
          {
          className: "",
          lock: { move: true, remove: true },
          metadata: { name: __("Member Content", "member-only-wrapper") },
          },
       ],
       [
         "generateblocks/container",
         {
           className: "",
           lock: { move: true, remove: true },
           metadata: { name: __("Guest Content", "member-only-wrapper") },
         },
       ],
    ];
    
    <div className="">
      <InnerBlocks
        template={template}
        templateLock="all"
        renderAppender={false}
      />
    </div>
    

    I believe I created it before v2 blocks which may be part of the issue but I’m trying to figure out how to make it v2 now. The main issue is the settings, they are loading as the v1 settings and not the v2 settings, which I would prefer. Is there a property I can use within the template to force v2 settings or something? Any help would be appreciated.

    Thanks.

  • Hi,

    There isn’t a property you can pass in the template to “upgrade” a v1 container to v2 settings, because v2 isn’t a new version of the container block at all. In GenerateBlocks v2 the Container was replaced by the new Element block (generateblocks/element), with a tagName attribute controlling whether it renders as a div, section, etc.

    So when your template references generateblocks/container, you’re explicitly inserting the v1 block, which is why you keep getting the v1 settings panel.

    The fix is to switch your template to generateblocks/element:

    const template = [
      [
        "generateblocks/element",
        {
          tagName: "div",
          lock: { move: true, remove: true },
          metadata: { name: __("Member Content", "member-only-wrapper") },
        },
      ],
      [
        "generateblocks/element",
        {
          tagName: "div",
          lock: { move: true, remove: true },
          metadata: { name: __("Guest Content", "member-only-wrapper") },
        },
      ],
    ];

    A few notes:

    • Don’t hardcode a uniqueId in the template. GB generates a fresh one per instance on insertion — forcing the same value on multiple blocks causes CSS collisions.
    • The v2 styling model lives in a styles attribute (plus global classes via globalClasses) rather than the flat v1 attributes like paddingTop/containerWidth. An empty Element is a fine starting point. If you want default styling baked in, insert and configure one Element manually, then copy its serialized attributes from the code editor into your template.
    • You can drop className: "" — an empty string adds nothing.

    Your overall pattern (Element blocks as InnerBlocks inside a simple wrapper div) is the correct v2 approach. Just swap the block name and you’ll get the v2 settings panel you were after.

  • Thanks George, that worked perfectly.

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.