代码之家  ›  专栏  ›  技术社区  ›  Subrata Sarkar

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

  •  1
  • Subrata Sarkar  · 技术社区  · 6 年前

    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 回复  |  直到 6 年前
        1
  •  1
  •   Luke GeneQ    4 年前

    <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)。虽然,我还没有测试的代码,但应该保存和工作从您的结束。

    推荐文章