Why is my Toggle field not showing in Gutenberg?

Question

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.

Answer 1

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],

Answer 2

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?