最后,我成功地提取了库内部块的ID。这是一种变通方法,而不是精确的解决方案。This 这篇文章为我指明了方向。这就是我最终得到的代码-
attributes: {
images: {
type: \'array\',
default: []
},
clientId: {
\'type\': \'string\',
\'default\': \'\'
}
},
edit: withSelect(select => {
return {
blocks : select(\'core/block-editor\').getBlocks()
}
})(Edit);
这里,使用withSelect()方法使用getBlocks()获取每个块的数据。我为代码的呈现部分创建了一个单独的类,因为它变得很长。此外,我还创建了两个属性
clientId
和
images
分别是字符串和数组类型。下面是该类的代码-
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,但现在,通过查阅所有可用的文档和资源,这是我想到的最好的解决方案。