Migrate site editor to use new preferences package (#39158)

* Replace more menu with interface package version * Add preferences dependency to the site editor * Migrate site editor localstorage preference data to preferences package * Use preferences for fixedToolbar and focusMode * Use preferences store for welcome guides * Remove unused FeatureToggle component * Deprecate toggleFeature action * Deprecate isFeatureActive * Migrate editor mode * Remove defunct reducer tests * Simplify toggleMoreMenu and clickOnMoreMenuItem e2e utils * Migrate the editor mode local storage data * Fix selector bug - getPreference must be exported * Add test mocks for preferences * Update e2e test actions and selectors * Add action/selector tests for isFeatureActive and toggleFeature
WordPress · Mar 8, 2022 · 6c6582f · 6c6582f
1 parent 5f140a6
commit 6c6582f
Show file tree

Hide file tree

Showing 26 changed files with 169 additions and 324 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -152,7 +152,6 @@ $z-layers: (
 	// ...Except for popovers immediately beneath wp-admin menu on large breakpoints
 	".components-popover.block-editor-inserter__popover": 99999,
 	".components-popover.table-of-contents__popover": 99998,
-	".components-popover.edit-site-more-menu__content": 99998,
 	".components-popover.interface-more-menu__content": 99998,
 	".components-popover.block-editor-rich-text__inline-format-toolbar": 99998,
 	".components-popover.block-editor-warning__dropdown": 99998,

diff --git a/packages/data/src/plugins/persistence/index.js b/packages/data/src/plugins/persistence/index.js
@@ -411,6 +411,15 @@ persistencePlugin.__unstableMigrate = ( pluginOptions ) => {
 		'core/edit-post',
 		'hiddenBlockTypes'
 	);
+	migrateFeaturePreferencesToPreferencesStore(
+		persistence,
+		'core/edit-site'
+	);
+	migrateIndividualPreferenceToPreferencesStore(
+		persistence,
+		'core/edit-site',
+		'editorMode'
+	);
 };
 
 export default persistencePlugin;
diff --git a/packages/e2e-test-utils/CHANGELOG.md b/packages/e2e-test-utils/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancement
+
+-   The `toggleMoreMenu` and `clickMoreMenuItem` utilities no longer require a second 'context' parameter.
+
 ## 6.0.0 (2022-01-27)
 
 ### Breaking Changes

diff --git a/packages/e2e-test-utils/README.md b/packages/e2e-test-utils/README.md
@@ -106,7 +106,6 @@ Clicks on More Menu item, searches for the button with the text provided and cli
 _Parameters_
 
 -   _buttonLabel_ `string`: The label to search the button for.
--   _context_ `[GutenbergContext]`: Whether to click the button in the post editor or site editor context.
 
 ### clickSiteEditorMenuItem
 
@@ -832,7 +831,6 @@ Toggles the More Menu.
 _Parameters_
 
 -   _waitFor_ `['open' | 'close']`: Whether it should wait for the menu to open or close. If `undefined` it won't wait for anything.
--   _context_ `[GutenbergContext]`: Whether it's toggling in the context of the site editor or post editor.
 
 ### toggleOfflineMode
 

diff --git a/packages/e2e-test-utils/src/click-on-more-menu-item.js b/packages/e2e-test-utils/src/click-on-more-menu-item.js
@@ -8,32 +8,15 @@ import { first } from 'lodash';
  */
 import { toggleMoreMenu } from './toggle-more-menu';
 
-/**
- * @typedef {import("./shared/types").GutenbergContext} GutenbergContext
- */
-
-const SELECTORS = {
-	postEditorMenuContainer:
-		'//*[contains(concat(" ", @class, " "), " interface-more-menu-dropdown__content ")]',
-	siteEditorMenuContainer:
-		'//*[contains(concat(" ", @class, " "), " edit-site-more-menu__content ")]',
-};
-
 /**
  * Clicks on More Menu item, searches for the button with the text provided and clicks it.
  *
- * @param {string}           buttonLabel             The label to search the button for.
- * @param {GutenbergContext} [context='post-editor'] Whether to click the button in the post editor or site editor context.
+ * @param {string} buttonLabel The label to search the button for.
  */
-export async function clickOnMoreMenuItem(
-	buttonLabel,
-	context = 'post-editor'
-) {
-	await toggleMoreMenu( 'open', context );
+export async function clickOnMoreMenuItem( buttonLabel ) {
+	await toggleMoreMenu( 'open' );
 	const moreMenuContainerSelector =
-		context === 'post-editor'
-			? SELECTORS.postEditorMenuContainer
-			: SELECTORS.siteEditorMenuContainer;
+		'//*[contains(concat(" ", @class, " "), " interface-more-menu-dropdown__content ")]';
 
 	const elementToClick = first(
 		await page.$x(

diff --git a/packages/e2e-test-utils/src/site-editor.js b/packages/e2e-test-utils/src/site-editor.js
@@ -59,26 +59,32 @@ export async function closeSiteEditorNavigationPanel() {
  * Skips the welcome guide popping up to first time users of the site editor
  */
 export async function disableSiteEditorWelcomeGuide() {
-	const isWelcomeGuideActive = await page.evaluate( () =>
-		wp.data.select( 'core/edit-site' ).isFeatureActive( 'welcomeGuide' )
+	const isWelcomeGuideActive = await page.evaluate(
+		() =>
+			!! wp.data
+				.select( 'core/preferences' )
+				.get( 'core/edit-site', 'welcomeGuide' )
 	);
-	const isWelcomeGuideStyesActive = await page.evaluate( () =>
-		wp.data
-			.select( 'core/edit-site' )
-			.isFeatureActive( 'welcomeGuideStyles' )
+	const isWelcomeGuideStyesActive = await page.evaluate(
+		() =>
+			!! wp.data
+				.select( 'core/preferences' )
+				.get( 'core/edit-site', 'welcomeGuideStyles' )
 	);
 
 	if ( isWelcomeGuideActive ) {
 		await page.evaluate( () =>
-			wp.data.dispatch( 'core/edit-site' ).toggleFeature( 'welcomeGuide' )
+			wp.data
+				.dispatch( 'core/preferences' )
+				.toggle( 'core/edit-site', 'welcomeGuide' )
 		);
 	}
 
 	if ( isWelcomeGuideStyesActive ) {
 		await page.evaluate( () =>
 			wp.data
-				.dispatch( 'core/edit-site' )
-				.toggleFeature( 'welcomeGuideStyles' )
+				.dispatch( 'core/preferences' )
+				.toggle( 'core/edit-site', 'welcomeGuideStyles' )
 		);
 	}
 }

diff --git a/packages/e2e-test-utils/src/toggle-more-menu.js b/packages/e2e-test-utils/src/toggle-more-menu.js
@@ -1,35 +1,16 @@
-/**
- * @typedef {import("./shared/types").GutenbergContext} GutenbergContext
- */
-
-const SELECTORS = {
-	postEditorMenuContent: '.interface-more-menu-dropdown__content',
-	siteEditorMenuContent: '.edit-site-more-menu__content',
-	postEditorMenu: '.interface-more-menu-dropdown [aria-label="Options"]',
-	siteEditorMenu: '.edit-site-more-menu [aria-label="More tools & options"]',
-};
-
 /**
  * Toggles the More Menu.
  *
- * @param {'open' | 'close'} [waitFor]               Whether it should wait for the menu to open or close. If `undefined` it won't wait for anything.
- * @param {GutenbergContext} [context='post-editor'] Whether it's toggling in the context of the site editor or post editor.
+ * @param {'open' | 'close'} [waitFor] Whether it should wait for the menu to open or close. If `undefined` it won't wait for anything.
  */
-export async function toggleMoreMenu( waitFor, context = 'post-editor' ) {
-	const menuSelector =
-		context === 'post-editor'
-			? SELECTORS.postEditorMenu
-			: SELECTORS.siteEditorMenu;
+export async function toggleMoreMenu( waitFor ) {
+	const menuSelector = '.interface-more-menu-dropdown [aria-label="Options"]';
 
 	await page.click( menuSelector );
 
 	if ( waitFor ) {
 		const opts = waitFor === 'close' ? { hidden: true } : {};
-		const menuContentSelector =
-			context === 'post-editor'
-				? SELECTORS.postEditorMenuContent
-				: SELECTORS.siteEditorMenuContent;
-
+		const menuContentSelector = '.interface-more-menu-dropdown__content';
 		await page.waitForSelector( menuContentSelector, opts );
 	}
 }
diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
@@ -36,6 +36,7 @@
 		"@wordpress/compose": "file:../compose",
 		"@wordpress/core-data": "file:../core-data",
 		"@wordpress/data": "file:../data",
+		"@wordpress/deprecated": "file:../deprecated",
 		"@wordpress/editor": "file:../editor",
 		"@wordpress/element": "file:../element",
 		"@wordpress/hooks": "file:../hooks",
@@ -48,6 +49,7 @@
 		"@wordpress/media-utils": "file:../media-utils",
 		"@wordpress/notices": "file:../notices",
 		"@wordpress/plugins": "file:../plugins",
+		"@wordpress/preferences": "file:../preferences",
 		"@wordpress/reusable-blocks": "file:../reusable-blocks",
 		"@wordpress/style-engine": "file:../style-engine",
 		"@wordpress/url": "file:../url",

diff --git a/packages/edit-site/src/components/header/feature-toggle/index.js b/packages/edit-site/src/components/header/feature-toggle/index.js
diff --git a/packages/edit-site/src/components/header/more-menu/index.js b/packages/edit-site/src/components/header/more-menu/index.js
@@ -5,34 +5,21 @@ import { __, _x } from '@wordpress/i18n';
 import { useReducer } from '@wordpress/element';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { displayShortcut } from '@wordpress/keycodes';
-import { external, moreVertical } from '@wordpress/icons';
-import {
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
-	VisuallyHidden,
-} from '@wordpress/components';
-import { ActionItem } from '@wordpress/interface';
+import { external } from '@wordpress/icons';
+import { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';
+import { ActionItem, MoreMenuDropdown } from '@wordpress/interface';
+import { PreferenceToggleMenuItem } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
 import KeyboardShortcutHelpModal from '../../keyboard-shortcut-help-modal';
-import FeatureToggle from '../feature-toggle';
 import ToolsMoreMenuGroup from '../tools-more-menu-group';
 import SiteExport from './site-export';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
 import CopyContentMenuItem from './copy-content-menu-item';
 import ModeSwitcher from '../mode-switcher';
 
-const POPOVER_PROPS = {
-	className: 'edit-site-more-menu__content',
-	position: 'bottom left',
-};
-const TOGGLE_PROPS = {
-	tooltipPosition: 'bottom',
-};
-
 export default function MoreMenu() {
 	const [ isModalActive, toggleModal ] = useReducer(
 		( isActive ) => ! isActive,
@@ -43,18 +30,13 @@ export default function MoreMenu() {
 
 	return (
 		<>
-			<DropdownMenu
-				className="edit-site-more-menu"
-				icon={ moreVertical }
-				label={ __( 'More tools & options' ) }
-				popoverProps={ POPOVER_PROPS }
-				toggleProps={ TOGGLE_PROPS }
-			>
+			<MoreMenuDropdown>
 				{ ( { onClose } ) => (
 					<>
 						<MenuGroup label={ _x( 'View', 'noun' ) }>
-							<FeatureToggle
-								feature="fixedToolbar"
+							<PreferenceToggleMenuItem
+								scope="core/edit-site"
+								name="fixedToolbar"
 								label={ __( 'Top toolbar' ) }
 								info={ __(
 									'Access all block and document tools in a single place'
@@ -66,8 +48,9 @@ export default function MoreMenu() {
 									'Top toolbar deactivated'
 								) }
 							/>
-							<FeatureToggle
-								feature="focusMode"
+							<PreferenceToggleMenuItem
+								scope="core/edit-site"
+								name="focusMode"
 								label={ __( 'Spotlight mode' ) }
 								info={ __( 'Focus on one block at a time' ) }
 								messageActivated={ __(
@@ -118,7 +101,7 @@ export default function MoreMenu() {
 						</MenuGroup>
 					</>
 				) }
-			</DropdownMenu>
+			</MoreMenuDropdown>
 			<KeyboardShortcutHelpModal
 				isModalActive={ isModalActive }
 				toggleModal={ toggleModal }

diff --git a/packages/edit-site/src/components/header/more-menu/style.scss b/packages/edit-site/src/components/header/more-menu/style.scss
diff --git a/packages/edit-site/src/components/header/more-menu/welcome-guide-menu-item.js b/packages/edit-site/src/components/header/more-menu/welcome-guide-menu-item.js
@@ -4,17 +4,13 @@
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import { MenuItem } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 export default function WelcomeGuideMenuItem() {
-	const { toggleFeature } = useDispatch( editSiteStore );
+	const { toggle } = useDispatch( preferencesStore );
 
 	return (
-		<MenuItem onClick={ () => toggleFeature( 'welcomeGuide' ) }>
+		<MenuItem onClick={ () => toggle( 'core/edit-site', 'welcomeGuide' ) }>
 			{ __( 'Welcome Guide' ) }
 		</MenuItem>
 	);