Distraction Free Mode: Don't show the metaboxes (#48947)

WordPress · Mar 9, 2023 · b0e96c4 · b0e96c4 · github-actions · Mar 9, 2023
1 parent 564b6d5
commit b0e96c4
Showing 1 changed file with 6 additions and 8 deletions.
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -83,7 +83,7 @@ function Layout( { styles } ) {
 		isInserterOpened,
 		isListViewOpened,
 		showIconLabels,
-		isDistractionFreeMode,
+		isDistractionFree,
 		showBlockBreadcrumbs,
 		isTemplateMode,
 		documentLabel,
@@ -116,7 +116,7 @@ function Layout( { styles } ) {
 			).getAllShortcutKeyCombinations( 'core/edit-post/next-region' ),
 			showIconLabels:
 				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
-			isDistractionFreeMode:
+			isDistractionFree:
 				select( editPostStore ).isFeatureActive( 'distractionFree' ),
 			showBlockBreadcrumbs: select( editPostStore ).isFeatureActive(
 				'showBlockBreadcrumbs'
@@ -126,8 +126,6 @@ function Layout( { styles } ) {
 		};
 	}, [] );
 
-	const isDistractionFree = isDistractionFreeMode && isLargeViewport;
-
 	const openSidebarPanel = () =>
 		openGeneralSidebar(
 			hasBlockSelected ? 'edit-post/block' : 'edit-post/document'
@@ -164,7 +162,7 @@ function Layout( { styles } ) {
 		'has-fixed-toolbar': hasFixedToolbar,
 		'has-metaboxes': hasActiveMetaboxes,
 		'show-icon-labels': showIconLabels,
-		'is-distraction-free': isDistractionFree,
+		'is-distraction-free': isDistractionFree && isLargeViewport,
 		'is-entity-save-view-open': !! entitiesSavedStatesCallback,
 	} );
 
@@ -206,7 +204,7 @@ function Layout( { styles } ) {
 			<EditorKeyboardShortcutsRegister />
 			<SettingsSidebar />
 			<InterfaceSkeleton
-				isDistractionFree={ isDistractionFree }
+				isDistractionFree={ isDistractionFree && isLargeViewport }
 				className={ className }
 				labels={ {
 					...interfaceLabels,
@@ -252,7 +250,7 @@ function Layout( { styles } ) {
 						{ isRichEditingEnabled && mode === 'visual' && (
 							<VisualEditor styles={ styles } />
 						) }
-						{ ! isTemplateMode && (
+						{ ! isDistractionFree && ! isTemplateMode && (
 							<div className="edit-post-layout__metaboxes">
 								<MetaBoxes location="normal" />
 								<MetaBoxes location="advanced" />
@@ -265,8 +263,8 @@ function Layout( { styles } ) {
 				}
 				footer={
 					! isDistractionFree &&
-					showBlockBreadcrumbs &&
 					! isMobileViewport &&
+					showBlockBreadcrumbs &&
 					isRichEditingEnabled &&
 					mode === 'visual' && (
 						<div className="edit-post-layout__footer">