如何在块中使用帖子标题/ID填充选择字段

时间:2020-01-01 作者:leemon

我需要用一个选择字段构建一个非常简单的块。此选择字段应填充特定职位类型的职位名称/ID。一旦用户从此选择字段中选择一篇文章,其id应保存在特定属性中。

我已经编写了大部分代码,我只需要完成用我的站点中发布的特定帖子类型的所有帖子填充select字段的部分。

我知道我必须使用wp.data.select( \'core\' ).getEntityRecords() 选择器,但我不知道如何开始。任何帮助都将不胜感激。

export const settings = {
    title: __( \'Post Selection\', \'plugin-domain\' ),
    category: \'layout\',
    attributes: {
        id: {
            type: \'integer\',
            default: 0,
        },
    },

    edit: props => {
        const attributes = props.attributes;

        const setID = value => {
            props.setAttributes( { id: value } );
        };

        return (
            <div>
                <SelectControl
                    label={ __( \'Select a post:\', \'plugin-domain\' ) }
                    value={ attributes.id }
                    options={ ... fill with all post titles/ids of a specific post type ... }
                    onChange={ setID }
                />
            </div>
        );

    },

    save: props => { ... omitted for brevity ... }

};

registerBlockType( \'my/postselectblock\', settings );

1 个回复
最合适的回答,由SO网友:leemon 整理而成

我自己设法想出了一个解决办法。要获取特定帖子类型的帖子列表,必须将wp.data.select( \'core\' ).getEntityRecords() 中的选择器withSelect 高阶组件,这是一个使用选择器为组件提供道具的函数。然后,我们可以用这些数据填充SelectControl。

export const settings = {
    title: __( \'Post Selection\', \'plugin-domain\' ),
    category: \'common\',
    attributes: {
        id: {
            type: \'integer\',
            default: 0,
        },
    },

    edit: withSelect( ( select ) => {
        return {
            posts: select( \'core\' ).getEntityRecords( \'postType\', \'my_custom_post_type\', { per_page: -1 } )
        };
    } )
    ( props => {
        const { attributes, className } = props;

        const setID = value => {
            props.setAttributes( { id: Number( value ) } );
        };

        if ( ! props.posts ) {
            return __( \'Loading...\', \'plugin-domain\' );
        }

        if ( props.posts.length === 0 ) {
            return __( \'No posts found\', \'plugin-domain\' );
        }

        var options = [];
        options.push( {
            label: __( \'Choose a post...\', \'plugin-domain\' ),
            value: \'\'
        } );

        for ( var i = 0; i < props.posts.length; i++ ) {
            options.push( {
                label: props.posts[i].title.raw,
                value: props.posts[i].id
            } );
        }

        return (
            <Placeholder
                key=\'post-selection-block\'
                icon=\'admin-post\'
                label={ __( \'Post Selection Block\', \'plugin-domain\' ) }
                className={ className }>
                    <SelectControl
                        label={ __( \'Select a post:\', \'plugin-domain\' ) }
                        value={ attributes.id }
                        options={ options }
                        onChange={ setID }
                    />
            </Placeholder>
        );

    } ),

    save( { attributes } ) {
        ... omitted for brevity ...
    },

};

registerBlockType( \'my/postselectblock\', settings );

相关推荐

Get_Term_meta()不适用于Pre_Get_Posts()

我试图使用get\\u term\\u meta()函数获取特定类别的自定义术语元值。该值存储在wp\\U termmeta表中。然后,基于该值,我想修改某个类别归档页面的主查询(按日期升序排序帖子)。但是,我使用的pre\\u get\\u posts()钩子不允许这样做。我尝试了我所知道的所有方法,但仍然不起作用这是我的代码:function my_new_category_order( $query ) { //get the category id $cat_id