Wordpress Gutenberg Block:在BlockEdit filter HOC中使用wp.data.se

Question

我试图通过拉入媒体描述字段来扩展core/image块，并将其内容用作额外属性。我目前坚持在BlockEdit过滤器HOC内获得wp.data.select('core').getMedia(id)的Rest API调用。无论我到目前为止尝试了什么(直接)使用select像下面的例子代码或useSelect挂钩，它总是导致相同的错误"TypeError: select(...).getMedia(...) is undefined"。我成功地将核心块扩展用于其他功能以及其他自定义块中的许多不同选择调用。我正在从wp.data包中导入select和useSelect，我已经在插件PHP中设置了我的依赖项。

以下是我的代码(相关部分):

脚本顶部

const { select, useSelect } = wp.data;
const restrictTo = ['core/image'];

BlockEdit HOC -包裹图像块的编辑功能

const withDescription = createHigherOrderComponent((BlockEdit) => {
return (props) => {
const {name, attributes, setAttributes, isSelected} = props;
if ( isSelected && restrictTo.includes(name) ) {
const {id} = attributes;
// id will be available when image is chosen from the inserter
if (id) {
/* doesn't work, yields error described above, even with useSelect hook */
const desc = select('core').getMedia(id).description.raw;
}
// 
}
return (
<Fragment>
<BlockEdit {...props} />
<Inspector Controls stuff...>
</Fragment>
)
};
}, 'withDescription');

过滤器

addFilter('editor.BlockEdit','vortac/with-description',withDescription);

我已经搜索了文章和帮助覆盖一个类似的问题，并在wordpress.org支持论坛上发现了这个:https://wordpress.org/support/topic/how-to-use-wp-data-select-in-blocklist/

@jorgefilipecosta引用了一段Core代码，实际上是在HOC中使用select。这是一个不同的BlockFiltereditor.BlockListBlock though，但我不认为这应该有什么不同。

提前感谢您的帮助。

Answer 1

我终于在我的代码中找到了错误。在BlockEdit过滤器HOC中使用select并不是实际问题，正如我在发布问题时所假设的那样。select调用本身以const desc = select('core').getMedia(id).description.raw;的形式是不正确的。我想它不起作用，因为select调用产生了一个承诺，直到.getMedia()加载了一个值，才可以访问description字段，导致我最初在问题中描述的错误。因此，以下是我使用useSelect钩子(同样只是相关部分)的最终实现中的实际简单解决方案:

const { select, useSelect } = wp.data;
const restrictTo = [ 'core/image' ];

const withDescription = createHigherOrderComponent( ( BlockEdit ) => {
return ( props ) => {
const { name, attributes, setAttributes, isSelected } = props;
if ( isSelected && restrictTo.includes( name ) ) {
const { id } = attributes;

// an image id will be available as soon as an image is chosen from the inserter
if ( id ) {
const tmpDesc = useSelect( ( select ) => {
return select( 'core' ).getMedia( id );
}, [ id ] );
// if a value for tmpDesc is set its raw description will be accessible
const desc = ( tmpDesc ) ? tmpDesc[ 'description' ][ 'raw' ] : '';
}
// 
}
return (
<Fragment>
<BlockEdit {...props} />
<Inspector Controls stuff...>
</Fragment>
)
};
}, 'withDescription');

addFilter('editor.BlockEdit','vortac/with-description',withDescription);