在 PluginDocumentSettingPanel 内容中设置按钮 (Wordpress Gutenberg)

Question

我正在尝试在 edit-post 侧边栏 (Wordpress Gutenberg) 中创建一个新面板，我已经成功地在内容部分设置了带有标题和文本的面板，但我需要添加一个那里的按钮，不，我找到了一种方法。

var registerPlugin = wp.plugins.registerPlugin;
var PluginDocumentSettingPanel = wp.editPost.PluginDocumentSettingPanel;
// var btn = wp.element.createElement( 'button' );
var el = wp.element.createElement;
var __ = wp.i18n.__;

/* I tried to do it with a function, but it didn't work

function setButton() {
    btn.innerHTML = 'Submit';
    btn.type = 'submit';
    btn.name = 'formBtn';
    btn.onclick = function () {
        alert( 'Button is clicked');
    };
}
********************************************************/

function MyDocumentSettingPlugin() {
    return el(
        PluginDocumentSettingPanel,
        {
            name: 'my-document-setting-plugin',
            title: 'My Panel',
            icon: 'dashicon-name',
        },
        __( 'My Document Setting Panel Content', 'text-domain' ),
        // setButton(),        <---------- I need to add a button here
    );
}

registerPlugin( 'my-document-setting-plugin', {
    render: MyDocumentSettingPlugin,
} );

请帮忙:/

Answer 1

我终于这样解决了：

var registerPlugin = wp.plugins.registerPlugin;
var PluginDocumentSettingPanel = wp.editPost.PluginDocumentSettingPanel;
var Button = wp.components.Button;
var el = wp.element.createElement;
var __ = wp.i18n.__;

function onButtonClick() {
    alert( 'Button is clicked' );
}

function MyDocumentSettingPlugin() {
    return el(

        PluginDocumentSettingPanel,
        {
            name: 'my-document-setting-plugin',
            title: 'My Panel',
            icon: 'dashicon-name',
        },
        __( 'My Document Setting Panel Content', 'text-domain' ),

        el(
            Button,
            {
                className: 'myclass',
                isDefault: true,
                onClick: onButtonClick,
            },
            __( 'Button Text', 'text-domain' ),
        ),

    );
}

registerPlugin( 'my-document-setting-plugin', {
    render: MyDocumentSettingPlugin,
} );

在 PluginDocumentSettingPanel 内容中设置按钮 (Wordpress Gutenberg)

Set Button in PluginDocumentSettingPanel Content (Wordpress Gutenberg)

javascript

wordpress

plugins

wordpress-gutenberg