plugin development - Can you nest columnscolumn in a gutenberg custom template?

admin管理员组

文章数量:1125809

I am trying to nest a core columns within a core/columns /core/column template. I keep getting an error that block can't render. However looking at my code it looks fine. [I've simplified the code] So, I am wondering, can it be done?

Here is the code

      const TEMPLATE = [['core/cover',{}],[
            ['core/columns',{className:'test1'}],[
            ['core/column',{className: 'test2'}], [
                ['core/columns',{className: 'test3'}], [
                    ['core/column',{className: 'test4'}], [
                        ['core/image',{}],
                    ],
                    ['core/column',{className: 'test5'}], [
                        ['core/heading',{}],
                        ['core/paragraph',{}],
                    ]
                ],
                ['core/columns',{className: 'test3'}], [
                    ['core/column',{className: 'test4'}], [
                        ['core/image',{}],
                    ],
                    ['core/column',{className: 'test5'}], [
                        ['core/heading',{}],
                        ['core/paragraph',{}],
                    ]
                ],
                ['core/columns',{className: 'test3'}], [
                    ['core/column',{className: 'test4'}], [
                        ['core/image',{}],
                    ],
                    ['core/column',{className: 'test5'}], [
                        ['core/heading',{}],
                        ['core/paragraph',{}],
                    ]
                ]
            ]
        ]]];

The error I get is 'Your site doesn’t include support for the "core/columns,[object Object]" block. You can leave this block intact or remove it entirely.' What does that mean?

I am trying to nest a core columns within a core/columns /core/column template. I keep getting an error that block can't render. However looking at my code it looks fine. [I've simplified the code] So, I am wondering, can it be done?

Here is the code

      const TEMPLATE = [['core/cover',{}],[
            ['core/columns',{className:'test1'}],[
            ['core/column',{className: 'test2'}], [
                ['core/columns',{className: 'test3'}], [
                    ['core/column',{className: 'test4'}], [
                        ['core/image',{}],
                    ],
                    ['core/column',{className: 'test5'}], [
                        ['core/heading',{}],
                        ['core/paragraph',{}],
                    ]
                ],
                ['core/columns',{className: 'test3'}], [
                    ['core/column',{className: 'test4'}], [
                        ['core/image',{}],
                    ],
                    ['core/column',{className: 'test5'}], [
                        ['core/heading',{}],
                        ['core/paragraph',{}],
                    ]
                ],
                ['core/columns',{className: 'test3'}], [
                    ['core/column',{className: 'test4'}], [
                        ['core/image',{}],
                    ],
                    ['core/column',{className: 'test5'}], [
                        ['core/heading',{}],
                        ['core/paragraph',{}],
                    ]
                ]
            ]
        ]]];

The error I get is 'Your site doesn’t include support for the "core/columns,[object Object]" block. You can leave this block intact or remove it entirely.' What does that mean?

• plugin-development
• block-editor
• react

Share Improve this question edited Feb 28, 2024 at 8:39 Dave B asked Feb 27, 2024 at 16:43 Dave BDave B 2555 bronze badges 3

• can you include that error in your question? Do the inner parts work when used on their own? – Tom J Nowell ♦ Commented Feb 27, 2024 at 17:12
• @TomJNowell - I've added the errors. Inner parts don't work on their own. However, not sure why as it looks ok mark up wise – Dave B Commented Feb 28, 2024 at 8:13
• I've also simplified the code – Dave B Commented Feb 28, 2024 at 8:40

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

I believe the cause of the problem has nothing to do with columns and nesting columns within columns,.

The errors are related to the very first block added in the template and a mixup of the syntax used in the examples on wp.org when reproduced.

If we clear up the indentation you'll see that this is what you did:

[
    [
        'blockname',
        {options}
    ],
    [ child blocks..]
]

But .org does this:

[
    [
        'blockname',
        {options},
        [ child blocks..]
    ],
]

To make it clearer here is the current example on .org:

const TEMPLATE = [ [ 'core/columns', {}, [
    [ 'core/column', {}, [
        [ 'core/image' ],
    ] ],
    [ 'core/column', {}, [
        [ 'core/paragraph', { placeholder: 'Enter side content...' } ],
    ] ],
] ] ];

And if we expand and fix the indentation:

const TEMPLATE = [
    [
        'core/columns',
        {},
        [
            [
                'core/column',
                {},
                [
                    [ 'core/image' ],
                ]
            ],
            [
                'core/column',
                {},
                [
                    [
                        'core/paragraph',
                        { placeholder: 'Enter side content...' }
                    ],
                ]
            ],
        ]
    ]
]

I expect the indentation is non-standard to make it appear shorter/friendlier, but can be misleading if you don't pay careful attention.

本文标签： plugin developmentCan you nest columnscolumn in a gutenberg custom template