Allow plugins to unset the default icon from PluginPrePublishPanel

[afercia]

Description

Splitting this out from #68688

PluginPrePublishPanel adds a panel to the pre-publish sidebar. It can be used 'standalone', for example directly in the editor somewhere, or in a registered plugin.

It is part of the editor package so that to my understanding using it 'standalone' directly in the editor is allowed.

When used 'standalone' and no icon prop is passed, it doesn't render an icon.
Instead, when used in a registered plugin, it either shows the passed icon or the fallback plugin icon that comes from usePluginContext. This is intentional to make it 'inherit' the icon a plugin may use in its registerPlugin() call. This way, the panel will use the same icon that it is shown in the 'pinned' plugin icon in the editor top bar.

Plugins can pass a different icon for the sidebar panel. However, the cannot unset the icon shown in the sidebar panel. It will fallback to the generic 'plugin' icon.

There may be cases where a plugin may want to show an icon for the 'pinned' button in the top bar but may not want to show an icon in the sidebar panel. It seems to me the current implementation assumes there should always be an icon, which isn't necessarily what plugins want.

There are workarounds e.g. passing an empty fragment icon={ <></> } but that's not great. I'd tend to think there should be a way for plugins to unset the icon of the sidebar panel.

It is worth nothing that the editor itself resigters some plugins e.g.

Step-by-step reproduction instructions

Register a simple plugin for hte pre-publish panel somewhere in the code e.g.

import { registerPlugin } from '@wordpress/plugins';
import { PluginPrePublishPanel } from '@wordpress/editor';

registerPlugin( 'my-test-plugin-panel', {
	render() {
		return (
			<PluginPrePublishPanel
				className="my-plugin-pre-publish-panel"
				title="My plugin panel title"
				initialOpen
			>
				My plugin panel content
			</PluginPrePublishPanel>
		);
	},
} );

• Edit a post and click Publish to make the pre-publish sidebar appear.
• Observe the panel added by your plugin shows a default icon. Screenshot:

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[Debarghya-Banerjee]

Hi @afercia, while going through the component, I found that if we just pass false to the icon prop, the default icon won't be rendered.

In my opinion, this should be used if we want to get rid of the icon.

Please let me know your thoughts on this. Thanks.

Example

<PluginPrePublishPanel
	className="my-plugin-pre-publish-panel"
	title="My plugin panel title"
	initialOpen
	icon={ false }
>
	My plugin panel content
</PluginPrePublishPanel>

Output Image

[afercia]

@Debarghya-Banerjee to my understanding, that's tru when it's used as a standalone component. However, when it is used in a registered plugin, it fetches the fallback icon from the plugin context:

gutenberg/packages/editor/src/components/plugin-post-publish-panel/index.js

Lines 39 to 55 in e992acf

	const PluginPostPublishPanel = ( {
	children,
	className,
	title,
	initialOpen = false,
	icon,
	} ) => {
	const { icon: pluginIcon } = usePluginContext();
	return (
	<Fill>
	<PanelBody
	className={ className }
	initialOpen={ initialOpen || ! title }
	title={ title }
	icon={ icon ?? pluginIcon }
	>

See

icon={ icon ?? pluginIcon }

where in the context of a plugin, pluginIcon is the icon registered in the registerPlugin() call. See the Plugins API.

[afercia]

we just pass false to the icon prop, the default icon won't be rendered.

Ahh that's because the Nullish coalescing operator. I only tried by omitting the icon prop or setting it to undefined or null. Actually looks like passing false makes the condition icon ?? pluginIcon use icon which is false and the icon isn't rendered.

Hm not sure this is intended. At the very least, this behavior should be documented .

gutenberg/packages/editor/README.md

Line 859 in e992acf

- _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.