From d8b42501ed6337de0bd1132e92d237eed88e00f0 Mon Sep 17 00:00:00 2001
From: Vadim Nicolai <nicolai.vadim@gmail.com>
Date: Fri, 20 Mar 2020 00:31:07 +0200
Subject: [PATCH 01/21] Small cleanup.

---
 packages/block-library/src/style.scss         | 36 +++++++++----------
 packages/components/src/button/style.scss     |  8 +----
 .../components/header/header-toolbar/index.js | 10 +++++-
 .../header/header-toolbar/style.scss          | 10 ++++++
 .../src/components/header/style.scss          |  6 ++--
 .../src/components/options-modal/index.js     | 17 +++++++--
 .../components/options-modal/options/base.js  | 20 +++++------
 .../components/options-modal/options/index.js |  2 ++
 .../options-modal/options/show-icon-labels.js | 22 ++++++++++++
 .../test/__snapshots__/index.js.snap          |  7 ++++
 10 files changed, 94 insertions(+), 44 deletions(-)
 create mode 100644 packages/edit-post/src/components/options-modal/options/show-icon-labels.js

diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 46686a47e63f8..d9c793123c55e 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -142,75 +142,75 @@
 	// Our classes uses the same values we set for gradient value attributes, and we can not use spacing because of WP multi site kses rule.
 	/* stylelint-disable function-comma-space-after */
 	.has-vivid-cyan-blue-to-vivid-purple-gradient-background {
-		background: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);
+		background: linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%);
 	}
 
 	.has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background {
-		background: linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%);
+		background: linear-gradient(135deg, rgba(0, 208, 132, 1) 0%, rgba(6, 147, 227, 1) 100%);
 	}
 
 	.has-light-green-cyan-to-vivid-green-cyan-gradient-background {
-		background: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
+		background: linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%);
 	}
 
 	.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background {
-		background: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);
+		background: linear-gradient(135deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100%);
 	}
 
 	.has-luminous-vivid-orange-to-vivid-red-gradient-background {
-		background: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);
+		background: linear-gradient(135deg, rgba(255, 105, 0, 1) 0%, rgb(207, 46, 46) 100%);
 	}
 
 	.has-very-light-gray-to-cyan-bluish-gray-gradient-background {
-		background: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
+		background: linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195) 100%);
 	}
 
 	.has-cool-to-warm-spectrum-gradient-background {
-		background: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
+		background: linear-gradient(135deg, rgb(74, 234, 220) 0%, rgb(151, 120, 209) 20%, rgb(207, 42, 186) 40%, rgb(238, 44, 130) 60%, rgb(251, 105, 98) 80%, rgb(254, 248, 76) 100%);
 	}
 
 	.has-blush-light-purple-gradient-background {
-		background: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
+		background: linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100%);
 	}
 
 	.has-blush-bordeaux-gradient-background {
-		background: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
+		background: linear-gradient(135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100%);
 	}
 
 	.has-purple-crush-gradient-background {
-		background: linear-gradient(135deg,rgb(52,226,228) 0%,rgb(71,33,251) 50%,rgb(171,29,254) 100%);
+		background: linear-gradient(135deg, rgb(52, 226, 228) 0%, rgb(71, 33, 251) 50%, rgb(171, 29, 254) 100%);
 	}
 
 	.has-luminous-dusk-gradient-background {
-		background: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
+		background: linear-gradient(135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 50%, rgb(65, 88, 208) 100%);
 	}
 
 	.has-hazy-dawn-gradient-background {
-		background: linear-gradient(135deg,rgb(250,172,168) 0%,rgb(218,208,236) 100%);
+		background: linear-gradient(135deg, rgb(250, 172, 168) 0%, rgb(218, 208, 236) 100%);
 	}
 
 	.has-pale-ocean-gradient-background {
-		background: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
+		background: linear-gradient(135deg, rgb(255, 245, 203) 0%, rgb(182, 227, 212) 50%, rgb(51, 167, 181) 100%);
 	}
 
 	.has-electric-grass-gradient-background {
-		background: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
+		background: linear-gradient(135deg, rgb(202, 248, 128) 0%, rgb(113, 206, 126) 100%);
 	}
 
 	.has-subdued-olive-gradient-background {
-		background: linear-gradient(135deg,rgb(250,250,225) 0%,rgb(103,166,113) 100%);
+		background: linear-gradient(135deg, rgb(250, 250, 225) 0%, rgb(103, 166, 113) 100%);
 	}
 
 	.has-atomic-cream-gradient-background {
-		background: linear-gradient(135deg,rgb(253,215,154) 0%,rgb(0,74,89) 100%);
+		background: linear-gradient(135deg, rgb(253, 215, 154) 0%, rgb(0, 74, 89) 100%);
 	}
 
 	.has-nightshade-gradient-background {
-		background: linear-gradient(135deg,rgb(51,9,104) 0%,rgb(49,205,207) 100%);
+		background: linear-gradient(135deg, rgb(51, 9, 104) 0%, rgb(49, 205, 207) 100%);
 	}
 
 	.has-midnight-gradient-background {
-		background: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);
+		background: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);
 	}
 	/* stylelint-enable function-comma-space-after */
 }
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 3e4a7b94e78a7..e72519d4f503f 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -89,13 +89,7 @@
 			background-size: 100px 100%;
 			// Disable reason: This function call looks nicer when each argument is on its own line.
 			/* stylelint-disable */
