diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md index c9686fb8610ee..16c623f32ef18 100644 --- a/packages/edit-post/README.md +++ b/packages/edit-post/README.md @@ -155,6 +155,38 @@ _Returns_ - `WPComponent`: The component to be rendered. +### PluginHeaderToolbar + +Renders a button and association dropdown in the header toolbar. + +_Usage_ + +```js +import { registerPlugin } from '@wordpress/plugins'; +import { PluginHeaderToolbar } from '@wordpress/edit-post'; + +const MyHeaderToolbarPlugin = () => ( +
Rendered Content
} + /> +); + +registerPlugin( 'my-header-toolbar-plugin', { + render: MyHeaderToolbarPlugin, + icon: 'smiley', +} ); +``` + +_Parameters_ + +- _props_ `Object`: Component properties. +- _renderContent_ `WPComponent`: The component to render as the UI for the dropdown. +- _props.className_ `[string]`: Optional. The class name for the button. +- _props.contentClassName_ `[string]`: Optional. The class name of the dropdown item. +- _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element. + ### PluginMoreMenuItem Renders a menu item in `Plugins` group in `More Menu` drop down, and can be used to as a button or link depending on the props provided. The text within the component appears as the menu item label. diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js index 391e5473999bb..85096827a5a38 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -25,6 +25,7 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; */ import { store as editPostStore } from '../../../store'; import { unlock } from '../../../lock-unlock'; +import PluginHeaderToolbar from '../plugin-header-toolbar'; const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis ); @@ -168,6 +169,11 @@ function HeaderToolbar() { variant={ showIconLabels ? 'tertiary' : undefined } /> { overflowItems } + { isLargeViewport && ( + + ) } ) } diff --git a/packages/edit-post/src/components/header/plugin-header-toolbar/index.js b/packages/edit-post/src/components/header/plugin-header-toolbar/index.js new file mode 100644 index 0000000000000..d37d9c04a2806 --- /dev/null +++ b/packages/edit-post/src/components/header/plugin-header-toolbar/index.js @@ -0,0 +1,103 @@ +/** + * WordPress dependencies + */ +import { + createSlotFill, + Button, + ToolbarItem, + Dropdown, +} from '@wordpress/components'; +import warning from '@wordpress/warning'; +import { plugins as pluginsIcon } from '@wordpress/icons'; +import { compose } from '@wordpress/compose'; +import { withPluginContext } from '@wordpress/plugins'; + +const { Fill, Slot } = createSlotFill( 'PluginHeaderToolbar' ); + +/** + * Whether the argument is a function. + * + * @param {*} maybeFunc The argument to check. + * @return {boolean} True if the argument is a function, false otherwise. + */ +function isFunction( maybeFunc ) { + return typeof maybeFunc === 'function'; +} + +const PluginHeaderToolbarFill = ( { + icon = pluginsIcon, + renderContent = null, + className = 'plugin-header-toolbar-button', + contentClassName = 'plugin-header-toolbar-content', +} ) => { + if ( null === renderContent || ! isFunction( renderContent ) ) { + warning( + 'PluginHeaderToolbar requires renderContent property to be specified and be a valid function.' + ); + return null; + } + return ( + + { ( { showIconLabels } ) => ( + ( + ( +