Problem with creation a component with 2 columns that accept children component to drag and drop in visual editor

I have a component with two columns and each column need to receive a block, this code is working in parts because when I add child component in a column in the visual editor, it’s adding the child component in the two columns automaticaly, but I need to add separated, how to do it?

example code:

import React, { useState } from ‘react’
import { Container, Column } from ‘./styles’;
import { BuilderBlocks } from ‘’;

type Props = {
left?: boolean;
right?: boolean;
builderBlock?: any;

function TestComponent({ left, right, builderBlock }: Props) {

return (

{ }

  <Column right={right}>
    { <BuilderBlocks blocks={builderBlock.children} parentElementId={} dataPath="this.children" /> }



export default TestComponent

I can’t use left or right props because these props are used to define which column will be largest.

Hello, @Luiz!

For assistance, you can refer to the following resources:

  1. Documentation - Adding Editable Regions to Custom Components
  2. GitHub - Columns.tsx Implementation

These links provide detailed information that should help you navigate through your queries. If you have any further questions, feel free to ask!

Can you give some simple example please? I’ve tried this links before.

Just an axample a component with two columns with children prop and that accept drag and drop other component in visual editor in each column. please