Gutenberg块-在块内处理服务器数据

时间：2018-09-05 作者：Michal Karbownik

我有一个块，可以呈现<Modal/>. 我使用从服务器检索它<ServerSideRender/> （返回纯html）。我希望能够选择其中一个标题（最好将其保存在postTitle 属性），并将其显示在块中。

attributes: {
    postTitle: {
        type: \'string\'
    }
},

edit(props) {
    const { attributes } = props;
    const { postTitle } = props.attributes;

    const MyModal = withState( {
        isOpen: false,
    } )
    ( ( { isOpen, setState } ) => (
        <div>
            <Button isDefault onClick={ () => setState( { isOpen: true } ) }>Choose</Button>
            { isOpen ?
                <Modal onRequestClose={ () => setState( { isOpen: false } ) }>
                        <ServerSideRender
                            block="my-blocks/wordpress-title"
                            attributes={attributes}
                        />
                </Modal>
                : null }
        </div>
    ) );

return ([
        <InspectorControls>
            <div>
                <strong>Choose Wordpress title:</strong>
                <MyModal/>
            </div>
        </InspectorControls>,
    ]);
},
是否有任何合理的方法可以从服务器检索数据，从而可以在一个块内对其进行操作？

1 个回复
SO网友:Andrei Draganescu

除了呈现服务器端，还有多种更好的方法可以获取古腾堡块中的帖子列表。

首先是在Redux周围使用Wrodpress包装器，并完全按照Gutenberg Handbook:

edit: withSelect( function( select ) {
    return {
        posts: select( \'core\' ).getEntityRecords( \'postType\', \'post\' )
    };
} )( function( props ) {

    if ( ! props.posts ) {
        return "Loading...";
    }

    if ( props.posts.length === 0 ) {
        return "No posts";
    }
    var className = props.className;
    var post = props.posts[ 0 ];

    return el(
        \'a\',
        { className: className, href: post.link },
        post.title.rendered
    );
} ),
请注意编辑函数是如何使用古腾堡存储区的数据组成的，它将posts数组作为一个道具。

第二种选择是简单地使用Axios通过rest API获取所需的帖子：

/**
 * Makes a get request to the desired post type and builds the query string based on an object.
 *
 * @param {string|boolean} restBase - rest base for the query.
 * @param {object} args
 * @returns {AxiosPromise<any>}
 */
export const getPosts = ({ restBase = false, ...args }) => {
    const queryString = Object.keys(args).map(arg => `${arg}=${args[arg]}`).join(\'&\');

    return axios.get(`/wp-json/wp/v2/${restBase}?        ${queryString}&_embed`);
};
这是本精彩教程的一个片段：https://github.com/bigbitecreative/gutenberg-postlist-demo

定义posts调用后，可以使用componentDidMount调用它，然后将posts设置为新的模态componenet状态：

    /**
 * When the component mounts it calls this function.
 * Fetches posts types, selected posts then makes first call for posts
 */
componentDidMount() {
    this.setState({
        loading: true,
    });

    api.getPostTypes()
        .then(({ data = {} } = {}) => {
            this.setState({
                types: data
            }
        });
}
同样来自Gutenberg Postlist演示，但为了简洁而缩短。

结束
标签： block-editor   小码农  

相关推荐