How do I add an editable region within a custom component?

Technical Questions
, ,
1

I have created a custom component ‘Menu’ and added a subfield of type block. I need a feature where the rest of the UI will be displayed from my react component and one of the fields is editable from builder.

Followed everything that is given in How to Add Dynamic Editing Regions to Custom Components and tried the given solutions. Also tried to copy the same code just to check if it works.

However, everytime I try to add any block, it gets added after the whole section block and not inside my HTML code where I’ve included the builder component.

Here is my custom component code:

Builder.registerComponent(MenuComponent, {
  name: "Menu",
  inputs: [
    {
      name: "menuItems",
      type: "list",
      helperText: "Main Navigation Menu Items",
      subFields: [
        {
          name: 'blocks',
          type: 'blocks',
          hideFromUI: true,
          helperText: 'This is an editable region where you can drag and drop blocks.',
          defaultValue: [
            {
              '@type': '@builder.io/sdk:Element',
              component: {
                name: 'Text',
                options: {
                  text: 'Enter some text...',
                },
              },
            },
          ],
        },
        {
          name: "navigationTitle",
          type: "string",
          required: true,
          helperText: "Main Navigation Title",
        },
        {
          name: "navigationLink",
          type: "url",
          helperText: "Main Navigation Title URL",
        }
      ],
    },
  ],
});

Here is the Menu react component in which I’ve included the builder block:

<div>

{menuItems.map((menuItem, index) => {
	return (
		<a
		  key={index}
		  href={menuItem.navigationLink}
		  id={menuItem.navigationTitle}
		>
		  {menuItem.navigationTitle}
		  <BuilderBlocks
			key={index}
			child
			parentElementId={menuItems.builderBlock && menuItems.builderBlock.id}
			blocks={menuItem.blocks}
			dataPath={`component.options.menuItems.${index}.blocks`}
		  />
		</a>
	);
})}

</div>

The block that is getting added is not inside my div and a tag. Could you please help me with this?

2

Hi @olivela, thank you for your patience on this topic. This is occurring because the parent element ID is a property of the props object, not menuItems. Similar to this example you can pass the ID like so and the block should drop in the correct zone:

parentElementId={props.builderBlock && props.builderBlock.id}

A couple other notes:

Builder.registerComponent( MenuComponent, {
  name: "Menu",
  inputs: [
    {
      name: "menuItems",
      type: "list",
      helperText: "Main Navigation Menu Items",
      defaultValue: [{ 
        navigationTitle: 'Navigation Title',
        blocks: [] 
      }],
      subFields: [
      ...
  • Be cautious of allowing users to add blocks inside an <a> tag since having potentially nested links is not allowed in HTML. For best practice, move <BuilderBlocks> outside of the anchor tag or hide the block level “Link URL” fields in Account Settings > Advanced Settings > Editor
3

Hi, thank you for your detailed reply.
I tried to change the parentElementId as you mentioned. Also added default value for the list.
But it is still behaving the same. Is there any changes to be made to child, blocks or dataPath?
Here is a screenshot of the issue:
(I added the text inside the placeholder block but it still adds the text outside the section)

image
image1324×385 32 KB

Here is the block I added:

<BuilderBlocks
        key={index}
        child
        parentElementId={props.builderBlock && props.builderBlock.id}
        blocks={menuItem.blocks}
        dataPath={`component.options.menuItems.${index}.blocks`}
		  />

menuItem is the child element of menuItems list in a for loop, index is the index for the same loop.
props is the entire props data passed to the custom component

4

@olivela could you please share a Github or Codesandbox that reproduces the behavior? The snippet looks correct but it’s difficult to tell if there is something else off without seeing the full context of the custom component. Thanks!