Removing Default Panels From Gutenberg Document Setting Panel (sidebar)

Question

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:

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.

Answer 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;