Site Editor: Always use full screen mode (#29489)

Removes the option to toggle fullscreen mode in the Site Editor. From now on it will always be on, similar to Customizer.
WordPress · Mar 12, 2021 · e8613cf · e8613cf
1 parent 9e4d27a
commit e8613cf
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 56 deletions.
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -43,7 +43,6 @@ const interfaceLabels = {
 
 function Editor( { initialSettings } ) {
 	const {
-		isFullscreenActive,
 		isInserterOpen,
 		isListViewOpen,
 		sidebarIsOpened,
@@ -55,7 +54,6 @@ function Editor( { initialSettings } ) {
 		isNavigationOpen,
 	} = useSelect( ( select ) => {
 		const {
-			isFeatureActive,
 			isInserterOpened,
 			isListViewOpened,
 			getSettings,
@@ -75,7 +73,6 @@ function Editor( { initialSettings } ) {
 		return {
 			isInserterOpen: isInserterOpened(),
 			isListViewOpen: isListViewOpened(),
-			isFullscreenActive: isFeatureActive( 'fullscreenMode' ),
 			sidebarIsOpened: !! select(
 				interfaceStore
 			).getActiveComplementaryArea( editSiteStore.name ),
@@ -169,7 +166,7 @@ function Editor( { initialSettings } ) {
 	return (
 		<>
 			<URLQueryController />
-			<FullscreenMode isActive={ isFullscreenActive } />
+			<FullscreenMode isActive />
 			<UnsavedChangesWarning />
 			<SlotFillProvider>
 				<DropZoneProvider>

diff --git a/packages/edit-site/src/components/header/more-menu/index.js b/packages/edit-site/src/components/header/more-menu/index.js
@@ -49,15 +49,6 @@ const MoreMenu = () => (
 							'Spotlight mode deactivated'
 						) }
 					/>
-					<FeatureToggle
-						feature="fullscreenMode"
-						label={ __( 'Fullscreen mode' ) }
-						info={ __( 'Work without distraction' ) }
-						messageActivated={ __( 'Fullscreen mode activated' ) }
-						messageDeactivated={ __(
-							'Fullscreen mode deactivated'
-						) }
-					/>
 					<ActionItem.Slot
 						name="core/edit-site/plugin-more-menu"
 						label={ __( 'Plugins' ) }

diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss
@@ -9,14 +9,11 @@ $header-toolbar-min-width: 335px;
 	width: 100%;
 	justify-content: space-between;
 
-	@include break-medium() {
-		body.is-fullscreen-mode & {
-			padding-left: 60px;
-			transition: padding-left 20ms linear;
-			transition-delay: 80ms;
-			@include reduce-motion("transition");
-		}
-
+	body.is-fullscreen-mode & {
+		padding-left: 60px;
+		transition: padding-left 20ms linear;
+		transition-delay: 80ms;
+		@include reduce-motion("transition");
 	}
 
 	.edit-site-header_start,

diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js
@@ -12,33 +12,24 @@ import { wordpress } from '@wordpress/icons';
 import { store as editSiteStore } from '../../../store';
 
 function NavigationToggle( { icon, isOpen } ) {
-	const { isActive, isRequestingSiteIcon, siteIconUrl } = useSelect(
-		( select ) => {
-			const { isFeatureActive } = select( editSiteStore );
-			const { getEntityRecord } = select( 'core' );
-			const { isResolving } = select( 'core/data' );
-			const siteData =
-				getEntityRecord( 'root', '__unstableBase', undefined ) || {};
+	const { isRequestingSiteIcon, siteIconUrl } = useSelect( ( select ) => {
+		const { getEntityRecord } = select( 'core' );
+		const { isResolving } = select( 'core/data' );
+		const siteData =
+			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
 
-			return {
-				isActive: isFeatureActive( 'fullscreenMode' ),
-				isRequestingSiteIcon: isResolving( 'core', 'getEntityRecord', [
-					'root',
-					'__unstableBase',
-					undefined,
-				] ),
-				siteIconUrl: siteData.site_icon_url,
-			};
-		},
-		[]
-	);
+		return {
+			isRequestingSiteIcon: isResolving( 'core', 'getEntityRecord', [
+				'root',
+				'__unstableBase',
+				undefined,
+			] ),
+			siteIconUrl: siteData.site_icon_url,
+		};
+	}, [] );
 
 	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
 
-	if ( ! isActive ) {
-		return null;
-	}
-
 	let buttonIcon = <Icon size="36px" icon={ wordpress } />;
 
 	if ( siteIconUrl ) {

diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
@@ -2,19 +2,11 @@
 	align-items: center;
 	background: $gray-900;
 	border-radius: 0;
-	display: none;
+	display: flex;
 	position: absolute;
 	z-index: z-index(".edit-site-navigation-toggle");
 	height: $header-height;
 	width: $header-height;
-
-	@include break-medium() {
-		display: flex;
-	}
-
-	body.is-navigation-sidebar-open & {
-		display: flex;
-	}
 }
 
 .edit-site-navigation-toggle__button {

diff --git a/packages/edit-site/src/store/defaults.js b/packages/edit-site/src/store/defaults.js
@@ -1,5 +1,3 @@
 export const PREFERENCES_DEFAULTS = {
-	features: {
-		fullscreenMode: true,
-	},
+	features: {},
 };