adds inline format toolbar in distraction free mode

WordPress · Jul 6, 2022 · 63c3fbd · 63c3fbd
1 parent ce7f7cc
commit 63c3fbd
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git 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
@@ -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 {