如何使用组件创建Gutenberg InnerBlock模板

时间:2019-12-29 04:48:49

标签: wordpress wordpress-gutenberg gutenberg-blocks

我正在尝试使用自己的组件创建模板,但出现此错误:TypeError:无法读取未定义的属性'attributes'。

谁能指出我在这里做错了什么,或者甚至有可能用我自己的组件创建此模板?谢谢。


export default function () {
    const { registerBlockType } = wp.blocks;
    const { InspectorControls, InnerBlocks, PanelColorSettings } = wp.blockEditor;
    const { PanelBody, SelectControl, TextControl } = wp.components;

    const carouselTemplate = [
        ['core/columns', { className: '' }, [

            ['CarouselHead', { className: '' }, [
                ['core/column', { className: '' },
                    [
                        ['core/image', {}]
                    ]
                ]
            ]]

        ]]

    ];

    registerBlockType('my/carousel', {
        title: 'Carousel',
        category: 'my-components',
        icon: 'slides',

        edit: (props) => {

            const { attributes: { variant }, setAttributes } = props;

            return (
                <>
                    <Wrapper variant="small">
                        <CarouselWrapper>
                            <InnerBlocks template={carouselTemplate} />
                        </CarouselWrapper>
                    </Wrapper>

                </>
            );
        },

        save: (attributes) => {
            const props = {
                variant: attributes.variant,
                classname: 'carousel_testimonial',
                style: {},
            };
            return (
                <Wrapper>
                    <CarouselWrapper>
                        <InnerBlocks.Content />
                    </CarouselWrapper>
                </Wrapper>
            );
        },

    });
}

0 个答案:

没有答案