从自定义Gutenberg块的内部块中获取图库块的图像ID

时间:2020-08-26 作者:Divjot Singh

我基本上是创建一个自定义旋转木马古腾堡块。它的前端可能是一个旋转木马,我计划使用一个图库块向旋转木马添加图像。

旋转木马将使用bxSlider加载,如您所见,bxSlider需要特定的语法here. gallery在前端呈现不同的语法(基于列表的图像输出)。我想修改渲染库的语法。

这个render_callback 参数似乎修改了输出,但要使其正常工作,我需要库中所有图像的ID。

我最接近的出路是in this thread 使用数据模块和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 />
    }
});
我们将非常感谢您对如何处理这种情况的任何帮助!我在这上面花了两天时间,没有什么可展示的。

1 个回复
SO网友:Divjot Singh

最后,我成功地提取了库内部块的ID。这是一种变通方法,而不是精确的解决方案。This 这篇文章为我指明了方向。这就是我最终得到的代码-

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

edit: withSelect(select => {
        return {
            blocks :   select(\'core/block-editor\').getBlocks()
        }
})(Edit);
这里,使用withSelect()方法使用getBlocks()获取每个块的数据。我为代码的呈现部分创建了一个单独的类,因为它变得很长。此外,我还创建了两个属性clientIdimages 分别是字符串和数组类型。下面是该类的代码-

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;
这里,块数据以数组的形式存在于道具中。我映射了块数组,适当检查了内部块是否存在,它是库块,最重要的是,我们在循环中遇到了当前块。为此,我们匹配了块的客户端ID。如果同一帖子/页面上有此块的多个实例,这将特别有用。

当所有检查都成功时,将使用适当的信息更新属性。在images 属性,存储库内部块中所有图像的数据clientId 属性存储块的客户端ID。

目前,它还不是一个成熟的解决方案,将来可能会有bug,但现在,通过查阅所有可用的文档和资源,这是我想到的最好的解决方案。