From f0a203a285c398112a83f105624f82ab201e6f86 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Thu, 26 Apr 2018 13:54:31 +0200
Subject: [PATCH 01/14] Edit Post: Add basic support for sidebar pinning

---
 edit-post/components/header/index.js          | 20 ++++++----
 .../components/header/pinned-plugins/index.js | 28 ++++++++++++++
 .../header/pinned-plugins/style.scss          |  3 ++
 .../plugin-sidebar-more-menu-item/index.js    | 38 +++++++++++++------
 4 files changed, 69 insertions(+), 20 deletions(-)
 create mode 100644 edit-post/components/header/pinned-plugins/index.js
 create mode 100644 edit-post/components/header/pinned-plugins/style.scss

diff --git a/edit-post/components/header/index.js b/edit-post/components/header/index.js
index 54aa040924982b..d617b181e2946a 100644
--- 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
new file mode 100644
index 00000000000000..2dbf5b50a420c8
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..2d87689705ffb5
--- /dev/null
+++ 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
index d138ecf2167bf4..e631d25565cc44 100644
--- 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(

From 620fc0d4359d5c24c8be4e702ed7c5e195703ea8 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Thu, 26 Apr 2018 17:20:41 +0200
Subject: [PATCH 02/14] Edit Post: Store pinned items in the persistent state

---
 .../header/plugin-sidebar-more-menu-item/index.js     | 11 ++++++++---
 edit-post/store/selectors.js                          | 10 ++++++++++
 2 files changed, 18 insertions(+), 3 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
index e631d25565cc44..8d5e984038e261 100644
--- a/edit-post/components/header/plugin-sidebar-more-menu-item/index.js
+++ b/edit-post/components/header/plugin-sidebar-more-menu-item/index.js
@@ -12,9 +12,9 @@ import { withPluginContext } from '@wordpress/plugins';
 import PinnedPlugins from '../pinned-plugins';
 import PluginsMoreMenuGroup from '../plugins-more-menu-group';
 
-const PluginSidebarMoreMenuItem = ( { children, isSelected, icon, onClick } ) => (
+const PluginSidebarMoreMenuItem = ( { children, icon, isPinned, isSelected, onClick } ) => (
 	<Fragment>
-		{ icon && (
+		{ isPinned && icon && (
 			<PinnedPlugins>
 				<IconButton
 					icon={ icon }
@@ -42,11 +42,16 @@ const PluginSidebarMoreMenuItem = ( { children, isSelected, icon, onClick } ) =>
 export default compose(
 	withPluginContext,
 	withSelect( ( select, ownProps ) => {
+		const {
+			getActiveGeneralSidebarName,
+			isPluginItemPinned,
+		} = select( 'core/edit-post' );
 		const { pluginContext, target } = ownProps;
 		const sidebarName = `${ pluginContext.name }/${ target }`;
 
 		return {
-			isSelected: select( 'core/edit-post' ).getActiveGeneralSidebarName() === sidebarName,
+			isPinned: isPluginItemPinned( `sidebar/${ sidebarName }` ),
+			isSelected: getActiveGeneralSidebarName() === sidebarName,
 			sidebarName,
 		};
 	} ),
diff --git a/edit-post/store/selectors.js b/edit-post/store/selectors.js
index f34c0df9e5a2e4..7d6cdbe0ae7e39 100644
--- a/edit-post/store/selectors.js
+++ b/edit-post/store/selectors.js
@@ -154,3 +154,13 @@ 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 );
+}

From b3bed339ba51db434de368c37113c407e0ea1dcf Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Mon, 7 May 2018 14:03:44 +0200
Subject: [PATCH 03/14] Edit Post: Make Document Setting button independent'

---
 edit-post/components/header/index.js | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/edit-post/components/header/index.js b/edit-post/components/header/index.js
index d617b181e2946a..505c98de056d49 100644
--- a/edit-post/components/header/index.js
+++ b/edit-post/components/header/index.js
@@ -51,15 +51,13 @@ function Header( {
 						forceIsDirty={ hasActiveMetaboxes }
 						forceIsSaving={ isSaving }
 					/>
-					<PinnedPlugins>
-						<IconButton
-							icon="admin-generic"
-							onClick={ toggleGeneralSidebar }
-							isToggled={ isEditorSidebarOpened }
-							label={ __( 'Settings' ) }
-							aria-expanded={ isEditorSidebarOpened }
-						/>
-					</PinnedPlugins>
+					<IconButton
+						icon="admin-generic"
+						onClick={ toggleGeneralSidebar }
+						isToggled={ isEditorSidebarOpened }
+						label={ __( 'Settings' ) }
+						aria-expanded={ isEditorSidebarOpened }
+					/>
 					<PinnedPlugins.Slot />
 					<MoreMenu />
 				</div>

From f38655c7e3bef5603e8909515787672d3519cf1a Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Mon, 7 May 2018 14:59:33 +0200
Subject: [PATCH 04/14] Edit Post: Add store handling for pinned plugin items

---
 .../plugin-sidebar-more-menu-item/index.js    |  4 +--
 edit-post/store/actions.js                    | 16 ++++++++-
 edit-post/store/defaults.js                   |  1 +
 edit-post/store/reducer.js                    |  9 +++++
 edit-post/store/selectors.js                  | 22 +++++++------
 edit-post/store/test/actions.js               | 12 +++++++
 edit-post/store/test/reducer.js               | 33 +++++++++++++++++++
 edit-post/store/test/selectors.js             | 20 +++++++++++
 8 files changed, 104 insertions(+), 13 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
index 8d5e984038e261..34f0efe526793f 100644
--- a/edit-post/components/header/plugin-sidebar-more-menu-item/index.js
+++ b/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>
diff --git a/edit-post/store/actions.js b/edit-post/store/actions.js
index 44dfa42034f506..9dc36880564f9e 100644
--- a/edit-post/store/actions.js
+++ b/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.
  *
diff --git a/edit-post/store/defaults.js b/edit-post/store/defaults.js
index 5b20d0ec189817..05471c598a7210 100644
--- a/edit-post/store/defaults.js
+++ b/edit-post/store/defaults.js
@@ -5,4 +5,5 @@ export const PREFERENCES_DEFAULTS = {
 	features: {
 		fixedToolbar: false,
 	},
+	pinnedPluginItems: {},
 };
diff --git a/edit-post/store/reducer.js b/edit-post/store/reducer.js
index 183d623d8f572b..db923f8a0d1cfd 100644
--- a/edit-post/store/reducer.js
+++ b/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 ) {
diff --git a/edit-post/store/selectors.js b/edit-post/store/selectors.js
index 7d6cdbe0ae7e39..31e75431c43ecf 100644
--- a/edit-post/store/selectors.js
+++ b/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 );
-}
diff --git a/edit-post/store/test/actions.js b/edit-post/store/test/actions.js
index 5da68294a71cd9..c0ae7ea9753aaa 100644
--- a/edit-post/store/test/actions.js
+++ b/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( {
diff --git a/edit-post/store/test/reducer.js b/edit-post/store/test/reducer.js
index 8c1742f258da92..83e702ee79b847 100644
--- a/edit-post/store/test/reducer.js
+++ b/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', () => {
diff --git a/edit-post/store/test/selectors.js b/edit-post/store/test/selectors.js
index 6c2dbbd87e8ebb..8a268d0b7b8c51 100644
--- a/edit-post/store/test/selectors.js
+++ b/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 = {

From ef6e9694e0b7d014d63a1f5e6923e671f45cda65 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Mon, 7 May 2018 15:38:19 +0200
Subject: [PATCH 05/14] Edit Post: Add pin button for the plugin sidebar

---
 .../plugin-sidebar-more-menu-item/index.js    |  6 +--
 .../sidebar/plugin-sidebar/index.js           | 43 +++++++++++++++++--
 edit-post/store/test/selectors.js             | 13 ++++--
 3 files changed, 51 insertions(+), 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
index 34f0efe526793f..b98c48c8fb5a66 100644
--- 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
index e0a110645de5b8..316153d419cde0 100644
--- 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
index 8a268d0b7b8c51..b237e8a458f497 100644
--- 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 );
 		} );
 	} );
 

From a122ca86f5d2533e688f74a08aebd219f62093e3 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Mon, 7 May 2018 16:08:59 +0200
Subject: [PATCH 06/14] Edit Post: Improve how pin/unpin button is displayed

---
 edit-post/components/sidebar/plugin-sidebar/index.js   | 2 +-
 edit-post/components/sidebar/sidebar-header/style.scss | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/edit-post/components/sidebar/plugin-sidebar/index.js b/edit-post/components/sidebar/plugin-sidebar/index.js
index 316153d419cde0..e6da186602ef48 100644
--- a/edit-post/components/sidebar/plugin-sidebar/index.js
+++ b/edit-post/components/sidebar/plugin-sidebar/index.js
@@ -32,7 +32,7 @@ function PluginSidebar( { children, isPinned, sidebarName, title, togglePin, pin
 					<IconButton
 						onClick={ togglePin }
 						icon={ isPinned ? 'star-filled' : 'star-empty' }
-						label={ isPinned ? __( 'Unpin plugin' ) : __( 'Pin plugin' ) }
+						label={ isPinned ? __( 'Unpin from toolbar' ) : __( 'Pin to toolbar' ) }
 						isToggled={ isPinned }
 						aria-expanded={ isPinned }
 					/>
diff --git a/edit-post/components/sidebar/sidebar-header/style.scss b/edit-post/components/sidebar/sidebar-header/style.scss
index 3fef4be85c43a3..3923f212251e5c 100644
--- a/edit-post/components/sidebar/sidebar-header/style.scss
+++ b/edit-post/components/sidebar/sidebar-header/style.scss
@@ -20,7 +20,11 @@
 
 	.components-icon-button {
 		display: none;
-		margin-left: auto;
+		margin-left: 0;
+
+		&:first-of-type {
+			margin-left: auto;
+		}
 
 		@include break-medium() {
 			display: flex;

From fdd1ec5a0ed3bc2ac7983ce34138faacb69a5087 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Tue, 8 May 2018 18:34:55 +0200
Subject: [PATCH 07/14] Edit Post: Make pinning bundled with the sidebar

---
 edit-post/README.md                           | 16 ++++
 .../plugin-sidebar-more-menu-item/index.js    | 42 +++-------
 .../sidebar/plugin-sidebar/index.js           | 83 +++++++++++++------
 3 files changed, 88 insertions(+), 53 deletions(-)

diff --git a/edit-post/README.md b/edit-post/README.md
index fdfac66c203ccf..7797f7480dc6fa 100644
--- a/edit-post/README.md
+++ b/edit-post/README.md
@@ -53,6 +53,22 @@ Title displayed at the top of the sidebar.
 - Type: `String`
 - Required: Yes
 
+##### pinnable
+
+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: `admin-plugins`
+
 
 ### `PluginSidebarMoreMenuItem`
 
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
index b98c48c8fb5a66..f3beccf6a00893 100644
--- 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,42 +1,28 @@
 /**
  * WordPress dependencies
  */
-import { compose, Fragment } from '@wordpress/element';
+import { compose } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { IconButton, MenuItem } from '@wordpress/components';
+import { 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, icon, isPinned, isSelected, onClick } ) => (
-	<Fragment>
-		{ icon && (
-			<PinnedPlugins>
-				{ isPinned && <IconButton
-					icon={ icon }
-					label={ children }
-					onClick={ onClick }
-					isToggled={ isSelected }
-					aria-expanded={ isSelected }
-				/> }
-			</PinnedPlugins>
+const PluginSidebarMoreMenuItem = ( { children, icon, isSelected, onClick } ) => (
+	<PluginsMoreMenuGroup>
+		{ ( fillProps ) => (
+			<MenuItem
+				icon={ isSelected ? 'yes' : icon }
+				isSelected={ isSelected }
+				onClick={ compose( onClick, fillProps.onClose ) }
+			>
+				{ children }
+			</MenuItem>
 		) }
-		<PluginsMoreMenuGroup>
-			{ ( fillProps ) => (
-				<MenuItem
-					icon={ isSelected ? 'yes' : icon }
-					isSelected={ isSelected }
-					onClick={ compose( onClick, fillProps.onClose ) }
-				>
-					{ children }
-				</MenuItem>
-			) }
-		</PluginsMoreMenuGroup>
-	</Fragment>
+	</PluginsMoreMenuGroup>
 );
 
 export default compose(
@@ -44,13 +30,11 @@ export default compose(
 	withSelect( ( select, ownProps ) => {
 		const {
 			getActiveGeneralSidebarName,
-			isPluginItemPinned,
 		} = select( 'core/edit-post' );
 		const { pluginContext, target } = ownProps;
 		const sidebarName = `${ pluginContext.name }/${ target }`;
 
 		return {
-			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
index e6da186602ef48..4f57a4637b5f7f 100644
--- a/edit-post/components/sidebar/plugin-sidebar/index.js
+++ b/edit-post/components/sidebar/plugin-sidebar/index.js
@@ -3,45 +3,72 @@
  */
 import { IconButton, Panel } from '@wordpress/components';
 import { withDispatch, withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/element';
+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, isPinned, sidebarName, title, togglePin, pinnable = true } ) {
+function PluginSidebar( props ) {
+	const {
+		children,
+		icon = 'admin-plugins',
+		isActive,
+		isPinned,
+		pinnable = true,
+		sidebarName,
+		title,
+		togglePin,
+		toggleSidebar,
+	} = props;
+
 	return (
-		<Sidebar
-			name={ sidebarName }
-			label={ __( 'Editor plugins' ) }
-		>
-			<SidebarHeader
-				closeLabel={ __( 'Close plugin' ) }
+		<Fragment>
+			{ pinnable && (
+				<PinnedPlugins>
+					{ isPinned && <IconButton
+						icon={ icon }
+						label={ title }
+						onClick={ toggleSidebar }
+						isToggled={ isActive }
+						aria-expanded={ isActive }
+					/> }
+				</PinnedPlugins>
+			) }
+			<Sidebar
+				name={ sidebarName }
+				label={ __( 'Editor plugins' ) }
 			>
-				<strong>{ title }</strong>
-				{ pinnable && (
-					<IconButton
-						onClick={ togglePin }
-						icon={ isPinned ? 'star-filled' : 'star-empty' }
-						label={ isPinned ? __( 'Unpin from toolbar' ) : __( 'Pin to toolbar' ) }
-						isToggled={ isPinned }
-						aria-expanded={ isPinned }
-					/>
-				) }
-			</SidebarHeader>
-			<Panel>
-				{ children }
-			</Panel>
-		</Sidebar>
+				<SidebarHeader
+					closeLabel={ __( 'Close plugin' ) }
+				>
+					<strong>{ title }</strong>
+					{ pinnable && (
+						<IconButton
+							onClick={ togglePin }
+							icon={ isPinned ? 'star-filled' : 'star-empty' }
+							label={ isPinned ? __( 'Unpin from toolbar' ) : __( 'Pin to toolbar' ) }
+							isToggled={ isPinned }
+							aria-expanded={ isPinned }
+						/>
+					) }
+				</SidebarHeader>
+				<Panel>
+					{ children }
+				</Panel>
+			</Sidebar>
+		</Fragment>
 	);
 }
 
@@ -49,17 +76,20 @@ export default compose(
 	withPluginContext,
 	withSelect( ( select, { name, pluginContext } ) => {
 		const {
+			getActiveGeneralSidebarName,
 			isPluginItemPinned,
 		} = select( 'core/edit-post' );
 		const sidebarName = `${ pluginContext.name }/${ name }`;
 
 		return {
+			isActive: getActiveGeneralSidebarName() === sidebarName,
 			isPinned: isPluginItemPinned( sidebarName ),
 			sidebarName,
 		};
 	} ),
-	withDispatch( ( dispatch, { sidebarName } ) => {
+	withDispatch( ( dispatch, { isActive, sidebarName } ) => {
 		const {
+			closeGeneralSidebar,
 			togglePinnedPluginItem,
 		} = dispatch( 'core/edit-post' );
 
@@ -67,6 +97,11 @@ export default compose(
 			togglePin() {
 				togglePinnedPluginItem( sidebarName );
 			},
+			toggleSidebar() {
+				if ( isActive ) {
+					closeGeneralSidebar();
+				}
+			},
 		};
 	} ),
 )( PluginSidebar );

From ea0e1063258bdaedc9ee9c4251025006c10226b9 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Tue, 8 May 2018 18:55:21 +0200
Subject: [PATCH 08/14] Edit Post: Make sidebars pinned by default

---
 .../sidebar/plugin-sidebar/index.js           |  3 +++
 edit-post/store/reducer.js                    |  9 ++++++++-
 edit-post/store/selectors.js                  |  9 +++++++--
 edit-post/store/test/reducer.js               | 19 ++++++++++++-------
 edit-post/store/test/selectors.js             |  4 ++--
 5 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/edit-post/components/sidebar/plugin-sidebar/index.js b/edit-post/components/sidebar/plugin-sidebar/index.js
index 4f57a4637b5f7f..b3a74e0d406c92 100644
--- a/edit-post/components/sidebar/plugin-sidebar/index.js
+++ b/edit-post/components/sidebar/plugin-sidebar/index.js
@@ -90,6 +90,7 @@ export default compose(
 	withDispatch( ( dispatch, { isActive, sidebarName } ) => {
 		const {
 			closeGeneralSidebar,
+			openGeneralSidebar,
 			togglePinnedPluginItem,
 		} = dispatch( 'core/edit-post' );
 
@@ -100,6 +101,8 @@ export default compose(
 			toggleSidebar() {
 				if ( isActive ) {
 					closeGeneralSidebar();
+				} else {
+					openGeneralSidebar( sidebarName );
 				}
 			},
 		};
diff --git a/edit-post/store/reducer.js b/edit-post/store/reducer.js
index db923f8a0d1cfd..2c46bb379b5f11 100644
--- a/edit-post/store/reducer.js
+++ b/edit-post/store/reducer.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { isUndefined } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -67,7 +72,9 @@ export const preferences = combineReducers( {
 		if ( action.type === 'TOGGLE_PINNED_PLUGIN_ITEM' ) {
 			return {
 				...state,
-				[ action.pluginName ]: ! state[ action.pluginName ],
+				[ action.pluginName ]: isUndefined( state[ action.pluginName ] ) ?
+					false :
+					! state[ action.pluginName ],
 			};
 		}
 		return state;
diff --git a/edit-post/store/selectors.js b/edit-post/store/selectors.js
index 31e75431c43ecf..194bbf15ddf417 100644
--- a/edit-post/store/selectors.js
+++ b/edit-post/store/selectors.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import createSelector from 'rememo';
-import { includes, some } from 'lodash';
+import { includes, isUndefined, some } from 'lodash';
 
 /**
  * Returns the current editing mode.
@@ -110,14 +110,19 @@ export function isFeatureActive( state, 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 defaultValue = true;
 	const pinnedPluginItems = getPreference( state, 'pinnedPluginItems', {} );
-	return Boolean( pinnedPluginItems[ pluginName ] );
+
+	return isUndefined( pinnedPluginItems[ pluginName ] ) ?
+		defaultValue :
+		Boolean( pinnedPluginItems[ pluginName ] );
 }
 
 /**
diff --git a/edit-post/store/test/reducer.js b/edit-post/store/test/reducer.js
index 83e702ee79b847..18bdf6cfbbd6e1 100644
--- a/edit-post/store/test/reducer.js
+++ b/edit-post/store/test/reducer.js
@@ -120,19 +120,17 @@ describe( 'state', () => {
 			const initialState = deepFreeze( {
 				pinnedPluginItems: {
 					'foo/enabled': true,
+					'foo/disabled': false,
 				},
 			} );
 
-			it( 'should enable a pinned plugin flag when the value does not exist', () => {
+			it( 'should disable 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,
-				} );
+				expect( state.pinnedPluginItems[ 'foo/does-not-exist' ] ).toBe( false );
 			} );
 
 			it( 'should disable a pinned plugin flag when it is enabled', () => {
@@ -141,9 +139,16 @@ describe( 'state', () => {
 					pluginName: 'foo/enabled',
 				} );
 
-				expect( state.pinnedPluginItems ).toEqual( {
-					'foo/enabled': false,
+				expect( state.pinnedPluginItems[ 'foo/enabled' ] ).toBe( false );
+			} );
+
+			it( 'should enable a pinned plugin flag when it is disabled', () => {
+				const state = preferences( initialState, {
+					type: 'TOGGLE_PINNED_PLUGIN_ITEM',
+					pluginName: 'foo/disabled',
 				} );
+
+				expect( state.pinnedPluginItems[ 'foo/disabled' ] ).toBe( true );
 			} );
 		} );
 	} );
diff --git a/edit-post/store/test/selectors.js b/edit-post/store/test/selectors.js
index b237e8a458f497..d706c4b3ecfc65 100644
--- a/edit-post/store/test/selectors.js
+++ b/edit-post/store/test/selectors.js
@@ -198,8 +198,8 @@ describe( 'selectors', () => {
 			},
 		};
 
-		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 the flag is not set for the plugin item', () => {
+			expect( isPluginItemPinned( state, 'foo/unknown' ) ).toBe( true );
 		} );
 
 		it( 'should return true if plugin item is not pinned', () => {

From 4a18508bb4da894068b1167158e17d6e234104da Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Wed, 9 May 2018 07:21:29 +0200
Subject: [PATCH 09/14] Edit Post: Address feedback from review

---
 edit-post/README.md                                  | 3 ++-
 edit-post/components/header/index.js                 | 2 +-
 edit-post/components/header/pinned-plugins/index.js  | 4 ++--
 edit-post/components/sidebar/plugin-sidebar/index.js | 8 ++++----
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/edit-post/README.md b/edit-post/README.md
index 7797f7480dc6fa..21dfc79a7c3c4d 100644
--- a/edit-post/README.md
+++ b/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,7 +54,7 @@ Title displayed at the top of the sidebar.
 - Type: `String`
 - Required: Yes
 
-##### pinnable
+##### isPinnable
 
 Whether to allow to pin sidebar to toolbar.
 
diff --git a/edit-post/components/header/index.js b/edit-post/components/header/index.js
index 505c98de056d49..fdaa63dc777a67 100644
--- a/edit-post/components/header/index.js
+++ b/edit-post/components/header/index.js
@@ -53,9 +53,9 @@ function Header( {
 					/>
 					<IconButton
 						icon="admin-generic"
+						label={ __( 'Settings' ) }
 						onClick={ toggleGeneralSidebar }
 						isToggled={ isEditorSidebarOpened }
-						label={ __( 'Settings' ) }
 						aria-expanded={ isEditorSidebarOpened }
 					/>
 					<PinnedPlugins.Slot />
diff --git a/edit-post/components/header/pinned-plugins/index.js b/edit-post/components/header/pinned-plugins/index.js
index 2dbf5b50a420c8..5c6c59c9a4f045 100644
--- a/edit-post/components/header/pinned-plugins/index.js
+++ b/edit-post/components/header/pinned-plugins/index.js
@@ -15,8 +15,8 @@ import './style.scss';
 
 const { Fill: PinnedPlugins, Slot } = createSlotFill( 'PinnedPlugins' );
 
-PinnedPlugins.Slot = ( { fillProps } ) => (
-	<Slot fillProps={ fillProps }>
+PinnedPlugins.Slot = ( props ) => (
+	<Slot { ...props }>
 		{ ( fills ) => ! isEmpty( fills ) && (
 			<div className="edit-post-pinned-plugins">
 				{ fills }
diff --git a/edit-post/components/sidebar/plugin-sidebar/index.js b/edit-post/components/sidebar/plugin-sidebar/index.js
index b3a74e0d406c92..522014c6163503 100644
--- a/edit-post/components/sidebar/plugin-sidebar/index.js
+++ b/edit-post/components/sidebar/plugin-sidebar/index.js
@@ -25,8 +25,8 @@ function PluginSidebar( props ) {
 		children,
 		icon = 'admin-plugins',
 		isActive,
+		isPinnable = true,
 		isPinned,
-		pinnable = true,
 		sidebarName,
 		title,
 		togglePin,
@@ -35,7 +35,7 @@ function PluginSidebar( props ) {
 
 	return (
 		<Fragment>
-			{ pinnable && (
+			{ isPinnable && (
 				<PinnedPlugins>
 					{ isPinned && <IconButton
 						icon={ icon }
@@ -54,11 +54,11 @@ function PluginSidebar( props ) {
 					closeLabel={ __( 'Close plugin' ) }
 				>
 					<strong>{ title }</strong>
-					{ pinnable && (
+					{ isPinnable && (
 						<IconButton
-							onClick={ togglePin }
 							icon={ isPinned ? 'star-filled' : 'star-empty' }
 							label={ isPinned ? __( 'Unpin from toolbar' ) : __( 'Pin to toolbar' ) }
+							onClick={ togglePin }
 							isToggled={ isPinned }
 							aria-expanded={ isPinned }
 						/>

From 1dadf637a8a6dd4000d8f14fd1c2fe57c97cdc66 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Sun, 13 May 2018 09:56:35 +0200
Subject: [PATCH 10/14] Edit Post: Use lodash get for pinned pluging items
 state

---
 edit-post/store/reducer.js   | 6 ++----
 edit-post/store/selectors.js | 7 ++-----
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/edit-post/store/reducer.js b/edit-post/store/reducer.js
index 2c46bb379b5f11..e335843620c134 100644
--- a/edit-post/store/reducer.js
+++ b/edit-post/store/reducer.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isUndefined } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -72,9 +72,7 @@ export const preferences = combineReducers( {
 		if ( action.type === 'TOGGLE_PINNED_PLUGIN_ITEM' ) {
 			return {
 				...state,
-				[ action.pluginName ]: isUndefined( state[ action.pluginName ] ) ?
-					false :
-					! state[ action.pluginName ],
+				[ action.pluginName ]: ! get( state, [ action.pluginName ], true ),
 			};
 		}
 		return state;
diff --git a/edit-post/store/selectors.js b/edit-post/store/selectors.js
index 194bbf15ddf417..16348eba257819 100644
--- a/edit-post/store/selectors.js
+++ b/edit-post/store/selectors.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import createSelector from 'rememo';
-import { includes, isUndefined, some } from 'lodash';
+import { get, includes, some } from 'lodash';
 
 /**
  * Returns the current editing mode.
@@ -117,12 +117,9 @@ export function isFeatureActive( state, feature ) {
  * @return {boolean}            Whether the plugin item is pinned.
  */
 export function isPluginItemPinned( state, pluginName ) {
-	const defaultValue = true;
 	const pinnedPluginItems = getPreference( state, 'pinnedPluginItems', {} );
 
-	return isUndefined( pinnedPluginItems[ pluginName ] ) ?
-		defaultValue :
-		Boolean( pinnedPluginItems[ pluginName ] );
+	return get( pinnedPluginItems, [ pluginName ], true );
 }
 
 /**

From ba1ffe5785890490d114072a7f0bc706d07f7193 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Sun, 13 May 2018 10:34:45 +0200
Subject: [PATCH 11/14] Plugins: Add icon support for the registered plugin

---
 edit-post/README.md                             |  6 +++---
 .../plugin-sidebar-more-menu-item/index.js      |  4 ++--
 .../components/sidebar/plugin-sidebar/index.js  |  5 +++--
 plugins/README.md                               |  7 +++++--
 plugins/api/index.js                            | 14 +++++++++-----
 plugins/api/test/index.js                       | 17 ++++++++++++++---
 plugins/components/plugin-area/index.js         |  3 ++-
 plugins/components/plugin-context/index.js      |  1 +
 8 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/edit-post/README.md b/edit-post/README.md
index 21dfc79a7c3c4d..b6ce382fea42cf 100644
--- a/edit-post/README.md
+++ b/edit-post/README.md
@@ -68,7 +68,7 @@ The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug st
 
 - Type: `String` | `Element`
 - Required: No
-- Default: `admin-plugins`
+- Default: _inherits from the plugin_
 
 
 ### `PluginSidebarMoreMenuItem`
@@ -85,7 +85,7 @@ const { PluginSidebarMoreMenuItem } = wp.editPost;
 const MySidebarMoreMenuItem = () => (
 	<PluginSidebarMoreMenuItem
 		target="my-sidebar"
-		icon="yes"
+		icon="smiley"
 	>
 		{ __( 'My sidebar title' ) }
 	</PluginSidebarMoreMenuItem>
@@ -107,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`
 
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
index f3beccf6a00893..fb80acef9e2ae3 100644
--- a/edit-post/components/header/plugin-sidebar-more-menu-item/index.js
+++ b/edit-post/components/header/plugin-sidebar-more-menu-item/index.js
@@ -27,14 +27,14 @@ const PluginSidebarMoreMenuItem = ( { children, icon, isSelected, onClick } ) =>
 
 export default compose(
 	withPluginContext,
-	withSelect( ( select, ownProps ) => {
+	withSelect( ( select, { icon, pluginContext, target } ) => {
 		const {
 			getActiveGeneralSidebarName,
 		} = select( 'core/edit-post' );
-		const { pluginContext, target } = ownProps;
 		const sidebarName = `${ pluginContext.name }/${ target }`;
 
 		return {
+			icon: icon || pluginContext.icon,
 			isSelected: getActiveGeneralSidebarName() === sidebarName,
 			sidebarName,
 		};
diff --git a/edit-post/components/sidebar/plugin-sidebar/index.js b/edit-post/components/sidebar/plugin-sidebar/index.js
index 522014c6163503..d9ca9bb395b5d0 100644
--- a/edit-post/components/sidebar/plugin-sidebar/index.js
+++ b/edit-post/components/sidebar/plugin-sidebar/index.js
@@ -23,7 +23,7 @@ import SidebarHeader from '../sidebar-header';
 function PluginSidebar( props ) {
 	const {
 		children,
-		icon = 'admin-plugins',
+		icon,
 		isActive,
 		isPinnable = true,
 		isPinned,
@@ -74,7 +74,7 @@ function PluginSidebar( props ) {
 
 export default compose(
 	withPluginContext,
-	withSelect( ( select, { name, pluginContext } ) => {
+	withSelect( ( select, { icon, name, pluginContext } ) => {
 		const {
 			getActiveGeneralSidebarName,
 			isPluginItemPinned,
@@ -82,6 +82,7 @@ export default compose(
 		const sidebarName = `${ pluginContext.name }/${ name }`;
 
 		return {
+			icon: icon || pluginContext.icon,
 			isActive: getActiveGeneralSidebarName() === sidebarName,
 			isPinned: isPluginItemPinned( sidebarName ),
 			sidebarName,
diff --git a/plugins/README.md b/plugins/README.md
index 4bcd3eb0e939f6..a67e9e250b7a11 100644
--- a/plugins/README.md
+++ b/plugins/README.md
@@ -12,7 +12,10 @@ This method takes two arguments:
 
 1. `name`: A string identifying the plugin. Must be unique across all registered plugins.
 2. `settings`: An object containing the following data:
-   - `render`: A component containing the UI elements to be rendered.
+    - `icon: string | WPElement | Function` - An icon to be shown in the UI. It can be a slug
+      of the [Dashicon](https://developer.wordpress.org/resource/dashicons/#awards),
+      or an element (or function returning an element) if you choose to render your own SVG.
+    - `render`: A component containing the UI elements to be rendered.
 
 See [the edit-post module documentation](../edit-post/) for available components.
 
@@ -27,7 +30,6 @@ const Component = () => (
 	<Fragment>
 		<PluginSidebarMoreMenuItem
 			target="sidebar-name"
-			icon="smiley"
 		>
 			My Sidebar
 		</PluginSidebarMoreMenuItem>
@@ -41,6 +43,7 @@ const Component = () => (
 );
 
 registerPlugin( 'plugin-name', {
+	icon: 'smiley',
 	render: Component,
 } );
 ```
diff --git a/plugins/api/index.js b/plugins/api/index.js
index 46d474512ee683..7402fa727ee539 100644
--- a/plugins/api/index.js
+++ b/plugins/api/index.js
@@ -23,6 +23,7 @@ const plugins = {};
  * @param {string}   name   The name of the plugin.
  * @param {Object}   settings        The settings for this plugin.
  * @param {Function} settings.render The function that renders the plugin.
+ * @param {string}   settings.icon   An icon to be shown in the UI.
  *
  * @return {Object} The final plugin settings object.
  */
@@ -50,6 +51,9 @@ export function registerPlugin( name, settings ) {
 			`Plugin "${ name }" is already registered.`
 		);
 	}
+
+	settings = applyFilters( 'plugins.registerPlugin', settings, name );
+
 	if ( ! isFunction( settings.render ) ) {
 		console.error(
 			'The "render" property must be specified and must be a valid function.'
@@ -57,11 +61,11 @@ export function registerPlugin( name, settings ) {
 		return null;
 	}
 
-	settings.name = name;
-
-	settings = applyFilters( 'plugins.registerPlugin', settings, name );
-
-	plugins[ settings.name ] = settings;
+	plugins[ name ] = {
+		name,
+		icon: 'admin-plugins',
+		...settings,
+	};
 
 	doAction( 'plugins.pluginRegistered', settings, name );
 
diff --git a/plugins/api/test/index.js b/plugins/api/test/index.js
index 60aa1e72ec89d7..fb11c32204da39 100644
--- a/plugins/api/test/index.js
+++ b/plugins/api/test/index.js
@@ -4,6 +4,7 @@
 import {
 	registerPlugin,
 	unregisterPlugin,
+	getPlugin,
 	getPlugins,
 } from '../';
 
@@ -15,8 +16,19 @@ describe( 'registerPlugin', () => {
 	} );
 
 	it( 'successfully registers a plugin', () => {
-		registerPlugin( 'plugin', {
-			render: () => 'plugin content',
+		const name = 'plugin';
+		const icon = 'smiley';
+		const Component = () => 'plugin content';
+
+		registerPlugin( name, {
+			render: Component,
+			icon,
+		} );
+
+		expect( getPlugin( name ) ).toEqual( {
+			name,
+			render: Component,
+			icon,
 		} );
 	} );
 
@@ -51,7 +63,6 @@ describe( 'registerPlugin', () => {
 		registerPlugin( 'plugin', {
 			render: () => 'plugin content',
 		} );
-		console.log( console ); // eslint-disable-line
 		expect( console ).toHaveErroredWith( 'Plugin "plugin" is already registered.' );
 	} );
 } );
diff --git a/plugins/components/plugin-area/index.js b/plugins/components/plugin-area/index.js
index a5c22a2dc95d6f..7b8d613b279aa0 100644
--- a/plugins/components/plugin-area/index.js
+++ b/plugins/components/plugin-area/index.js
@@ -30,12 +30,13 @@ class PluginArea extends Component {
 
 	getCurrentPluginsState() {
 		return {
-			plugins: map( getPlugins(), ( { name, render } ) => {
+			plugins: map( getPlugins(), ( { icon, name, render } ) => {
 				return {
 					name,
 					Plugin: render,
 					context: {
 						name,
+						icon,
 					},
 				};
 			} ),
diff --git a/plugins/components/plugin-context/index.js b/plugins/components/plugin-context/index.js
index 2ee6e74f556005..cdc42a5935b0b6 100644
--- a/plugins/components/plugin-context/index.js
+++ b/plugins/components/plugin-context/index.js
@@ -5,6 +5,7 @@ import { createContext, createHigherOrderComponent } from '@wordpress/element';
 
 const { Consumer, Provider } = createContext( {
 	name: null,
+	icon: null,
 } );
 
 export { Provider as PluginContextProvider };

From bde94b0d202e74102f56dc0ed955104ca6902ef9 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Sun, 13 May 2018 10:46:57 +0200
Subject: [PATCH 12/14] Plugins: Refactor plugin context implementation

---
 .../plugin-sidebar-more-menu-item/index.js    | 12 ++++++----
 .../sidebar/plugin-sidebar/index.js           | 12 ++++++----
 plugins/components/plugin-area/index.js       |  5 ++--
 plugins/components/plugin-context/index.js    | 23 ++++++++++---------
 4 files changed, 28 insertions(+), 24 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
index fb80acef9e2ae3..e95ac5608cea2e 100644
--- a/edit-post/components/header/plugin-sidebar-more-menu-item/index.js
+++ b/edit-post/components/header/plugin-sidebar-more-menu-item/index.js
@@ -26,17 +26,19 @@ const PluginSidebarMoreMenuItem = ( { children, icon, isSelected, onClick } ) =>
 );
 
 export default compose(
-	withPluginContext,
-	withSelect( ( select, { icon, pluginContext, target } ) => {
+	withPluginContext( ( context, ownProps ) => {
+		return {
+			icon: ownProps.icon || context.icon,
+			sidebarName: `${ context.name }/${ ownProps.target }`,
+		};
+	} ),
+	withSelect( ( select, { sidebarName } ) => {
 		const {
 			getActiveGeneralSidebarName,
 		} = select( 'core/edit-post' );
-		const sidebarName = `${ pluginContext.name }/${ target }`;
 
 		return {
-			icon: icon || pluginContext.icon,
 			isSelected: getActiveGeneralSidebarName() === sidebarName,
-			sidebarName,
 		};
 	} ),
 	withDispatch( ( dispatch, { isSelected, sidebarName } ) => {
diff --git a/edit-post/components/sidebar/plugin-sidebar/index.js b/edit-post/components/sidebar/plugin-sidebar/index.js
index d9ca9bb395b5d0..0725fa45186f89 100644
--- a/edit-post/components/sidebar/plugin-sidebar/index.js
+++ b/edit-post/components/sidebar/plugin-sidebar/index.js
@@ -73,19 +73,21 @@ function PluginSidebar( props ) {
 }
 
 export default compose(
-	withPluginContext,
-	withSelect( ( select, { icon, name, pluginContext } ) => {
+	withPluginContext( ( context, ownProps ) => {
+		return {
+			icon: ownProps.icon || context.icon,
+			sidebarName: `${ context.name }/${ ownProps.name }`,
+		};
+	} ),
+	withSelect( ( select, { sidebarName } ) => {
 		const {
 			getActiveGeneralSidebarName,
 			isPluginItemPinned,
 		} = select( 'core/edit-post' );
-		const sidebarName = `${ pluginContext.name }/${ name }`;
 
 		return {
-			icon: icon || pluginContext.icon,
 			isActive: getActiveGeneralSidebarName() === sidebarName,
 			isPinned: isPluginItemPinned( sidebarName ),
-			sidebarName,
 		};
 	} ),
 	withDispatch( ( dispatch, { isActive, sidebarName } ) => {
diff --git a/plugins/components/plugin-area/index.js b/plugins/components/plugin-area/index.js
index 7b8d613b279aa0..4bfd74176991f9 100644
--- a/plugins/components/plugin-area/index.js
+++ b/plugins/components/plugin-area/index.js
@@ -32,7 +32,6 @@ class PluginArea extends Component {
 		return {
 			plugins: map( getPlugins(), ( { icon, name, render } ) => {
 				return {
-					name,
 					Plugin: render,
 					context: {
 						name,
@@ -60,9 +59,9 @@ class PluginArea extends Component {
 	render() {
 		return (
 			<div style={ { display: 'none' } }>
-				{ map( this.state.plugins, ( { context, name, Plugin } ) => (
+				{ map( this.state.plugins, ( { context, Plugin } ) => (
 					<PluginContextProvider
-						key={ name }
+						key={ context.name }
 						value={ context }
 					>
 						<Plugin />
diff --git a/plugins/components/plugin-context/index.js b/plugins/components/plugin-context/index.js
index cdc42a5935b0b6..3bf3030780bc70 100644
--- a/plugins/components/plugin-context/index.js
+++ b/plugins/components/plugin-context/index.js
@@ -11,23 +11,24 @@ const { Consumer, Provider } = createContext( {
 export { Provider as PluginContextProvider };
 
 /**
- * A Higher-order Component used to inject Plugin context into the wrapped
- * component.
+ * A Higher Order Component used to inject Plugin context to the
+ * wrapped component.
  *
- * @param {Component} OriginalComponent Component to wrap.
+ * @param {Function} mapContextToProps Function called on every context change,
+ *                                     expected to return object of props to
+ *                                     merge with the component's own props.
  *
- * @return {Component} Component with Plugin context injected.
+ * @return {Component} Enhanced component with injected context as props.
  */
-export const withPluginContext = createHigherOrderComponent(
-	( OriginalComponent ) => ( props ) => (
+export const withPluginContext = ( mapContextToProps ) => createHigherOrderComponent( ( OriginalComponent ) => {
+	return ( props ) => (
 		<Consumer>
-			{ ( pluginContext ) => (
+			{ ( context ) => (
 				<OriginalComponent
 					{ ...props }
-					pluginContext={ pluginContext }
+					{ ...mapContextToProps( context, props ) }
 				/>
 			) }
 		</Consumer>
-	),
-	'withPluginContext'
-);
+	);
+}, 'withPluginContext' );

From 7a31494bc2c5f3e72916a98a5e9556f83c9794ce Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Mon, 14 May 2018 11:39:17 +0200
Subject: [PATCH 13/14] Edit Post: Fix the alignement of button in the sidebar
 header

---
 edit-post/components/sidebar/sidebar-header/style.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/edit-post/components/sidebar/sidebar-header/style.scss b/edit-post/components/sidebar/sidebar-header/style.scss
index 3923f212251e5c..9350e87f0c2103 100644
--- a/edit-post/components/sidebar/sidebar-header/style.scss
+++ b/edit-post/components/sidebar/sidebar-header/style.scss
@@ -20,10 +20,10 @@
 
 	.components-icon-button {
 		display: none;
-		margin-left: 0;
+		margin-left: auto;
 
-		&:first-of-type {
-			margin-left: auto;
+		~ .components-icon-button {
+			margin-left: 0;
 		}
 
 		@include break-medium() {

From 26408e1a359ef9fb3fe74f46e06afeb7732f6736 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Mon, 14 May 2018 16:12:58 +0200
Subject: [PATCH 14/14] Edit post: Add margin between pinned icons Includes
 also JSDoc updates.

---
 edit-post/components/header/pinned-plugins/style.scss | 4 ++++
 edit-post/components/sidebar/plugin-sidebar/index.js  | 1 +
 edit-post/store/selectors.js                          | 3 ++-
 plugins/api/index.js                                  | 8 ++++----
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/edit-post/components/header/pinned-plugins/style.scss b/edit-post/components/header/pinned-plugins/style.scss
index 2d87689705ffb5..1dee1ff4f194ba 100644
--- a/edit-post/components/header/pinned-plugins/style.scss
+++ b/edit-post/components/header/pinned-plugins/style.scss
@@ -1,3 +1,7 @@
 .edit-post-pinned-plugins {
 	display: flex;
+
+	.components-icon-button {
+		margin-left: 4px;
+	}
 }
diff --git a/edit-post/components/sidebar/plugin-sidebar/index.js b/edit-post/components/sidebar/plugin-sidebar/index.js
index 0725fa45186f89..4f21ffc41a37b0 100644
--- a/edit-post/components/sidebar/plugin-sidebar/index.js
+++ b/edit-post/components/sidebar/plugin-sidebar/index.js
@@ -18,6 +18,7 @@ import SidebarHeader from '../sidebar-header';
  * Renders the plugin sidebar component.
  *
  * @param {Object} props Element props.
+ *
  * @return {WPElement} Plugin sidebar component.
  */
 function PluginSidebar( props ) {
diff --git a/edit-post/store/selectors.js b/edit-post/store/selectors.js
index 16348eba257819..7ba47508ca782b 100644
--- a/edit-post/store/selectors.js
+++ b/edit-post/store/selectors.js
@@ -114,7 +114,8 @@ export function isFeatureActive( state, feature ) {
  *
  * @param  {Object}  state      Global application state.
  * @param  {string}  pluginName Plugin item name.
- * @return {boolean}            Whether the plugin item is pinned.
+ *
+ * @return {boolean} Whether the plugin item is pinned.
  */
 export function isPluginItemPinned( state, pluginName ) {
 	const pinnedPluginItems = getPreference( state, 'pinnedPluginItems', {} );
diff --git a/plugins/api/index.js b/plugins/api/index.js
index 7402fa727ee539..bb5873ad01bf3a 100644
--- a/plugins/api/index.js
+++ b/plugins/api/index.js
@@ -20,10 +20,10 @@ const plugins = {};
 /**
  * Registers a plugin to the editor.
  *
- * @param {string}   name   The name of the plugin.
- * @param {Object}   settings        The settings for this plugin.
- * @param {Function} settings.render The function that renders the plugin.
- * @param {string}   settings.icon   An icon to be shown in the UI.
+ * @param {string}                    name            The name of the plugin.
+ * @param {Object}                    settings        The settings for this plugin.
+ * @param {Function}                  settings.render The function that renders the plugin.
+ * @param {string|WPElement|Function} settings.icon   An icon to be shown in the UI.
  *
  * @return {Object} The final plugin settings object.
  */