Distraction Free: Avoid focus loss when enabling/disabling distractio…

…n free mode via the more menu (#51627)

* Avoid header region unmounting when enabling distraction free mode via the more menu

* remove the conditional in framer motion state for header elements, remove block selection workaround for lost focus

---------

Co-authored-by: Andrei Draganescu <andrei.draganescu@automattic.com>

packages/edit-post/src/components/header/index.js

@@ -27,7 +27,6 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 		isPublishSidebarOpened,
 		isSaving,
 		showIconLabels,
-		isDistractionFreeMode,
 	} = useSelect(
 		( select ) => ( {
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
@@ -36,21 +35,17 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 			isSaving: select( editPostStore ).isSavingMetaBoxes(),
 			showIconLabels:
 				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
-			isDistractionFreeMode:
-				select( editPostStore ).isFeatureActive( 'distractionFree' ),
 		} ),
 		[]
 	);
 
-	const isDistractionFree = isDistractionFreeMode && isLargeViewport;
-
 	const slideY = {
-		hidden: isDistractionFree ? { y: '-50' } : { y: 0 },
+		hidden: { y: '-50px' },
 		hover: { y: 0, transition: { type: 'tween', delay: 0.2 } },
 	};
 
 	const slideX = {
-		hidden: isDistractionFree ? { x: '-100%' } : { x: 0 },
+		hidden: { x: '-100%' },
 		hover: { x: 0, transition: { type: 'tween', delay: 0.2 } },
 	};
 

packages/edit-post/src/components/header/writing-menu/index.js

@@ -25,26 +25,16 @@ function WritingMenu() {
 		[]
 	);
 
-	const blocks = useSelect(
-		( select ) => select( blockEditorStore ).getBlocks(),
-		[]
-	);
-
 	const { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } =
 		useDispatch( postEditorStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
 
-	const { selectBlock } = useDispatch( blockEditorStore );
-
 	const toggleDistractionFree = () => {
 		registry.batch( () => {
 			setPreference( 'core/edit-post', 'fixedToolbar', false );
 			setIsInserterOpened( false );
 			setIsListViewOpened( false );
 			closeGeneralSidebar();
-			if ( ! isDistractionFree && !! blocks.length ) {
-				selectBlock( blocks[ 0 ].clientId );
-			}
 		} );
 	};
 

packages/interface/src/components/interface-skeleton/index.js

@@ -75,11 +75,12 @@ function InterfaceSkeleton(
 	const mergedLabels = { ...defaultLabels, ...labels };
 
 	const headerVariants = {
-		hidden: isDistractionFree ? { opacity: 0 } : { opacity: 1 },
+		hidden: { opacity: 0 },
 		hover: {
 			opacity: 1,
 			transition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },
 		},
+		distractionFreeInactive: { opacity: 1, transition: { delay: 0 } },
 	};
 
 	return (
@@ -97,23 +98,32 @@ function InterfaceSkeleton(
 			) }
 		>
 			<div className="interface-interface-skeleton__editor">
-				{ !! header && isDistractionFree && (
+				{ !! header && (
 					<NavigableRegion
 						as={ motion.div }
 						className="interface-interface-skeleton__header"
 						aria-label={ mergedLabels.header }
-						initial={ isDistractionFree ? 'hidden' : 'hover' }
-						whileHover="hover"
+						initial={
+							isDistractionFree
+								? 'hidden'
+								: 'distractionFreeInactive'
+						}
+						whileHover={
+							isDistractionFree
+								? 'hover'
+								: 'distractionFreeInactive'
+						}
+						animate={
+							isDistractionFree
+								? 'hidden'
+								: 'distractionFreeInactive'
+						}
 						variants={ headerVariants }
-						transition={ { type: 'tween', delay: 0.8 } }
-					>
-						{ header }
-					</NavigableRegion>
-				) }
-				{ !! header && ! isDistractionFree && (
-					<NavigableRegion
-						className="interface-interface-skeleton__header"
-						ariaLabel={ mergedLabels.header }
+						transition={
+							isDistractionFree
+								? { type: 'tween', delay: 0.8 }
+								: undefined
+						}
 					>
 						{ header }
 					</NavigableRegion>