0

I am adding a PluginSidebar to Gutenberg and it works until I try to add a meta field to the sidebar. Then it doesn't work. I'm not sure why though.

import { registerPlugin } from "@wordpress/plugins";
import { PluginSidebar, PluginSidebarMoreMenuItem } from "@wordpress/edit-post";
import { __ } from "@wordpress/i18n";

import { PanelBody, ToggleControl } from '@wordpress/components';

registerPlugin( 'page-layout-plugin', {
    icon: 'smiley',
    render: ( props ) => {
        return (
            <PluginSidebar 
            name="meta-page-settings" 
            title="Gutenberg Settings Sidebar"
            >
                <ToggleControl
                label={__('Show Sidebar?', 'starter')}
                checked={props.attributes.showSidebarAttribute}
                onChange={(val) => props.setAttributes({showSidebarAttribute: val})}
                />
            </PluginSidebar>
        )
    }
} );

This is the code before compiling it. The error I am getting it below. I read that we can create the attribute name to be saved so I'm not sure why it isn't working. Any help would be greatly appreciated. enter image description here

2 Answers 2

0

You forgot to declare the attributes:

registerPlugin( 'page-layout-plugin', {
    icon: 'smiley',
    attributes: {
      'showSidebarAttribute': {'type': 'boolean', 'default': true}, // <-- and maybe others
    },
    render: ( props ) => {

You can drop the quotes of the properties, of course (they are optional), I keep them because the equivalent statement is copied over from the PHP part where the quotes are necessary:

 'showSidebarAttribute' => ['type' => 'boolean', 'default' => true],
1
  • I am still getting the undefined error sadly
    – JayDev95
    Mar 23, 2023 at 12:01
0

The issue is that you are conflating registerPlugin with registerBlockType. The render property in registerPlugin doesn't receive any props so both props.attributes and props.setAttributes are not defined here.

Where do you want this data to be saved?

1
  • I wanted it saved as meta data
    – JayDev95
    Mar 25, 2023 at 4:33

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.