首页 文章

Gutenberg没有保存我的自定义块数据

提问于
浏览
1

我对古腾堡来说是一个新手并且正在努力学习它 . 今天我创建了一个包含多个字段的自定义块 .

这是代码:

const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
const { RichText } = wp.editor;

registerBlockType( 'ss-events/event-info', {
    title: __( 'Event Info' ),
    icon: 'welcome-view-site',
    category: 'common',
    keywords: [
        __( 'Event' ),
        __( 'New Event' ),
        __( 'Manage Event' ),
    ],

    attributes: {
        teaser: {
            type: 'array',
            source: 'children',
            selector: 'p',
        },
        ev_date:{
            type: 'array',
            source: 'children',
            selector: 'p',
        },
        ev_time: {
            type: 'array',
            source: 'children',
            selector: 'p',
        },
        venue: {
            type: 'array',
            source: 'children',
            selector: 'p',
        },
        ev_nature: {
            type: 'array',
            source: 'children',
            selector: 'p',
        },
        organizer: {
            type: 'array',
            source: 'children',
            selector: 'p',
        },
    },

    edit: function( props ) {

        /* define variables */
        let teaser    = props.attributes.teaser;
        let ev_date   = props.attributes.ev_date;
        let ev_time   = props.attributes.ev_time;
        let ev_nature = props.attributes.ev_nature;
        let venue     = props.attributes.venue;
        let organizer = props.attributes.organizer;

        /* define functions */
        function onChangeTeaser( content ) {
            props.setAttributes( { teaser: content } );
        }

        function onChangeEventDate( content ) {
            props.setAttributes( { ev_date: content } );
        }

        function onChangeEventTime( content ) {
            props.setAttributes( { ev_time: content } );
        }

        function onChangeVenue( content ) {
            props.setAttributes( { venue: content } );
        }

        function onChangeEventNature( content ) {
            props.setAttributes( { ev_nature: content } );
        }

        function onChangeOrganizer( content ) {
            props.setAttributes( { organizer: content } );
        }


        return (
            <div id="ss-event-info">
                <label><b>Event Information</b></label>

                <p>
                    <label>Short Description</label>
                    <RichText
                        tagName = "p"
                        className = { props.className }
                        value = { props.attributes.teaser }
                        onChange = { onChangeTeaser }
                        role = "textbox"
                        aria-multiline = "true"
                    />
                </p>

                <p>
                    <label>Event Date</label>
                    <RichText
                        tagName="p"
                        className={ props.className }
                        value={ ev_date }
                        onChange={ onChangeEventDate }
                        role="textbox"
                        aria-multiline="true"
                    />
                </p>

                <p>
                    <label>Event Time</label>
                    <RichText
                        tagName="p"
                        className={ props.className }
                        value={ ev_time }
                        onChange={ onChangeEventTime }
                        role="textbox"
                        aria-multiline="true"
                    />
                </p>

                <p>
                    <label>Venue</label>
                    <RichText
                        tagName="p"
                        className={ props.className }
                        value={ venue }
                        onChange={ onChangeVenue }
                        role="textbox"
                        aria-multiline="true"
                    />
                </p>

                <p>
                    <label>Nature of Event</label>
                    <RichText
                        tagName="p"
                        className={ props.className }
                        value={ ev_nature }
                        onChage={ onChangeEventNature }
                        role="textbox"
                        aria-multiline="true"
                    />
                </p>

                <p>
                    <label>Organized by</label>
                    <RichText
                        tagName="p"
                        clasName={ props.className }
                        value={ organizer }
                        onChange={ onChangeOrganizer }
                        role="textbox"
                        aria-multiline="true"
                    />
                </p>
            </div>
        );
    },

    save: function( props ) {
        return (
            <RichText.content tagName="p" value={ props.attributes.teaser }/>
        );
    },
} );

当我从插入器对话框中单击它时,该块在编辑器中显示正常,但是我放在块的字段中的信息根本没有保存!

我正在使用 create-guten-block 工具来创建块结构: npx create-guten-block ss-events

古腾堡对我来说是一个全新的世界,我不知道我做错了什么 .

1 回答

  • 1

    您的内容未保存,因为您的保存功能仅为预告片指定

    <RichText.content tagName="p" value={ props.attributes.teaser }/>
    

    并将保存teaser属性 . 看看这个Gutenberg block看看还需要在保存功能中调用pcontent吗?这就是你需要做的 . 对于每个新属性,您还需要在保存功能中调用它们 .

    <div>
     <RichText.content tagName="p" value={ props.attributes.teaser }/>
     <RichText.content tagName="p" value={ props.attributes.ev_date}/>
     <RichText.content tagName="p" value={ props.attributes.ev_time}/>
     <RichText.content tagName="p" value={ props.attributes.ev_nature}/>
     <RichText.content tagName="p" value={ props.attributes.venue}/>
     <RichText.content tagName="p" value={ props.attributes.organizer}/>
    </div>
    

    我做了什么?我为每个新属性添加了RichText内容,然后将它们包装在父DIV中,因为建议React Components应该返回单个父DIV . 虽然,我还没有测试过代码,但是应该保存并从最终开始工作 .

相关问题