From f4e921c6d01f7a05dddcc2f4a552a18b8d467b18 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Fri, 12 Jun 2020 14:29:35 -0400 Subject: [PATCH 1/5] Introduce new Slot. --- packages/edit-post/README.md | 4 ++++ .../components/header/plugin-header-toolbar/index.js | 12 ++++++++++++ packages/edit-post/src/index.js | 1 + 3 files changed, 17 insertions(+) create mode 100644 packages/edit-post/src/components/header/plugin-header-toolbar/index.js diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md index e18f8d5c8387f..1b8c052120ec1 100644 --- a/packages/edit-post/README.md +++ b/packages/edit-post/README.md @@ -157,6 +157,10 @@ _Returns_ - `WPComponent`: The component to be rendered. +# **PluginHeaderToolbar** + +Undocumented declaration. + # **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. 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..3fb581c894a52 --- /dev/null +++ b/packages/edit-post/src/components/header/plugin-header-toolbar/index.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { createSlotFill } from '@wordpress/components'; + +const { Fill: PluginHeaderToolbar, Slot } = createSlotFill( + 'PluginHeaderToolbar' +); + +PluginHeaderToolbar.Slot = Slot; + +export default PluginHeaderToolbar; diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js index 2bd1cc75e0751..27513469b30a9 100644 --- a/packages/edit-post/src/index.js +++ b/packages/edit-post/src/index.js @@ -159,4 +159,5 @@ export { default as PluginPostStatusInfo } from './components/sidebar/plugin-pos export { default as PluginPrePublishPanel } from './components/sidebar/plugin-pre-publish-panel'; export { default as PluginSidebar } from './components/sidebar/plugin-sidebar'; export { default as PluginSidebarMoreMenuItem } from './components/header/plugin-sidebar-more-menu-item'; +export { default as PluginHeaderToolbar } from './components/header/plugin-header-toolbar'; export { default as __experimentalFullscreenModeClose } from './components/header/fullscreen-mode-close'; From 3362a004e34c0766c107cd18f2ff0a3ae5dbfb00 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Fri, 12 Jun 2020 14:42:54 -0400 Subject: [PATCH 2/5] Use PluginHeaderToolbar to render existing items. --- .../components/header/header-toolbar/index.js | 78 ++++++++++++------- 1 file changed, 50 insertions(+), 28 deletions(-) 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 80bd41351abca..16e3a20cca832 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -21,6 +21,11 @@ import { } from '@wordpress/components'; import { plus } from '@wordpress/icons'; +/** + * Internal dependencies + */ +import PluginHeaderToolbar from '../plugin-header-toolbar'; + function HeaderToolbar( { onToggleInserter, isInserterOpen } ) { const { hasFixedToolbar, @@ -68,35 +73,52 @@ function HeaderToolbar( { onToggleInserter, isInserterOpen } ) { className="edit-post-header-toolbar" aria-label={ toolbarAriaLabel } > - - { isLargeViewport && } - - - - - { displayBlockToolbar && ( -
- -
- ) } + + { ( fillProps ) => { + return ( + <> + + { fillProps.isLargeViewport && ( + + ) } + + + + + { fillProps.displayBlockToolbar && ( +
+ +
+ ) } + + ); + } } + ); } From 891fcc3817c2b174e84531907179f8dc43b8c5aa Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Mon, 15 Jun 2020 19:59:51 -0400 Subject: [PATCH 3/5] More strict slot display and content. --- packages/edit-post/README.md | 58 ++++++++- packages/edit-post/package.json | 1 + .../components/header/header-toolbar/index.js | 74 +++++------ .../header/plugin-header-toolbar/index.js | 121 +++++++++++++++++- 4 files changed, 204 insertions(+), 50 deletions(-) diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md index 1b8c052120ec1..644e2cb8bdc10 100644 --- a/packages/edit-post/README.md +++ b/packages/edit-post/README.md @@ -159,7 +159,63 @@ _Returns_ # **PluginHeaderToolbar** -Undocumented declaration. +Renders a button and association dropdown in the header toolbar + +_Usage_ + +```js +// Using ES5 syntax +var el = wp.element.createElement; +var __ = wp.i18n.__; +var registerPlugin = wp.plugins.registerPlugin; +var PluginHeaderToolbar = wp.editPost.PluginDocumentSettingPanel; + +function MyHeaderToolbarPlugin() { + return el( + PluginHeaderToolbar, + { + className: 'plugin-header-toolbar-button', + contentClassName: 'plugin-header-toolbar-content', + position: 'bottom left', + renderContent: function() { return el(
Rendered Content
)} + }, + ); +} + +registerPlugin( 'my-header-toolbar-plugin', { + render: MyHeaderToolbarPlugin +} ); +``` + +```jsx +// Using ESNext syntax +const { registerPlugin } = wp.plugins; +const { PluginHeaderToolbar } = wp.editPost; + +const MyHeaderToolbarPlugin = () => ( +
Rendered Content
} + /> +); + + registerPlugin( 'my-header-toolbar-plugin', { render: MyDocumentSettingTest } ); +``` + +_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.position_ `[string]`: Optional. The title of the panel +- _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. + +_Returns_ + +- `WPComponent`: The component to be rendered. # **PluginMoreMenuItem** diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json index 45af01967f3a4..b6f26f07497f4 100644 --- a/packages/edit-post/package.json +++ b/packages/edit-post/package.json @@ -50,6 +50,7 @@ "@wordpress/primitives": "file:../primitives", "@wordpress/url": "file:../url", "@wordpress/viewport": "file:../viewport", + "@wordpress/warning": "file:../warning", "classnames": "^2.2.5", "lodash": "^4.17.15", "memize": "^1.1.0", 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 16e3a20cca832..9effe37f75a15 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -73,52 +73,36 @@ function HeaderToolbar( { onToggleInserter, isInserterOpen } ) { className="edit-post-header-toolbar" aria-label={ toolbarAriaLabel } > - - - { ( fillProps ) => { - return ( - <> - - { fillProps.isLargeViewport && ( - - ) } - - - - - { fillProps.displayBlockToolbar && ( -
- -
- ) } - - ); - } } - + { isLargeViewport && } + + + + + { isLargeViewport && } + { displayBlockToolbar && ( +
+ +
+ ) } ); } 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 index 3fb581c894a52..754199f51fe1a 100644 --- a/packages/edit-post/src/components/header/plugin-header-toolbar/index.js +++ b/packages/edit-post/src/components/header/plugin-header-toolbar/index.js @@ -1,11 +1,124 @@ +/** + * External dependencies + */ +import { isFunction } from 'lodash'; + /** * WordPress dependencies */ -import { createSlotFill } from '@wordpress/components'; +import { + createSlotFill, + Button, + __experimentalToolbarItem as 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' ); -const { Fill: PluginHeaderToolbar, Slot } = createSlotFill( - 'PluginHeaderToolbar' -); +const PluginHeaderToolbarFill = ( { + icon = pluginsIcon, + renderContent = null, + className = 'plugin-header-toolbar-button', + contentClassName = 'plugin-header-toolbar-content', + position = 'bottom right', +} ) => { + if ( null === renderContent || ! isFunction( renderContent ) ) { + warning( + 'PluginHeaderToolbar requires renderContent property to be specified and be a valid function.' + ); + return null; + } + return ( + + ( + ( +