-			background-image: linear-gradient(
-				-45deg,
-				$theme-color 28%,
-				color($theme-color shade(20%)) 28%,
-				color($theme-color shade(20%)) 72%,
-				$theme-color 72%
-			);
+			background-image: linear-gradient(-45deg, $theme-color 28%, color($theme-color shade(20%)) 28%, color($theme-color shade(20%)) 72%, $theme-color 72%);
 			/* stylelint-enable */
 			border-color: color($theme-color);
 		}
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
index 080f9e2c25825..539c3e7afd876 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -25,6 +30,7 @@ function HeaderToolbar() {
 		showInserter,
 		isTextModeEnabled,
 		previewDeviceType,
+		showIconLabels,
 	} = useSelect(
 		( select ) => ( {
 			hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive(
@@ -55,7 +61,9 @@ function HeaderToolbar() {
 
 	return (
 		<NavigableToolbar
-			className="edit-post-header-toolbar"
+			className={ classnames( 'edit-post-header-toolbar', {
+				'show-icon-labels': showIconLabels,
+			} ) }
 			aria-label={ toolbarAriaLabel }
 		>
 			<Inserter
diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss
index 95053f6808e13..13d3e41cfa25b 100644
--- a/packages/edit-post/src/components/header/header-toolbar/style.scss
+++ b/packages/edit-post/src/components/header/header-toolbar/style.scss
@@ -19,6 +19,16 @@
 			display: flex;
 		}
 	}
+	&.show-icon-labels {
+		button[aria-label] {
+			display: block;
+			&::after {
+				content: attr(aria-label);
+				display: block;
+				font-size: 12px;
+			}
+		}
+	}
 }
 
 // Block toolbar when fixed to the top of the screen.
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index 1544750232028..f2cb0ace5cafe 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -25,7 +25,7 @@
 		order: 1;
 
 		// Restore default order for all other browsers
-		@supports (position: sticky) {
+		@supports ( position: sticky ) {
 			order: initial;
 		}
 	}
@@ -55,12 +55,11 @@
 	flex-wrap: wrap;
 	padding-right: $grid-unit-05;
 
-	@include break-small () {
+	@include break-small() {
 		padding-right: $grid-unit-20;
 	}
 }
 
-
 /**
  * Buttons in the Toolbar
  */
@@ -74,7 +73,6 @@
 	}
 }
 
-
 .edit-post-header__settings {
 	// Header toggle buttons.
 	.components-button.is-pressed {
diff --git a/packages/edit-post/src/components/options-modal/index.js b/packages/edit-post/src/components/options-modal/index.js
index a4fa06cc512fc..bf789cff2ff60 100644
--- a/packages/edit-post/src/components/options-modal/index.js
+++ b/packages/edit-post/src/components/options-modal/index.js
@@ -6,7 +6,7 @@ import { get } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Modal } from '@wordpress/components';
+import { Modal, CheckboxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
@@ -31,7 +31,12 @@ import MetaBoxesSection from './meta-boxes-section';
 
 const MODAL_NAME = 'edit-post/options';
 
-export function OptionsModal( { isModalActive, isViewable, closeModal } ) {
+export function OptionsModal( {
+	isModalActive,
+	isViewable,
+	closeModal,
+	toggleIconLabels,
+} ) {
 	if ( ! isModalActive ) {
 		return null;
 	}
@@ -92,6 +97,12 @@ export function OptionsModal( { isModalActive, isViewable, closeModal } ) {
 				</PageAttributesCheck>
 			</Section>
 			<MetaBoxesSection title={ __( 'Advanced panels' ) } />
+			<Section title={ __( 'Icon Labels' ) }>
+				<CheckboxControl
+					label="Show Icon Labels"
+					onChange={ toggleIconLabels }
+				/>
+			</Section>
 		</Modal>
 	);
 }
@@ -112,6 +123,8 @@ export default compose(
 	withDispatch( ( dispatch ) => {
 		return {
 			closeModal: () => dispatch( 'core/edit-post' ).closeModal(),
+			toggleIconLabels: () =>
+				dispatch( 'core/edit-post' ).toggleFeature( 'showIconLabels' ),
 		};
 	} )
 )( OptionsModal );
diff --git a/packages/edit-post/src/components/options-modal/options/base.js b/packages/edit-post/src/components/options-modal/options/base.js
index cef8fe130b268..52f9db7ad4e11 100644
--- a/packages/edit-post/src/components/options-modal/options/base.js
+++ b/packages/edit-post/src/components/options-modal/options/base.js
@@ -3,17 +3,13 @@
  */
 import { CheckboxControl } from '@wordpress/components';
 
-function BaseOption( { label, isChecked, onChange, children } ) {
-	return (
-		<div className="edit-post-options-modal__option">
-			<CheckboxControl
-				label={ label }
-				checked={ isChecked }
-				onChange={ onChange }
-			/>
-			{ children }
-		</div>
-	);
-}
+const BaseOption = ( { label, isChecked, onChange } ) => (
+	<CheckboxControl
+		className="edit-post-options-modal__option"
+		label={ label }
+		checked={ isChecked }
+		onChange={ onChange }
+	/>
+);
 
 export default BaseOption;
diff --git a/packages/edit-post/src/components/options-modal/options/index.js b/packages/edit-post/src/components/options-modal/options/index.js
index 6ba7b4c54c7da..403c8ec6c3990 100644
--- a/packages/edit-post/src/components/options-modal/options/index.js
+++ b/packages/edit-post/src/components/options-modal/options/index.js
@@ -2,3 +2,5 @@ export { default as EnableCustomFieldsOption } from './enable-custom-fields';
 export { default as EnablePanelOption } from './enable-panel';
 export { default as EnablePluginDocumentSettingPanelOption } from './enable-plugin-document-setting-panel';
 export { default as EnablePublishSidebarOption } from './enable-publish-sidebar';
+export { default as EnableTipsOption } from './enable-tips';
+export { default as ShowIconLabels } from './show-icon-labels';
diff --git a/packages/edit-post/src/components/options-modal/options/show-icon-labels.js b/packages/edit-post/src/components/options-modal/options/show-icon-labels.js
new file mode 100644
index 0000000000000..e8a87e1b29fec
--- /dev/null
+++ b/packages/edit-post/src/components/options-modal/options/show-icon-labels.js
@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { compose } from '@wordpress/compose';
+import { withSelect, withDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import BaseOption from './base';
+
+export default compose(
+	withSelect( ( select ) => ( {
+		isChecked: select( 'core/edit-post' ).isFeatureActive(
+			'showIconLabels'
+		),
+	} ) ),
+	withDispatch( ( dispatch ) => ( {
+		onChange: () =>
+			dispatch( 'core/edit-post' ).toggleFeature( 'showIconLabels' ),
+	} ) )
+)( BaseOption );
diff --git a/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap
index 438c185faca3e..396b6eadbffbd 100644
--- a/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap
@@ -55,5 +55,12 @@ exports[`OptionsModal should match snapshot when the modal is active 1`] = `
   <WithSelect(MetaBoxesSection)
     title="Advanced panels"
   />
+  <Section
+    title="Icon Labels"
+  >
+    <WithSelect(WithDispatch(BaseOption))
+      label="Show Icon Labels"
+    />
+  </Section>
 </WithInstanceId(Modal)>
 `;

From 7aa7f88064dbc480aba0c4d0b2d2b29732989b13 Mon Sep 17 00:00:00 2001
From: Vadim Nicolai <nicolai.vadim@gmail.com>
Date: Fri, 20 Mar 2020 00:54:38 +0200
Subject: [PATCH 02/21] Updated HeaderToolbar.

---
 .../edit-post/src/components/header/header-toolbar/index.js  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
index 539c3e7afd876..9d05d63766b17 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -27,15 +27,18 @@ const inserterToggleProps = { isPrimary: true };
 function HeaderToolbar() {
 	const {
 		hasFixedToolbar,
-		showInserter,
 		isTextModeEnabled,
 		previewDeviceType,
 		showIconLabels,
+		showInserter,
 	} = useSelect(
 		( select ) => ( {
 			hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive(
 				'fixedToolbar'
 			),
+			showIconLabels: select( 'core/edit-post' ).isFeatureActive(
+				'showIconLabels'
+			),
 			// This setting (richEditingEnabled) should not live in the block editor's setting.
 			showInserter:
 				select( 'core/edit-post' ).getEditorMode() === 'visual' &&

From 8370fa34dbb3b988707ed02599aa15214e599485 Mon Sep 17 00:00:00 2001
From: Vadim Nicolai <nicolai.vadim@gmail.com>
Date: Wed, 8 Apr 2020 12:19:40 +0300
Subject: [PATCH 03/21] Conflicts fixed.

---
 .../edit-post/src/components/header/index.js    | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index 7dca19d07f57a..190cd760dfe7f 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -19,12 +24,13 @@ import PreviewOptions from '../preview-options';
 
 function Header() {
 	const {
-		shortcut,
+		getBlockSelectionStart,
 		hasActiveMetaboxes,
 		isEditorSidebarOpened,
 		isPublishSidebarOpened,
 		isSaving,
-		getBlockSelectionStart,
+		shortcut,
+		showIconLabels,
 	} = useSelect(
 		( select ) => ( {
 			shortcut: select(
@@ -87,11 +93,14 @@ function Header() {
 					forceIsSaving={ isSaving }
 				/>
 				<Button
+					aria-expanded={ isEditorSidebarOpened }
+					className={ classnames( {
+						'has-text-label': showIconLabels,
+					} ) }
 					icon={ cog }
+					isPressed={ isEditorSidebarOpened }
 					label={ __( 'Settings' ) }
 					onClick={ toggleGeneralSidebar }
-					isPressed={ isEditorSidebarOpened }
-					aria-expanded={ isEditorSidebarOpened }
 					shortcut={ shortcut }
 				/>
 				<PinnedItems.Slot scope="core/edit-post" />

From daaec4f7b100c7c64f2b357082ad1b7169637d28 Mon Sep 17 00:00:00 2001
From: Vadim Nicolai <nicolai.vadim@gmail.com>
Date: Fri, 20 Mar 2020 01:03:47 +0200
Subject: [PATCH 04/21] Updated MoreMenu and it's styles.

---
 .../src/components/header/more-menu/index.js          | 11 +++++++++--
 .../src/components/header/more-menu/style.scss        | 11 +++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/header/more-menu/index.js
index 9a0b39751fb82..8ccbf65401934 100644
--- a/packages/edit-post/src/components/header/more-menu/index.js
+++ b/packages/edit-post/src/components/header/more-menu/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -22,9 +27,11 @@ const TOGGLE_PROPS = {
 	tooltipPosition: 'bottom',
 };
 
-const MoreMenu = () => (
+const MoreMenu = ( { showIconLabel } ) => (
 	<DropdownMenu
-		className="edit-post-more-menu"
+		className={ classnames( 'edit-post-more-menu', {
+			'show-icon-label': showIconLabel,
+		} ) }
 		icon={ moreVertical }
 		label={ __( 'More tools & options' ) }
 		popoverProps={ POPOVER_PROPS }
diff --git a/packages/edit-post/src/components/header/more-menu/style.scss b/packages/edit-post/src/components/header/more-menu/style.scss
index a7319f02b7051..626f2ff246ddb 100644
--- a/packages/edit-post/src/components/header/more-menu/style.scss
+++ b/packages/edit-post/src/components/header/more-menu/style.scss
@@ -7,6 +7,17 @@
 		padding: 0 2px;
 	}
 
+	&.show-icon-label {
+		button[aria-label] {
+			display: block;
+			&::after {
+				content: attr(aria-label);
+				display: block;
+				font-size: 12px;
+			}
+		}
+	}
+
 	@include break-small() {
 		margin-left: 0;
 

From 64c452a33c2b86e64642f4bfe630897a0d4e9873 Mon Sep 17 00:00:00 2001
From: Vadim Nicolai <nicolai.vadim@gmail.com>
Date: Fri, 20 Mar 2020 01:05:18 +0200
Subject: [PATCH 05/21] Updated Header style.scss.

---
 .../edit-post/src/components/header/style.scss   | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index f2cb0ace5cafe..1054555d1efc4 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -55,6 +55,22 @@
 	flex-wrap: wrap;
 	padding-right: $grid-unit-05;
 
+	button.admin-settings[aria-label] {
+		&.has-text-label {
+			color: $white;
+			background: $dark-gray-500;
+			&:hover {
+				color: $white;
+				background: $dark-gray-600;
+			}
+			&::after {
+				content: attr(aria-label);
+				display: inline-block;
+				font-size: 12px;
+			}
+		}
+	}
+
 	@include break-small() {
 		padding-right: $grid-unit-20;
 	}

From 41a64562128ccc3d055a38ce1d9ea227786002e2 Mon Sep 17 00:00:00 2001
From: Vadim Nicolai <nicolai.vadim@gmail.com>
Date: Fri, 20 Mar 2020 01:09:32 +0200
Subject: [PATCH 06/21] Updated OptionsModal.

---
 .../src/components/options-modal/index.js         | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/packages/edit-post/src/components/options-modal/index.js b/packages/edit-post/src/components/options-modal/index.js
index bf789cff2ff60..f3b6ea4c9f14e 100644
--- a/packages/edit-post/src/components/options-modal/index.js
+++ b/packages/edit-post/src/components/options-modal/index.js
@@ -6,7 +6,7 @@ import { get } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Modal, CheckboxControl } from '@wordpress/components';
+import { Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
@@ -26,17 +26,13 @@ import {
 	EnablePluginDocumentSettingPanelOption,
 	EnablePublishSidebarOption,
 	EnablePanelOption,
+	ShowIconLabels,
 } from './options';
 import MetaBoxesSection from './meta-boxes-section';
 
 const MODAL_NAME = 'edit-post/options';
 
-export function OptionsModal( {
-	isModalActive,
-	isViewable,
-	closeModal,
-	toggleIconLabels,
-} ) {
+export function OptionsModal( { isModalActive, isViewable, closeModal } ) {
 	if ( ! isModalActive ) {
 		return null;
 	}
@@ -98,10 +94,7 @@ export function OptionsModal( {
 			</Section>
 			<MetaBoxesSection title={ __( 'Advanced panels' ) } />
 			<Section title={ __( 'Icon Labels' ) }>
-				<CheckboxControl
-					label="Show Icon Labels"
-					onChange={ toggleIconLabels }
-				/>
+				<ShowIconLabels label="Show Icon Labels" />
 			</Section>
 		</Modal>
 	);

From 26859802bf7d2ea9bcb84c141f84d9dbc787f090 Mon Sep 17 00:00:00 2001
From: Vadim Nicolai <nicolai.vadim@gmail.com>
Date: Fri, 20 Mar 2020 01:10:37 +0200
Subject: [PATCH 07/21] Updated PREFERENCES_DEFAULTS.

---
 packages/edit-post/src/store/defaults.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/edit-post/src/store/defaults.js b/packages/edit-post/src/store/defaults.js
index 64435c05ce74c..a0a7206477496 100644
--- a/packages/edit-post/src/store/defaults.js
+++ b/packages/edit-post/src/store/defaults.js
@@ -7,8 +7,9 @@ export const PREFERENCES_DEFAULTS = {
 	},
 	features: {
 		fixedToolbar: false,
-		welcomeGuide: true,
 		fullscreenMode: true,
+		showIconLabels: false,
+		welcomeGuide: true,
 	},
 	hiddenBlockTypes: [],
 	preferredStyleVariations: {},

From 3508c61dd4e63b29a64504b3c7f2396403343034 Mon Sep 17 00:00:00 2001
From: Vadim Nicolai <nicolai.vadim@gmail.com>
Date: Fri, 20 Mar 2020 01:13:29 +0200
Subject: [PATCH 08/21] Updated HeaderToolbar.

---
 .../src/components/header/header-toolbar/index.js  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
index 9d05d63766b17..78d4e12e586f2 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -24,7 +24,7 @@ import {
 
 const inserterToggleProps = { isPrimary: true };
 
-function HeaderToolbar() {
+const HeaderToolbar = () => {
 	const {
 		hasFixedToolbar,
 		isTextModeEnabled,
@@ -36,6 +36,11 @@ function HeaderToolbar() {
 			hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive(
 				'fixedToolbar'
 			),
+			isTextModeEnabled:
+				select( 'core/edit-post' ).getEditorMode() === 'text',
+			previewDeviceType: select(
+				'core/edit-post'
+			).__experimentalGetPreviewDeviceType(),
 			showIconLabels: select( 'core/edit-post' ).isFeatureActive(
 				'showIconLabels'
 			),
@@ -43,11 +48,6 @@ function HeaderToolbar() {
 			showInserter:
 				select( 'core/edit-post' ).getEditorMode() === 'visual' &&
 				select( 'core/editor' ).getEditorSettings().richEditingEnabled,
-			isTextModeEnabled:
-				select( 'core/edit-post' ).getEditorMode() === 'text',
-			previewDeviceType: select(
-				'core/edit-post'
-			).__experimentalGetPreviewDeviceType(),
 		} ),
 		[]
 	);
@@ -87,6 +87,6 @@ function HeaderToolbar() {
 			) }
 		</NavigableToolbar>
 	);
-}
+};
 
 export default HeaderToolbar;

From 4d127fd264d7394071c116feb2ba62da085ea2b5 Mon Sep 17 00:00:00 2001
From: Vadim Nicolai <nicolai.vadim@gmail.com>
Date: Fri, 20 Mar 2020 01:15:57 +0200
Subject: [PATCH 09/21] Updated Header.

---
 packages/edit-post/src/components/header/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index 190cd760dfe7f..367516986187a 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -22,7 +22,7 @@ import MoreMenu from './more-menu';
 import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
 import PreviewOptions from '../preview-options';
 
-function Header() {
+const Header = () => {
 	const {
 		getBlockSelectionStart,
 		hasActiveMetaboxes,
@@ -108,6 +108,6 @@ function Header() {
 			</div>
 		</div>
 	);
-}
+};
 
 export default Header;

From 2a96c72c047a407ed924befd227d314abf18b7b5 Mon Sep 17 00:00:00 2001
From: Vadim Nicolai <nicolai.vadim@gmail.com>
Date: Fri, 20 Mar 2020 01:28:39 +0200
Subject: [PATCH 10/21] Snapshots update.

---
 .../test/__snapshots__/index.js.snap          |  17 +-
 .../test/__snapshots__/index.js.snap          | 576 ------------------
 2 files changed, 5 insertions(+), 588 deletions(-)
 delete mode 100644 packages/components/src/color-palette/test/__snapshots__/index.js.snap

diff --git a/packages/babel-preset-default/test/__snapshots__/index.js.snap b/packages/babel-preset-default/test/__snapshots__/index.js.snap
index 58bfb14629a28..9f7b9d7e009d9 100644
--- a/packages/babel-preset-default/test/__snapshots__/index.js.snap
+++ b/packages/babel-preset-default/test/__snapshots__/index.js.snap
@@ -11,9 +11,7 @@ describe('Babel preset default', function () {
   }
 
   function _foo() {
-    _foo = _wrapAsyncGenerator(
-    /*#__PURE__*/
-    _regeneratorRuntime.mark(function _callee() {
+    _foo = _wrapAsyncGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
@@ -35,11 +33,7 @@ describe('Babel preset default', function () {
     return _foo.apply(this, arguments);
   }
 
-  test('support for async generator functions',
-  /*#__PURE__*/
-  _asyncToGenerator(
-  /*#__PURE__*/
-  _regeneratorRuntime.mark(function _callee2() {
+  test('support for async generator functions', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
     var generator;
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) {
@@ -52,13 +46,12 @@ describe('Babel preset default', function () {
 
           case 4:
             _context2.t1 = _context2.sent;
-            _context2.t2 = {
+            (0, _context2.t0)(_context2.t1).toEqual({
               done: false,
               value: 2
-            };
-            (0, _context2.t0)(_context2.t1).toEqual(_context2.t2);
+            });
 
-          case 7:
+          case 6:
           case \\"end\\":
             return _context2.stop();
         }
diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
deleted file mode 100644
index 760221f289041..0000000000000
--- a/packages/components/src/color-palette/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,576 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ColorPalette Dropdown .renderContent should render dropdown content 1`] = `
-<div
-  className="components-color-picker is-alpha-disabled"
->
-  <div
-    className="components-color-picker__saturation"
-  >
-    <Pure(WithInstanceId(Saturation))
-      hsl={
-        Object {
-          "a": 1,
-          "h": 0,
-          "l": 50,
-          "s": 100,
-        }
-      }
-      hsv={
-        Object {
-          "a": 1,
-          "h": 0,
-          "s": 100,
-          "v": 100,
-        }
-      }
-      onChange={[Function]}
-    />
-  </div>
-  <div
-    className="components-color-picker__body"
-  >
-    <div
-      className="components-color-picker__controls"
-    >
-      <div
-        className="components-color-picker__swatch"
-      >
-        <div
-          className="components-color-picker__active"
-          style={
-            Object {
-              "backgroundColor": "rgb(255, 0, 0)",
-            }
-          }
-        />
-      </div>
-      <div
-        className="components-color-picker__toggles"
-      >
-        <Pure(WithInstanceId(Hue))
-          hsl={
-            Object {
-              "a": 1,
-              "h": 0,
-              "l": 50,
-              "s": 100,
-            }
-          }
-          onChange={[Function]}
-        />
-      </div>
-    </div>
-    <Inputs
-      disableAlpha={true}
-      hex="#ff0000"
-      hsl={
-        Object {
-          "a": 1,
-          "h": 0,
-          "l": 50,
-          "s": 100,
-        }
-      }
-      onChange={[Function]}
-      rgb={
-        Object {
-          "a": 1,
-          "b": 0,
-          "g": 0,
-          "r": 255,
-        }
-      }
-    />
-  </div>
-</div>
-`;
-
-exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`] = `
-<button
-  aria-expanded={true}
-  aria-label="Custom color picker"
-  className="components-button is-link"
-  onClick={[MockFunction]}
-  type="button"
->
-  Custom color
-</button>
-`;
-
-exports[`ColorPalette Dropdown should render it correctly 1`] = `
-<Dropdown
-  className="components-circular-option-picker__dropdown-link-action"
-  contentClassName="components-color-palette__picker"
-  renderContent={[Function]}
-  renderToggle={[Function]}
->
-  <div
-    className="components-dropdown components-circular-option-picker__dropdown-link-action"
-  >
-    <ForwardRef(Button)
-      aria-expanded={false}
-      aria-label="Custom color picker"
-      isLink={true}
-      onClick={[Function]}
-    >
-      <button
-        aria-expanded={false}
-        aria-label="Custom color picker"
-        className="components-button is-link"
-        onClick={[Function]}
-        type="button"
-      >
-        Custom color
-      </button>
-    </ForwardRef(Button)>
-  </div>
-</Dropdown>
-`;
-
-exports[`ColorPalette should allow disabling custom color picker 1`] = `
-<CircularOptionPicker
-  actions={
-    <React.Fragment>
-      <ButtonAction
-        onClick={[Function]}
-      >
-        Clear
-      </ButtonAction>
-    </React.Fragment>
-  }
-  options={
-    Array [
-      <Option
-        aria-label="Color: red"
-        isSelected={true}
-        onClick={[Function]}
-        selectedIconProps={
-          Object {
-            "fill": "#000000",
-          }
-        }
-        style={
-          Object {
-            "backgroundColor": "#f00",
-            "color": "#f00",
-          }
-        }
-        tooltipText="red"
-      />,
-      <Option
-        aria-label="Color: white"
-        isSelected={false}
-        onClick={[Function]}
-        selectedIconProps={Object {}}
-        style={
-          Object {
-            "backgroundColor": "#fff",
-            "color": "#fff",
-          }
-        }
-        tooltipText="white"
-      />,
-      <Option
-        aria-label="Color: blue"
-        isSelected={false}
-        onClick={[Function]}
-        selectedIconProps={Object {}}
-        style={
-          Object {
-            "backgroundColor": "#00f",
-            "color": "#00f",
-          }
-        }
-        tooltipText="blue"
-      />,
-    ]
-  }
-/>
-`;
-
-exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
-<ColorPalette
-  colors={
-    Array [
-      Object {
-        "color": "#f00",
-        "name": "red",
-      },
-      Object {
-        "color": "#fff",
-        "name": "white",
-      },
-      Object {
-        "color": "#00f",
-        "name": "blue",
-      },
-    ]
-  }
-  onChange={[MockFunction]}
-  value="#f00"
->
-  <CircularOptionPicker
-    actions={
-      <React.Fragment>
-        <DropdownLinkAction
-          buttonProps={
-            Object {
-              "aria-label": "Custom color picker",
-            }
-          }
-          dropdownProps={
-            Object {
-              "contentClassName": "components-color-palette__picker",
-              "renderContent": [Function],
-            }
-          }
-          linkText="Custom color"
-        />
-        <ButtonAction
-          onClick={[Function]}
-        >
-          Clear
-        </ButtonAction>
-      </React.Fragment>
-    }
-    options={
-      Array [
-        <Option
-          aria-label="Color: red"
-          isSelected={true}
-          onClick={[Function]}
-          selectedIconProps={
-            Object {
-              "fill": "#000000",
-            }
-          }
-          style={
-            Object {
-              "backgroundColor": "#f00",
-              "color": "#f00",
-            }
-          }
-          tooltipText="red"
-        />,
-        <Option
-          aria-label="Color: white"
-          isSelected={false}
-          onClick={[Function]}
-          selectedIconProps={Object {}}
-          style={
-            Object {
-              "backgroundColor": "#fff",
-              "color": "#fff",
-            }
-          }
-          tooltipText="white"
-        />,
-        <Option
-          aria-label="Color: blue"
-          isSelected={false}
-          onClick={[Function]}
-          selectedIconProps={Object {}}
-          style={
-            Object {
-              "backgroundColor": "#00f",
-              "color": "#00f",
-            }
-          }
-          tooltipText="blue"
-        />,
-      ]
-    }
-  >
-    <div
-      className="components-circular-option-picker"
-    >
-      <Option
-        aria-label="Color: red"
-        isSelected={true}
-        key="#f00"
-        onClick={[Function]}
-        selectedIconProps={
-          Object {
-            "fill": "#000000",
-          }
-        }
-        style={
-          Object {
-            "backgroundColor": "#f00",
-            "color": "#f00",
-          }
-        }
-        tooltipText="red"
-      >
-        <div
-          className="components-circular-option-picker__option-wrapper"
-        >
-          <Tooltip
-            text="red"
-          >
-            <ForwardRef(Button)
-              aria-label="Color: red"
-              className="components-circular-option-picker__option"
-              isPressed={true}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseEnter={[Function]}
-              onMouseLeave={[Function]}
-              style={
-                Object {
-                  "backgroundColor": "#f00",
-                  "color": "#f00",
-                }
-              }
-            >
-              <button
-                aria-label="Color: red"
-                aria-pressed={true}
-                className="components-button components-circular-option-picker__option is-pressed"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                style={
-                  Object {
-                    "backgroundColor": "#f00",
-                    "color": "#f00",
-                  }
-                }
-                type="button"
-              />
-            </ForwardRef(Button)>
-          </Tooltip>
-          <Icon
-            fill="#000000"
-            icon={
-              <SVG
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <Path
-                  d="M9 18.6L3.5 13l1-1L9 16.4l9.5-9.9 1 1z"
-                />
-              </SVG>
-            }
-          >
-            <SVG
-              fill="#000000"
-              height={24}
-              viewBox="0 0 24 24"
-              width={24}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <svg
-                aria-hidden="true"
-                fill="#000000"
-                focusable="false"
-                height={24}
-                role="img"
-                viewBox="0 0 24 24"
-                width={24}
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <Path
-                  d="M9 18.6L3.5 13l1-1L9 16.4l9.5-9.9 1 1z"
-                >
-                  <path
-                    d="M9 18.6L3.5 13l1-1L9 16.4l9.5-9.9 1 1z"
-                  />
-                </Path>
-              </svg>
-            </SVG>
-          </Icon>
-        </div>
-      </Option>
-      <Option
-        aria-label="Color: white"
-        isSelected={false}
-        key="#fff"
-        onClick={[Function]}
-        selectedIconProps={Object {}}
-        style={
-          Object {
-            "backgroundColor": "#fff",
-            "color": "#fff",
-          }
-        }
-        tooltipText="white"
-      >
-        <div
-          className="components-circular-option-picker__option-wrapper"
-        >
-          <Tooltip
-            text="white"
-          >
-            <ForwardRef(Button)
-              aria-label="Color: white"
-              className="components-circular-option-picker__option"
-              isPressed={false}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseEnter={[Function]}
-              onMouseLeave={[Function]}
-              style={
-                Object {
-                  "backgroundColor": "#fff",
-                  "color": "#fff",
-                }
-              }
-            >
-              <button
-                aria-label="Color: white"
-                aria-pressed={false}
-                className="components-button components-circular-option-picker__option"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                style={
-                  Object {
-                    "backgroundColor": "#fff",
-                    "color": "#fff",
-                  }
-                }
-                type="button"
-              />
-            </ForwardRef(Button)>
-          </Tooltip>
-        </div>
-      </Option>
-      <Option
-        aria-label="Color: blue"
-        isSelected={false}
-        key="#00f"
-        onClick={[Function]}
-        selectedIconProps={Object {}}
-        style={
-          Object {
-            "backgroundColor": "#00f",
-            "color": "#00f",
-          }
-        }
-        tooltipText="blue"
-      >
-        <div
-          className="components-circular-option-picker__option-wrapper"
-        >
-          <Tooltip
-            text="blue"
-          >
-            <ForwardRef(Button)
-              aria-label="Color: blue"
-              className="components-circular-option-picker__option"
-              isPressed={false}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseEnter={[Function]}
-              onMouseLeave={[Function]}
-              style={
-                Object {
-                  "backgroundColor": "#00f",
-                  "color": "#00f",
-                }
-              }
-            >
-              <button
-                aria-label="Color: blue"
-                aria-pressed={false}
-                className="components-button components-circular-option-picker__option"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                style={
-                  Object {
-                    "backgroundColor": "#00f",
-                    "color": "#00f",
-                  }
-                }
-                type="button"
-              />
-            </ForwardRef(Button)>
-          </Tooltip>
-        </div>
-      </Option>
-      <div
-        className="components-circular-option-picker__custom-clear-wrapper"
-      >
-        <DropdownLinkAction
-          buttonProps={
-            Object {
-              "aria-label": "Custom color picker",
-            }
-          }
-          dropdownProps={
-            Object {
-              "contentClassName": "components-color-palette__picker",
-              "renderContent": [Function],
-            }
-          }
-          linkText="Custom color"
-        >
-          <Dropdown
-            className="components-circular-option-picker__dropdown-link-action"
-            contentClassName="components-color-palette__picker"
-            renderContent={[Function]}
-            renderToggle={[Function]}
-          >
-            <div
-              className="components-dropdown components-circular-option-picker__dropdown-link-action"
-            >
-              <ForwardRef(Button)
-                aria-expanded={false}
-                aria-label="Custom color picker"
-                isLink={true}
-                onClick={[Function]}
-              >
-                <button
-                  aria-expanded={false}
-                  aria-label="Custom color picker"
-                  className="components-button is-link"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  Custom color
-                </button>
-              </ForwardRef(Button)>
-            </div>
-          </Dropdown>
-        </DropdownLinkAction>
-        <ButtonAction
-          onClick={[Function]}
-        >
-          <ForwardRef(Button)
-            className="components-circular-option-picker__clear"
-            isSecondary={true}
-            isSmall={true}
-            onClick={[Function]}
-          >
-            <button
-              className="components-button components-circular-option-picker__clear is-secondary is-small"
-              onClick={[Function]}
-              type="button"
-            >
-              Clear
-            </button>
-          </ForwardRef(Button)>
-        </ButtonAction>
-      </div>
-    </div>
-  </CircularOptionPicker>
-</ColorPalette>
-`;

From 585b81afcd4e5ee478c2e94175a5eb988755166d Mon Sep 17 00:00:00 2001
From: Vadim Nicolai <nicolai.vadim@gmail.com>
Date: Fri, 20 Mar 2020 01:34:46 +0200
Subject: [PATCH 11/21] Small improvement; js_only.

---
 packages/edit-post/src/components/options-modal/options/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/edit-post/src/components/options-modal/options/index.js b/packages/edit-post/src/components/options-modal/options/index.js
index 403c8ec6c3990..822c2c9ff62d2 100644
--- a/packages/edit-post/src/components/options-modal/options/index.js
+++ b/packages/edit-post/src/components/options-modal/options/index.js
@@ -2,5 +2,4 @@ export { default as EnableCustomFieldsOption } from './enable-custom-fields';
 export { default as EnablePanelOption } from './enable-panel';
 export { default as EnablePluginDocumentSettingPanelOption } from './enable-plugin-document-setting-panel';
 export { default as EnablePublishSidebarOption } from './enable-publish-sidebar';
-export { default as EnableTipsOption } from './enable-tips';
 export { default as ShowIconLabels } from './show-icon-labels';

From 2ef2d382feb9bf41ca8635ce82b8cf994f43e285 Mon Sep 17 00:00:00 2001
From: Vadim Nicolai <nicolai.vadim@gmail.com>
Date: Fri, 20 Mar 2020 02:09:21 +0200
Subject: [PATCH 12/21] Shortened MoreMenu label.

---
 packages/edit-post/src/components/header/index.js  | 14 +++++++++-----
 .../src/components/header/more-menu/index.js       |  2 +-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index 367516986187a..ae2a30a0fc42f 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -33,9 +33,8 @@ const Header = () => {
 		showIconLabels,
 	} = useSelect(
 		( select ) => ( {
-			shortcut: select(
-				'core/keyboard-shortcuts'
-			).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ),
+			getBlockSelectionStart: select( 'core/block-editor' )
+				.getBlockSelectionStart,
 			hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(),
 			isEditorSidebarOpened: select(
 				'core/edit-post'
@@ -44,8 +43,13 @@ const Header = () => {
 				'core/edit-post'
 			).isPublishSidebarOpened(),
 			isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(),
-			getBlockSelectionStart: select( 'core/block-editor' )
-				.getBlockSelectionStart,
+
+			shortcut: select(
+				'core/keyboard-shortcuts'
+			).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ),
+			showIconLabels: select( 'core/edit-post' ).isFeatureActive(
+				'showIconLabels'
+			),
 		} ),
 		[]
 	);
diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/header/more-menu/index.js
index 8ccbf65401934..3bc1c307a180d 100644
--- a/packages/edit-post/src/components/header/more-menu/index.js
+++ b/packages/edit-post/src/components/header/more-menu/index.js
@@ -33,7 +33,7 @@ const MoreMenu = ( { showIconLabel } ) => (
 			'show-icon-label': showIconLabel,
 		} ) }
 		icon={ moreVertical }
-		label={ __( 'More tools & options' ) }
+		label={ __( 'More options' ) }
 		popoverProps={ POPOVER_PROPS }
 		toggleProps={ TOGGLE_PROPS }
 	>

From c66a1eaefd938870e9430d86a68768cc239f3863 Mon Sep 17 00:00:00 2001
From: Vadim Nicolai <nicolai.vadim@gmail.com>
Date: Fri, 20 Mar 2020 02:38:41 +0200
Subject: [PATCH 13/21] Applied black color to the label related to primary
 button.

---
 .../src/components/header/header-toolbar/style.scss        | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss
index 13d3e41cfa25b..1a1e89c4bef49 100644
--- a/packages/edit-post/src/components/header/header-toolbar/style.scss
+++ b/packages/edit-post/src/components/header/header-toolbar/style.scss
@@ -27,6 +27,11 @@
 				display: block;
 				font-size: 12px;
 			}
+			&.is-primary {
+				&::after {
+					color: $black;
+				}
+			}
 		}
 	}
 }
@@ -79,7 +84,7 @@
 		}
 
 		.block-editor-block-toolbar .components-toolbar {
-			$top-toolbar-padding: ($header-height - $grid-unit-60) / 2;
+			$top-toolbar-padding: ( $header-height - $grid-unit-60 ) / 2;
 			height: $header-height;
 			padding: $top-toolbar-padding 0;
 		}

From ce28dbc8bb2918639acb49c9259254c2c070705c Mon Sep 17 00:00:00 2001
From: Vadim Nicolai <nicolai.vadim@gmail.com>
Date: Fri, 20 Mar 2020 11:27:42 +0200
Subject: [PATCH 14/21] Small cleanup; js_only.

---
 .../test/__snapshots__/index.js.snap          |  17 +-
 packages/block-library/src/style.scss         |  36 +-
 packages/components/src/button/style.scss     |   8 +-
 .../test/__snapshots__/index.js.snap          | 576 ++++++++++++++++++
 .../components/header/header-toolbar/index.js |  14 +-
 .../edit-post/src/components/header/index.js  |  23 +-
 .../src/components/header/style.scss          |  12 +-
 .../components/options-modal/options/base.js  |  20 +-
 .../test/__snapshots__/index.js.snap          |   7 -
 packages/edit-post/src/store/defaults.js      |   2 +-
 10 files changed, 651 insertions(+), 64 deletions(-)
 create mode 100644 packages/components/src/color-palette/test/__snapshots__/index.js.snap

diff --git a/packages/babel-preset-default/test/__snapshots__/index.js.snap b/packages/babel-preset-default/test/__snapshots__/index.js.snap
index 9f7b9d7e009d9..58bfb14629a28 100644
--- a/packages/babel-preset-default/test/__snapshots__/index.js.snap
+++ b/packages/babel-preset-default/test/__snapshots__/index.js.snap
@@ -11,7 +11,9 @@ describe('Babel preset default', function () {
   }
 
   function _foo() {
-    _foo = _wrapAsyncGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    _foo = _wrapAsyncGenerator(
+    /*#__PURE__*/
+    _regeneratorRuntime.mark(function _callee() {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
@@ -33,7 +35,11 @@ describe('Babel preset default', function () {
     return _foo.apply(this, arguments);
   }
 
-  test('support for async generator functions', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+  test('support for async generator functions',
+  /*#__PURE__*/
+  _asyncToGenerator(
+  /*#__PURE__*/
+  _regeneratorRuntime.mark(function _callee2() {
     var generator;
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) {
@@ -46,12 +52,13 @@ describe('Babel preset default', function () {
 
           case 4:
             _context2.t1 = _context2.sent;
-            (0, _context2.t0)(_context2.t1).toEqual({
+            _context2.t2 = {
               done: false,
               value: 2
-            });
+            };
+            (0, _context2.t0)(_context2.t1).toEqual(_context2.t2);
 
-          case 6:
+          case 7:
           case \\"end\\":
             return _context2.stop();
         }
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index d9c793123c55e..46686a47e63f8 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -142,75 +142,75 @@
 	// Our classes uses the same values we set for gradient value attributes, and we can not use spacing because of WP multi site kses rule.
 	/* stylelint-disable function-comma-space-after */
 	.has-vivid-cyan-blue-to-vivid-purple-gradient-background {
-		background: linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%);
+		background: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);
 	}
 
 	.has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background {
-		background: linear-gradient(135deg, rgba(0, 208, 132, 1) 0%, rgba(6, 147, 227, 1) 100%);
+		background: linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%);
 	}
 
 	.has-light-green-cyan-to-vivid-green-cyan-gradient-background {
-		background: linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%);
+		background: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
 	}
 
 	.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background {
-		background: linear-gradient(135deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100%);
+		background: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);
 	}
 
 	.has-luminous-vivid-orange-to-vivid-red-gradient-background {
-		background: linear-gradient(135deg, rgba(255, 105, 0, 1) 0%, rgb(207, 46, 46) 100%);
+		background: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);
 	}
 
 	.has-very-light-gray-to-cyan-bluish-gray-gradient-background {
-		background: linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195) 100%);
+		background: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
 	}
 
 	.has-cool-to-warm-spectrum-gradient-background {
-		background: linear-gradient(135deg, rgb(74, 234, 220) 0%, rgb(151, 120, 209) 20%, rgb(207, 42, 186) 40%, rgb(238, 44, 130) 60%, rgb(251, 105, 98) 80%, rgb(254, 248, 76) 100%);
+		background: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
 	}
 
 	.has-blush-light-purple-gradient-background {
-		background: linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100%);
+		background: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
 	}
 
 	.has-blush-bordeaux-gradient-background {
-		background: linear-gradient(135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100%);
+		background: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
 	}
 
 	.has-purple-crush-gradient-background {
-		background: linear-gradient(135deg, rgb(52, 226, 228) 0%, rgb(71, 33, 251) 50%, rgb(171, 29, 254) 100%);
+		background: linear-gradient(135deg,rgb(52,226,228) 0%,rgb(71,33,251) 50%,rgb(171,29,254) 100%);
 	}
 
 	.has-luminous-dusk-gradient-background {
-		background: linear-gradient(135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 50%, rgb(65, 88, 208) 100%);
+		background: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
 	}
 
 	.has-hazy-dawn-gradient-background {
-		background: linear-gradient(135deg, rgb(250, 172, 168) 0%, rgb(218, 208, 236) 100%);
+		background: linear-gradient(135deg,rgb(250,172,168) 0%,rgb(218,208,236) 100%);
 	}
 
 	.has-pale-ocean-gradient-background {
-		background: linear-gradient(135deg, rgb(255, 245, 203) 0%, rgb(182, 227, 212) 50%, rgb(51, 167, 181) 100%);
+		background: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
 	}
 
 	.has-electric-grass-gradient-background {
-		background: linear-gradient(135deg, rgb(202, 248, 128) 0%, rgb(113, 206, 126) 100%);
+		background: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
 	}
 
 	.has-subdued-olive-gradient-background {
-		background: linear-gradient(135deg, rgb(250, 250, 225) 0%, rgb(103, 166, 113) 100%);
+		background: linear-gradient(135deg,rgb(250,250,225) 0%,rgb(103,166,113) 100%);
 	}
 
 	.has-atomic-cream-gradient-background {
-		background: linear-gradient(135deg, rgb(253, 215, 154) 0%, rgb(0, 74, 89) 100%);
+		background: linear-gradient(135deg,rgb(253,215,154) 0%,rgb(0,74,89) 100%);
 	}
 
 	.has-nightshade-gradient-background {
-		background: linear-gradient(135deg, rgb(51, 9, 104) 0%, rgb(49, 205, 207) 100%);
+		background: linear-gradient(135deg,rgb(51,9,104) 0%,rgb(49,205,207) 100%);
 	}
 
 	.has-midnight-gradient-background {
-		background: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);
+		background: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);
 	}
 	/* stylelint-enable function-comma-space-after */
 }
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index e72519d4f503f..3e4a7b94e78a7 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -89,7 +89,13 @@
 			background-size: 100px 100%;
 			// Disable reason: This function call looks nicer when each argument is on its own line.
 			/* stylelint-disable */
-			background-image: linear-gradient(-45deg, $theme-color 28%, color($theme-color shade(20%)) 28%, color($theme-color shade(20%)) 72%, $theme-color 72%);
+			background-image: linear-gradient(
+				-45deg,
+				$theme-color 28%,
+				color($theme-color shade(20%)) 28%,
+				color($theme-color shade(20%)) 72%,
+				$theme-color 72%
+			);
 			/* stylelint-enable */
 			border-color: color($theme-color);
 		}
diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
new file mode 100644
index 0000000000000..760221f289041
--- /dev/null
+++ b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
@@ -0,0 +1,576 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColorPalette Dropdown .renderContent should render dropdown content 1`] = `
+<div
+  className="components-color-picker is-alpha-disabled"
+>
+  <div
+    className="components-color-picker__saturation"
+  >
+    <Pure(WithInstanceId(Saturation))
+      hsl={
+        Object {
+          "a": 1,
+          "h": 0,
+          "l": 50,
+          "s": 100,
+        }
+      }
+      hsv={
+        Object {
+          "a": 1,
+          "h": 0,
+          "s": 100,
+          "v": 100,
+        }
+      }
+      onChange={[Function]}
+    />
+  </div>
+  <div
+    className="components-color-picker__body"
+  >
+    <div
+      className="components-color-picker__controls"
+    >
+      <div
+        className="components-color-picker__swatch"
+      >
+        <div
+          className="components-color-picker__active"
+          style={
+            Object {
+              "backgroundColor": "rgb(255, 0, 0)",
+            }
+          }
+        />
+      </div>
+      <div
+        className="components-color-picker__toggles"
+      >
+        <Pure(WithInstanceId(Hue))
+          hsl={
+            Object {
+              "a": 1,
+              "h": 0,
+              "l": 50,
+              "s": 100,
+            }
+          }
+          onChange={[Function]}
+        />
+      </div>
+    </div>
+    <Inputs
+      disableAlpha={true}
+      hex="#ff0000"
+      hsl={
+        Object {
+          "a": 1,
+          "h": 0,
+          "l": 50,
+          "s": 100,
+        }
+      }
+      onChange={[Function]}
+      rgb={
+        Object {
+          "a": 1,
+          "b": 0,
+          "g": 0,
+          "r": 255,
+        }
+      }
+    />
+  </div>
+</div>
+`;
+
+exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`] = `
+<button
+  aria-expanded={true}
+  aria-label="Custom color picker"
+  className="components-button is-link"
+  onClick={[MockFunction]}
+  type="button"
+>
+  Custom color
+</button>
+`;
+
+exports[`ColorPalette Dropdown should render it correctly 1`] = `
+<Dropdown
+  className="components-circular-option-picker__dropdown-link-action"
+  contentClassName="components-color-palette__picker"
+  renderContent={[Function]}
+  renderToggle={[Function]}
+>
+  <div
+    className="components-dropdown components-circular-option-picker__dropdown-link-action"
+  >
+    <ForwardRef(Button)
+      aria-expanded={false}
+      aria-label="Custom color picker"
+      isLink={true}
+      onClick={[Function]}
+    >
+      <button
+        aria-expanded={false}
+        aria-label="Custom color picker"
+        className="components-button is-link"
+        onClick={[Function]}
+        type="button"
+      >
+        Custom color
+      </button>
+    </ForwardRef(Button)>
+  </div>
+</Dropdown>
+`;
+
+exports[`ColorPalette should allow disabling custom color picker 1`] = `
+<CircularOptionPicker
+  actions={
+    <React.Fragment>
+      <ButtonAction
+        onClick={[Function]}
+      >
+        Clear
+      </ButtonAction>
+    </React.Fragment>
+  }
+  options={
+    Array [
+      <Option
+        aria-label="Color: red"
+        isSelected={true}
+        onClick={[Function]}
+        selectedIconProps={
+          Object {
+            "fill": "#000000",
+          }
+        }
+        style={
+          Object {
+            "backgroundColor": "#f00",
+            "color": "#f00",
+          }
+        }
+        tooltipText="red"
+      />,
+      <Option
+        aria-label="Color: white"
+        isSelected={false}
+        onClick={[Function]}
+        selectedIconProps={Object {}}
+        style={
+          Object {
+            "backgroundColor": "#fff",
+            "color": "#fff",
+          }
+        }
+        tooltipText="white"
+      />,
+      <Option
+        aria-label="Color: blue"
+        isSelected={false}
+        onClick={[Function]}
+        selectedIconProps={Object {}}
+        style={
+          Object {
+            "backgroundColor": "#00f",
+            "color": "#00f",
+          }
+        }
+        tooltipText="blue"
+      />,
+    ]
+  }
+/>
+`;
+
+exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
+<ColorPalette
+  colors={
+    Array [
+      Object {
+        "color": "#f00",
+        "name": "red",
+      },
+      Object {
+        "color": "#fff",
+        "name": "white",
+      },
+      Object {
+        "color": "#00f",
+        "name": "blue",
+      },
+    ]
+  }
+  onChange={[MockFunction]}
+  value="#f00"
+>
+  <CircularOptionPicker
+    actions={
+      <React.Fragment>
+        <DropdownLinkAction
+          buttonProps={
+            Object {
+              "aria-label": "Custom color picker",
+            }
+          }
+          dropdownProps={
+            Object {
+              "contentClassName": "components-color-palette__picker",
+              "renderContent": [Function],
+            }
+          }
+          linkText="Custom color"
+        />
+        <ButtonAction
+          onClick={[Function]}
+        >
+          Clear
+        </ButtonAction>
+      </React.Fragment>
+    }
+    options={
+      Array [
+        <Option
+          aria-label="Color: red"
+          isSelected={true}
+          onClick={[Function]}
+          selectedIconProps={
+            Object {
+              "fill": "#000000",
+            }
+          }
+          style={
+            Object {
+              "backgroundColor": "#f00",
+              "color": "#f00",
+            }
+          }
+          tooltipText="red"
+        />,
+        <Option
+          aria-label="Color: white"
+          isSelected={false}
+          onClick={[Function]}
+          selectedIconProps={Object {}}
+          style={
+            Object {
+              "backgroundColor": "#fff",
+              "color": "#fff",
+            }
+          }
+          tooltipText="white"
+        />,
+        <Option
+          aria-label="Color: blue"
+          isSelected={false}
+          onClick={[Function]}
+          selectedIconProps={Object {}}
+          style={
+            Object {
+              "backgroundColor": "#00f",
+              "color": "#00f",
+            }
+          }
+          tooltipText="blue"
+        />,
+      ]
+    }
+  >
+    <div
+      className="components-circular-option-picker"
+    >
+      <Option
+        aria-label="Color: red"
+        isSelected={true}
+        key="#f00"
+        onClick={[Function]}
+        selectedIconProps={
+          Object {
+            "fill": "#000000",
+          }
+        }
+        style={
+          Object {
+            "backgroundColor": "#f00",
+            "color": "#f00",
+          }
+        }
+        tooltipText="red"
+      >
+        <div
+          className="components-circular-option-picker__option-wrapper"
+        >
+          <Tooltip
+            text="red"
+          >
+            <ForwardRef(Button)
+              aria-label="Color: red"
+              className="components-circular-option-picker__option"
+              isPressed={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              style={
+                Object {
+                  "backgroundColor": "#f00",
+                  "color": "#f00",
+                }
+              }
+            >
+              <button
+                aria-label="Color: red"
+                aria-pressed={true}
+                className="components-button components-circular-option-picker__option is-pressed"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                style={
+                  Object {
+                    "backgroundColor": "#f00",
+                    "color": "#f00",
+                  }
+                }
+                type="button"
+              />
+            </ForwardRef(Button)>
+          </Tooltip>
+          <Icon
+            fill="#000000"
+            icon={
+              <SVG
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <Path
+                  d="M9 18.6L3.5 13l1-1L9 16.4l9.5-9.9 1 1z"
+                />
+              </SVG>
+            }
+          >
+            <SVG
+              fill="#000000"
+              height={24}
+              viewBox="0 0 24 24"
+              width={24}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <svg
+                aria-hidden="true"
+                fill="#000000"
+                focusable="false"
+                height={24}
+                role="img"
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <Path
+                  d="M9 18.6L3.5 13l1-1L9 16.4l9.5-9.9 1 1z"
+                >
+                  <path
+                    d="M9 18.6L3.5 13l1-1L9 16.4l9.5-9.9 1 1z"
+                  />
+                </Path>
+              </svg>
+            </SVG>
+          </Icon>
+        </div>
+      </Option>
+      <Option
+        aria-label="Color: white"
+        isSelected={false}
+        key="#fff"
+        onClick={[Function]}
+        selectedIconProps={Object {}}
+        style={
+          Object {
+            "backgroundColor": "#fff",
+            "color": "#fff",
+          }
+        }
+        tooltipText="white"
+      >
+        <div
+          className="components-circular-option-picker__option-wrapper"
+        >
+          <Tooltip
+            text="white"
+          >
+            <ForwardRef(Button)
+              aria-label="Color: white"
+              className="components-circular-option-picker__option"
+              isPressed={false}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              style={
+                Object {
+                  "backgroundColor": "#fff",
+                  "color": "#fff",
+                }
+              }
+            >
+              <button
+                aria-label="Color: white"
+                aria-pressed={false}
+                className="components-button components-circular-option-picker__option"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                style={
+                  Object {
+                    "backgroundColor": "#fff",
+                    "color": "#fff",
+                  }
+                }
+                type="button"
+              />
+            </ForwardRef(Button)>
+          </Tooltip>
+        </div>
+      </Option>
+      <Option
+        aria-label="Color: blue"
+        isSelected={false}
+        key="#00f"
+        onClick={[Function]}
+        selectedIconProps={Object {}}
+        style={
+          Object {
+            "backgroundColor": "#00f",
+            "color": "#00f",
+          }
+        }
+        tooltipText="blue"
+      >
+        <div
+          className="components-circular-option-picker__option-wrapper"
+        >
+          <Tooltip
+            text="blue"
+          >
+            <ForwardRef(Button)
+              aria-label="Color: blue"
+              className="components-circular-option-picker__option"
+              isPressed={false}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              style={
+                Object {
+                  "backgroundColor": "#00f",
+                  "color": "#00f",
+                }
+              }
+            >
+              <button
+                aria-label="Color: blue"
+                aria-pressed={false}
+                className="components-button components-circular-option-picker__option"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                style={
+                  Object {
+                    "backgroundColor": "#00f",
+                    "color": "#00f",
+                  }
+                }
+                type="button"
+              />
+            </ForwardRef(Button)>
+          </Tooltip>
+        </div>
+      </Option>
+      <div
+        className="components-circular-option-picker__custom-clear-wrapper"
+      >
+        <DropdownLinkAction
+          buttonProps={
+            Object {
+              "aria-label": "Custom color picker",
+            }
+          }
+          dropdownProps={
+            Object {
+              "contentClassName": "components-color-palette__picker",
+              "renderContent": [Function],
+            }
+          }
+          linkText="Custom color"
+        >
+          <Dropdown
+            className="components-circular-option-picker__dropdown-link-action"
+            contentClassName="components-color-palette__picker"
+            renderContent={[Function]}
+            renderToggle={[Function]}
+          >
+            <div
+              className="components-dropdown components-circular-option-picker__dropdown-link-action"
+            >
+              <ForwardRef(Button)
+                aria-expanded={false}
+                aria-label="Custom color picker"
+                isLink={true}
+                onClick={[Function]}
+              >
+                <button
+                  aria-expanded={false}
+                  aria-label="Custom color picker"
+                  className="components-button is-link"
+                  onClick={[Function]}
+                  type="button"
+                >
+                  Custom color
+                </button>
+              </ForwardRef(Button)>
+            </div>
+          </Dropdown>
+        </DropdownLinkAction>
+        <ButtonAction
+          onClick={[Function]}
+        >
+          <ForwardRef(Button)
+            className="components-circular-option-picker__clear"
+            isSecondary={true}
+            isSmall={true}
+            onClick={[Function]}
+          >
+            <button
+              className="components-button components-circular-option-picker__clear is-secondary is-small"
+              onClick={[Function]}
+              type="button"
+            >
+              Clear
+            </button>
+          </ForwardRef(Button)>
+        </ButtonAction>
+      </div>
+    </div>
+  </CircularOptionPicker>
+</ColorPalette>
+`;
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
index 78d4e12e586f2..d5530ee3d4953 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -24,18 +24,22 @@ import {
 
 const inserterToggleProps = { isPrimary: true };
 
-const HeaderToolbar = () => {
+function HeaderToolbar() {
 	const {
 		hasFixedToolbar,
+		showInserter,
 		isTextModeEnabled,
 		previewDeviceType,
 		showIconLabels,
-		showInserter,
 	} = useSelect(
 		( select ) => ( {
 			hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive(
 				'fixedToolbar'
 			),
+			// This setting (richEditingEnabled) should not live in the block editor's setting.
+			showInserter:
+				select( 'core/edit-post' ).getEditorMode() === 'visual' &&
+				select( 'core/editor' ).getEditorSettings().richEditingEnabled,
 			isTextModeEnabled:
 				select( 'core/edit-post' ).getEditorMode() === 'text',
 			previewDeviceType: select(
@@ -44,10 +48,6 @@ const HeaderToolbar = () => {
 			showIconLabels: select( 'core/edit-post' ).isFeatureActive(
 				'showIconLabels'
 			),
-			// This setting (richEditingEnabled) should not live in the block editor's setting.
-			showInserter:
-				select( 'core/edit-post' ).getEditorMode() === 'visual' &&
-				select( 'core/editor' ).getEditorSettings().richEditingEnabled,
 		} ),
 		[]
 	);
@@ -87,6 +87,6 @@ const HeaderToolbar = () => {
 			) }
 		</NavigableToolbar>
 	);
-};
+}
 
 export default HeaderToolbar;
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index ae2a30a0fc42f..25c4d86840018 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -22,19 +22,20 @@ import MoreMenu from './more-menu';
 import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
 import PreviewOptions from '../preview-options';
 
-const Header = () => {
+function Header() {
 	const {
-		getBlockSelectionStart,
+		shortcut,
 		hasActiveMetaboxes,
 		isEditorSidebarOpened,
 		isPublishSidebarOpened,
 		isSaving,
-		shortcut,
+		getBlockSelectionStart,
 		showIconLabels,
 	} = useSelect(
 		( select ) => ( {
-			getBlockSelectionStart: select( 'core/block-editor' )
-				.getBlockSelectionStart,
+			shortcut: select(
+				'core/keyboard-shortcuts'
+			).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ),
 			hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(),
 			isEditorSidebarOpened: select(
 				'core/edit-post'
@@ -43,10 +44,8 @@ const Header = () => {
 				'core/edit-post'
 			).isPublishSidebarOpened(),
 			isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(),
-
-			shortcut: select(
-				'core/keyboard-shortcuts'
-			).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ),
+			getBlockSelectionStart: select( 'core/block-editor' )
+				.getBlockSelectionStart,
 			showIconLabels: select( 'core/edit-post' ).isFeatureActive(
 				'showIconLabels'
 			),
@@ -97,14 +96,14 @@ const Header = () => {
 					forceIsSaving={ isSaving }
 				/>
 				<Button
-					aria-expanded={ isEditorSidebarOpened }
 					className={ classnames( {
 						'has-text-label': showIconLabels,
 					} ) }
 					icon={ cog }
-					isPressed={ isEditorSidebarOpened }
 					label={ __( 'Settings' ) }
 					onClick={ toggleGeneralSidebar }
+					isPressed={ isEditorSidebarOpened }
+					aria-expanded={ isEditorSidebarOpened }
 					shortcut={ shortcut }
 				/>
 				<PinnedItems.Slot scope="core/edit-post" />
@@ -112,6 +111,6 @@ const Header = () => {
 			</div>
 		</div>
 	);
-};
+}
 
 export default Header;
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index 1054555d1efc4..cefe88620b267 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -25,7 +25,7 @@
 		order: 1;
 
 		// Restore default order for all other browsers
-		@supports ( position: sticky ) {
+		@supports (position: sticky) {
 			order: initial;
 		}
 	}
@@ -55,6 +55,10 @@
 	flex-wrap: wrap;
 	padding-right: $grid-unit-05;
 
+	@include break-small() {
+		padding-right: $grid-unit-20;
+	}
+
 	button.admin-settings[aria-label] {
 		&.has-text-label {
 			color: $white;
@@ -70,12 +74,9 @@
 			}
 		}
 	}
-
-	@include break-small() {
-		padding-right: $grid-unit-20;
-	}
 }
 
+
 /**
  * Buttons in the Toolbar
  */
@@ -89,6 +90,7 @@
 	}
 }
 
+
 .edit-post-header__settings {
 	// Header toggle buttons.
 	.components-button.is-pressed {
diff --git a/packages/edit-post/src/components/options-modal/options/base.js b/packages/edit-post/src/components/options-modal/options/base.js
index 52f9db7ad4e11..cef8fe130b268 100644
--- a/packages/edit-post/src/components/options-modal/options/base.js
+++ b/packages/edit-post/src/components/options-modal/options/base.js
@@ -3,13 +3,17 @@
  */
 import { CheckboxControl } from '@wordpress/components';
 
-const BaseOption = ( { label, isChecked, onChange } ) => (
-	<CheckboxControl
-		className="edit-post-options-modal__option"
-		label={ label }
-		checked={ isChecked }
-		onChange={ onChange }
-	/>
-);
+function BaseOption( { label, isChecked, onChange, children } ) {
+	return (
+		<div className="edit-post-options-modal__option">
+			<CheckboxControl
+				label={ label }
+				checked={ isChecked }
+				onChange={ onChange }
+			/>
+			{ children }
+		</div>
+	);
+}
 
 export default BaseOption;
diff --git a/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap
index 396b6eadbffbd..438c185faca3e 100644
--- a/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap
@@ -55,12 +55,5 @@ exports[`OptionsModal should match snapshot when the modal is active 1`] = `
   <WithSelect(MetaBoxesSection)
     title="Advanced panels"
   />
-  <Section
-    title="Icon Labels"
-  >
-    <WithSelect(WithDispatch(BaseOption))
-      label="Show Icon Labels"
-    />
-  </Section>
 </WithInstanceId(Modal)>
 `;
diff --git a/packages/edit-post/src/store/defaults.js b/packages/edit-post/src/store/defaults.js
index a0a7206477496..46949ec9cea19 100644
--- a/packages/edit-post/src/store/defaults.js
+++ b/packages/edit-post/src/store/defaults.js
@@ -7,9 +7,9 @@ export const PREFERENCES_DEFAULTS = {
 	},
 	features: {
 		fixedToolbar: false,
+		welcomeGuide: true,
 		fullscreenMode: true,
 		showIconLabels: false,
-		welcomeGuide: true,
 	},
 	hiddenBlockTypes: [],
 	preferredStyleVariations: {},

From 477fad7d21d7f2a1136fb585c35440009837e7a1 Mon Sep 17 00:00:00 2001
From: Vadim Nicolai <nicolai.vadim@gmail.com>
Date: Mon, 23 Mar 2020 11:08:02 +0200
Subject: [PATCH 15/21] Removed overflow: hidden; on components-button class
 name.

---
 packages/components/src/button/style.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 3e4a7b94e78a7..3f9e75e354d68 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -13,7 +13,6 @@
 	align-items: center;
 	box-sizing: border-box;
 	padding: 6px 12px;
-	overflow: hidden;
 	border-radius: $radius-block-ui;
 	color: $dark-gray-primary;
 

From 941a0bbe1526677afbf80344da4392f967faebc2 Mon Sep 17 00:00:00 2001
From: Vadim Nicolai <nicolai.vadim@gmail.com>
Date: Wed, 8 Apr 2020 12:20:29 +0300
Subject: [PATCH 16/21] Updated HeaderToolbar and it's styles.

---
 packages/components/src/button/index.js       |  2 +
 packages/components/src/button/style.scss     |  5 ++
 .../components/header/header-toolbar/index.js | 48 ++++++++++---------
 .../header/header-toolbar/style.scss          | 17 ++++++-
 .../edit-post/src/components/header/index.js  | 15 ++----
 .../components/header/more-menu/style.scss    |  4 +-
 .../src/components/header/style.scss          | 16 -------
 7 files changed, 54 insertions(+), 53 deletions(-)

diff --git a/packages/components/src/button/index.js b/packages/components/src/button/index.js
index 7e5acfb6f2ccf..4d5752d8a549f 100644
--- a/packages/components/src/button/index.js
+++ b/packages/components/src/button/index.js
@@ -36,6 +36,7 @@ export function Button( props, ref ) {
 		disabled,
 		icon,
 		iconSize,
+		showIconLabel,
 		showTooltip,
 		tooltipPosition,
 		shortcut,
@@ -113,6 +114,7 @@ export function Button( props, ref ) {
 			ref={ ref }
 		>
 			{ icon && <Icon icon={ icon } size={ iconSize } /> }
+			{ showIconLabel && <div className="label">{ label }</div> }
 			{ children }
 		</Tag>
 	);
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 3f9e75e354d68..0f784716dcabe 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -253,6 +253,11 @@
 		outline: none;
 	}
 
+	.label {
+		flex-basis: 100%;
+		margin-left: 5px;
+	}
+
 	// Fixes a Safari+VoiceOver bug, where the screen reader text is announced not respecting the source order.
 	// See https://core.trac.wordpress.org/ticket/42006 and https://github.com/h5bp/html5-boilerplate/issues/1985
 	.components-visually-hidden {
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
index d5530ee3d4953..5625470eacaf8 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -52,6 +52,7 @@ function HeaderToolbar() {
 		[]
 	);
 	const isLargeViewport = useViewportMatch( 'medium' );
+	const isWideViewport = useViewportMatch( 'wide' );
 
 	const displayBlockToolbar =
 		! isLargeViewport || previewDeviceType !== 'Desktop' || hasFixedToolbar;
@@ -63,28 +64,31 @@ function HeaderToolbar() {
 		  __( 'Document tools' );
 
 	return (
-		<NavigableToolbar
-			className={ classnames( 'edit-post-header-toolbar', {
-				'show-icon-labels': showIconLabels,
-			} ) }
-			aria-label={ toolbarAriaLabel }
-		>
-			<Inserter
-				disabled={ ! showInserter }
-				position="bottom right"
-				showInserterHelpPanel
-				toggleProps={ inserterToggleProps }
-			/>
-			<ToolSelector />
-			<EditorHistoryUndo />
-			<EditorHistoryRedo />
-			<TableOfContents hasOutlineItemsDisabled={ isTextModeEnabled } />
-			<BlockNavigationDropdown isDisabled={ isTextModeEnabled } />
-			{ displayBlockToolbar && (
-				<div className="edit-post-header-toolbar__block-toolbar">
-					<BlockToolbar hideDragHandle />
-				</div>
-			) }
+		<NavigableToolbar aria-label={ toolbarAriaLabel }>
+			<div
+				className={ classnames( 'edit-post-header-toolbar', {
+					'show-icon-labels': isWideViewport && showIconLabels,
+				} ) }
+			>
+				<Inserter
+					disabled={ ! showInserter }
+					position="bottom right"
+					showInserterHelpPanel
+					toggleProps={ inserterToggleProps }
+				/>
+				<ToolSelector />
+				<EditorHistoryUndo />
+				<EditorHistoryRedo />
+				<TableOfContents
+					hasOutlineItemsDisabled={ isTextModeEnabled }
+				/>
+				<BlockNavigationDropdown isDisabled={ isTextModeEnabled } />
+				{ displayBlockToolbar && (
+					<div className="edit-post-header-toolbar__block-toolbar">
+						<BlockToolbar hideDragHandle />
+					</div>
+				) }
+			</div>
 		</NavigableToolbar>
 	);
 }
diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss
index 1a1e89c4bef49..ad2547c6cf3b4 100644
--- a/packages/edit-post/src/components/header/header-toolbar/style.scss
+++ b/packages/edit-post/src/components/header/header-toolbar/style.scss
@@ -21,15 +21,28 @@
 	}
 	&.show-icon-labels {
 		button[aria-label] {
-			display: block;
+			display: inline-flex;
+			flex-wrap: nowrap;
 			&::after {
 				content: attr(aria-label);
 				display: block;
 				font-size: 12px;
+				margin-left: 5px;
 			}
 			&.is-primary {
 				&::after {
-					color: $black;
+					padding-right: 6px;
+				}
+			}
+		}
+		[aria-orientation=vertical] & {
+			display: block;
+		}
+		> div, > button {
+			[aria-orientation=vertical] & {
+				display: block;
+				button {
+					width: 100%;
 				}
 			}
 		}
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index 25c4d86840018..a032141d3ee1e 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -30,7 +25,7 @@ function Header() {
 		isPublishSidebarOpened,
 		isSaving,
 		getBlockSelectionStart,
-		showIconLabels,
+		showIconLabel,
 	} = useSelect(
 		( select ) => ( {
 			shortcut: select(
@@ -46,7 +41,7 @@ function Header() {
 			isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(),
 			getBlockSelectionStart: select( 'core/block-editor' )
 				.getBlockSelectionStart,
-			showIconLabels: select( 'core/edit-post' ).isFeatureActive(
+			showIconLabel: select( 'core/edit-post' ).isFeatureActive(
 				'showIconLabels'
 			),
 		} ),
@@ -96,18 +91,16 @@ function Header() {
 					forceIsSaving={ isSaving }
 				/>
 				<Button
-					className={ classnames( {
-						'has-text-label': showIconLabels,
-					} ) }
 					icon={ cog }
 					label={ __( 'Settings' ) }
 					onClick={ toggleGeneralSidebar }
 					isPressed={ isEditorSidebarOpened }
 					aria-expanded={ isEditorSidebarOpened }
+					showIconLabel={ showIconLabel }
 					shortcut={ shortcut }
 				/>
 				<PinnedItems.Slot scope="core/edit-post" />
-				<MoreMenu />
+				<MoreMenu showIconLabel={ showIconLabel } />
 			</div>
 		</div>
 	);
diff --git a/packages/edit-post/src/components/header/more-menu/style.scss b/packages/edit-post/src/components/header/more-menu/style.scss
index 626f2ff246ddb..8d6316f165435 100644
--- a/packages/edit-post/src/components/header/more-menu/style.scss
+++ b/packages/edit-post/src/components/header/more-menu/style.scss
@@ -9,11 +9,11 @@
 
 	&.show-icon-label {
 		button[aria-label] {
-			display: block;
+			display: inline-flex;
 			&::after {
 				content: attr(aria-label);
-				display: block;
 				font-size: 12px;
+				margin-left: 5px;
 			}
 		}
 	}
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index cefe88620b267..24cc81728d111 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -58,22 +58,6 @@
 	@include break-small() {
 		padding-right: $grid-unit-20;
 	}
-
-	button.admin-settings[aria-label] {
-		&.has-text-label {
-			color: $white;
-			background: $dark-gray-500;
-			&:hover {
-				color: $white;
-				background: $dark-gray-600;
-			}
-			&::after {
-				content: attr(aria-label);
-				display: inline-block;
-				font-size: 12px;
-			}
-		}
-	}
 }
 
 

From 229addc738e27570d2e1dfb7b95937d93b263f13 Mon Sep 17 00:00:00 2001
From: Vadim Nicolai <nicolai.vadim@gmail.com>
Date: Mon, 13 Apr 2020 01:30:11 +0300
Subject: [PATCH 17/21] Moved header settings into a dropdown when viewport is
 less than large.

---
 .../components/header/header-toolbar/index.js | 47 +++++----
 .../edit-post/src/components/header/index.js  | 95 ++++++++++++-------
 .../src/components/header/style.scss          | 26 +++++
 3 files changed, 107 insertions(+), 61 deletions(-)

diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
index 5625470eacaf8..7c08e5cd977f4 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -64,31 +64,28 @@ function HeaderToolbar() {
 		  __( 'Document tools' );
 
 	return (
-		<NavigableToolbar aria-label={ toolbarAriaLabel }>
-			<div
-				className={ classnames( 'edit-post-header-toolbar', {
-					'show-icon-labels': isWideViewport && showIconLabels,
-				} ) }
-			>
-				<Inserter
-					disabled={ ! showInserter }
-					position="bottom right"
-					showInserterHelpPanel
-					toggleProps={ inserterToggleProps }
-				/>
-				<ToolSelector />
-				<EditorHistoryUndo />
-				<EditorHistoryRedo />
-				<TableOfContents
-					hasOutlineItemsDisabled={ isTextModeEnabled }
-				/>
-				<BlockNavigationDropdown isDisabled={ isTextModeEnabled } />
-				{ displayBlockToolbar && (
-					<div className="edit-post-header-toolbar__block-toolbar">
-						<BlockToolbar hideDragHandle />
-					</div>
-				) }
-			</div>
+		<NavigableToolbar
+			aria-label={ toolbarAriaLabel }
+			className={ classnames( 'edit-post-header-toolbar', {
+				'show-icon-labels': isWideViewport && showIconLabels,
+			} ) }
+		>
+			<Inserter
+				disabled={ ! showInserter }
+				position="bottom right"
+				showInserterHelpPanel
+				toggleProps={ inserterToggleProps }
+			/>
+			<ToolSelector />
+			<EditorHistoryUndo />
+			<EditorHistoryRedo />
+			<TableOfContents hasOutlineItemsDisabled={ isTextModeEnabled } />
+			<BlockNavigationDropdown isDisabled={ isTextModeEnabled } />
+			{ displayBlockToolbar && (
+				<div className="edit-post-header-toolbar__block-toolbar">
+					<BlockToolbar hideDragHandle />
+				</div>
+			) }
 		</NavigableToolbar>
 	);
 }
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index a032141d3ee1e..b82b0b8bb2c0c 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import { Button, Dropdown } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
 import { PostPreviewButton, PostSavedState } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { cog } from '@wordpress/icons';
@@ -51,6 +52,8 @@ function Header() {
 		'core/edit-post'
 	);
 
+	const isLargeViewport = useViewportMatch( 'large' );
+
 	const toggleGeneralSidebar = isEditorSidebarOpened
 		? closeGeneralSidebar
 		: () =>
@@ -60,48 +63,68 @@ function Header() {
 						: 'edit-post/document'
 				);
 
+	const headerSettings = (
+		<div className="edit-post-header__settings">
+			{ ! isPublishSidebarOpened && (
+				// This button isn't completely hidden by the publish sidebar.
+				// We can't hide the whole toolbar when the publish sidebar is open because
+				// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
+				// We track that DOM node to return focus to the PostPublishButtonOrToggle
+				// when the publish sidebar has been closed.
+				<PostSavedState
+					forceIsDirty={ hasActiveMetaboxes }
+					forceIsSaving={ isSaving }
+				/>
+			) }
+			<PreviewOptions
+				forceIsAutosaveable={ hasActiveMetaboxes }
+				forcePreviewLink={ isSaving ? null : undefined }
+			/>
+			<PostPreviewButton
+				forceIsAutosaveable={ hasActiveMetaboxes }
+				forcePreviewLink={ isSaving ? null : undefined }
+			/>
+			<PostPublishButtonOrToggle
+				forceIsDirty={ hasActiveMetaboxes }
+				forceIsSaving={ isSaving }
+			/>
+			<Button
+				icon={ cog }
+				label={ __( 'Settings' ) }
+				onClick={ toggleGeneralSidebar }
+				isPressed={ isEditorSidebarOpened }
+				aria-expanded={ isEditorSidebarOpened }
+				showIconLabel={ showIconLabel }
+				shortcut={ shortcut }
+			/>
+			<PinnedItems.Slot scope="core/edit-post" />
+			<MoreMenu showIconLabel={ showIconLabel } />
+		</div>
+	);
+
 	return (
 		<div className="edit-post-header">
 			<FullscreenModeClose />
 			<div className="edit-post-header__toolbar">
 				<HeaderToolbar />
 			</div>
-			<div className="edit-post-header__settings">
-				{ ! isPublishSidebarOpened && (
-					// This button isn't completely hidden by the publish sidebar.
-					// We can't hide the whole toolbar when the publish sidebar is open because
-					// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
-					// We track that DOM node to return focus to the PostPublishButtonOrToggle
-					// when the publish sidebar has been closed.
-					<PostSavedState
-						forceIsDirty={ hasActiveMetaboxes }
-						forceIsSaving={ isSaving }
-					/>
-				) }
-				<PreviewOptions
-					forceIsAutosaveable={ hasActiveMetaboxes }
-					forcePreviewLink={ isSaving ? null : undefined }
+			{ isLargeViewport && headerSettings }
+			{ ! isLargeViewport && (
+				<Dropdown
+					className="my-container-class-name"
+					contentClassName="my-popover-content-classname"
+					position="bottom right"
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<Button
+							isPrimary
+							onClick={ onToggle }
+							aria-expanded={ isOpen }
+							icon="menu"
+						/>
+					) }
+					renderContent={ () => headerSettings }
 				/>
-				<PostPreviewButton
-					forceIsAutosaveable={ hasActiveMetaboxes }
-					forcePreviewLink={ isSaving ? null : undefined }
-				/>
-				<PostPublishButtonOrToggle
-					forceIsDirty={ hasActiveMetaboxes }
-					forceIsSaving={ isSaving }
-				/>
-				<Button
-					icon={ cog }
-					label={ __( 'Settings' ) }
-					onClick={ toggleGeneralSidebar }
-					isPressed={ isEditorSidebarOpened }
-					aria-expanded={ isEditorSidebarOpened }
-					showIconLabel={ showIconLabel }
-					shortcut={ shortcut }
-				/>
-				<PinnedItems.Slot scope="core/edit-post" />
-				<MoreMenu showIconLabel={ showIconLabel } />
-			</div>
+			) }
 		</div>
 	);
 }
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index 24cc81728d111..77636eb14554e 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -55,11 +55,37 @@
 	flex-wrap: wrap;
 	padding-right: $grid-unit-05;
 
+	.my-popover-content-classname {
+		display: block;
+	}
+
 	@include break-small() {
 		padding-right: $grid-unit-20;
 	}
 }
 
+//temp
+.my-container-class-name {
+	> button {
+		margin-right: 1rem;
+	}
+}
+.my-popover-content-classname {
+	.components-popover__content {
+		min-width: auto;
+	}
+	.edit-post-header__settings {
+		display: block;
+		> div,
+		> button {
+			display: inline-flex;
+			margin-bottom: 1rem;
+			text-align: left;
+			width: 100%;
+		}
+	}
+}
+
 
 /**
  * Buttons in the Toolbar

From 84784750acff938de18b5dbc47b470dba799b555 Mon Sep 17 00:00:00 2001
From: Vadim Nicolai <nicolai.vadim@gmail.com>
Date: Sat, 25 Apr 2020 01:18:24 +0300
Subject: [PATCH 18/21] Hide tooltip when show icon is enabled.

---
 .../components/block-navigation/dropdown.js   | 12 ++-
 .../src/components/tool-selector/index.js     |  3 +-
 packages/components/src/button/index.js       |  3 +-
 .../components/src/dropdown-menu/index.js     |  8 +-
 .../components/header/header-toolbar/index.js | 21 +++--
 .../header/header-toolbar/style.scss          |  3 +-
 .../edit-post/src/components/header/index.js  | 84 +++----------------
 .../src/components/header/more-menu/index.js  | 81 ++++++++++++------
 .../components/header/more-menu/style.scss    | 11 ---
 .../src/components/editor-history/redo.js     |  3 +-
 .../src/components/editor-history/undo.js     |  3 +-
 .../src/components/table-of-contents/index.js |  7 +-
 12 files changed, 112 insertions(+), 127 deletions(-)

diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js
index b230aac4236ad..ba0e824c3667c 100644
--- a/packages/block-editor/src/components/block-navigation/dropdown.js
+++ b/packages/block-editor/src/components/block-navigation/dropdown.js
@@ -53,7 +53,10 @@ function BlockNavigationDropdownToggle( { isEnabled, onToggle, isOpen } ) {
 	);
 }
 
-function BlockNavigationDropdown( { isDisabled } ) {
+function BlockNavigationDropdown( {
+	isDisabled,
+	__experimentalWithBlockNavigationSlots,
+} ) {
 	const hasBlocks = useSelect(
 		( select ) => !! select( 'core/block-editor' ).getBlockCount(),
 		[]
@@ -71,7 +74,12 @@ function BlockNavigationDropdown( { isDisabled } ) {
 				/>
 			) }
 			renderContent={ ( { onClose } ) => (
-				<BlockNavigation onSelect={ onClose } />
+				<BlockNavigation
+					onSelect={ onClose }
+					__experimentalWithBlockNavigationSlots={
+						__experimentalWithBlockNavigationSlots
+					}
+				/>
 			) }
 		/>
 	);
diff --git a/packages/block-editor/src/components/tool-selector/index.js b/packages/block-editor/src/components/tool-selector/index.js
index e09c516eca132..eb74e4a3251e2 100644
--- a/packages/block-editor/src/components/tool-selector/index.js
+++ b/packages/block-editor/src/components/tool-selector/index.js
@@ -34,7 +34,7 @@ const selectIcon = (
 	</SVG>
 );
 
-function ToolSelector() {
+function ToolSelector( { showTooltip } ) {
 	const isNavigationTool = useSelect(
 		( select ) => select( 'core/block-editor' ).isNavigationMode(),
 		[]
@@ -57,6 +57,7 @@ function ToolSelector() {
 					aria-expanded={ isOpen }
 					onClick={ onToggle }
 					label={ __( 'Tools' ) }
+					showTooltip={ showTooltip }
 				/>
 			) }
 			position="bottom right"
diff --git a/packages/components/src/button/index.js b/packages/components/src/button/index.js
index 4d5752d8a549f..08af4bb17adc0 100644
--- a/packages/components/src/button/index.js
+++ b/packages/components/src/button/index.js
@@ -95,8 +95,7 @@ export function Button( props, ref ) {
 		! trulyDisabled &&
 		// an explicit tooltip is passed or...
 		( ( showTooltip && label ) ||
-			// there's a shortcut or...
-			shortcut ||
+			( shortcut && showTooltip !== false ) ||
 			// there's a label and...
 			( !! label &&
 				// the children are empty and...
diff --git a/packages/components/src/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js
index 288ea6f72d9d4..7a8eeef193630 100644
--- a/packages/components/src/dropdown-menu/index.js
+++ b/packages/components/src/dropdown-menu/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { flatMap, isEmpty, isFunction } from 'lodash';
+import { flatMap, isEmpty, isFunction, isUndefined } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -124,7 +124,11 @@ function DropdownMenu( {
 						aria-haspopup="true"
 						aria-expanded={ isOpen }
 						label={ label }
-						showTooltip
+						showTooltip={
+							isUndefined( mergedToggleProps.showTooltip )
+								? true
+								: mergedToggleProps.showTooltip
+						}
 					>
 						{ mergedToggleProps.children }
 					</Button>
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
index 5ee57bdfb6838..09d32ed2b69a9 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -58,6 +58,8 @@ function HeaderToolbar( { onToggleInserter, isInserterOpen } ) {
 	const displayBlockToolbar =
 		! isLargeViewport || previewDeviceType !== 'Desktop' || hasFixedToolbar;
 
+	const showTooltip = ! showIconLabels;
+
 	const toolbarAriaLabel = displayBlockToolbar
 		? /* translators: accessibility text for the editor toolbar when Top Toolbar is on */
 		  __( 'Document and block tools' )
@@ -68,7 +70,7 @@ function HeaderToolbar( { onToggleInserter, isInserterOpen } ) {
 		<NavigableToolbar
 			aria-label={ toolbarAriaLabel }
 			className={ classnames( 'edit-post-header-toolbar', {
-				'show-icon-labels': isWideViewport && showIconLabels,
+				'show-icon-labels': showIconLabels,
 			} ) }
 		>
 			{ isInserterVisible && (
@@ -83,13 +85,20 @@ function HeaderToolbar( { onToggleInserter, isInserterOpen } ) {
 						'Add block',
 						'Generic label for block inserter button'
 					) }
+					showTooltip={ showTooltip }
 				/>
 			) }
-			<ToolSelector />
-			<EditorHistoryUndo />
-			<EditorHistoryRedo />
-			<TableOfContents hasOutlineItemsDisabled={ isTextModeEnabled } />
-			<BlockNavigationDropdown isDisabled={ isTextModeEnabled } />
+			<ToolSelector showTooltip={ showTooltip } />
+			<EditorHistoryUndo showTooltip={ showTooltip } />
+			<EditorHistoryRedo showTooltip={ showTooltip } />
+			<TableOfContents
+				hasOutlineItemsDisabled={ isTextModeEnabled }
+				showTooltip={ showTooltip }
+			/>
+			<BlockNavigationDropdown
+				isDisabled={ isTextModeEnabled }
+				showTooltip={ showTooltip }
+			/>
 			{ displayBlockToolbar && (
 				<div className="edit-post-header-toolbar__block-toolbar">
 					<BlockToolbar hideDragHandle />
diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss
index afedc5b0bbd48..aae578b2474e9 100644
--- a/packages/edit-post/src/components/header/header-toolbar/style.scss
+++ b/packages/edit-post/src/components/header/header-toolbar/style.scss
@@ -35,7 +35,7 @@
 			}
 			&.is-primary {
 				&::after {
-					padding-right: 6px;
+					padding-right: 8px;
 				}
 			}
 		}
@@ -112,7 +112,6 @@
 	margin-right: $grid-unit-10;
 	// Special dimensions for this button.
 	min-width: 32px;
-	width: 32px;
 	height: 32px;
 	padding: 0;
 }
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index d65122acb80ee..127fad3a25dc7 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -2,22 +2,26 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button, Dropdown } from '@wordpress/components';
-import { useViewportMatch } from '@wordpress/compose';
-import { PostPreviewButton, PostSavedState } from '@wordpress/editor';
+import { Button } from '@wordpress/components';
+import { PostSavedState, PostPreviewButton } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { cog } from '@wordpress/icons';
-import { PinnedItems, AdminMenuToggle } from '@wordpress/interface';
+import { PinnedItems } from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
+import FullscreenModeClose from './fullscreen-mode-close';
 import HeaderToolbar from './header-toolbar';
 import MoreMenu from './more-menu';
 import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
 import { default as DevicePreview } from '../device-preview';
 
-function Header( { onToggleInserter, isInserterOpen } ) {
+function Header( {
+	onToggleInserter,
+	isInserterOpen,
+	setEntitiesSavedStatesCallback,
+} ) {
 	const {
 		shortcut,
 		hasActiveMetaboxes,
@@ -25,7 +29,6 @@ function Header( { onToggleInserter, isInserterOpen } ) {
 		isPublishSidebarOpened,
 		isSaving,
 		getBlockSelectionStart,
-		showIconLabel,
 	} = useSelect(
 		( select ) => ( {
 			shortcut: select(
@@ -42,15 +45,9 @@ function Header( { onToggleInserter, isInserterOpen } ) {
 			getBlockSelectionStart: select( 'core/block-editor' )
 				.getBlockSelectionStart,
 			isPostSaveable: select( 'core/editor' ).isEditedPostSaveable(),
-			isFullscreenActive: select( 'core/edit-post' ).isFeatureActive(
-				'fullscreenMode'
-			),
 			deviceType: select(
 				'core/edit-post'
 			).__experimentalGetPreviewDeviceType(),
-			showIconLabel: select( 'core/edit-post' ).isFeatureActive(
-				'showIconLabels'
-			),
 		} ),
 		[]
 	);
@@ -58,8 +55,6 @@ function Header( { onToggleInserter, isInserterOpen } ) {
 		'core/edit-post'
 	);
 
-	const isLargeViewport = useViewportMatch( 'large' );
-
 	const toggleGeneralSidebar = isEditorSidebarOpened
 		? closeGeneralSidebar
 		: () =>
@@ -69,48 +64,9 @@ function Header( { onToggleInserter, isInserterOpen } ) {
 						: 'edit-post/document'
 				);
 
-	const headerSettings = (
-		<div className="edit-post-header__settings">
-			{ ! isPublishSidebarOpened && (
-				// This button isn't completely hidden by the publish sidebar.
-				// We can't hide the whole toolbar when the publish sidebar is open because
-				// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
-				// We track that DOM node to return focus to the PostPublishButtonOrToggle
-				// when the publish sidebar has been closed.
-				<PostSavedState
-					forceIsDirty={ hasActiveMetaboxes }
-					forceIsSaving={ isSaving }
-				/>
-			) }
-			<PreviewOptions
-				forceIsAutosaveable={ hasActiveMetaboxes }
-				forcePreviewLink={ isSaving ? null : undefined }
-			/>
-			<PostPreviewButton
-				forceIsAutosaveable={ hasActiveMetaboxes }
-				forcePreviewLink={ isSaving ? null : undefined }
-			/>
-			<PostPublishButtonOrToggle
-				forceIsDirty={ hasActiveMetaboxes }
-				forceIsSaving={ isSaving }
-			/>
-			<Button
-				icon={ cog }
-				label={ __( 'Settings' ) }
-				onClick={ toggleGeneralSidebar }
-				isPressed={ isEditorSidebarOpened }
-				aria-expanded={ isEditorSidebarOpened }
-				showIconLabel={ showIconLabel }
-				shortcut={ shortcut }
-			/>
-			<PinnedItems.Slot scope="core/edit-post" />
-			<MoreMenu showIconLabel={ showIconLabel } />
-		</div>
-	);
-
 	return (
 		<div className="edit-post-header">
-			{ isFullscreenActive && <AdminMenuToggle /> }
+			<FullscreenModeClose />
 			<div className="edit-post-header__toolbar">
 				<HeaderToolbar
 					onToggleInserter={ onToggleInserter }
@@ -137,6 +93,9 @@ function Header( { onToggleInserter, isInserterOpen } ) {
 				<PostPublishButtonOrToggle
 					forceIsDirty={ hasActiveMetaboxes }
 					forceIsSaving={ isSaving }
+					setEntitiesSavedStatesCallback={
+						setEntitiesSavedStatesCallback
+					}
 				/>
 				<Button
 					icon={ cog }
@@ -149,23 +108,6 @@ function Header( { onToggleInserter, isInserterOpen } ) {
 				<PinnedItems.Slot scope="core/edit-post" />
 				<MoreMenu />
 			</div>
-			{ isLargeViewport && headerSettings }
-			{ ! isLargeViewport && (
-				<Dropdown
-					className="my-container-class-name"
-					contentClassName="my-popover-content-classname"
-					position="bottom right"
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<Button
-							isPrimary
-							onClick={ onToggle }
-							aria-expanded={ isOpen }
-							icon="menu"
-						/>
-					) }
-					renderContent={ () => headerSettings }
-				/>
-			) }
 		</div>
 	);
 }
diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/header/more-menu/index.js
index 3bc1c307a180d..383be35f6f924 100644
--- a/packages/edit-post/src/components/header/more-menu/index.js
+++ b/packages/edit-post/src/components/header/more-menu/index.js
@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { DropdownMenu, MenuGroup } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
+import { useLayoutEffect, useRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -19,36 +20,62 @@ import ToolsMoreMenuGroup from '../tools-more-menu-group';
 import OptionsMenuItem from '../options-menu-item';
 import WritingMenu from '../writing-menu';
 
-const POPOVER_PROPS = {
-	className: 'edit-post-more-menu__content',
-	position: 'bottom left',
-};
 const TOGGLE_PROPS = {
 	tooltipPosition: 'bottom',
 };
 
-const MoreMenu = ( { showIconLabel } ) => (
-	<DropdownMenu
-		className={ classnames( 'edit-post-more-menu', {
-			'show-icon-label': showIconLabel,
-		} ) }
-		icon={ moreVertical }
-		label={ __( 'More options' ) }
-		popoverProps={ POPOVER_PROPS }
-		toggleProps={ TOGGLE_PROPS }
-	>
-		{ ( { onClose } ) => (
-			<>
-				<WritingMenu />
-				<ModeSwitcher />
-				<PluginMoreMenuGroup.Slot fillProps={ { onClose } } />
-				<ToolsMoreMenuGroup.Slot fillProps={ { onClose } } />
-				<MenuGroup>
-					<OptionsMenuItem />
-				</MenuGroup>
-			</>
-		) }
-	</DropdownMenu>
-);
+const MoreMenu = ( { showIconLabel } ) => {
+	const [ anchorRect, setAnchorRect ] = useState( {} );
+	const currentNode = useRef();
+	const position = showIconLabel ? 'top' : 'bottom left';
+	const POPOVER_PROPS = {
+		anchorRect,
+		className: 'edit-post-more-menu__content',
+		position,
+	};
+
+	useLayoutEffect( () => {
+		function updatePosition() {
+			if ( currentNode.current ) {
+				const boundingClientRect = currentNode.current.getBoundingClientRect();
+
+				setAnchorRect( boundingClientRect );
+			}
+		}
+		window.addEventListener( 'resize', updatePosition );
+		updatePosition();
+		return () => window.removeEventListener( 'resize', updatePosition );
+	}, [] );
+
+	return (
+		<div ref={ currentNode }>
+			<DropdownMenu
+				className={ classnames( 'edit-post-more-menu', {
+					'show-icon-label': showIconLabel,
+				} ) }
+				icon={ moreVertical }
+				label={ __( 'More options' ) }
+				popoverProps={ POPOVER_PROPS }
+				toggleProps={ {
+					...TOGGLE_PROPS,
+					showIconLabel,
+					showTooltip: ! showIconLabel,
+				} }
+			>
+				{ ( { onClose } ) => (
+					<>
+						<WritingMenu />
+						<ModeSwitcher />
+						<PluginMoreMenuGroup.Slot fillProps={ { onClose } } />
+						<ToolsMoreMenuGroup.Slot fillProps={ { onClose } } />
+						<MenuGroup>
+							<OptionsMenuItem />
+						</MenuGroup>
+					</>
+				) }
+			</DropdownMenu>
+		</div>
+	);
+};
 
 export default MoreMenu;
diff --git a/packages/edit-post/src/components/header/more-menu/style.scss b/packages/edit-post/src/components/header/more-menu/style.scss
index 8d6316f165435..a7319f02b7051 100644
--- a/packages/edit-post/src/components/header/more-menu/style.scss
+++ b/packages/edit-post/src/components/header/more-menu/style.scss
@@ -7,17 +7,6 @@
 		padding: 0 2px;
 	}
 
-	&.show-icon-label {
-		button[aria-label] {
-			display: inline-flex;
-			&::after {
-				content: attr(aria-label);
-				font-size: 12px;
-				margin-left: 5px;
-			}
-		}
-	}
-
 	@include break-small() {
 		margin-left: 0;
 
diff --git a/packages/editor/src/components/editor-history/redo.js b/packages/editor/src/components/editor-history/redo.js
index 688c259201e00..24afb66821690 100644
--- a/packages/editor/src/components/editor-history/redo.js
+++ b/packages/editor/src/components/editor-history/redo.js
@@ -8,7 +8,7 @@ import { compose } from '@wordpress/compose';
 import { displayShortcut } from '@wordpress/keycodes';
 import { redo as redoIcon } from '@wordpress/icons';
 
-function EditorHistoryRedo( { hasRedo, redo } ) {
+function EditorHistoryRedo( { hasRedo, redo, showTooltip } ) {
 	return (
 		<Button
 			icon={ redoIcon }
@@ -20,6 +20,7 @@ function EditorHistoryRedo( { hasRedo, redo } ) {
 			aria-disabled={ ! hasRedo }
 			onClick={ hasRedo ? redo : undefined }
 			className="editor-history__redo"
+			showTooltip={ showTooltip }
 		/>
 	);
 }
diff --git a/packages/editor/src/components/editor-history/undo.js b/packages/editor/src/components/editor-history/undo.js
index 1871f2b68b95c..f6812a46b472b 100644
--- a/packages/editor/src/components/editor-history/undo.js
+++ b/packages/editor/src/components/editor-history/undo.js
@@ -8,7 +8,7 @@ import { compose } from '@wordpress/compose';
 import { displayShortcut } from '@wordpress/keycodes';
 import { undo as undoIcon } from '@wordpress/icons';
 
-function EditorHistoryUndo( { hasUndo, undo } ) {
+function EditorHistoryUndo( { hasUndo, showTooltip, undo } ) {
 	return (
 		<Button
 			icon={ undoIcon }
@@ -20,6 +20,7 @@ function EditorHistoryUndo( { hasUndo, undo } ) {
 			aria-disabled={ ! hasUndo }
 			onClick={ hasUndo ? undo : undefined }
 			className="editor-history__undo"
+			showTooltip={ showTooltip }
 		/>
 	);
 }
diff --git a/packages/editor/src/components/table-of-contents/index.js b/packages/editor/src/components/table-of-contents/index.js
index 46746a70f4719..17b20c33dd8d0 100644
--- a/packages/editor/src/components/table-of-contents/index.js
+++ b/packages/editor/src/components/table-of-contents/index.js
@@ -11,7 +11,11 @@ import { info } from '@wordpress/icons';
  */
 import TableOfContentsPanel from './panel';
 
-function TableOfContents( { hasBlocks, hasOutlineItemsDisabled } ) {
+function TableOfContents( {
+	hasBlocks,
+	hasOutlineItemsDisabled,
+	showTooltip,
+} ) {
 	return (
 		<Dropdown
 			position="bottom"
@@ -25,6 +29,7 @@ function TableOfContents( { hasBlocks, hasOutlineItemsDisabled } ) {
 					label={ __( 'Content structure' ) }
 					tooltipPosition="bottom"
 					aria-disabled={ ! hasBlocks }
+					showTooltip={ showTooltip }
 				/>
 			) }
 			renderContent={ ( { onClose } ) => (

From fac54fab26295453add4258e43b354b55c917635 Mon Sep 17 00:00:00 2001
From: Vadim Nicolai <nicolai.vadim@gmail.com>
Date: Sun, 10 May 2020 01:12:02 +0300
Subject: [PATCH 19/21] Small improvement; js_only.

---
 .../components/block-navigation/dropdown.js   | 10 +-
 .../edit-post/src/components/header/index.js  | 99 ++++++++++++-------
 2 files changed, 72 insertions(+), 37 deletions(-)

diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js
index ba0e824c3667c..2496d8cdfdbd9 100644
--- a/packages/block-editor/src/components/block-navigation/dropdown.js
+++ b/packages/block-editor/src/components/block-navigation/dropdown.js
@@ -23,7 +23,12 @@ const MenuIcon = (
 	</SVG>
 );
 
-function BlockNavigationDropdownToggle( { isEnabled, onToggle, isOpen } ) {
+function BlockNavigationDropdownToggle( {
+	isEnabled,
+	onToggle,
+	isOpen,
+	showTooltip,
+} ) {
 	useShortcut(
 		'core/edit-post/toggle-block-navigation',
 		useCallback( onToggle, [ onToggle ] ),
@@ -49,12 +54,14 @@ function BlockNavigationDropdownToggle( { isEnabled, onToggle, isOpen } ) {
 			className="block-editor-block-navigation"
 			shortcut={ shortcut }
 			aria-disabled={ ! isEnabled }
+			showTooltip={ showTooltip }
 		/>
 	);
 }
 
 function BlockNavigationDropdown( {
 	isDisabled,
+	showTooltip,
 	__experimentalWithBlockNavigationSlots,
 } ) {
 	const hasBlocks = useSelect(
@@ -71,6 +78,7 @@ function BlockNavigationDropdown( {
 				<BlockNavigationDropdownToggle
 					{ ...toggleProps }
 					isEnabled={ isEnabled }
+					showTooltip={ showTooltip }
 				/>
 			) }
 			renderContent={ ( { onClose } ) => (
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index 127fad3a25dc7..8e5ce0de33925 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -2,10 +2,11 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import { Button, Dropdown } from '@wordpress/components';
 import { PostSavedState, PostPreviewButton } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { cog } from '@wordpress/icons';
+import { useViewportMatch } from '@wordpress/compose';
+import { cog, moreHorizontal } from '@wordpress/icons';
 import { PinnedItems } from '@wordpress/interface';
 
 /**
@@ -29,6 +30,7 @@ function Header( {
 		isPublishSidebarOpened,
 		isSaving,
 		getBlockSelectionStart,
+		showIconLabel,
 	} = useSelect(
 		( select ) => ( {
 			shortcut: select(
@@ -45,6 +47,9 @@ function Header( {
 			getBlockSelectionStart: select( 'core/block-editor' )
 				.getBlockSelectionStart,
 			isPostSaveable: select( 'core/editor' ).isEditedPostSaveable(),
+			showIconLabel: select( 'core/edit-post' ).isFeatureActive(
+				'showIconLabels'
+			),
 			deviceType: select(
 				'core/edit-post'
 			).__experimentalGetPreviewDeviceType(),
@@ -55,6 +60,8 @@ function Header( {
 		'core/edit-post'
 	);
 
+	const isLargeViewport = useViewportMatch( 'large' );
+
 	const toggleGeneralSidebar = isEditorSidebarOpened
 		? closeGeneralSidebar
 		: () =>
@@ -64,6 +71,44 @@ function Header( {
 						: 'edit-post/document'
 				);
 
+	const headerSettings = (
+		<div className="edit-post-header__settings">
+			{ ! isPublishSidebarOpened && (
+				// This button isn't completely hidden by the publish sidebar.
+				// We can't hide the whole toolbar when the publish sidebar is open because
+				// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
+				// We track that DOM node to return focus to the PostPublishButtonOrToggle
+				// when the publish sidebar has been closed.
+				<PostSavedState
+					forceIsDirty={ hasActiveMetaboxes }
+					forceIsSaving={ isSaving }
+				/>
+			) }
+			<DevicePreview />
+			<PostPreviewButton
+				forceIsAutosaveable={ hasActiveMetaboxes }
+				forcePreviewLink={ isSaving ? null : undefined }
+			/>
+			<PostPublishButtonOrToggle
+				forceIsDirty={ hasActiveMetaboxes }
+				forceIsSaving={ isSaving }
+				setEntitiesSavedStatesCallback={
+					setEntitiesSavedStatesCallback
+				}
+			/>
+			<Button
+				icon={ cog }
+				label={ __( 'Settings' ) }
+				onClick={ toggleGeneralSidebar }
+				isPressed={ isEditorSidebarOpened }
+				aria-expanded={ isEditorSidebarOpened }
+				shortcut={ shortcut }
+			/>
+			<PinnedItems.Slot scope="core/edit-post" />
+			<MoreMenu showIconLabel={ showIconLabel } />
+		</div>
+	);
+
 	return (
 		<div className="edit-post-header">
 			<FullscreenModeClose />
@@ -73,41 +118,23 @@ function Header( {
 					isInserterOpen={ isInserterOpen }
 				/>
 			</div>
-			<div className="edit-post-header__settings">
-				{ ! isPublishSidebarOpened && (
-					// This button isn't completely hidden by the publish sidebar.
-					// We can't hide the whole toolbar when the publish sidebar is open because
-					// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
-					// We track that DOM node to return focus to the PostPublishButtonOrToggle
-					// when the publish sidebar has been closed.
-					<PostSavedState
-						forceIsDirty={ hasActiveMetaboxes }
-						forceIsSaving={ isSaving }
-					/>
-				) }
-				<DevicePreview />
-				<PostPreviewButton
-					forceIsAutosaveable={ hasActiveMetaboxes }
-					forcePreviewLink={ isSaving ? null : undefined }
-				/>
-				<PostPublishButtonOrToggle
-					forceIsDirty={ hasActiveMetaboxes }
-					forceIsSaving={ isSaving }
-					setEntitiesSavedStatesCallback={
-						setEntitiesSavedStatesCallback
-					}
-				/>
-				<Button
-					icon={ cog }
-					label={ __( 'Settings' ) }
-					onClick={ toggleGeneralSidebar }
-					isPressed={ isEditorSidebarOpened }
-					aria-expanded={ isEditorSidebarOpened }
-					shortcut={ shortcut }
+			{ isLargeViewport && headerSettings }
+			{ ! isLargeViewport && (
+				<Dropdown
+					className="my-container-class-name"
+					contentClassName="my-popover-content-classname"
+					position="bottom right"
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<Button
+							aria-expanded={ isOpen }
+							icon={ moreHorizontal }
+							isSecondary
+							onClick={ onToggle }
+						/>
+					) }
+					renderContent={ () => headerSettings }
 				/>
-				<PinnedItems.Slot scope="core/edit-post" />
-				<MoreMenu />
-			</div>
+			) }
 		</div>
 	);
 }

From 90595aa64cc0383bc5a3027282748c71036cbbcb Mon Sep 17 00:00:00 2001
From: Vadim Nicolai <nicolai.vadim@gmail.com>
Date: Sun, 10 May 2020 01:47:58 +0300
Subject: [PATCH 20/21] Dropdown styles adjusted.

---
 .../edit-post/src/components/header/index.js  | 108 +++++++-----------
 .../src/components/header/style.scss          |  20 +++-
 2 files changed, 61 insertions(+), 67 deletions(-)

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index 8e5ce0de33925..8210e19ab0b29 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -2,12 +2,14 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button, Dropdown } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { PostSavedState, PostPreviewButton } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useViewportMatch } from '@wordpress/compose';
-import { cog, moreHorizontal } from '@wordpress/icons';
-import { PinnedItems } from '@wordpress/interface';
+import { cog } from '@wordpress/icons';
+import {
+	PinnedItems,
+	__experimentalMainDashboardButton as MainDashboardButton,
+} from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -30,7 +32,6 @@ function Header( {
 		isPublishSidebarOpened,
 		isSaving,
 		getBlockSelectionStart,
-		showIconLabel,
 	} = useSelect(
 		( select ) => ( {
 			shortcut: select(
@@ -47,9 +48,6 @@ function Header( {
 			getBlockSelectionStart: select( 'core/block-editor' )
 				.getBlockSelectionStart,
 			isPostSaveable: select( 'core/editor' ).isEditedPostSaveable(),
-			showIconLabel: select( 'core/edit-post' ).isFeatureActive(
-				'showIconLabels'
-			),
 			deviceType: select(
 				'core/edit-post'
 			).__experimentalGetPreviewDeviceType(),
@@ -60,8 +58,6 @@ function Header( {
 		'core/edit-post'
 	);
 
-	const isLargeViewport = useViewportMatch( 'large' );
-
 	const toggleGeneralSidebar = isEditorSidebarOpened
 		? closeGeneralSidebar
 		: () =>
@@ -71,70 +67,52 @@ function Header( {
 						: 'edit-post/document'
 				);
 
-	const headerSettings = (
-		<div className="edit-post-header__settings">
-			{ ! isPublishSidebarOpened && (
-				// This button isn't completely hidden by the publish sidebar.
-				// We can't hide the whole toolbar when the publish sidebar is open because
-				// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
-				// We track that DOM node to return focus to the PostPublishButtonOrToggle
-				// when the publish sidebar has been closed.
-				<PostSavedState
-					forceIsDirty={ hasActiveMetaboxes }
-					forceIsSaving={ isSaving }
-				/>
-			) }
-			<DevicePreview />
-			<PostPreviewButton
-				forceIsAutosaveable={ hasActiveMetaboxes }
-				forcePreviewLink={ isSaving ? null : undefined }
-			/>
-			<PostPublishButtonOrToggle
-				forceIsDirty={ hasActiveMetaboxes }
-				forceIsSaving={ isSaving }
-				setEntitiesSavedStatesCallback={
-					setEntitiesSavedStatesCallback
-				}
-			/>
-			<Button
-				icon={ cog }
-				label={ __( 'Settings' ) }
-				onClick={ toggleGeneralSidebar }
-				isPressed={ isEditorSidebarOpened }
-				aria-expanded={ isEditorSidebarOpened }
-				shortcut={ shortcut }
-			/>
-			<PinnedItems.Slot scope="core/edit-post" />
-			<MoreMenu showIconLabel={ showIconLabel } />
-		</div>
-	);
-
 	return (
 		<div className="edit-post-header">
-			<FullscreenModeClose />
+			<MainDashboardButton.Slot>
+				<FullscreenModeClose />
+			</MainDashboardButton.Slot>
 			<div className="edit-post-header__toolbar">
 				<HeaderToolbar
 					onToggleInserter={ onToggleInserter }
 					isInserterOpen={ isInserterOpen }
 				/>
 			</div>
-			{ isLargeViewport && headerSettings }
-			{ ! isLargeViewport && (
-				<Dropdown
-					className="my-container-class-name"
-					contentClassName="my-popover-content-classname"
-					position="bottom right"
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<Button
-							aria-expanded={ isOpen }
-							icon={ moreHorizontal }
-							isSecondary
-							onClick={ onToggle }
-						/>
-					) }
-					renderContent={ () => headerSettings }
+			<div className="edit-post-header__settings">
+				{ ! isPublishSidebarOpened && (
+					// This button isn't completely hidden by the publish sidebar.
+					// We can't hide the whole toolbar when the publish sidebar is open because
+					// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
+					// We track that DOM node to return focus to the PostPublishButtonOrToggle
+					// when the publish sidebar has been closed.
+					<PostSavedState
+						forceIsDirty={ hasActiveMetaboxes }
+						forceIsSaving={ isSaving }
+					/>
+				) }
+				<DevicePreview />
+				<PostPreviewButton
+					forceIsAutosaveable={ hasActiveMetaboxes }
+					forcePreviewLink={ isSaving ? null : undefined }
+				/>
+				<PostPublishButtonOrToggle
+					forceIsDirty={ hasActiveMetaboxes }
+					forceIsSaving={ isSaving }
+					setEntitiesSavedStatesCallback={
+						setEntitiesSavedStatesCallback
+					}
+				/>
+				<Button
+					icon={ cog }
+					label={ __( 'Settings' ) }
+					onClick={ toggleGeneralSidebar }
+					isPressed={ isEditorSidebarOpened }
+					aria-expanded={ isEditorSidebarOpened }
+					shortcut={ shortcut }
 				/>
-			) }
+				<PinnedItems.Slot scope="core/edit-post" />
+				<MoreMenu />
+			</div>
 		</div>
 	);
 }
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index 207ace6169403..a2af08141c343 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -55,8 +55,21 @@
 	flex-wrap: wrap;
 	padding-right: $grid-unit-05;
 
-	.my-popover-content-classname {
-		display: block;
+	.my-popover-content-classname & {
+		min-width: 150px;
+		.editor-post-saved-state {
+			margin-bottom: 1rem;
+		}
+		button {
+			width: 100%;
+		}
+		.is-primary {
+			justify-content: center;
+		}
+		.components-button .label {
+			flex-basis: auto;
+			padding-right: 7px;
+		}
 	}
 
 	@include break-small() {
@@ -82,6 +95,9 @@
 			margin-bottom: 1rem;
 			text-align: left;
 			width: 100%;
+			&:last-child {
+				margin-bottom: 0;
+			}
 		}
 	}
 }

From ea003420badfddfbf1a36b4ee70da1cb034e8891 Mon Sep 17 00:00:00 2001
From: Vadim Nicolai <nicolai.vadim@gmail.com>
Date: Sun, 17 May 2020 15:53:34 +0300
Subject: [PATCH 21/21] Dropdown styles adjusted.

---
 .../edit-post/src/components/header/index.js  | 101 +++++++++++-------
 .../src/components/header/style.scss          |  39 ++++++-
 2 files changed, 99 insertions(+), 41 deletions(-)

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index 8210e19ab0b29..7d40e0c69a2e6 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -2,10 +2,11 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import { Button, Dropdown } from '@wordpress/components';
 import { PostSavedState, PostPreviewButton } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { cog } from '@wordpress/icons';
+import { useViewportMatch } from '@wordpress/compose';
+import { cog, moreHorizontal } from '@wordpress/icons';
 import {
 	PinnedItems,
 	__experimentalMainDashboardButton as MainDashboardButton,
@@ -32,6 +33,7 @@ function Header( {
 		isPublishSidebarOpened,
 		isSaving,
 		getBlockSelectionStart,
+		showIconLabel,
 	} = useSelect(
 		( select ) => ( {
 			shortcut: select(
@@ -48,6 +50,9 @@ function Header( {
 			getBlockSelectionStart: select( 'core/block-editor' )
 				.getBlockSelectionStart,
 			isPostSaveable: select( 'core/editor' ).isEditedPostSaveable(),
+			showIconLabel: select( 'core/edit-post' ).isFeatureActive(
+				'showIconLabels'
+			),
 			deviceType: select(
 				'core/edit-post'
 			).__experimentalGetPreviewDeviceType(),
@@ -58,6 +63,8 @@ function Header( {
 		'core/edit-post'
 	);
 
+	const isLargeViewport = useViewportMatch( 'large' );
+
 	const toggleGeneralSidebar = isEditorSidebarOpened
 		? closeGeneralSidebar
 		: () =>
@@ -67,6 +74,46 @@ function Header( {
 						: 'edit-post/document'
 				);
 
+	const headerSettings = (
+		<div className="edit-post-header__settings">
+			{ ! isPublishSidebarOpened && (
+				// This button isn't completely hidden by the publish sidebar.
+				// We can't hide the whole toolbar when the publish sidebar is open because
+				// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
+				// We track that DOM node to return focus to the PostPublishButtonOrToggle
+				// when the publish sidebar has been closed.
+				<PostSavedState
+					forceIsDirty={ hasActiveMetaboxes }
+					forceIsSaving={ isSaving }
+				/>
+			) }
+			<DevicePreview />
+			<PostPreviewButton
+				forceIsAutosaveable={ hasActiveMetaboxes }
+				forcePreviewLink={ isSaving ? null : undefined }
+			/>
+			<PostPublishButtonOrToggle
+				forceIsDirty={ hasActiveMetaboxes }
+				forceIsSaving={ isSaving }
+				setEntitiesSavedStatesCallback={
+					setEntitiesSavedStatesCallback
+				}
+			/>
+			<Button
+				icon={ cog }
+				label={ __( 'Settings' ) }
+				onClick={ toggleGeneralSidebar }
+				isPressed={ isEditorSidebarOpened }
+				aria-expanded={ isEditorSidebarOpened }
+				showIconLabel={ showIconLabel }
+				showTooltip={ ! showIconLabel }
+				shortcut={ shortcut }
+			/>
+			<PinnedItems.Slot scope="core/edit-post" />
+			<MoreMenu showIconLabel={ showIconLabel } />
+		</div>
+	);
+
 	return (
 		<div className="edit-post-header">
 			<MainDashboardButton.Slot>
@@ -78,41 +125,23 @@ function Header( {
 					isInserterOpen={ isInserterOpen }
 				/>
 			</div>
-			<div className="edit-post-header__settings">
-				{ ! isPublishSidebarOpened && (
-					// This button isn't completely hidden by the publish sidebar.
-					// We can't hide the whole toolbar when the publish sidebar is open because
-					// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
-					// We track that DOM node to return focus to the PostPublishButtonOrToggle
-					// when the publish sidebar has been closed.
-					<PostSavedState
-						forceIsDirty={ hasActiveMetaboxes }
-						forceIsSaving={ isSaving }
-					/>
-				) }
-				<DevicePreview />
-				<PostPreviewButton
-					forceIsAutosaveable={ hasActiveMetaboxes }
-					forcePreviewLink={ isSaving ? null : undefined }
-				/>
-				<PostPublishButtonOrToggle
-					forceIsDirty={ hasActiveMetaboxes }
-					forceIsSaving={ isSaving }
-					setEntitiesSavedStatesCallback={
-						setEntitiesSavedStatesCallback
-					}
-				/>
-				<Button
-					icon={ cog }
-					label={ __( 'Settings' ) }
-					onClick={ toggleGeneralSidebar }
-					isPressed={ isEditorSidebarOpened }
-					aria-expanded={ isEditorSidebarOpened }
-					shortcut={ shortcut }
+			{ isLargeViewport && headerSettings }
+			{ ! isLargeViewport && (
+				<Dropdown
+					className="my-container-class-name"
+					contentClassName="my-popover-content-classname"
+					position="bottom right"
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<Button
+							aria-expanded={ isOpen }
+							icon={ moreHorizontal }
+							isSecondary
+							onClick={ onToggle }
+						/>
+					) }
+					renderContent={ () => headerSettings }
 				/>
-				<PinnedItems.Slot scope="core/edit-post" />
-				<MoreMenu />
-			</div>
+			) }
 		</div>
 	);
 }
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index a2af08141c343..dc143b0d4e463 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -25,7 +25,7 @@
 		order: 1;
 
 		// Restore default order for all other browsers
-		@supports (position: sticky) {
+		@supports ( position: sticky ) {
 			order: initial;
 		}
 	}
@@ -57,18 +57,48 @@
 
 	.my-popover-content-classname & {
 		min-width: 150px;
+
 		.editor-post-saved-state {
 			margin-bottom: 1rem;
+			padding-left: 0;
+			svg {
+				margin-left: 4px;
+				margin-right: 0;
+			}
 		}
+
 		button {
 			width: 100%;
 		}
+
 		.is-primary {
 			justify-content: center;
 		}
-		.components-button .label {
-			flex-basis: auto;
-			padding-right: 7px;
+
+		.is-tertiary {
+			display: flex;
+			justify-content: center;
+			margin-bottom: 1rem;
+			&.is-tertiary {
+				margin-right: 0;
+			}
+		}
+
+		.components-button {
+			.label {
+				flex-basis: auto;
+				padding-right: 7px;
+			}
+
+			&.has-icon {
+				justify-content: left;
+				padding-left: 0;
+			}
+		}
+
+		.edit-post-more-menu {
+			display: block;
+			width: 100%;
 		}
 	}
 
@@ -102,7 +132,6 @@
 	}
 }
 
-
 /**
  * Buttons in the Toolbar
  */