古腾堡没有保存我的自定义块数据

Question

我对古腾堡完全陌生，正在努力学习。今天我创建了一个包含多个字段的自定义块。

代码如下：

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

古腾堡对我来说是一个全新的世界，我不知道自己做错了什么。

Answer 1

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

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

并且不会保存预告片属性。看看这个看看pcontent怎么也需要在save函数中调用？那就是你需要做的。对于每个新属性，您还需要在保存函数中调用它们。

<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 组件必须 return 作为单个元素（我们在这种情况下使用 div）。虽然，我还没有测试代码，但应该保存并从你这边开始工作。

古腾堡没有保存我的自定义块数据

Gutenberg is not saving my custom block data

gutenberg-blocks