When you want your custom component to accept other blocks, configure your component with children. The following video demonstrates a custom tabs component that accepts Builder blocks as content. Each tab receives a unique block that the users drags and drops in.
To get the most our of this tutorial, you should have the following:
- An app you've integrated with Builder
- Familiarity with using custom components in Builder
For more details on child-related options when working with child components, visit the canHaveChildren, childRequirements, and defaultChildren sections of the registerComponent() documentation.
Now your component should show up in the Visual Editor with no further configuration in the code.
The following video shows the Hero block in the Custom Components section of the Insert tab. When the Hero block is on the page in the Visual Editor, you can drag and drop more blocks and drop them into the Hero block, along with the other children defined in code.
To use a registered component with children, do the following:
- If you're still developing your component, change the Preview URL to localhost with the port you're using for your local app and the page name. In this example, the URL is
http://localhost:3000/cc-children. - Drag and drop your custom component into the work area.
- Drag other blocks onto your custom component.
In the following video, after the user drops a Columns block into the custom component, they open the Layers tab to show the Columns block nested within the Hero block.
Register inputs for each of your editable sections of type blocks:
// Register the component and its inputs
Builder.registerComponent(HeroWithBuilderChildren, {
name: 'Hero',
inputs: [
// Input for section A editable region
{
name: 'sectionA',
type: 'blocks', // Specify type of blocks
hideFromUI: true,
helperText: 'This is an editable region.',
defaultValue: [
{
'@type': '@builder.io/sdk:Element',
component: {
name: 'Text',
options: {
text: 'Section A Editable in Builder...',
},
},
responsiveStyles: {
large: {
// Styles for the editable section
},
},
},
],
},
// Input for section B editable region
{
name: 'sectionB',
type: 'blocks',
hideFromUI: true,
helperText: 'This is an editable region.',
defaultValue: [
{
'@type': '@builder.io/sdk:Element',
component: {
name: 'Text',
options: {
text: 'Section B Editable in Builder...',
},
},
responsiveStyles: {
large: {
// Styles for the editable section
},
},
},
],
},
],
});
Use builder-blocks-outlet component to render those blocks within your component template:
@Component({
selector: 'my-custom-section',
template: `
<h2>Section A</h2>
<!-- Render section A editable region using
builder-blocks-outlet component -->
<builder-blocks-outlet
[blocks]="sectionA"
[builderState]="builderState"
[builderBlock]="builderBlock"
dataPath="component.options.sectionA"
></builder-blocks-outlet>
<h2>Section B</h2>
<!-- Render section B editable region using
builder-blocks-outlet component -->
<builder-blocks-outlet
[blocks]="sectionB"
[builderState]="builderState"
[builderBlock]="builderBlock"
dataPath="component.options.sectionB"
></builder-blocks-outlet>
`,
})
export class MyCustomSection implements OnChanges {
@Input()
sectionA = null;
@Input()
sectionB = null;
@Input()
builderState = null;
@Input()
builderBlock = null;
}
To use a custom component with multiple sets of children in the Visual Editor, take the following steps:
- In the Insert tab, expand the Custom Components section.
- Drag and drop your component onto the work area.
- With your component selected, click the Edit button and add sets of children if needed.
- Drag other blocks, for example Text or Image blocks, into the Add Block region of your component.
To customize your components even further, you can leverage Builder's Input Types.
For more examples of custom components with multiple sets of children, check out:
Looking to hire a third party to help with your project?
Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.
