0

Here's a second question in my quest to understand the Gutenberg Document Settings Panel sidebar and customize it. (See my first question here.)

I have the following jsx code working for the edit screen of a custom post type (Carousel Item). As before, there are no errors (initially) in the js console on load.

(function(wp){
    //the following code renders a custom panel in the document sidebar of Gutenberg
    const { registerPlugin } = wp.plugins;
    const { PluginDocumentSettingPanel } = wp.editPost;
    const { useDispatch } = wp.data;
    const { editPostStore } = wp.editPost.store;
    const { Button } = wp.components;
    const myDocumentSettingPanel = () => {
        const { removeEditorPanel } = useDispatch( editPostStore );
        // console.log(removeEditorPanel);
        return (
            <PluginDocumentSettingPanel
                icon="palmtree"
                name="custom-panel"
                title="Custom Panel"
                className="custom-panel"
            >
                Custom panel contents goes here...
                <Button
                    variant="secondary"
                    onClick={ () => { 
                        console.log("Clicked!");
                        removeEditorPanel('featured-image');
                    }}
                >
                    Remove Featured Image
                </Button>
            </PluginDocumentSettingPanel>
        );
    };

    registerPlugin( 'my-document-setting-panel', {
        render: myDocumentSettingPanel,
    } );

Here's what the above code does in the UI:

enter image description here

When the "Remove Featured Image" button is clicked however, I get the following error in the console:

Uncaught TypeError: removeEditorPanel is not a function

Console.log() duly outputs "Clicked!" just prior, so I know the code is executing. The documentation I'm following has a slightly different form for the constant definitions, and I wonder if that isn't my problem... specifically

    const { useDispatch } = wp.data;
    const { editPostStore } = wp.editPost.store;

in the documentation is rendered as...

import { useDispatch } from '@wordpress/data';
import { store as editPostStore } from '@wordpress/edit-post';

which doesn't work in my context (JXS transpiler error: "'import' and 'export' may only appear at the top level.").

I've verified that removeEditorPanel is in fact null in the context of myDocumentSettingPanel (commented out console.log() call), so something's not quite right. I'm new enough to react/jsx/js to be unsure of what I'm missing.

1 Answer 1

1
import { store as editPostStore } from '@wordpress/edit-post';

Is not the same as

const { editPostStore } = wp.editPost.store;

In the first line store is editPostStore, but in your second line editPostStore is a property of store, but it doesn't exist.

The correct syntax is

const editPostStore = wp.editPost.store;

Or

const { store: editPostStore } = wp.editPost;
1
  • Thank you very much. That was indeed the issue. For anyone else out there struggling to understand the nuances of js syntax, I tested both options and they both work.
    – Andrew
    Sep 1, 2023 at 15:43

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.