Site Editor: add more menu and fullscreen toggle (#21006)

Add necessary UI elements that will allow us to toggle the
fullscreen mode in Site Editor.

packages/base-styles/_z-index.scss

@@ -102,6 +102,7 @@ $z-layers: (
 	".components-popover.table-of-contents__popover": 99998,
 	".components-popover.block-editor-block-navigation__popover": 99998,
 	".components-popover.edit-post-more-menu__content": 99998,
+	".components-popover.edit-site-more-menu__content": 99998,
 	".components-popover.block-editor-rich-text__inline-format-toolbar": 99998,
 
 	".components-autocomplete__results": 1000000,

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

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import { flow } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { MenuItem, withSpokenMessages } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { check } from '@wordpress/icons';
+
+function FeatureToggle( {
+	feature,
+	label,
+	info,
+	messageActivated,
+	messageDeactivated,
+	speak,
+} ) {
+	const speakMessage = () => {
+		if ( isActive ) {
+			speak( messageDeactivated || __( 'Feature deactivated' ) );
+		} else {
+			speak( messageActivated || __( 'Feature activated' ) );
+		}
+	};
+
+	const isActive = useSelect( ( select ) => {
+		return select( 'core/edit-site' ).isFeatureActive( feature );
+	}, [] );
+
+	const { toggleFeature } = useDispatch( 'core/edit-site' );
+
+	return (
+		<MenuItem
+			icon={ isActive && check }
+			isSelected={ isActive }
+			onClick={ flow(
+				toggleFeature.bind( null, feature ),
+				speakMessage
+			) }
+			role="menuitemcheckbox"
+			info={ info }
+		>
+			{ label }
+		</MenuItem>
+	);
+}
+
+export default withSpokenMessages( FeatureToggle );

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

@@ -8,6 +8,7 @@ import { BlockNavigationDropdown, ToolSelector } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import { useEditorContext } from '../editor';
+import MoreMenu from './more-menu';
 import TemplateSwitcher from '../template-switcher';
 import SaveButton from '../save-button';
 
@@ -59,6 +60,7 @@ export default function Header() {
 			</div>
 			<div className="edit-site-header__actions">
 				<SaveButton />
+				<MoreMenu />
 			</div>
 		</div>
 	);

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

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import { DropdownMenu, MenuGroup } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import FeatureToggle from '../feature-toggle';
+import { moreVertical } from '@wordpress/icons';
+
+const POPOVER_PROPS = {
+	className: 'edit-site-more-menu__content',
+	position: 'bottom left',
+};
+const TOGGLE_PROPS = {
+	tooltipPosition: 'bottom',
+};
+
+const MoreMenu = () => (
+	<DropdownMenu
+		className="edit-site-more-menu"
+		icon={ moreVertical }
+		label={ __( 'More tools & options' ) }
+		popoverProps={ POPOVER_PROPS }
+		toggleProps={ TOGGLE_PROPS }
+	>
+		{ () => (
+			<MenuGroup label={ _x( 'View', 'noun' ) }>
+				<FeatureToggle
+					feature="fullscreenMode"
+					label={ __( 'Fullscreen mode' ) }
+					info={ __( 'Work without distraction' ) }
+					messageActivated={ __( 'Fullscreen mode activated' ) }
+					messageDeactivated={ __( 'Fullscreen mode deactivated' ) }
+				/>
+			</MenuGroup>
+		) }
+	</DropdownMenu>
+);
+
+export default MoreMenu;

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

@@ -0,0 +1,29 @@
+.edit-site-more-menu {
+	margin-left: -4px;
+
+	// the padding and margin of the more menu is intentionally non-standard
+	.components-button {
+		width: auto;
+		padding: 0 2px;
+	}
+
+	@include break-small() {
+		margin-left: 4px;
+
+		.components-button {
+			padding: 0 4px;
+		}
+	}
+}
+
+.edit-site-more-menu__content .components-popover__content {
+	min-width: 260px;
+
+	.components-dropdown-menu__menu {
+		padding: 0;
+	}
+}
+
+.components-popover.edit-site-more-menu__content {
+	z-index: z-index(".components-popover.edit-site-more-menu__content");
+}

packages/edit-site/src/style.scss

@@ -1,5 +1,6 @@
 @import "./components/block-editor/style.scss";
 @import "./components/header/style.scss";
+@import "./components/header/more-menu/style.scss";
 @import "./components/notices/style.scss";
 @import "./components/sidebar/style.scss";
 @import "./components/template-switcher/style.scss";