plugins - Get IDs of Images from Gallery Block in InnerBlocks of a Custom Gutenberg Block

admin管理员组

文章数量:1278917

I am basically creating a Custom Carousel Gutenberg Block. It qould be a carousel at the front end and I plan on using a Gallery Block to add images to the carousel.

The carousel would be loaded using bxSlider which requires a certain syntax as you can see here. The gallery renders a different syntax at the front-end (a list based output of Images). I want to modify the syntax of the rendered gallery.

The render_callback argument seems to modify the output but for that to work, I need IDs of all the images in the Gallery.

The closest I have come to a way out is in this thread using data modules and withDispatch component to retrieve data but I have no Idea how to use it in JSX script. This is the script for my custom block-

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 />
    }
});

Any help on how to proceed with this situation will be highly appreciated! I have spent the last two days on this and have nothing to show for it.

I am basically creating a Custom Carousel Gutenberg Block. It qould be a carousel at the front end and I plan on using a Gallery Block to add images to the carousel.

The carousel would be loaded using bxSlider which requires a certain syntax as you can see here. The gallery renders a different syntax at the front-end (a list based output of Images). I want to modify the syntax of the rendered gallery.

The render_callback argument seems to modify the output but for that to work, I need IDs of all the images in the Gallery.

The closest I have come to a way out is in this thread using data modules and withDispatch component to retrieve data but I have no Idea how to use it in JSX script. This is the script for my custom block-

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 />
    }
});

Any help on how to proceed with this situation will be highly appreciated! I have spent the last two days on this and have nothing to show for it.

• plugins
• plugin-development
• customization
• javascript

Share Improve this question edited Aug 26, 2020 at 13:54 Divjot Singh asked Aug 26, 2020 at 13:30 Divjot SinghDivjot Singh 1361212 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

In the end, I was successful in extracting the IDs of a Gallery Inner Block. It is kind of a work-around and not an exact solution. This article showed me the way. This is the code I ended up with-

attributes: {
        images: {
            type: 'array',
            default: []
        },
        clientId: {
            'type': 'string',
            'default': ''
        }
    },

edit: withSelect(select => {
        return {
            blocks :   select('core/block-editor').getBlocks()
        }
})(Edit);

Here, the withSelect() method is used to get the data of every block using getBlocks(). I made a separate class for the render part of the code as it was getting quite lengthy. Also, I created two attributes clientId and images which are type string and array respectively. Here is the code for the class-

class Edit extends Component {

    render() {

        const { attributes, setAttributes } = this.props;

        console.log(this.props.blocks);

        this.props.blocks.map((block, index) => {

            if (block.name === "diviner-blocks/diviner-blocks-carousel" && block.innerBlocks.length > 0 && block.clientId == this.props.clientId) {

                let currentClientID =   block.clientId;
                let currentIDs      =   block.innerBlocks[0].attributes.images;

                attributes.images       =   [...currentIDs]
                attributes.clientId =   currentClientID
            }
        });

        return(
            <div className="diviner-carousel-container">
                <InnerBlocks allowedBlocks={ ALLOWED_BLOCKS_GALLERY } template={ GALLERY_TEMPLATE } templateLock="all"/>
            </div>
        )
    }
}

export default Edit;

Here, the blocks data is present in props in the form of an array. I mapped the blocks array, made appropriate checks if the inner block exists, it is the gallery block and the most important of all, we encounter the current block in the loop. For that we matched the client IDs of the blocks. This is especially useful if there are multiple instances of this block on the same post/page.

When all checks are successful, attributes are updated with the appropriate info. In the images attribute, data of all the images in the gallery Inner Block is stored and the clientId attribute stores the client ID of the block.

It is not a full fledged solution right now and there might be bugs in the future but right now it's the best I came up with going through all the documentation and resources available.

本文标签： pluginsGet IDs of Images from Gallery Block in InnerBlocks of a Custom Gutenberg Block