# PluginDocumentSettingPanel

This SlotFill allows registering a UI to edit Document settings.

## 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](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element.

## Example

```js
import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/editor';

const PluginDocumentSettingPanelDemo = () => (
	<PluginDocumentSettingPanel
		name="custom-panel"
		title="Custom Panel"
		className="custom-panel"
	>
		Custom Panel Contents
	</PluginDocumentSettingPanel>
);

registerPlugin( 'plugin-document-setting-panel-demo', {
	render: PluginDocumentSettingPanelDemo,
	icon: 'palmtree',
} );
```

## Accessing a panel programmatically

Core and custom panels can be accessed programmatically using their panel name. The core panel names are:

-   Summary Panel: `post-status`
-   Categories Panel: `taxonomy-panel-category`
-   Tags Panel: `taxonomy-panel-post_tag`
-   Featured Image Panel: `featured-image`
-   Excerpt Panel: `post-excerpt`
-   DiscussionPanel: `discussion-panel`

Custom panels are namespaced with the plugin name that was passed to `registerPlugin`.
In order to access the panels using function such as `toggleEditorPanelOpened` or `toggleEditorPanelEnabled` be sure to prepend the namespace.

To programmatically toggle panels, use the following:

```js
import { useDispatch } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';

const Example = () => {
	const { toggleEditorPanelOpened } = useDispatch( editorStore );
	return (
		<Button
			variant="primary"
			onClick={ () => {
				// Toggle the Summary panel
				toggleEditorPanelOpened( 'post-status' );

				// Toggle the Custom Panel introduced in the example above.
				toggleEditorPanelOpened(
					'plugin-document-setting-panel-demo/custom-panel'
				);
			} }
		>
			Toggle Panels
		</Button>
	);
};
```

It is also possible to remove panels from the admin using the `removeEditorPanel` function by passing the name of the registered panel.

```js
import { useDispatch } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';

const Example = () => {
	const { removeEditorPanel } = useDispatch( editorStore );
	return (
		<Button
			variant="primary"
			onClick={ () => {
				// Remove the Featured Image panel.
				removeEditorPanel( 'featured-image' );

				// Remove the Custom Panel introduced in the example above.
				removeEditorPanel(
					'plugin-document-setting-panel-demo/custom-panel'
				);
			} }
		>
			Toggle Panels
		</Button>
	);
};
```