古腾堡块:如何重新加载ServerSideRender?

时间:2020-04-14 作者:Marc

我终于让ServerSideRender开始工作了。但是,在保存帖子时,如何重新加载ServerSideRender?

    save: props => {
        return null;
    },
我想这里我需要一个触发器之类的东西来再次从插件加载数据。有人能告诉我去哪里找吗?serversiderender列出了标题结构,并需要在更新帖子时显示新数据。这是整个索引。块的js。

const { __, setLocaleData } = wp.i18n;
const { registerBlockType } = wp.blocks;
const listul  = wp.element.createElement(\'svg\',
    {
        width: 20,
        height: 20
    },
    wp.element.createElement( \'path\',
        {
            d: "M5.5 7C4.67 7 4 6.33 4 5.5 4 4.68 4.67 4 5.5 4 6.32 4 7 4.68 7 5.5 7 6.33 6.32 7 5.5 7zM8 5h9v1H8V5zm-2.5 7c-.83 0-1.5-.67-1.5-1.5C4 9.68 4.67 9 5.5 9c.82 0 1.5.68 1.5 1.5 0 .83-.68 1.5-1.5 1.5zM8 10h9v1H8v-1zm-2.5 7c-.83 0-1.5-.67-1.5-1.5 0-.82.67-1.5 1.5-1.5.82 0 1.5.68 1.5 1.5 0 .83-.68 1.5-1.5 1.5zM8 15h9v1H8v-1z"
        }
    )
);
import ServerSideRender from \'@wordpress/server-side-render\';

registerBlockType( \'simpletoc/toc\', {
    title: __( \'SimpleTOC\', \'simpletoc\' ),
    icon: listul,
    category: \'layout\',
    edit: function( props ) {
        return (
            <p className={ props.className }>
            <ServerSideRender
                block="simpletoc/toc"
                attributes={ props.attributes }
            />
            </p>
        );
    },
    save: props => {
        return null;
    },
} );

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

我用块中的“更新”按钮解决了这个问题。这有点奇怪,因为我需要发送“假”属性来重新渲染它。但这是可行的。

var el = wp.element.createElement;
var registerBlockType = wp.blocks.registerBlockType;
var BlockControls = wp.blockEditor.BlockControls;
var ServerSideRender = wp.serverSideRender;
var Toolbar = wp.components.Toolbar;
var IconButton = wp.components.Button;

function sendfakeAttribute(props) {
        // this actually triggers the ServerSideRender again ¯\\_(ツ)_/¯
        props.setAttributes({ updated: Date.now() });
}

registerBlockType( \'simpletoc/toc\', {
    title: __( \'SimpleTOC\', \'simpletoc\' ),
    icon: listul,
    category: \'layout\',
    edit: function( props ) {

                    return [
                            el(
                                BlockControls,
                                { key: \'controls\' },
                                el(
                                    Toolbar,
                                    null,
                                    el(
                                        IconButton,
                                        {
                                            className: \'components-icon-button components-toolbar__control\',
                                            label: \'update\',
                                            onClick: function() { sendfakeAttribute(props) },
                                            icon: \'update\'
                                        }
                                    )
                                )
                            ),
                            el(
                                ServerSideRender,
                                {
                                    block: props.name,
                                    attributes: props.attributes
                                }
                            )
                        ];


    },
    save: props => {
        return null;
    },
} );

相关推荐

Testing Plugins for Multisite

我最近发布了一个WordPress插件,它在单个站点上非常有效。我被告知该插件在多站点安装上不能正常工作,我理解其中的一些原因。我已经更新了代码,现在需要一种方法来测试更新后的代码,然后才能转到实时客户的多站点安装。我有一个用于测试的WordPress安装程序的单站点安装,但需要在多站点安装上进行测试。根据我所能找到的唯一方法是在网络上至少有两个站点来安装整个多站点安装,以测试我的插件。设置WordPress的整个多站点安装是插件开发人员的唯一/首选方式,还是有更快的测试环境可用。