0

I'm trying to figure out Gutenberg's SlotFills in WordPress. Specifically, trying to explore what is and isn't possible out of the box for customization of the post editing interface sidebar. ('Carousel Item' in the picture below is a custom post type I'm working with.)

enter image description here

SlotFills appear to be a tool I can use to add my own custom controls to the sidebar. From the Gutenberg documentation I have the following code working as you can see in the subsequent screenshot.

    const { registerPlugin } = wp.plugins;
    const { PluginDocumentSettingPanel } = wp.editPost;

    const myDocumentSettingPanel = () => (
        <PluginDocumentSettingPanel
            name="custom-panel"
            title="Custom Panel"
            className="custom-panel"
        >
            Custom Panel Contents
        </PluginDocumentSettingPanel>
    );
    
    registerPlugin( 'my-document-setting-panel', {
        render: myDocumentSettingPanel,
        icon: 'palmtree',
    } );

enter image description here

So far so good. However, the icon is not showing next to the title of the custom panel as the various examples indicate it should (including this video presentation by Ryan Welcher--PluginDocumentSettingPanel discussion starts at 14:28). I suspect it's because something is not included/imported appropriately in my code. I have no errors in my js console for this page. 'palmtree' is one of the Dashicons, and I'm guessing the library is simply not available in the context I'm in. I'm new enough to all of this though and the documentation is obtuse enough (for me at least) that I'm having difficulty figuring out what's wrong.

What documentation I've been able to find on WordPress' registerPlugin() javascript function doesn't define what it expects for the icon, which doesn't help. Anyone see what I'm missing?

Update:

Here's the working code for those that need to see it spelled out, along with a picture of the result.

    const { registerPlugin } = wp.plugins;
    const { PluginDocumentSettingPanel } = wp.editPost;

    const myDocumentSettingPanel = () => (
        <PluginDocumentSettingPanel
            name="custom-panel"
            title="Custom Panel"
            className="custom-panel"
            icon='palmtree'
        >
            Custom Panel Contents
        </PluginDocumentSettingPanel>
    );
    
    registerPlugin( 'my-document-setting-panel', {
        render: myDocumentSettingPanel,
        // icon: 'palmtree',
    } );

enter image description here

0

1 Answer 1

2

It doesn't work because that is old behaviour and Gutenberg changed a year ago.

Where The Confusion Comes From

This commit:

https://github.com/WordPress/gutenberg/commit/00cb38c3655daffd429ad4acfc57d6ee3b7f2d83

On Apr 20, 2022 code was removed that made it fallback to the plugin icon. Now an icon has to be explicitly passed as a prop or no icon is shown.

Why?

https://github.com/WordPress/gutenberg/pull/40355

Core panels don't have icons but to reproduce this you'd need to pass icon={false} which is inconsistent:

Core panels don't display icons next to the labels. So the fallback required explicitly setting plugin icon to falsy value so that default icon wasn't displayed.

I think default behavior should match core document panels but allow developers to specify the icon.

Why Does Ryan Welchers Video Show Icons on The Panels?

Because when he gave his talk at WCUS 2022 the change to remove the fallback was not available to him, but it's the default now.

What Should I Do Now?

The palmtree icon you specified when registering the plugin is the icon of the plugin. The PluginDocumentSettingPanel component is completely separate, and can be used in places that are not plugins, e.g. hooks/filters/blocks/etc. The only place that uses the icon is the top toolbar and possibly the settings UI

Instead, refer to the official documentation for PluginDocumentSettingPanel component:

https://developer.wordpress.org/block-editor/reference-guides/slotfills/plugin-document-setting-panel/

Available Props

  • name string: A string identifying the panel.
  • className string: An optional class name added to the sidebar body.
  • title string: Title displayed at the top of the sidebar.
  • icon (string|Element): The Dashicon icon slug string, or an SVG WP element.

Which implies that this is what you need:

        <PluginDocumentSettingPanel
            icon="palmtree"

What documentation I've been able to find on WordPress' registerPlugin() javascript function doesn't define what it expects for the icon, which doesn't help. Anyone see what I'm missing?

The icon can be multiple things, it's not registerPlugins's job to render it, e.g.

  • it could be a string with a dashicon
  • it could be a react component

icon (string|Element): The Dashicon icon slug string, or an SVG WP element.

Note that you could provide a React component that is not an SVG, but, the styling of the admin area assumes it is an SVG and it may lead to broken UI. CSS that fixes this may need updating on WordPress releases, so it is ill advised.

5
  • I think I follow. I've added that prop as you suggested and it now works! Thank you. Ryan Welcher's video is misleading, or the code has changed since he recorded it.
    – Andrew
    Aug 31, 2023 at 20:57
  • have you asked them about this? I can't find the video you're referring to, but the only place I would ever expect the plugin icon to show up is if it registered a sidebar which would put a button in the top toolbar like Yoast does, and give you a full sidebar not a panel in the inspector.
    – Tom J Nowell
    Sep 1, 2023 at 12:28
  • @Andrew I did some further research and discovered the truth and updated my answer. Ryans video isn't misleading, he just created it using an older version of Gutenberg
    – Tom J Nowell
    Sep 1, 2023 at 12:44
  • thanks again for taking the time to write a very thorough explanation, I'm glad to understand this better.
    – Andrew
    Sep 1, 2023 at 15:51
  • the link above in my question ("this video presentation") links to the video in question.
    – Andrew
    Sep 1, 2023 at 15:53

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.