Edit Post: Add store handling for pinned plugin items

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

@@ -16,13 +16,13 @@ const PluginSidebarMoreMenuItem = ( { children, icon, isPinned, isSelected, onCl
 	<Fragment>
 		{ isPinned && icon && (
 			<PinnedPlugins>
-				<IconButton
+				{ <IconButton
 					icon={ icon }
 					label={ children }
 					onClick={ onClick }
 					isToggled={ isSelected }
 					aria-expanded={ isSelected }
-				/>
+				/> }
 			</PinnedPlugins>
 		) }
 		<PluginsMoreMenuGroup>

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

@@ -63,6 +63,15 @@ export const preferences = combineReducers( {
 
 		return state;
 	},
+	pinnedPluginItems( state = PREFERENCES_DEFAULTS.pinnedPluginItems, action ) {
+		if ( action.type === 'TOGGLE_PINNED_PLUGIN_ITEM' ) {
+			return {
+				...state,
+				[ action.pluginName ]: ! state[ action.pluginName ],
+			};
+		}
+		return state;
+	},
 } );
 
 export function panel( state = 'document', action ) {

edit-post/store/selectors.js

@@ -108,6 +108,18 @@ export function isFeatureActive( state, feature ) {
 	return !! state.preferences.features[ feature ];
 }
 
+/**
+ * Returns true if the the plugin item is pinned to the header.
+ *
+ * @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 Boolean( pinnedPluginItems[ pluginName ] );
+}
+
 /**
  * Returns the state of legacy meta boxes.
  *
@@ -154,13 +166,3 @@ export const hasMetaBoxes = createSelector(
 export function isSavingMetaBoxes( state ) {
 	return state.isSavingMetaBoxes;
 }
-
-/**
- * Returns true if the the plugin item is pinned to the header.
- *
- * @param   {Object}  state Global application state.
- * @return {boolean}       Whether the plugin item is pinned.
- */
-export function isPluginItemPinned( state ) {
-	return Boolean( state );
-}

edit-post/store/test/actions.js

@@ -9,6 +9,7 @@ import {
 	closePublishSidebar,
 	togglePublishSidebar,
 	toggleFeature,
+	togglePinnedPluginItem,
 	requestMetaBoxUpdates,
 	initializeMetaBoxState,
 } from '../actions';
@@ -76,6 +77,17 @@ describe( 'actions', () => {
 		} );
 	} );
 
+	describe( 'togglePinnedPluginItem', () => {
+		it( 'should return TOGGLE_PINNED_PLUGIN_ITEM action', () => {
+			const pluginName = 'foo/bar';
+
+			expect( togglePinnedPluginItem( pluginName ) ).toEqual( {
+				type: 'TOGGLE_PINNED_PLUGIN_ITEM',
+				pluginName,
+			} );
+		} );
+	} );
+
 	describe( 'requestMetaBoxUpdates', () => {
 		it( 'should return the REQUEST_META_BOX_UPDATES action', () => {
 			expect( requestMetaBoxUpdates() ).toEqual( {

edit-post/store/test/reducer.js

@@ -22,6 +22,7 @@ describe( 'state', () => {
 				editorMode: 'visual',
 				panels: { 'post-status': true },
 				features: { fixedToolbar: false },
+				pinnedPluginItems: {},
 			} );
 		} );
 
@@ -50,6 +51,7 @@ describe( 'state', () => {
 				editorMode: 'visual',
 				panels: { 'post-status': true },
 				features: { fixedToolbar: false },
+				pinnedPluginItems: {},
 			} );
 		} );
 
@@ -113,6 +115,37 @@ describe( 'state', () => {
 
 			expect( state.features ).toEqual( { chicken: false } );
 		} );
+
+		describe( 'pinnedPluginItems', () => {
+			const initialState = deepFreeze( {
+				pinnedPluginItems: {
+					'foo/enabled': true,
+				},
+			} );
+
+			it( 'should enable a pinned plugin flag when the value does not exist', () => {
+				const state = preferences( initialState, {
+					type: 'TOGGLE_PINNED_PLUGIN_ITEM',
+					pluginName: 'foo/does-not-exist',
+				} );
+
+				expect( state.pinnedPluginItems ).toEqual( {
+					'foo/enabled': true,
+					'foo/does-not-exist': true,
+				} );
+			} );
+
+			it( 'should disable a pinned plugin flag when it is enabled', () => {
+				const state = preferences( initialState, {
+					type: 'TOGGLE_PINNED_PLUGIN_ITEM',
+					pluginName: 'foo/enabled',
+				} );
+
+				expect( state.pinnedPluginItems ).toEqual( {
+					'foo/enabled': false,
+				} );
+			} );
+		} );
 	} );
 
 	describe( 'isSavingMetaBoxes', () => {

edit-post/store/test/selectors.js

@@ -8,6 +8,7 @@ import {
 	isEditorSidebarPanelOpened,
 	isFeatureActive,
 	isPluginSidebarOpened,
+	isPluginItemPinned,
 	getMetaBoxes,
 	hasMetaBoxes,
 	isSavingMetaBoxes,
@@ -186,6 +187,25 @@ describe( 'selectors', () => {
 			expect( isFeatureActive( state, 'chicken' ) ).toBe( false );
 		} );
 	} );
+
+	describe( 'isPluginItemPinned', () => {
+		const state = {
+			preferences: {
+				pinnedPluginItems: {
+					'foo/bar': true,
+				},
+			},
+		};
+
+		it( 'should return false if plugin item is not pinned', () => {
+			expect( isPluginItemPinned( state, 'foo/unknown' ) ).toBe( false );
+		} );
+
+		it( 'should return true if plugin item item is pinned', () => {
+			expect( isPluginItemPinned( state, 'foo/bar' ) ).toBe( true );
+		} );
+	} );
+
 	describe( 'hasMetaBoxes', () => {
 		it( 'should return true if there are active meta boxes', () => {
 			const state = {