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:
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.