testing persistent sidebars that don't overlap with header

WordPress · May 4, 2022 · b9ecd05 · b9ecd05
1 parent 32d41a3
commit b9ecd05
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 13 deletions.
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -70,9 +70,10 @@ function Layout( { styles } ) {
 		openGeneralSidebar,
 		closeGeneralSidebar,
 		setIsInserterOpened,
-		toggleFeature,
+		//toggleFeature,
 	} = useDispatch( editPostStore );
-	const { createInfoNotice, createErrorNotice } = useDispatch( noticesStore );
+	//const { createInfoNotice, createErrorNotice } = useDispatch( noticesStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
 	const {
 		mode,
 		isFullscreenActive,
@@ -137,18 +138,18 @@ function Layout( { styles } ) {
 		! sidebarIsOpened && ! isListViewOpened && ! isInserterOpened;
 
 	const [ isDistractionFree, setIsDistractionFree ] = useState(
-		hasReducedUI && noChromeOpened
+		hasReducedUI
 	);
 
 	useEffect( () => {
-		setIsDistractionFree( hasReducedUI && noChromeOpened );
-		if ( hasReducedUI && ! noChromeOpened ) {
-			toggleFeature( 'reducedUI' );
-			createInfoNotice( __( 'Distraction free mode turned off.' ), {
-				speak: true,
-				type: 'snackbar',
-			} );
-		}
+		setIsDistractionFree( hasReducedUI );
+		// if ( hasReducedUI && ! noChromeOpened ) {
+		// 	toggleFeature( 'reducedUI' );
+		// 	createInfoNotice( __( 'Distraction free mode turned off.' ), {
+		// 		speak: true,
+		// 		type: 'snackbar',
+		// 	} );
+		// }
 	}, [ noChromeOpened, hasReducedUI ] );
 
 	const className = classnames( 'edit-post-layout', 'is-mode-' + mode, {

diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss
@@ -123,15 +123,40 @@ html.interface-interface-skeleton__html-container {
 .is-distraction-free {
 	.edit-post-header {
 		box-shadow: $shadow-popover;
+		position: absolute;
+		width: 100vw;
 	}
 
 	.interface-interface-skeleton__header {
 		border-bottom: 0;
 	}
 
-	.interface-interface-skeleton__body {
-		margin-top: -60px;
+	.interface-interface-skeleton__secondary-sidebar,
+	&.is-sidebar-opened .interface-interface-skeleton__sidebar {
+		border: $border-width solid $gray-200;
+		margin: $grid-unit-15;
+		border-radius: 2px;
+		box-shadow: $shadow-popover;
+		position: absolute !important;
+		right: 0 !important;
+		left: auto !important;
+		width: 280px;
+		margin-top: 80px;
+	}
+
+	.interface-interface-skeleton__secondary-sidebar {
+		left: 0 !important;
+		right: auto !important;
+		width: 350px;
 	}
+
+	// .interface-interface-skeleton__body {
+	// 	margin-top: -60px;
+
+	// 	.interface-interface-skeleton__content {
+	// 		padding-top: 60px;
+	// 	}
+	// }
 }
 
 .interface-interface-skeleton__secondary-sidebar {