javascript - 自定义画廊 Gutenberg 块中的空图像数组

Question

我想为古腾堡编辑器建立自己的画廊块。

整个事情应该在服务器端（ServerSideRender）呈现，我觉得使用 PHP 比使用 Javascript 更安全。

我认为编辑函数实际上看起来不错，但在我的回调函数中，我只得到一个空数组而不是图像属性。

有谁知道错误可能在哪里？

(function (blockEditor, blocks, components, element, i18n, serverSideRender) {

    var ServerSideRender  = serverSideRender;
    var el                = element.createElement;

    const {
        InspectorControls,
        MediaUpload,
        MediaPlaceholder
    } = blockEditor;
    
    const { __ } = i18n;
    
    blocks.registerBlockType('myblocks/gallery', {

        title: __('Gallery'),

        ...

        attributes: {
            images: {
                type: 'array',
                default: [],
                items: {
                    type: 'array',
                    default: [],
                    items: {
                        id: {
                            type: 'string',
                            default: ''
                        },
                        url: {
                            type: 'string',
                            default: ''
                        },
                        alt: {
                            type: 'string',
                            default: ''
                        },
                        caption: {
                            type: 'string',
                            default: ''
                        }
                    }
                }
            }
        },
        
        edit: function(props) {

            var attributes = props.attributes;

            const onSelectImages = function( images ) {

                props.setAttributes({
                    images: images.map((img) => {
                        return { 
                            id     : img.id,
                            url    : img.sizes.full.url,
                            alt    : img.alt,
                            caption: img.caption
                        }
                    })
                })
            }

            return [

                el(InspectorControls, { key: 'inspector' },
                    el(components.PanelBody, {title: __('Settings'), initialOpen: true},
                        el(MediaUpload, {
                            type: 'image',
                            multiple: true,
                            gallery: true,
                            value: attributes.images,
                            onSelect: onSelectImages,
                            render: function (obj) {
                                return el(components.Button, {
                                    className: 'button button-primary',
                                    onClick: obj.open
                                }, __('Edit Gallery'));
                            }
                        })
                    )
                ),
                el(MediaPlaceholder, {
                    accept  : 'image/*',
                    icon    : 'format-gallery',
                    multiple: true,
                    onSelect: onSelectImages,
                    type    : 'image'
                })
            ]
        }
    });
})(
window.wp.blockEditor,
window.wp.blocks,
window.wp.components,
window.wp.element,
window.wp.i18n,
window.wp.serverSideRender
)

PHP回调函数

function block_init() {
    
    ...

    register_block_type('myblocks/gallery', array(
        'render_callback' => 'render_block',
        'attributes' => array(
            'images' => array(
                'type' => 'array',
                'default' => array(),
                'items' => array(
                    'type' => 'array',
                    'default' => array(),
                    'items' => array(
                        'id' => array(
                            'type' => 'string',
                            'default' => ''
                        ),
                        'url' => array(
                            'type' => 'string',
                            'default' => ''
                        ),
                        'alt' => array(
                            'type' => 'string',
                            'default' => ''
                        ),
                        'caption' => array(
                            'type' => 'string',
                            'default' => ''
                        )
                    )
                )
            )
        )
    ));
}
add_action('init', 'block_init');

function render_block($attributes, $content) {

    // gives empty array
    print_r($attributes['images']);
}

标签： javascriptphpreactjswordpresswordpress-gutenberg