Edit Post: Add basic support for sidebar pinning

WordPress · Apr 26, 2018 · 80b02c8 · 80b02c8
1 parent 7b766c2
commit 80b02c8
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 20 deletions.
diff --git a/edit-post/components/header/index.js b/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,
@@ -50,14 +51,17 @@ function Header( {
 						forceIsDirty={ hasActiveMetaboxes }
 						forceIsSaving={ isSaving }
 					/>
-					<IconButton
-						icon="admin-generic"
-						onClick={ toggleGeneralSidebar }
-						isToggled={ isEditorSidebarOpened }
-						label={ __( 'Settings' ) }
-						aria-expanded={ isEditorSidebarOpened }
-					/>
-					<MoreMenu key="more-menu" />
+					<PinnedPlugins>
+						<IconButton
+							icon="admin-generic"
+							onClick={ toggleGeneralSidebar }
+							isToggled={ isEditorSidebarOpened }
+							label={ __( 'Settings' ) }
+							aria-expanded={ isEditorSidebarOpened }
+						/>
+					</PinnedPlugins>
+					<PinnedPlugins.Slot />
+					<MoreMenu />
 				</div>
 			) }
 		</div>

diff --git a/edit-post/components/header/pinned-plugins/index.js b/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 = ( { fillProps } ) => (
+	<Slot fillProps={ fillProps }>
+		{ ( fills ) => ! isEmpty( fills ) && (
+			<div className="edit-post-pinned-plugins">
+				{ fills }
+			</div>
+		) }
+	</Slot>
+);
+
+export default PinnedPlugins;
diff --git a/edit-post/components/header/pinned-plugins/style.scss b/edit-post/components/header/pinned-plugins/style.scss
@@ -0,0 +1,3 @@
+.edit-post-pinned-plugins {
+	display: flex;
+}
diff --git a/edit-post/components/header/plugin-sidebar-more-menu-item/index.js b/edit-post/components/header/plugin-sidebar-more-menu-item/index.js
@@ -1,28 +1,42 @@
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/element';
+import { compose, Fragment } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { MenuItem } from '@wordpress/components';
+import { IconButton, MenuItem } from '@wordpress/components';
 import { withPluginContext } from '@wordpress/plugins';
 
 /**
  * Internal dependencies
  */
+import PinnedPlugins from '../pinned-plugins';
 import PluginsMoreMenuGroup from '../plugins-more-menu-group';
 
 const PluginSidebarMoreMenuItem = ( { children, isSelected, icon, onClick } ) => (
-	<PluginsMoreMenuGroup>
-		{ ( fillProps ) => (
-			<MenuItem
-				icon={ isSelected ? 'yes' : icon }
-				isSelected={ isSelected }
-				onClick={ compose( onClick, fillProps.onClose ) }
-			>
-				{ children }
-			</MenuItem>
+	<Fragment>
+		{ icon && (
+			<PinnedPlugins>
+				<IconButton
+					icon={ icon }
+					label={ children }
+					onClick={ onClick }
+					isToggled={ isSelected }
+					aria-expanded={ isSelected }
+				/>
+			</PinnedPlugins>
 		) }
-	</PluginsMoreMenuGroup>
+		<PluginsMoreMenuGroup>
+			{ ( fillProps ) => (
+				<MenuItem
+					icon={ isSelected ? 'yes' : icon }
+					isSelected={ isSelected }
+					onClick={ compose( onClick, fillProps.onClose ) }
+				>
+					{ children }
+				</MenuItem>
+			) }
+		</PluginsMoreMenuGroup>
+	</Fragment>
 );
 
 export default compose(