0

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 :/

1 Answer 1

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.