Not able to add block below my custom component content

[Umang_001]

config file :-

import type { Component } from "@builder.io/sdk";

const SeoSectionConfig: Component = {
	name: "SeoSection",
	inputs: [
		{
			name: "heading",
			type: "string",
			required: true,
			defaultValue: "Start your weight loss journey",
			friendlyName: "Heading",
			helperText: "The main heading of AssessmentCTA",
		},
		{
			name: "subheading",
			type: "string",
			required: true,
			defaultValue: "Assessments typically take between 5-10 minutes.",
			friendlyName: "Subheading",
			helperText: "The subheading displayed below the main heading",
		},
		{
			name: "links",
			friendlyName: "Anchor Links for Navigation Sidebar",
			type: "array",
			required: true,
			subFields: [
				{
					name: "anchorlinktext",
					friendlyName: "Text Displayed on the Link",
					type: "string",
					required: true,
				},
				{
					name: "sectionid",
					friendlyName: "Target Section ID (Scroll to Section)",
					type: "string",
					required: true,
				},
				{
					name: "description",
					friendlyName: "Description of the Section",
					type: "string",
				},
				{
					name: "blocks",
					type: "uiBlocks",
					defaultValue: {
						blocks: [],
					},
					helperText:
						"This is an editable region where you can drag and drop blocks.",
				},
			],
		},
	],
};

export default SeoSectionConfig;

code :-

/* eslint-disable @typescript-eslint/no-explicit-any */
import type { BuilderElement } from "@builder.io/react";
import { BuilderBlocks } from "@builder.io/react";
import React from "react";

import BlogNavigationSidebar from "../BlogNavigationSidebar";
import StickyAnchorWrapper from "../StickyAnchorWrapper";

export interface SEOSectionProps {
	heading: string;
	subheading: string;
	links?: {
		anchorlinktext: string;
		sectionid: string;
		description: string;
		blocks: React.ReactNode[];
	}[];
	builderBlock: BuilderElement;
}

const SeoSection = ({
	heading,
	subheading,
	links,
	builderBlock,
}: SEOSectionProps) => {
	return (
		<div className='flex min-h-screen w-full flex-col gap-[40px] bg-transparent px-4 py-16 sm:gap-[32px] sm:px-[32px] sm:py-[80px] lg:flex-row lg:gap-[20px] lg:px-[40px]'>
			<aside className='flex w-full flex-col gap-6 bg-transparent sm:gap-[32px] lg:w-[47%] lg:gap-[40px]'>
				<div className='flex flex-col gap-2 sm:gap-3'>
					{heading && (
						<h2 className='text-3xl font-medium leading-lg tracking-[-0.02em] text-grey-900'>
							{heading}
						</h2>
					)}
					{subheading && (
						<p className='text-sm leading-sm text-grey-600'>{subheading}</p>
					)}
				</div>
				<div className='flex flex-col gap-3 sm:gap-4'>
					<p className='text-sm leading-sm text-grey-500'>Table of contents</p>
					{links && <BlogNavigationSidebar links={links} />}
					{links && (
						<StickyAnchorWrapper links={links} className='flex lg:hidden' />
					)}
				</div>
			</aside>

			<div
				id='abc'
				className='flex w-full flex-col gap-[28px] bg-transparent sm:gap-[32px] lg:gap-[40px]'
			>
				{links?.map((link, index) =>
					link ? (
						<section
							key={index}
							id={link.sectionid}
							className='flex flex-col gap-3'
						>
							{link?.anchorlinktext && (
								<h5 className='text-2xl font-medium tracking-[-0.01em] text-grey-900'>
									{link.anchorlinktext}
								</h5>
							)}
							{link?.description && (
								<p className='text-base font-normal leading-base text-grey-700'>
									{link.description}
								</p>
							)}
							<BuilderBlocks
								child
								parentElementId={builderBlock?.id}
								blocks={links[index].blocks}
								dataPath={`links.${index}.blocks`}
							/>
						</section>
					) : null,
				)}
			</div>
		</div>
	);
};

export default SeoSection;

builder screen

before addign block :-

after adding block:-

can someone plz help

[sheema]

Hey @Umang_001 , In the second screenshot, I noticed you’ve added a new text block. To add more blocks, you can either use the “+” icon for the “Insert” section at the top left corner or click the “+” icon at the bottom right corner of the existing text block.

Let me know if I’ve misunderstood your request or if you need further assistance!

[Umang_001]

the problem is when i try the way you suggested then its will go below the whole custom component but i want in my custom component

[sheema]

You can add the child block in the custom component by clicking on “Add Block” under Section Headline.

[Umang_001]

when i do this the child block apper below seo section which i dont want

[sheema]

Hey @Umang_001 , you can use canHaveChildren:true, to add children to any custom components. I have tested this on your component and I am able to add blocks in your custom component.

Your code should look like this -

import type { Component } from "@builder.io/sdk";

const SeoSectionConfig: Component = {
	name: "SeoSection",
    canHaveChildren: true,
	inputs: [
		{
			name: "heading",
			type: "string",
			required: true,
			defaultValue: "Start your weight loss journey",
			friendlyName: "Heading",
			helperText: "The main heading of AssessmentCTA",
		},
		{
			name: "subheading",
			type: "string",
			required: true,
			defaultValue: "Assessments typically take between 5-10 minutes.",
			friendlyName: "Subheading",
			helperText: "The subheading displayed below the main heading",
		},
		{
			name: "links",
			friendlyName: "Anchor Links for Navigation Sidebar",
			type: "array",
			required: true,
			subFields: [
				{
					name: "anchorlinktext",
					friendlyName: "Text Displayed on the Link",
					type: "string",
					required: true,
				},
				{
					name: "sectionid",
					friendlyName: "Target Section ID (Scroll to Section)",
					type: "string",
					required: true,
				},
				{
					name: "description",
					friendlyName: "Description of the Section",
					type: "string",
				},
				{
					name: "blocks",
					type: "uiBlocks",
					defaultValue: {
						blocks: [],
					},
					helperText:
						"This is an editable region where you can drag and drop blocks.",
				},
			],
		},
	],
};

export default SeoSectionConfig;

Here is a link to our documentation for the Child Blocks in Custom components. Let me know if there are any further questions that I can help you with.