wp.data.select('core').getPostType('post-type')返回Gutenberg中未定义的

Question

我正在构建一个Wordpress插件，它依赖于注册自定义post类型时启用的自定义字段。我想检查post类型对象中的custom-fields键在supports中是否存在(并且是true)。但是，当我调用wp.data.select('core').getPostType('post-type')时，它返回undefined。如果我直接从控制台调用它，我就会得到我期望的post类型对象，所以我不知道为什么它在我的代码中不能工作。

我试过在几个地方打电话。

例如，在注册插件面板时：

// Loading `wp.editPosts`, `wp.plugins`, etc. excluded for brevity.

const Component = () => {
    const postType = wp.data.select('core/editor').getCurrentPostType();
    const postTypeObj = wp.data.select('core').getPostType(postType);

    if (postTypeObj.supports.hasOwnProperty('custom-fields')) {
        return (
            <PluginDocumentSettingPanel
                name="my-plugin-name"
                title={ __('My Plugin Title', 'pb') }
            >
                <MyPlugin/>
            </PluginDocumentSettingPanel>
        );
    }

    return;
};

registerPlugin('my-plugin-name', {
    render: Component,
    icon: '',
});

或通过withSelect插入插件本身。

// Loading `wp.compose`, `wp.data`, etc. excluded for brevity.

class MyPlugin extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            // I'll do something with this later on
            postTypeObj: props.postTypeObj,
        };
    }

    render() {
        return (
            <div></div>
        );
    }
}

export default compose([
    withSelect(select => {
        const {
            getCurrentPostType,
        } = select('core/editor');

        const {
            getPostType,
        } = select('core');

        return {
            postTypeObj: getPostType(getCurrentPostType()),
        }
    }),
])(MyPlugin);

无论我在哪里调用它，post类型对象都返回undefined。

我正在使用古腾堡插件，版本6.5.0和WordPress版本5.2.3。

任何帮助都是非常感谢的。

Answer 1

调用getCurrentPostType()将返回例如post。您可能也不需要将其包装在getPostType中。而且，根据https://github.com/WordPress/gutenberg/issues/13555，您将需要“订阅”(wp.data.subscribe)，因为这是一个异步调用，因此在第一次运行它时将返回null。

Answer 2

这是来自wp.data.select(“核心”)的任何东西的特征，也是建立在它之上的东西的特征。

问题是，react是通过ajax调用来获取数据的。并且，当响应返回时，这将触发另一个呈现。因此，如果您考虑到这一点，您的代码将再次运行(当响应到达时)，并根据服务器的响应获得一个非空结果，服务器将在此之前为您存储响应。

放置不同:最初的事情是空白，而这些空白将被填补。

(这是值得重复的，因此请就这个问题教育其他人。)

Answer 3

对于那些在自定义post类型编辑窗口下需要此功能的人，几乎没有什么要求。

1.注册自定义post类型时，请确保show_in_rest设置为true，并支持包含editor的数组。这将使所需的脚本排队。

或者，您可以按以下方式手动对它们进行排队：

function enable_gutenberg_on_custom_post_types( $hook ) {
    global $current_screen;

    // Load on certain post type
    if ( 'product' !== $current_screen->post_type ) {
        return;
    }

    /**
     * Make the WP Screen object aware that this is a block editor page.
     * Since custom blocks check whether the screen is_block_editor,
     * this is required for custom blocks to be loaded.
     * See wp_enqueue_registered_block_scripts_and_styles in wp-includes/script-loader.php
     */
    $current_screen->is_block_editor( true );

    /**
     * Fires after block assets have been enqueued for the editing interface.
     *
     * Call `add_action` on any hook before 'admin_enqueue_scripts'.
     *
     * In the function call you supply, simply use `wp_enqueue_script` and
     * `wp_enqueue_style` to add your functionality to the block editor.
     *
     * @since 5.0.0
     */
    do_action( 'enqueue_block_editor_assets' );
}
add_action( 'admin_enqueue_scripts', 'enable_gutenberg_on_custom_post_types' );

2. --您还需要对其他脚本进行排队，即wp-data和wp-edit-posts

wp_enqueue_script(
    'my-custom-script',
    PLUGIN_URL . 'dist/admin.js',
    array( 'react', 'react-dom', 'wp-data', 'wp-edit-post' ),
    '1.0.0',
    false
);

然后在javascript中：

window.wp.data.select('core').getEntityRecords( 'postType', 'post' )

或者用钩子：

  const posts = window.wp.data.useSelect((select) => {
    return select('core').getEntityRecords('postType', 'product');
  }, []);