wordpress - 如何使用“withSelect”更新动态 Gutenberg 块中的 REST-API 调用

Question

我创建了一个相当复杂的 Gutenebrg Block

我已经硬编码了帖子/项目 ID，现在我正在努力如何实现更新功能。我使用两个不同的 API 路由，并希望通过在字段中输入 ID 让用户可以更改块内容。

将属性传递到：

withSelect(select => {
    return {
        posts: select('core').getEntityRecords('/wp/v2', 'projects', {include: 2962}),
        posts1: select('core').getEntityRecords('/wp/v2', 'posts', {include: 3432})
    };
})

下面的大部分代码......作为一个古腾堡菜鸟，这对我来说相当棘手......

/**
 * Block dependencies
 */

import './style.scss';

/**
 * Internal block libraries
 */
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { Spinner } = wp.components;
const { withSelect, useSelect } = wp.data;
const { 
    InspectorControls,
    RichText,
    MediaUpload,
    URLInputButton
} = wp.blockEditor;

var dispatch = wp.data.dispatch;
dispatch( 'core' ).addEntities( [
    {
        name: 'projects', // route name
        kind: '/wp/v2', // namespace
        baseURL: '/wp/v2/projects/' // API path without /wp-json
    },
    {
        name: 'posts', // route name
        kind: '/wp/v2', // namespace
        baseURL: '/wp/v2/posts/' // API path without /wp-json
    }
]);

registerBlockType(
    'jsforwpblocks/dynamic',
    {
        title: __( 'Example - Dynamic Block', 'jsforwpblocks'),
        description: __( 'A look at how to build a basic dynamic block.', 'jsforwpblocks'),
        icon:'shield',   
        category: 'widgets',
        attributes: {
            projektID: {
                type: 'string',
            },
        },


        edit:

             withSelect( select => {
                return {
                    posts: select( 'core' ).getEntityRecords( '/wp/v2', 'projects',{include: 2962}),
                    posts1: select( 'core' ).getEntityRecords( '/wp/v2', 'posts',{include: 3432})
                };
            } )


            ( ( { props,  posts, posts1, className, isSelected, setAttributes,attributes } ) => {
                if ( ! posts ) {
                    return (
                        <p className={className} >
                            <Spinner />
                            { __( 'Loading Posts', 'jsforwpblocks' ) }
                        </p>
                    );
                }
                if ( 0 === posts.length ) {
                    return <p>{ __( 'No Posts', 'jsforwpblocks' ) }</p>;
                }

                function changeprojektid(projektID) {
                    // using some nice js features instead of typing
                    // { heading: heading }
                    setAttributes({ projektID });
                   withSelect( select => {
                        let query = 'include: 2962'
                        return {
                            posts: select( 'core' ).getEntityRecords( '/wp/v2', 'projects', {include: 2962})
                        };
                    } )
                }
                return (
                    <div>
                        <div className="copy">
                            <RichText 
                                    className="heading"
                                    tagName="h2"
                                    placeholder="Enter your ID"
                                    value={attributes.projektID}
                                    onChange={changeprojektid}
                                    />
                        </div>
                        <ul className={ className }>
                            { posts.map( post => {
                                return (
                                    <li>
                                        <a className={ className } href={ post.link }>
                                            { post.title.rendered }
                                        <img src={ post.projimage1.guid } />
                                        </a>
                                    </li>
                                );
                            }) }
                        </ul>
                        <ul className={ className }>
                            { posts1.map( post => {
                                return (
                                    <li>
                                        <a className={ className } href={ post.link }>
                                            { post.title.rendered }

                                        </a>
                                    </li>
                                );
                            }) }
                        </ul>
                    </div>
                );
            } )
             // end withAPIData
        , // end edit

标签： wordpresswordpress-rest-apiwordpress-gutenberg