FSE: Add focus mode and top toolbar modes

packages/edit-site/src/components/block-editor/index.js

@@ -25,19 +25,31 @@ import Sidebar from '../sidebar';
 
 export default function BlockEditor() {
 	const { settings: _settings, setSettings } = useEditorContext();
-	const canUserCreateMedia = useSelect( ( select ) => {
-		const _canUserCreateMedia = select( 'core' ).canUser(
-			'create',
-			'media'
-		);
-		return _canUserCreateMedia || _canUserCreateMedia !== false;
-	}, [] );
+	const { canUserCreateMedia, focusMode, hasFixedToolbar } = useSelect(
+		( select ) => {
+			const { isFeatureActive } = select( 'core/edit-site' );
+			const _canUserCreateMedia = select( 'core' ).canUser(
+				'create',
+				'media'
+			);
+			return {
+				canUserCreateMedia:
+					_canUserCreateMedia || _canUserCreateMedia !== false,
+				focusMode: isFeatureActive( 'focusMode' ),
+				hasFixedToolbar: isFeatureActive( 'fixedToolbar' ),
+			};
+		},
+		[]
+	);
+
 	const settings = useMemo( () => {
 		if ( ! canUserCreateMedia ) {
 			return _settings;
 		}
 		return {
 			..._settings,
+			focusMode,
+			hasFixedToolbar,
 			mediaUpload( { onError, ...rest } ) {
 				uploadMedia( {
 					wpAllowedMimeTypes: _settings.allowedMimeTypes,
@@ -46,11 +58,13 @@ export default function BlockEditor() {
 				} );
 			},
 		};
-	}, [ canUserCreateMedia, _settings ] );
+	}, [ canUserCreateMedia, _settings, focusMode, hasFixedToolbar ] );
+
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		settings.templateType
 	);
