wp.data.select('meta')属性( WordPress )未用Gutenberg定义

Question

我在WordPress中使用Gutenberg，我想在用户发布他的文章之前检查一些字段。

我想检查一下元框中的featured image、title和简单的text field是否是空的。

如果字段为空，则显示通知，并锁定“发布”按钮。

目前，featured image和title都能很好地工作。但是，当我试图检查元框中的文本字段是否为空时，我得到了错误：

Uncaught TypeError: Cannot read property '_myprefix_text_metafield' of undefined

我用这样的文本字段创建了我的元框：

import { __ } from '@wordpress/i18n';
import { useSelect, useDispatch } from '@wordpress/data';
import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { TextControl } from '@wordpress/components';

const TextController = (props) => {
    const meta = useSelect(
        (select) =>
        select('core/editor').getEditedPostAttribute('meta')['_myprefix_text_metafield']
    );
    const { editPost } = useDispatch('core/editor');
    return (
        <TextControl
        label={__("Text Meta", "textdomain")}
        value={meta}
        onChange={(value) => editPost({ meta: { _myprefix_text_metafield: value } })}
        />
    );
};

const PluginDocumentSettingPanelDemo = () => (
    <PluginDocumentSettingPanel name="text-presentation" title="Texte de présentation" className="custom-panel custom-panel-presentation" icon=" ">
        <TextController />
    </PluginDocumentSettingPanel>
);

registerPlugin('plugin-document-setting-panel-demo', {
    render: PluginDocumentSettingPanelDemo
});

并检查是否所有字段都为空：

const locks = [];

function lock( lockIt, handle, message ) {
    if ( lockIt ) {
        if ( ! locks[ handle ] ) {
            locks[ handle ] = true;
            wp.data.dispatch( 'core/editor' ).lockPostSaving( handle );
            wp.data.dispatch( 'core/notices' ).createNotice(
                'error',
                message,
                { id: handle, isDismissible: false }
            );
        }
    } else if ( locks[ handle ] ) {
        locks[ handle ] = false;
        wp.data.dispatch( 'core/editor' ).unlockPostSaving( handle );
        wp.data.dispatch( 'core/notices' ).removeNotice( handle );
    }
}

wp.data.subscribe( () => {
    // get presentation
    const textPresentation = wp.data.select( 'core/editor' ).getEditedPostAttribute('meta')['_myprefix_text_metafield'];

    // Lock the post if the presentation is empty.
    lock(
        ! textPresentation,
        'presentation-lock',
        'Please add a presentation text',
    );

    // get the current title
    const postTitle = wp.data.select( 'core/editor' ).getEditedPostAttribute( 'title' );

    // Lock the post if the title is empty.
    lock(
        ! postTitle,
        'title-lock',
        'Please add a title',
    );


    // get the Featured Image
    const featuredImage = wp.data.select( 'core/editor' ).getEditedPostAttribute( 'featured_media' );

    // Lock post if there is no Featured Image selected
    lock(
        featuredImage === 0,
        'featured-image-lock',
        'Please add a featured image',
    );

});

当我在控制台中写这个时：

wp.data.select( 'core/editor' ).getEditedPostAttribute('meta')['_myprefix_text_metafield'];

该值很好地返回了“我的文本”字段的值。

Answer 1

当从REST获取post数据的XHR/AJAX请求尚未完全解析时，可能会发生这种情况，因此您不能简单地访问这样的元数据。您需要确保getEditedPostAttribute('meta')实际上返回一个对象，然后才访问_myprefix_text_metafield属性。

所以，试着用这个代替：

const textPresentation = wp.data.select( 'core/editor' ) // wrapped for brevity
    .getEditedPostAttribute( 'meta' )?._myprefix_text_metafield;

// Lock the post if the presentation is empty.
lock(
    undefined !== textPresentation && ! textPresentation,
    'presentation-lock',
    'Please add a presentation text'
);