Получить идентификаторы изображений из блока галереи во внутренних блоках пользовательского блока Гутенберга

Я в основном создаю пользовательский блок карусели Гутенберга. Это может быть карусель во внешнем интерфейсе, и я планирую использовать блок галереи для добавления изображений в карусель.

Карусель будет загружена с использованием bxSlider, который требует определенного синтаксиса, как вы можете видеть здесь. Галерея визуализирует другой синтаксис во внешнем интерфейсе (вывод изображений на основе списка). Я хочу изменить синтаксис визуализированной галереи.

В render_callback кажется, что аргумент изменяет вывод, но для того, чтобы это работало, мне нужны идентификаторы всех изображений в галерее.

Ближе всего к выходу я пришел в этой ветке с использованием модулей данных иwithDispatchкомпонент для получения данных, но я не знаю, как использовать его в JSX-скрипте. Это сценарий для моего пользовательского блока -

const { registerBlockType }   =   wp.blocks;

const { InnerBlocks }    =   wp.blockEditor;

const ALLOWED_BLOCKS_GALLERY = ['core/gallery'];

const GALLERY_TEMPLATE = [
    ['core/gallery', {} ]
];

registerBlockType('my-plugin/my-plugin-carousel', {
    title: 'Carousel',
    description: 'Insert a Carousel using Images from Gallery',
    category: 'common',
    icon: {
        src: 'image-flip-horizontal',
        foreground: '#1d7eb6'
    },

    attributes: {},

    edit: (props) => {
        
        return([
            <div className="my-carousel-container">

                <InnerBlocks allowedBlocks={ ALLOWED_BLOCKS_GALLERY } template={ GALLERY_TEMPLATE } templateLock="insert"/>
            </div>
        ])

    },

    save: () => {

        return <InnerBlocks.Content />
    }
});

Любая помощь о том, как действовать в этой ситуации, будет принята с благодарностью! Я потратил на это последние два дня, и мне нечего показать.

0 ответов