Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding examples of how to programmatically remove the panels in Document sidebar. #48895

Merged
merged 2 commits into from
Mar 8, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,68 @@ registerPlugin( 'plugin-document-setting-panel-demo', {

## Accessing a panel programmatically

Core and custom panels can be access 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 `wp.data.dispatch( 'core/edit-post' ).toggleEditorPanelOpened` or `wp.data.dispatch( 'core/edit-post' ).toggleEditorPanelEnabled` be sure to prepend the namespace.
In order to access the panels using function such as `toggleEditorPanelOpened` or `toggleEditorPanelEnabled` be sure to prepend the namespace.

To programmatically toggle the custom panel added in the example above, use the following:
To programmatically toggle panels, use the following:

```js
wp.data
.dispatch( 'core/edit-post' )
.toggleEditorPanelOpened(
'plugin-document-setting-panel-demo/custom-panel'
import { useDispatch } from '@wordpress/data';
import { store as editPostStore } from '@wordpress/edit-post';

const Example = () => {
const { toggleEditorPanelOpened } = useDispatch( editPostStore );
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 editPostStore } from '@wordpress/edit-post';

const Example = () => {
const { removeEditorPanel } = useDispatch( editPostStore );
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>
);
};
```