Migrate site editor feature preferences to interface package

packages/data/src/plugins/persistence/index.js

@@ -286,6 +286,7 @@ persistencePlugin.__unstableMigrate = ( pluginOptions ) => {
 		'core/customize-widgets'
 	);
 	migrateFeaturePreferencesToInterfaceStore( persistence, 'core/edit-post' );
+	migrateFeaturePreferencesToInterfaceStore( persistence, 'core/edit-site' );
 };
 
 export default persistencePlugin;

packages/e2e-test-utils/src/click-on-more-menu-item.js

@@ -16,7 +16,7 @@ import { toggleMoreMenu } from './toggle-more-menu';
 export async function clickOnMoreMenuItem( buttonLabel ) {
 	await toggleMoreMenu();
 	const moreMenuContainerSelector =
-		'//*[contains(concat(" ", @class, " "), " edit-post-more-menu__content ")]';
+		'//*[contains(concat(" ", @class, " "), " interface-more-menu-dropdown__content ")]';
 	const elementToClick = first(
 		await page.$x(
 			`${ moreMenuContainerSelector }//span[contains(concat(" ", @class, " "), " components-menu-item__item ")][contains(text(), "${ buttonLabel }")]`

packages/e2e-test-utils/src/toggle-more-menu.js

@@ -3,6 +3,6 @@
  */
 export async function toggleMoreMenu() {
 	await expect( page ).toClick(
-		'.edit-post-more-menu [aria-label="Options"]'
+		'.interface-more-menu-dropdown [aria-label="Options"]'
 	);
 }

packages/e2e-tests/experimental-features.js

@@ -111,26 +111,6 @@ export const siteEditor = {
 		await page.waitForSelector( '.edit-site-visual-editor iframe' );
 	},
 
-	async toggleMoreMenu() {
-		// eslint-disable-next-line jest/no-standalone-expect
-		await expect( page ).toClick(
-			'.edit-site-more-menu [aria-label="More tools & options"]'
-		);
-	},
-
-	async clickOnMoreMenuItem( buttonLabel ) {
-		await this.toggleMoreMenu();
-		const moreMenuContainerSelector =
-			'//*[contains(concat(" ", @class, " "), " edit-site-more-menu__content ")]';
-		const elementToClick = (
-			await page.$x(
-				`${ moreMenuContainerSelector }//span[contains(concat(" ", @class, " "), " components-menu-item__item ")][contains(text(), "${ buttonLabel }")]`
-			)
-		 )[ 0 ];
-
-		await elementToClick.click();
-	},
-
 	async getEditedPostContent() {
 		return page.evaluate( async () => {
 			const postId = window.wp.data

packages/e2e-tests/specs/experiments/site-editor-export.test.js

@@ -8,7 +8,11 @@ import os from 'os';
 /**
  * WordPress dependencies
  */
-import { trashAllPosts, activateTheme } from '@wordpress/e2e-test-utils';
+import {
+	clickOnMoreMenuItem,
+	trashAllPosts,
+	activateTheme,
+} from '@wordpress/e2e-test-utils';
 
 /**
  * Internal dependencies
@@ -52,7 +56,7 @@ describe( 'Site Editor Templates Export', () => {
 			downloadPath: directory,
 		} );
 
-		await siteEditor.clickOnMoreMenuItem( 'Export' );
+		await clickOnMoreMenuItem( 'Export' );
 		const filePath = path.join( directory, 'edit-site-export.zip' );
 		await waitForFileExists( filePath );
 		expect( fs.existsSync( filePath ) ).toBe( true );

packages/edit-site/package.json

@@ -37,6 +37,7 @@
 		"@wordpress/core-data": "file:../core-data",
 		"@wordpress/data": "file:../data",
 		"@wordpress/data-controls": "file:../data-controls",
+		"@wordpress/deprecated": "file:../deprecated",
 		"@wordpress/editor": "file:../editor",
 		"@wordpress/element": "file:../element",
 		"@wordpress/hooks": "file:../hooks",

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback, useRef } from '@wordpress/element';
+import { useCallback, useMemo, useRef } from '@wordpress/element';
 import { useEntityBlockEditor } from '@wordpress/core-data';
 import {
 	BlockEditorProvider,
@@ -18,6 +18,7 @@ import {
 	__unstableIframe as Iframe,
 } from '@wordpress/block-editor';
 import { useMergeRefs } from '@wordpress/compose';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -35,7 +36,14 @@ const LAYOUT = {
 };
 
 export default function BlockEditor( { setIsInserterOpen } ) {
-	const { settings, templateType, page, deviceType } = useSelect(
+	const {
+		settings,
+		templateType,
+		page,
+		deviceType,
+		isFixedToolbarActive,
+		isFocusModeActive,
+	} = useSelect(
 		( select ) => {
 			const {
 				getSettings,
@@ -44,6 +52,14 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 				__experimentalGetPreviewDeviceType,
 			} = select( editSiteStore );
 			return {
+				isFixedToolbarActive: select( interfaceStore ).isFeatureActive(
+					'core/edit-site',
+					'fixedToolbar'
+				),
+				isFocusModeActive: select( interfaceStore ).isFeatureActive(
+					'core/edit-site',
+					'focusMode'
+				),
 				settings: getSettings( setIsInserterOpen ),
 				templateType: getEditedPostType(),
 				page: getPage(),
@@ -62,9 +78,18 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	const contentRef = useRef();
 	const mergedRefs = useMergeRefs( [ contentRef, useTypingObserver() ] );
 
+	const editorSettings = useMemo(
+		() => ( {
+			...settings,
+			hasFixedToolbar: isFixedToolbarActive,
+			focusMode: isFocusModeActive,
+		} ),
+		[ settings, isFixedToolbarActive, isFocusModeActive ]
+	);
+
 	return (
 		<BlockEditorProvider
-			settings={ settings }
+			settings={ editorSettings }
 			value={ blocks }
 			onInput={ onInput }
 			onChange={ onChange }

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

@@ -2,36 +2,32 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { moreVertical } from '@wordpress/icons';
-import { DropdownMenu, MenuGroup } from '@wordpress/components';
-import { ActionItem } from '@wordpress/interface';
+import { MenuGroup } from '@wordpress/components';
+import {
+	ActionItem,
+	MoreMenuDropdown,
+	MoreMenuFeatureToggle,
+} from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
-import FeatureToggle from '../feature-toggle';
 import ToolsMoreMenuGroup from '../tools-more-menu-group';
 
 const POPOVER_PROPS = {
 	className: 'edit-site-more-menu__content',
-	position: 'bottom left',
-};
-const TOGGLE_PROPS = {
-	tooltipPosition: 'bottom',
 };
 
 const MoreMenu = () => (
-	<DropdownMenu
+	<MoreMenuDropdown
 		className="edit-site-more-menu"
-		icon={ moreVertical }
-		label={ __( 'More tools & options' ) }
 		popoverProps={ POPOVER_PROPS }
-		toggleProps={ TOGGLE_PROPS }
 	>
 		{ ( { onClose } ) => (
 			<>
 				<MenuGroup label={ _x( 'View', 'noun' ) }>
-					<FeatureToggle
+					<MoreMenuFeatureToggle
+						scope="core/edit-site"
 						feature="fixedToolbar"
 						label={ __( 'Top toolbar' ) }
 						info={ __(
@@ -40,7 +36,8 @@ const MoreMenu = () => (
 						messageActivated={ __( 'Top toolbar activated' ) }
 						messageDeactivated={ __( 'Top toolbar deactivated' ) }
 					/>
-					<FeatureToggle
+					<MoreMenuFeatureToggle
+						scope="core/edit-site"
 						feature="focusMode"
 						label={ __( 'Spotlight mode' ) }
 						info={ __( 'Focus on one block at a time' ) }
@@ -59,7 +56,7 @@ const MoreMenu = () => (
 				<ToolsMoreMenuGroup.Slot fillProps={ { onClose } } />
 			</>
 		) }
-	</DropdownMenu>
+	</MoreMenuDropdown>
 );
 
 export default MoreMenu;

packages/edit-site/src/index.js

@@ -7,6 +7,8 @@ import {
 } from '@wordpress/block-library';
 import { render, unmountComponentAtNode } from '@wordpress/element';
 import { __experimentalFetchLinkSuggestions as fetchLinkSuggestions } from '@wordpress/core-data';
+import { dispatch } from '@wordpress/data';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -44,6 +46,11 @@ export function initialize( id, settings ) {
 		fetchLinkSuggestions( search, searchOptions, settings );
 	settings.__experimentalSpotlightEntityBlocks = [ 'core/template-part' ];
 
+	dispatch( interfaceStore ).setFeatureDefaults( 'core/edit-site', {
+		fixedToolbar: false,
+		focusMode: false,
+	} );
+
 	const target = document.getElementById( id );
 	const reboot = reinitializeEditor.bind( null, target, settings );
 

packages/edit-site/src/store/actions.js

@@ -3,11 +3,13 @@
  */
 import { parse, __unstableSerializeAndClean } from '@wordpress/blocks';
 import { controls, dispatch } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
 import { apiFetch } from '@wordpress/data-controls';
 import { addQueryArgs, getPathAndQueryString } from '@wordpress/url';
 import { __ } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -19,14 +21,23 @@ import isTemplateRevertable from '../utils/is-template-revertable';
  * Returns an action object used to toggle a feature flag.
  *
  * @param {string} feature Feature name.
- *
- * @return {Object} Action object.
  */
-export function toggleFeature( feature ) {
-	return {
-		type: 'TOGGLE_FEATURE',
-		feature,
-	};
+export function* toggleFeature( feature ) {
+	deprecated(
+		'`dispatch( editSiteStore ).toggleFeature( myFeature )` action',
+		{
+			since: '11.3',
+			alternative:
+				"`dispatch( interfaceStore ).toggleFeature( 'core/edit-site', myFeature )` action",
+		}
+	);
+
+	yield controls.dispatch(
+		interfaceStore.name,
+		'toggleFeature',
+		'core/edit-site',
+		feature
+	);
 }
 
 /**

packages/edit-site/src/store/index.js

@@ -17,7 +17,6 @@ export const storeConfig = {
 	actions,
 	selectors,
 	controls,
-	persist: [ 'preferences' ],
 };
 
 export const store = createReduxStore( STORE_NAME, storeConfig );

packages/edit-site/src/store/reducer.js

@@ -6,31 +6,8 @@ import { combineReducers } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { PREFERENCES_DEFAULTS } from './defaults';
 import { MENU_ROOT } from '../components/navigation-sidebar/navigation-panel/constants';
 
-/**
- * Reducer returning the user preferences.
- *
- * @param {Object} state  Current state.
- * @param {Object} action Dispatched action.
- * @return {Object} Updated state.
- */
-export const preferences = combineReducers( {
-	features( state = PREFERENCES_DEFAULTS.features, action ) {
-		switch ( action.type ) {
-			case 'TOGGLE_FEATURE': {
-				return {
-					...state,
-					[ action.feature ]: ! state[ action.feature ],
-				};
-			}
-			default:
-				return state;
-		}
-	},
-} );
-
 /**
  * Reducer returning the editing canvas device type.
  *
@@ -207,7 +184,6 @@ export function listViewPanel( state = false, action ) {
 }
 
 export default combineReducers( {
-	preferences,
 	deviceType,
 	settings,
 	editedPost,