+
 	const setActiveTemplateId = useCallback(
 		( newTemplateId ) =>
 			setSettings( ( prevSettings ) => ( {
@@ -60,6 +74,7 @@ export default function BlockEditor() {
 			} ) ),
 		[]
 	);
+
 	return (
 		<BlockEditorProvider
 			settings={ settings }

packages/edit-site/src/components/editor/index.js

@@ -69,18 +69,16 @@ function Editor( { settings: _settings } ) {
 		setSettings,
 	] );
 
-	const { isFullscreenActive } = useSelect( ( select ) => {
+	const { isFullscreenActive, deviceType } = useSelect( ( select ) => {
+		const { isFeatureActive, __experimentalGetPreviewDeviceType } = select(
+			'core/edit-site'
+		);
 		return {
-			isFullscreenActive: select( 'core/edit-site' ).isFeatureActive(
-				'fullscreenMode'
-			),
+			isFullscreenActive: isFeatureActive( 'fullscreenMode' ),
+			deviceType: __experimentalGetPreviewDeviceType(),
 		};
 	}, [] );
 
-	const deviceType = useSelect( ( select ) => {
-		return select( 'core/edit-site' ).__experimentalGetPreviewDeviceType();
-	}, [] );
-
 	const inlineStyles = useResizeCanvas( deviceType );
 
 	const [

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

@@ -1,11 +1,13 @@
 /**
  * WordPress dependencies
  */
+import { useViewportMatch } from '@wordpress/compose';
 import { useCallback } from '@wordpress/element';
 import { addQueryArgs } from '@wordpress/url';
 import {
 	BlockNavigationDropdown,
 	ToolSelector,
+	BlockToolbar,
 	__experimentalPreviewOptions as PreviewOptions,
 } from '@wordpress/block-editor';
 import {
@@ -99,14 +101,24 @@ export default function Header( {
 		} catch ( err ) {}
 	}, [] );
 
-	const deviceType = useSelect( ( select ) => {
-		return select( 'core/edit-site' ).__experimentalGetPreviewDeviceType();
+	const { deviceType, hasFixedToolbar } = useSelect( ( select ) => {
+		const { __experimentalGetPreviewDeviceType, isFeatureActive } = select(
+			'core/edit-site'
+		);
+		return {
+			deviceType: __experimentalGetPreviewDeviceType(),
+			hasFixedToolbar: isFeatureActive( 'fixedToolbar' ),
+		};
 	}, [] );
 
 	const {
 		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
 	} = useDispatch( 'core/edit-site' );
 
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const displayBlockToolbar =
+		! isLargeViewport || deviceType !== 'Desktop' || hasFixedToolbar;
+
 	return (
 		<div className="edit-site-header">
 			<MainDashboardButton.Slot>
@@ -127,6 +139,11 @@ export default function Header( {
 				<UndoButton />
 				<RedoButton />
 				<BlockNavigationDropdown />
+				{ displayBlockToolbar && (
+					<div className="edit-site-header-toolbar__block-toolbar">
+						<BlockToolbar hideDragHandle />
+					</div>
+				) }
 				<div className="edit-site-header__toolbar-switchers">
 					<PageSwitcher
 						showOnFront={ settings.showOnFront }

packages/edit-site/src/components/header/more-menu/index.js

@@ -28,6 +28,22 @@ const MoreMenu = () => (
 	>
 		{ () => (
 			<MenuGroup label={ _x( 'View', 'noun' ) }>
+				<FeatureToggle
+					feature="fixedToolbar"
+					label={ __( 'Top toolbar' ) }
+					info={ __(
+						'Access all block and document tools in a single place'
+					) }
+					messageActivated={ __( 'Top toolbar activated' ) }
+					messageDeactivated={ __( 'Top toolbar deactivated' ) }
+				/>
+				<FeatureToggle
+					feature="focusMode"
+					label={ __( 'Spotlight mode' ) }
+					info={ __( 'Focus on one block at a time' ) }
+					messageActivated={ __( 'Spotlight mode activated' ) }
+					messageDeactivated={ __( 'Spotlight mode deactivated' ) }
+				/>
 				<FeatureToggle
 					feature="fullscreenMode"
 					label={ __( 'Fullscreen mode' ) }

packages/edit-site/src/components/header/style.scss

@@ -10,6 +10,7 @@
 	display: flex;
 	flex-grow: 1;
 	padding-left: $grid-unit-10;
+	align-items: center;
 
 	& > * {
 		margin-left: 5px;
@@ -47,3 +48,60 @@
 		}
 	}
 }
+
+// Block toolbar when fixed to the top of the screen.
+.edit-site-header-toolbar__block-toolbar {
+	// Stack toolbar below Editor Bar.
+	position: absolute;
+	top: $header-height + $border-width;
+	left: 0;
+	right: 0;
+	background: $white;
+	border-bottom: $border-width solid $light-gray-500;
+
+	&:empty {
+		display: none;
+	}
+
+	.block-editor-block-toolbar .components-toolbar-group,
+	.block-editor-block-toolbar .components-toolbar {
+		border-top: none;
+		border-bottom: none;
+	}
+
+	.is-sidebar-opened & {
+		display: none;
+	}
+
+	@include break-medium {
+		.is-sidebar-opened & {
+			display: block;
+			right: $sidebar-width;
+		}
+	}
+
+	// Move toolbar into top Editor Bar.
+	@include break-wide {
+		padding-left: $grid-unit-10;
+		position: static;
+		left: auto;
+		right: auto;
+		background: none;
+		border-bottom: none;
+
+		.is-sidebar-opened & {
+			right: auto;
+		}
+
+		.block-editor-block-toolbar {
+			border-left: $border-width solid $light-gray-500;
+		}
+
+		.block-editor-block-toolbar .components-toolbar-group,
+		.block-editor-block-toolbar .components-toolbar {
+			$top-toolbar-padding: ( $header-height - $grid-unit-60 ) / 2;
+			height: $header-height;
+			padding: $top-toolbar-padding 0;
+		}
+	}
+}