From 63c3fbd48b95135131241cdadc6e7a758f4269cd Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Wed, 6 Jul 2022 18:11:35 +0300
Subject: [PATCH] adds inline format toolbar in distraction free mode

---
 .../src/components/rich-text/index.js           | 17 ++++++++++++++++-
 .../edit-post/src/components/header/style.scss  |  5 ++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
index ef3e4d2d3a318d..6cd82677bbbe3d 100644
--- a/packages/block-editor/src/components/rich-text/index.js
+++ b/packages/block-editor/src/components/rich-text/index.js
@@ -144,6 +144,7 @@ function RichTextWrapper(
 			isSelected,
 		};
 	};
+
 	// This selector must run on every render so the right selection state is
 	// retreived from the store on merge.
 	// To do: fix this somehow.
@@ -171,6 +172,16 @@ function RichTextWrapper(
 			);
 	}
 
+	// Check reduced UI to force the inline formatting toolbar
+	const distractionFreeSelector = ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const settings = getSettings();
+		return {
+			hasReducedUI: settings.hasReducedUI,
+		};
+	};
+	const { hasReducedUI } = useSelect( distractionFreeSelector );
+
 	const onSelectionChange = useCallback(
 		( start, end ) => {
 			const selection = {};
@@ -342,7 +353,11 @@ function RichTextWrapper(
 			) }
 			{ isSelected && hasFormats && (
 				<FormatToolbarContainer
-					inline={ inlineToolbar }
+					inline={
+						! isCollapsed( value ) && hasReducedUI
+							? true
+							: inlineToolbar
+					}
 					anchorRef={ anchorRef }
 				/>
 			) }
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index ab5d1e833c6bad..2b1f3887fc1f9c 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -44,11 +44,14 @@
 		& > .edit-post-header__settings > .block-editor-post-preview__dropdown,
 		& > .edit-post-header__settings > .editor-post-preview,
 		& > .edit-post-header__settings > .editor-post-switch-to-draft,
-		& > .edit-post-header__settings > .interface-pinned-items,
 		& > .edit-post-header__toolbar {
 			visibility: hidden;
 		}
 
+		& > .edit-post-header__settings > .interface-pinned-items {
+			display: none;
+		}
+
 		& > .edit-post-header__settings > .editor-post-publish-button,
 		& > .edit-post-header__settings > .editor-post-publish-panel__toggle,
 		& > .edit-post-header__settings .interface-more-menu-dropdown {