古登堡块-无法在编辑帖子中检索块保存的属性

时间:2022-01-04 作者:Morteza

在Gutenberg editor中注册新块后,它工作正常,直到保存/发布帖子,前端的输出也正常,但刷新编辑屏幕后,block显示块验证错误:

Content generated by `save` function:

Content retrieved from post body:
<div class="wp-block-gutenberg-examples-post-block3 slider-item"><img src="http://127.0.0.1/wordpress_test/wp-content/uploads/2021/11/41QuqNH75-L.SY344_BO1204203200.jpg" dataid="146"/><img src="http://127.0.0.1/wordpress_test/wp-content/uploads/2021/11/41CoI-EUQML.SX258_BO1204203200.jpg" dataid="149"/></div>

Block validation: Block validation failed for `gutenberg-examples/post-block3`
以下是注册新块的方式:

blocks.registerBlockType( \'gutenberg-examples/post-block3\', {
    title: \'post: Controls\',
    icon: \'universal-access-alt\',
    category: \'common\',

    attributes: {
        imgUrl: {
            type: \'array\',
            source: \'query\',
            selector: \'.slider-item\',
            default: [],
            query:{
                mediaID: {
                    type: \'number\',
                    source: \'attribute\',
                    attribute: \'data-id\',
                    selector: \'img\',
                },
                mediaURL: {
                    type: \'string\',
                    source: \'attribute\',
                    attribute: \'src\',
                    selector: \'img\',
                },
            }
        },
    },

    edit: function( props ) {

        function selectImage(value) {

            props.setAttributes({
                imgUrl: value.map(function(val){return{mediaURL:val.url,mediaID:parseInt( val.id, 10 )}}),
            });
        }

        return el( Fragment, {className: props.className},
        el( InspectorControls, {},
        el( PanelBody, { title: \'Form Settings\', initialOpen: true },
            el(MediaUpload,
                    {//onSelectImages
                        onSelect: selectImage,
                        multiple: true,
                        allowedTypes: \'image\',
                        gallery:true,
                        value:props.attributes.imgUrl.map(function(val){
                            return val.mediaID;
                        }),
                        render(renderProps) {
                            return el(\'button\',
                                {
                                    onClick: renderProps.open,
                                },
                                \'upload image\',
                            )
                        }
                    },
                    null
            ),

        ),),
      );
    },

    save: function( props ) {

        return el(\'div\',{className: \'slider-item\'},props.attributes.imgUrl.map(function(data){
            return el(\'img\',
                        {
                            src: data.mediaURL,
                            \'data-id\':data.mediaID,
                        },
                        null
                    );
        }),
        );
    },
} );

1 个回复
SO网友:Sally CJ

块验证失败,因为编辑器没有分析所有图像的属性(在已保存的帖子内容中),并且save 函数仅返回一个.slider-item 包含多个img 标签,如下所示:

<div class="slider-item">
    <img src="..." data-id="123" />
    <img src="..." data-id="456" />
    ...
</div>
实际上应该返回一个或多个.slider-item div,每个div只包含一个img 标记,如下所示:

<div class="slider-item">
    <img src="..." data-id="123" />
</div>
<div class="slider-item">
    <img src="..." data-id="456" />
</div>
...

Visual illustration

因此,请确保save 函数根据块属性的定义返回正确的标记。例如。

save: function( props ) {
    return el(
        \'div\',
        useBlockProps.save( {
            className: \'slider-items\', // note the "itemS"
        } ),
        props.attributes.imgUrl.map( function ( data, i ) {
            return el(
                \'div\',
                {
                    className: \'slider-item\',
                    key: \'slider-item-\' + i,
                },
                el( \'img\', {
                    src: data.mediaURL,
                    \'data-id\': data.mediaID,
                }, null )
            ); // end of .slider-item
        } ),
    ); // end of .slider-items
},

附加注释useBlockProps() 应在中使用edit 功能,以及useBlockProps.save()save 作用

返回时array 在元素中,每个元素都应具有唯一的key.

因此,在上述示例中,我使用useBlockProps.save()key.

参考文献

https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#query

  • https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/

  • https://reactjs.org/docs/lists-and-keys.html#keys