Plugins: Add pinning support for sidebar plugins

edit-post/README.md

@@ -29,6 +29,7 @@ const MyPluginSidebar = () => (
 	<PluginSidebar
 		name="my-sidebar"
 		title="My sidebar title"
+		icon="smiley"
 	>
 		<PanelBody>
 			{ __( 'My sidebar content' ) }
@@ -53,6 +54,22 @@ Title displayed at the top of the sidebar.
 - Type: `String`
 - Required: Yes
 
+##### isPinnable
+
+Whether to allow to pin sidebar to toolbar.
+
+- Type: `Boolean`
+- Required: No
+- Default: `true`
+
+##### icon
+
+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.
+
+- Type: `String` | `Element`
+- Required: No
+- Default: _inherits from the plugin_
+
 
 ### `PluginSidebarMoreMenuItem`
 
@@ -68,7 +85,7 @@ const { PluginSidebarMoreMenuItem } = wp.editPost;
 const MySidebarMoreMenuItem = () => (
 	<PluginSidebarMoreMenuItem
 		target="my-sidebar"
-		icon="yes"
+		icon="smiley"
 	>
 		{ __( 'My sidebar title' ) }
 	</PluginSidebarMoreMenuItem>
@@ -90,7 +107,7 @@ The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug st
 
 - Type: `String` | `Element`
 - Required: No
-
+- Default: _inherits from the plugin_
 
 ### `PluginPostStatusInfo`
 

edit-post/components/header/index.js

@@ -17,6 +17,7 @@ import { compose } from '@wordpress/element';
 import './style.scss';
 import MoreMenu from './more-menu';
 import HeaderToolbar from './header-toolbar';
+import PinnedPlugins from './pinned-plugins';
 
 function Header( {
 	isEditorSidebarOpened,
@@ -52,12 +53,13 @@ function Header( {
 					/>
 					<IconButton
 						icon="admin-generic"
+						label={ __( 'Settings' ) }
 						onClick={ toggleGeneralSidebar }
 						isToggled={ isEditorSidebarOpened }
-						label={ __( 'Settings' ) }
 						aria-expanded={ isEditorSidebarOpened }
 					/>
-					<MoreMenu key="more-menu" />
+					<PinnedPlugins.Slot />
+					<MoreMenu />
 				</div>
 			) }
 		</div>

edit-post/components/header/pinned-plugins/index.js

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const { Fill: PinnedPlugins, Slot } = createSlotFill( 'PinnedPlugins' );
+
+PinnedPlugins.Slot = ( props ) => (
+	<Slot { ...props }>
+		{ ( fills ) => ! isEmpty( fills ) && (
+			<div className="edit-post-pinned-plugins">
+				{ fills }
+			</div>
+		) }
+	</Slot>
+);
+
+export default PinnedPlugins;

edit-post/components/header/pinned-plugins/style.scss

@@ -0,0 +1,7 @@
+.edit-post-pinned-plugins {
+	display: flex;
+
+	.components-icon-button {
+		margin-left: 4px;
+	}
+}

edit-post/components/header/plugin-sidebar-more-menu-item/index.js

@@ -11,7 +11,7 @@ import { withPluginContext } from '@wordpress/plugins';
  */
 import PluginsMoreMenuGroup from '../plugins-more-menu-group';
 
-const PluginSidebarMoreMenuItem = ( { children, isSelected, icon, onClick } ) => (
+const PluginSidebarMoreMenuItem = ( { children, icon, isSelected, onClick } ) => (
 	<PluginsMoreMenuGroup>
 		{ ( fillProps ) => (
 			<MenuItem
@@ -26,14 +26,19 @@ const PluginSidebarMoreMenuItem = ( { children, isSelected, icon, onClick } ) =>
 );
 
 export default compose(
-	withPluginContext,
-	withSelect( ( select, ownProps ) => {
-		const { pluginContext, target } = ownProps;
-		const sidebarName = `${ pluginContext.name }/${ target }`;
+	withPluginContext( ( context, ownProps ) => {
+		return {
+			icon: ownProps.icon || context.icon,
+			sidebarName: `${ context.name }/${ ownProps.target }`,
+		};
+	} ),
+	withSelect( ( select, { sidebarName } ) => {
+		const {
+			getActiveGeneralSidebarName,
+		} = select( 'core/edit-post' );
 
 		return {
-			isSelected: select( 'core/edit-post' ).getActiveGeneralSidebarName() === sidebarName,
-			sidebarName,
+			isSelected: getActiveGeneralSidebarName() === sidebarName,
 		};
 	} ),
 	withDispatch( ( dispatch, { isSelected, sidebarName } ) => {

edit-post/components/sidebar/plugin-sidebar/index.js

@@ -1,37 +1,114 @@
 /**
  * WordPress dependencies
  */
-import { Panel } from '@wordpress/components';
+import { IconButton, Panel } from '@wordpress/components';
+import { withDispatch, withSelect } from '@wordpress/data';
+import { compose, Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { withPluginContext } from '@wordpress/plugins';
 
 /**
  * Internal dependencies
  */
+import PinnedPlugins from '../../header/pinned-plugins';
 import Sidebar from '../';
 import SidebarHeader from '../sidebar-header';
 
 /**
  * Renders the plugin sidebar component.
  *
+ * @param {Object} props Element props.
+ *
  * @return {WPElement} Plugin sidebar component.
  */
-function PluginSidebar( { children, name, pluginContext, title } ) {
+function PluginSidebar( props ) {
+	const {
+		children,
+		icon,
+		isActive,
+		isPinnable = true,
+		isPinned,
+		sidebarName,
+		title,
+		togglePin,
+		toggleSidebar,
+	} = props;
+
 	return (
-		<Sidebar
-			name={ `${ pluginContext.name }/${ name }` }
-			label={ __( 'Editor plugins' ) }
-		>
-			<SidebarHeader
-				closeLabel={ __( 'Close plugin' ) }
+		<Fragment>
+			{ isPinnable && (
+				<PinnedPlugins>
+					{ isPinned && <IconButton
+						icon={ icon }
+						label={ title }
+						onClick={ toggleSidebar }
+						isToggled={ isActive }
+						aria-expanded={ isActive }
+					/> }
+				</PinnedPlugins>
+			) }
+			<Sidebar
+				name={ sidebarName }
+				label={ __( 'Editor plugins' ) }
 			>
-				<strong>{ title }</strong>
-			</SidebarHeader>
-			<Panel>
-				{ children }
-			</Panel>
-		</Sidebar>
+				<SidebarHeader
+					closeLabel={ __( 'Close plugin' ) }
+				>
+					<strong>{ title }</strong>
+					{ isPinnable && (
+						<IconButton
+							icon={ isPinned ? 'star-filled' : 'star-empty' }
+							label={ isPinned ? __( 'Unpin from toolbar' ) : __( 'Pin to toolbar' ) }
+							onClick={ togglePin }
+							isToggled={ isPinned }
+							aria-expanded={ isPinned }
+						/>
+					) }
+				</SidebarHeader>
+				<Panel>
+					{ children }
+				</Panel>
+			</Sidebar>
+		</Fragment>
 	);
 }
 
-export default withPluginContext( PluginSidebar );
+export default compose(
+	withPluginContext( ( context, ownProps ) => {
+		return {
+			icon: ownProps.icon || context.icon,
+			sidebarName: `${ context.name }/${ ownProps.name }`,
+		};
+	} ),
+	withSelect( ( select, { sidebarName } ) => {
+		const {
+			getActiveGeneralSidebarName,
+			isPluginItemPinned,
+		} = select( 'core/edit-post' );
+
+		return {
+			isActive: getActiveGeneralSidebarName() === sidebarName,
+			isPinned: isPluginItemPinned( sidebarName ),
+		};
+	} ),
+	withDispatch( ( dispatch, { isActive, sidebarName } ) => {
+		const {
+			closeGeneralSidebar,
+			openGeneralSidebar,
+			togglePinnedPluginItem,
+		} = dispatch( 'core/edit-post' );
+
+		return {
+			togglePin() {
+				togglePinnedPluginItem( sidebarName );
+			},
+			toggleSidebar() {
+				if ( isActive ) {
+					closeGeneralSidebar();
+				} else {
+					openGeneralSidebar( sidebarName );
+				}
+			},
+		};
+	} ),
+)( PluginSidebar );

edit-post/components/sidebar/sidebar-header/style.scss

@@ -22,6 +22,10 @@
 		display: none;
 		margin-left: auto;
 
+		~ .components-icon-button {
+			margin-left: 0;
+		}
+
 		@include break-medium() {
 			display: flex;
 		}

edit-post/store/actions.js

@@ -73,7 +73,7 @@ export function toggleGeneralSidebarEditorPanel( panel ) {
 /**
  * Returns an action object used to toggle a feature flag.
  *
- * @param {string} feature Featurre name.
+ * @param {string} feature Feature name.
  *
  * @return {Object} Action object.
  */
@@ -91,6 +91,20 @@ export function switchEditorMode( mode ) {
 	};
 }
 
+/**
+ * Returns an action object used to toggle a plugin name flag.
+ *
+ * @param {string} pluginName Plugin name.
+ *
+ * @return {Object} Action object.
+ */
+export function togglePinnedPluginItem( pluginName ) {
+	return {
+		type: 'TOGGLE_PINNED_PLUGIN_ITEM',
+		pluginName,
+	};
+}
+
 /**
  * Returns an action object used to check the state of meta boxes at a location.
  *

edit-post/store/defaults.js

@@ -5,4 +5,5 @@ export const PREFERENCES_DEFAULTS = {
 	features: {
 		fixedToolbar: false,
 	},
+	pinnedPluginItems: {},
 };

edit-post/store/reducer.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -63,6 +68,15 @@ export const preferences = combineReducers( {
 
 		return state;
 	},
+	pinnedPluginItems( state = PREFERENCES_DEFAULTS.pinnedPluginItems, action ) {
+		if ( action.type === 'TOGGLE_PINNED_PLUGIN_ITEM' ) {
+			return {
+				...state,
+				[ action.pluginName ]: ! get( state, [ action.pluginName ], true ),
+			};
+		}
+		return state;
+	},
 } );
 
 export function panel( state = 'document', action ) {

edit-post/store/selectors.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import createSelector from 'rememo';
-import { includes, some } from 'lodash';
+import { get, includes, some } from 'lodash';
 
 /**
  * Returns the current editing mode.
@@ -108,6 +108,21 @@ export function isFeatureActive( state, feature ) {
 	return !! state.preferences.features[ feature ];
 }
 
+/**
+ * Returns true if the the plugin item is pinned to the header.
+ * When the value is not set it defaults to true.
+ *
+ * @param  {Object}  state      Global application state.
+ * @param  {string}  pluginName Plugin item name.
+ *
+ * @return {boolean} Whether the plugin item is pinned.
+ */
+export function isPluginItemPinned( state, pluginName ) {
+	const pinnedPluginItems = getPreference( state, 'pinnedPluginItems', {} );
+
+	return get( pinnedPluginItems, [ pluginName ], true );
+}
+
 /**
  * Returns the state of legacy meta boxes.
  *