Make Distraction Free not conditional on viewport width (WordPress#63949

) * check for isWideViewport * make distraction free always available * Ensure mobile styles work with and without distraction free * use isLargeViewport "medium" instead * use ! isMobileViewport instead of isLargeViewport
carstingaxion · Aug 22, 2024 · 54eee32 · 54eee32
1 parent 0e88cda
commit 54eee32
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 11 deletions.
diff --git a/packages/editor/src/components/editor-interface/index.js b/packages/editor/src/components/editor-interface/index.js
@@ -99,7 +99,6 @@ export default function EditorInterface( {
 				select( blockEditorStore ).__unstableGetEditorMode(),
 		};
 	}, [] );
-	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const secondarySidebarLabel = isListViewOpened
 		? __( 'Document Overview' )
@@ -122,11 +121,10 @@ export default function EditorInterface( {
 	return (
 		<InterfaceSkeleton
 			enableRegionNavigation={ enableRegionNavigation }
-			isDistractionFree={ isDistractionFree && isWideViewport }
+			isDistractionFree={ isDistractionFree }
 			className={ clsx( 'editor-editor-interface', className, {
 				'is-entity-save-view-open': !! entitiesSavedStatesCallback,
-				'is-distraction-free':
-					isDistractionFree && isWideViewport && ! isPreviewMode,
+				'is-distraction-free': isDistractionFree && ! isPreviewMode,
 			} ) }
 			labels={ {
 				...interfaceLabels,

diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss
@@ -228,7 +228,7 @@
 }
 
 .editor-header__post-preview-button {
-	@include break-small {
+	@include break-mobile {
 		display: none;
 	}
 }
@@ -240,10 +240,13 @@
 
 	.editor-header {
 		background-color: $white;
-		border-bottom: 1px solid #e0e0e0;
-		position: absolute;
 		width: 100%;
 
+		@include break-medium {
+			border-bottom: 1px solid #e0e0e0;
+			position: absolute;
+		}
+
 
 		// hide some parts
 		& > .edit-post-header__settings > .edit-post-header__post-preview-button {

diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js
@@ -143,22 +143,22 @@ function InterfaceSkeleton(
 							className="interface-interface-skeleton__header"
 							aria-label={ mergedLabels.header }
 							initial={
-								isDistractionFree
+								isDistractionFree && ! isMobileViewport
 									? 'distractionFreeHidden'
 									: 'hidden'
 							}
 							whileHover={
-								isDistractionFree
+								isDistractionFree && ! isMobileViewport
 									? 'distractionFreeHover'
 									: 'visible'
 							}
 							animate={
-								isDistractionFree
+								isDistractionFree && ! isMobileViewport
 									? 'distractionFreeDisabled'
 									: 'visible'
 							}
 							exit={
-								isDistractionFree
+								isDistractionFree && ! isMobileViewport
 									? 'distractionFreeHidden'
 									: 'hidden'
 							}