Set Button in PluginDocumentSettingPanel Content (Wordpress Gutenberg)-CodePudding

I'm trying to create a new panel in the edit-post sidebar (Wordpress Gutenberg), I already managed to set the panel with the title and the text in the content part but I need to add a button there and no I find a way to do it.

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,
} );

Please help :/

CodePudding user response：

I finally solved it like this:

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,
} );