Гутенберг не сохраняет данные моего пользовательского блока

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 также необходимо вызывать в функции сохранения? Это то, что вам нужно сделать. Для каждого нового атрибута вам нужно также вызывать его внутри функции сохранения.

<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. Хотя я не тестировал код, но должен сохранить и работать с вашей стороны.