Я хочу создать свой собственный блок галереи для редактора Гутенберга.
Все это должно быть отрисовано на стороне сервера (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']);
}