Пустой массив изображений в блоке Гутенберга пользовательской галереи - PullRequest
0 голосов
/ 04 августа 2020

Я хочу создать свой собственный блок галереи для редактора Гутенберга.

Все это должно быть отрисовано на стороне сервера (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']);
}
...