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.

Sign up for GitHub

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

PluginSidebarMoreMenuItem: Update example, screenshot and description. #64761

Merged
merged 4 commits into from
Aug 23, 2024
Merged

PluginSidebarMoreMenuItem: Update example, screenshot and description. #64761

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
71a7aa2
Update example, screenshot and description.
ryanwelcher Aug 23, 2024
19d3b00
Update docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md
ryanwelcher Aug 23, 2024
ac5ba27
Update docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md
ryanwelcher Aug 23, 2024
f79863e
Update docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md
ryanwelcher Aug 23, 2024
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
79 changes: 63 additions & 16 deletions docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,78 @@
# PluginSidebarMoreMenuItem

This slot allows the creation of a `<PluginSidebar>` with a menu item that when clicked will expand the sidebar to the appropriate Plugin section.
This is done by setting the `target` on `<PluginSidebarMoreMenuItem>` to match the `name` on the `<PluginSidebar>`
This slot is used to allow the opening of a `<PluginSidebar />` panel from the Options dropdown.
When a `<PluginSidebar />` is registered, a `<PluginSidebarMoreMenuItem />` is automatically registered using the title prop from the `<PluginSidebar />` and so it's not required to use this slot to create the menu item.

## Example

This example shows how customize the text for the menu item instead of using the default text provided by the `<PluginSidebar />` title.

```js
import { registerPlugin } from '@wordpress/plugins';
import { __ } from '@wordpress/i18n';
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/editor';
import {
PanelBody,
Button,
TextControl,
SelectControl,
} from '@wordpress/components';
import { registerPlugin } from '@wordpress/plugins';
import { useState } from '@wordpress/element';
import { image } from '@wordpress/icons';

const PluginSidebarMoreMenuItemTest = () => (
<>
<PluginSidebarMoreMenuItem target="sidebar-name" icon={ image }>
Expanded Sidebar - More item
</PluginSidebarMoreMenuItem>
<PluginSidebar name="sidebar-name" icon={ image } title="My Sidebar">
Content of the sidebar
</PluginSidebar>
</>
);

registerPlugin( 'plugin-sidebar-expanded-test', {
const PluginSidebarMoreMenuItemTest = () => {
const [ text, setText ] = useState( '' );
const [ select, setSelect ] = useState( 'a' );
return (
<>
<PluginSidebarMoreMenuItem target="sidebar-name" icon={ image }>
{ __( 'Custom Menu Item Text' ) }
</PluginSidebarMoreMenuItem>
<PluginSidebar
name="sidebar-name"
icon={ image }
title="My Sidebar"
>
<PanelBody>
<h2>
{ __(
'This is a heading for the PluginSidebar example.'
) }
</h2>
<p>
{ __(
'This is some example text for the PluginSidebar example.'
) }
</p>
<TextControl
label={ __( 'Text Control' ) }
value={ text }
onChange={ ( newText ) => setText( newText ) }
/>
<SelectControl
label={ __( 'Select Control' ) }
value={ select }
options={ [
{ value: 'a', label: __( 'Option A' ) },
{ value: 'b', label: __( 'Option B' ) },
{ value: 'c', label: __( 'Option C' ) },
] }
onChange={ ( newSelect ) => setSelect( newSelect ) }
/>
<Button variant="primary">
{ __( 'Primary Button' ) }{ ' ' }
</Button>
</PanelBody>
</PluginSidebar>
</>
);
};

registerPlugin( 'plugin-sidebar-more-menu-item-example', {
render: PluginSidebarMoreMenuItemTest,
} );
```

## Location

![Interaction](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/plugin-sidebar-more-menu-item.gif?raw=true)
![Interaction](https://developer.wordpress.org/files/2024/08/pluginsidebar-more-menu-item-1.gif)
Loading