Question

我绝对是古腾堡（Gutenberg）的新成员，并试图学习它。今天，我创建了一个具有多个字段的自定义块。

代码如下：

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

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

Answer 1

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

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

，将保存预告片属性。看看这个Gutenberg block，看看在save函数中还需要如何调用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组件应返回单个父DIV。虽然，我还没有测试代码，但是应该保存并从头开始工作。

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

1 个答案: