Wordpress Gutenberg Block：在 BlockEdit 过滤器 HOC 中使用 wp.data.select

Question

我正在尝试通过拉入媒体描述字段并将其内容用作额外属性来扩展 core/image 块。我目前无法在 BlockEdit 过滤器 HOC 中使用 wp.data.select('core').getMedia(id) 进行 Rest API 调用。到目前为止，无论我尝试过什么（“直接”使用 select 就像下面的示例代码或 useSelect 挂钩它总是导致相同的错误 "TypeError: select(...).getMedia(...) is undefined"。我成功地使用了核心块扩展对于其他功能以及其他自定义块中的许多不同 select 调用。我正在从 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 引用了一段核心代码，该代码实际上在 HOC 中使用 select。这是一个不同的 BlockFilter editor.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);

Wordpress Gutenberg Block：在 BlockEdit 过滤器 HOC 中使用 wp.data.select

Wordpress Gutenberg Block: use wp.data.select in BlockEdit filter HOC

wordpress-gutenberg

higher-order-components

gutenberg-blocks