Update PluginHeaderToolbar slotfill.

WordPress · Jul 3, 2023 · a8ce626 · a8ce626
1 parent 6257c29
commit a8ce626
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 64 deletions.
diff --git 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 = () => (
+	<PluginHeaderToolbar
+		className="plugin-header-toolbar-button"
+		classContentName="plugin-header-toolbar-content"
+		renderContent={ () => <div>Rendered Content</div> }
+	/>
+);
+
+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
@@ -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 && (
+							<PluginHeaderToolbar.Slot
+								fillProps={ { showIconLabels } }
+							/>
+						) }
 					</>
 				) }
 			</div>

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
@@ -1,15 +1,10 @@
-/**
- * External dependencies
- */
-import { isFunction } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import {
 	createSlotFill,
 	Button,
-	__experimentalToolbarItem as ToolbarItem,
+	ToolbarItem,
 	Dropdown,
 } from '@wordpress/components';
 import warning from '@wordpress/warning';
@@ -19,12 +14,21 @@ 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',
-	position = 'bottom right',
 } ) => {
 	if ( null === renderContent || ! isFunction( renderContent ) ) {
 		warning(
@@ -34,83 +38,57 @@ const PluginHeaderToolbarFill = ( {
 	}
 	return (
 		<Fill>
-			<ToolbarItem
-				as={ () => (
-					<Dropdown
-						className={ className }
-						contentClassName={ contentClassName }
-						position={ position }
-						renderToggle={ ( { isOpen, onToggle } ) => (
-							<Button
-								onClick={ onToggle }
-								aria-expanded={ isOpen }
-								icon={ icon }
-							/>
-						) }
-						renderContent={ renderContent }
-					/>
-				) }
-			/>
+			{ ( { showIconLabels } ) => (
+				<ToolbarItem
+					showTooltip={ ! showIconLabels }
+					variant={ showIconLabels ? 'tertiary' : undefined }
+					as={ () => (
+						<Dropdown
+							className={ className }
+							contentClassName={ contentClassName }
+							popoverProps={ { placement: 'bottom-start' } }
+							renderToggle={ ( { isOpen, onToggle } ) => (
+								<Button
+									onClick={ onToggle }
+									aria-expanded={ isOpen }
+									icon={ icon }
+									className="components-button"
+								/>
+							) }
+							renderContent={ renderContent }
+						/>
+					) }
+				/>
+			) }
 		</Fill>
 	);
 };
 
 /**
- * Renders a button and association dropdown in the header toolbar
+ * Renders a button and association dropdown in the header toolbar.
  *
- * @param {Object} props Component properties.
- * @param {WPComponent} renderContent                                   The component to render as the UI for the dropdown.
- * @param {string} [props.className]                                    Optional. The class name for the button.
- * @param {string} [props.contentClassName]                             Optional. The class name of the dropdown item.
- * @param {string} [props.position]                                     Optional. The title of the panel
- * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] 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.
+ * @param {Object}                props                                 Component properties.
+ * @param {WPComponent}           renderContent                         The component to render as the UI for the dropdown.
+ * @param {string}                [props.className]                     Optional. The class name for the button.
+ * @param {string}                [props.contentClassName]              Optional. The class name of the dropdown item.
+ * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element.
  *
  * @example
- * <caption>ES5</caption>
  * ```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( <div>Rendered Content</div>)}
- * 		},
- * 	);
- * }
- *
- * registerPlugin( 'my-header-toolbar-plugin', {
- * 		render: MyHeaderToolbarPlugin
- * } );
- * ```
- *
- * @example
- * <caption>ESNext</caption>
- * ```jsx
- * // Using ESNext syntax
- * const { registerPlugin } = wp.plugins;
- * const { PluginHeaderToolbar } = wp.editPost;
+ * import { registerPlugin } from '@wordpress/plugins';
+ * import { PluginHeaderToolbar } from '@wordpress/edit-post';
  *
  * const MyHeaderToolbarPlugin = () => (
  * 		<PluginHeaderToolbar
  *          className="plugin-header-toolbar-button"
  *          classContentName="plugin-header-toolbar-content"
- *          position="bottom left"
  *          renderContent={() => <div>Rendered Content</div>}
  *        />
  *	);
  *
- *  registerPlugin( 'my-header-toolbar-plugin', { render: MyDocumentSettingTest } );
+ *  registerPlugin( 'my-header-toolbar-plugin', { render: MyHeaderToolbarPlugin, icon: 'smiley' } );
  * ```
  *
- * @return {WPComponent} The component to be rendered.
  */
 const PluginHeaderToolbar = compose(
 	withPluginContext( ( context, ownProps ) => {