Edit Post: Add pin button for the plugin sidebar

WordPress · May 7, 2018 · 8dc4fa2 · 8dc4fa2
1 parent 74f4a15
commit 8dc4fa2
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 11 deletions.
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
@@ -14,9 +14,9 @@ import PluginsMoreMenuGroup from '../plugins-more-menu-group';
 
 const PluginSidebarMoreMenuItem = ( { children, icon, isPinned, isSelected, onClick } ) => (
 	<Fragment>
-		{ isPinned && icon && (
+		{ icon && (
 			<PinnedPlugins>
-				{ <IconButton
+				{ isPinned && <IconButton
 					icon={ icon }
 					label={ children }
 					onClick={ onClick }
@@ -50,7 +50,7 @@ export default compose(
 		const sidebarName = `${ pluginContext.name }/${ target }`;
 
 		return {
-			isPinned: isPluginItemPinned( `sidebar/${ sidebarName }` ),
+			isPinned: isPluginItemPinned( sidebarName ),
 			isSelected: getActiveGeneralSidebarName() === sidebarName,
 			sidebarName,
 		};

diff --git a/edit-post/components/sidebar/plugin-sidebar/index.js b/edit-post/components/sidebar/plugin-sidebar/index.js
@@ -1,7 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { Panel } from '@wordpress/components';
+import { IconButton, Panel } from '@wordpress/components';
+import { withDispatch, withSelect } from '@wordpress/data';
+import { compose } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { withPluginContext } from '@wordpress/plugins';
 
@@ -16,16 +18,25 @@ import SidebarHeader from '../sidebar-header';
  *
  * @return {WPElement} Plugin sidebar component.
  */
-function PluginSidebar( { children, name, pluginContext, title } ) {
+function PluginSidebar( { children, isPinned, sidebarName, title, togglePin, pinnable = true } ) {
 	return (
 		<Sidebar
-			name={ `${ pluginContext.name }/${ name }` }
+			name={ sidebarName }
 			label={ __( 'Editor plugins' ) }
 		>
 			<SidebarHeader
 				closeLabel={ __( 'Close plugin' ) }
 			>
 				<strong>{ title }</strong>
+				{ pinnable && (
+					<IconButton
+						onClick={ togglePin }
+						icon={ isPinned ? 'star-filled' : 'star-empty' }
+						label={ isPinned ? __( 'Unpin plugin' ) : __( 'Pin plugin' ) }
+						isToggled={ isPinned }
+						aria-expanded={ isPinned }
+					/>
+				) }
 			</SidebarHeader>
 			<Panel>
 				{ children }
@@ -34,4 +45,28 @@ function PluginSidebar( { children, name, pluginContext, title } ) {
 	);
 }
 
-export default withPluginContext( PluginSidebar );
+export default compose(
+	withPluginContext,
+	withSelect( ( select, { name, pluginContext } ) => {
+		const {
+			isPluginItemPinned,
+		} = select( 'core/edit-post' );
+		const sidebarName = `${ pluginContext.name }/${ name }`;
+
+		return {
+			isPinned: isPluginItemPinned( sidebarName ),
+			sidebarName,
+		};
+	} ),
+	withDispatch( ( dispatch, { sidebarName } ) => {
+		const {
+			togglePinnedPluginItem,
+		} = dispatch( 'core/edit-post' );
+
+		return {
+			togglePin() {
+				togglePinnedPluginItem( sidebarName );
+			},
+		};
+	} ),
+)( PluginSidebar );
diff --git a/edit-post/store/test/selectors.js b/edit-post/store/test/selectors.js
@@ -192,17 +192,22 @@ describe( 'selectors', () => {
 		const state = {
 			preferences: {
 				pinnedPluginItems: {
-					'foo/bar': true,
+					'foo/pinned': true,
+					'foo/unpinned': false,
 				},
 			},
 		};
 
-		it( 'should return false if plugin item is not pinned', () => {
+		it( 'should return false if the flag is not set for the plugin item', () => {
 			expect( isPluginItemPinned( state, 'foo/unknown' ) ).toBe( false );
 		} );
 
-		it( 'should return true if plugin item item is pinned', () => {
-			expect( isPluginItemPinned( state, 'foo/bar' ) ).toBe( true );
+		it( 'should return true if plugin item is not pinned', () => {
+			expect( isPluginItemPinned( state, 'foo/pinned' ) ).toBe( true );
+		} );
+
+		it( 'should return false if plugin item item is unpinned', () => {
+			expect( isPluginItemPinned( state, 'foo/unpinned' ) ).toBe( false );
 		} );
 	} );