Migrate post editor feature preferences to use new preferences package (

#39115) * Migrate post editor preferences to use new preferences package * Fix css classes used in e2e tests * Remove outdated note * Re-alphabetize imports
WordPress · Mar 2, 2022 · fc595ba · fc595ba
1 parent c8183ad
commit fc595ba
Show file tree

Hide file tree

Showing 20 changed files with 53 additions and 87 deletions.
diff --git a/docs/reference-guides/data/data-core-edit-post.md b/docs/reference-guides/data/data-core-edit-post.md
@@ -490,7 +490,11 @@ _Returns_
 
 ### switchEditorMode
 
-Undocumented declaration.
+Triggers an action used to switch editor mode.
+
+_Parameters_
+
+-   _mode_ `string`: The editor mode.
 
 ### toggleEditorPanelEnabled
 

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-post-more-menu__content": 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,

diff --git a/packages/data/src/plugins/persistence/index.js b/packages/data/src/plugins/persistence/index.js
@@ -343,11 +343,6 @@ export function migrateFeaturePreferencesToInterfaceStore(
 	}
 }
 
-/**
- * Deprecated: Remove this function and the code in WordPress Core that calls
- * it once WordPress 6.0 is released.
- */
-
 persistencePlugin.__unstableMigrate = ( pluginOptions ) => {
 	const persistence = createPersistenceInterface( pluginOptions );
 
@@ -359,7 +354,10 @@ persistencePlugin.__unstableMigrate = ( pluginOptions ) => {
 		persistence,
 		'core/customize-widgets'
 	);
-	migrateFeaturePreferencesToInterfaceStore( persistence, 'core/edit-post' );
+	migrateFeaturePreferencesToPreferencesStore(
+		persistence,
+		'core/edit-post'
+	);
 };
 
 export default persistencePlugin;
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
@@ -14,7 +14,7 @@ import { toggleMoreMenu } from './toggle-more-menu';
 
 const SELECTORS = {
 	postEditorMenuContainer:
-		'//*[contains(concat(" ", @class, " "), " edit-post-more-menu__content ")]',
+		'//*[contains(concat(" ", @class, " "), " interface-more-menu-dropdown__content ")]',
 	siteEditorMenuContainer:
 		'//*[contains(concat(" ", @class, " "), " edit-site-more-menu__content ")]',
 };

diff --git a/packages/e2e-test-utils/src/toggle-more-menu.js b/packages/e2e-test-utils/src/toggle-more-menu.js
@@ -5,7 +5,7 @@
 const SELECTORS = {
 	postEditorMenuContent: '.interface-more-menu-dropdown__content',
 	siteEditorMenuContent: '.edit-site-more-menu__content',
-	postEditorMenu: '.edit-post-more-menu [aria-label="Options"]',
+	postEditorMenu: '.interface-more-menu-dropdown [aria-label="Options"]',
 	siteEditorMenu: '.edit-site-more-menu [aria-label="More tools & options"]',
 };
 

diff --git a/packages/e2e-tests/specs/editor/various/popovers.test.js b/packages/e2e-tests/specs/editor/various/popovers.test.js
@@ -11,16 +11,16 @@ describe( 'popovers', () => {
 	describe( 'dropdown', () => {
 		it( 'toggles via click', async () => {
 			const isMoreMenuOpen = async () =>
-				!! ( await page.$( '.edit-post-more-menu__content' ) );
+				!! ( await page.$( '.interface-more-menu-dropdown__content' ) );
 
 			expect( await isMoreMenuOpen() ).toBe( false );
 
 			// Toggle opened.
-			await page.click( '.edit-post-more-menu > button' );
+			await page.click( '.interface-more-menu-dropdown > button' );
 			expect( await isMoreMenuOpen() ).toBe( true );
 
 			// Toggle closed.
-			await page.click( '.edit-post-more-menu > button' );
+			await page.click( '.interface-more-menu-dropdown > button' );
 			expect( await isMoreMenuOpen() ).toBe( false );
 		} );
 	} );

diff --git a/packages/e2e-tests/specs/editor/various/post-editor-template-mode.test.js b/packages/e2e-tests/specs/editor/various/post-editor-template-mode.test.js
@@ -230,16 +230,17 @@ describe( 'Delete Post Template Confirmation Dialog', () => {
 		it( `should retain template if deletion is canceled when the viewport is ${ viewport }`, async () => {
 			await setBrowserViewport( viewport );
 
-			const isWelcomeGuideActive = await page.evaluate( () =>
-				wp.data
-					.select( 'core/edit-post' )
-					.isFeatureActive( 'welcomeGuide' )
+			const isWelcomeGuideActive = await page.evaluate(
+				() =>
+					!! wp.data
+						.select( 'core/preferences' )
+						.get( 'core/edit-post', 'welcomeGuide' )
 			);
 			if ( isWelcomeGuideActive === true ) {
 				await page.evaluate( () =>
 					wp.data
 						.dispatch( 'core/edit-post' )
-						.toggleFeature( 'welcomeGuide' )
+						.toggle( 'core/edit-post', 'welcomeGuide' )
 				);
 				await page.reload();
 				await page.waitForSelector( '.edit-post-layout' );

diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
@@ -47,6 +47,7 @@
 		"@wordpress/media-utils": "file:../media-utils",
 		"@wordpress/notices": "file:../notices",
 		"@wordpress/plugins": "file:../plugins",
+		"@wordpress/preferences": "file:../preferences",
 		"@wordpress/url": "file:../url",
 		"@wordpress/viewport": "file:../viewport",
 		"@wordpress/warning": "file:../warning",

diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/header/more-menu/index.js
@@ -18,17 +18,11 @@ import PreferencesMenuItem from '../preferences-menu-item';
 import ToolsMoreMenuGroup from '../tools-more-menu-group';
 import WritingMenu from '../writing-menu';
 
-const POPOVER_PROPS = {
-	className: 'edit-post-more-menu__content',
-};
-
 const MoreMenu = ( { showIconLabels } ) => {
 	const isLargeViewport = useViewportMatch( 'large' );
 
 	return (
 		<MoreMenuDropdown
-			className="edit-post-more-menu"
-			popoverProps={ POPOVER_PROPS }
 			toggleProps={ {
 				showTooltip: ! showIconLabels,
 				...( showIconLabels && { variant: 'tertiary' } ),

diff --git a/packages/edit-post/src/components/header/more-menu/style.scss b/packages/edit-post/src/components/header/more-menu/style.scss
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
@@ -73,7 +73,7 @@
 		padding: 0 #{ $grid-unit-15 * 0.5 };
 	}
 
-	.edit-post-more-menu .components-button,
+	.interface-more-menu-dropdown .components-button,
 	.interface-pinned-items .components-button {
 		margin-right: 0;
 	}

diff --git a/packages/edit-post/src/components/header/writing-menu/index.js b/packages/edit-post/src/components/header/writing-menu/index.js
@@ -5,7 +5,7 @@ import { MenuGroup } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import { displayShortcut } from '@wordpress/keycodes';
-import { MoreMenuFeatureToggle } from '@wordpress/interface';
+import { PreferenceToggleMenuItem } from '@wordpress/preferences';
 
 function WritingMenu() {
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -15,27 +15,27 @@ function WritingMenu() {
 
 	return (
 		<MenuGroup label={ _x( 'View', 'noun' ) }>
-			<MoreMenuFeatureToggle
+			<PreferenceToggleMenuItem
 				scope="core/edit-post"
-				feature="fixedToolbar"
+				name="fixedToolbar"
 				label={ __( 'Top toolbar' ) }
 				info={ __(
 					'Access all block and document tools in a single place'
 				) }
 				messageActivated={ __( 'Top toolbar activated' ) }
 				messageDeactivated={ __( 'Top toolbar deactivated' ) }
 			/>
-			<MoreMenuFeatureToggle
+			<PreferenceToggleMenuItem
 				scope="core/edit-post"
-				feature="focusMode"
+				name="focusMode"
 				label={ __( 'Spotlight mode' ) }
 				info={ __( 'Focus on one block at a time' ) }
 				messageActivated={ __( 'Spotlight mode activated' ) }
 				messageDeactivated={ __( 'Spotlight mode deactivated' ) }
 			/>
-			<MoreMenuFeatureToggle
+			<PreferenceToggleMenuItem
 				scope="core/edit-post"
-				feature="fullscreenMode"
+				name="fullscreenMode"
 				label={ __( 'Fullscreen mode' ) }
 				info={ __( 'Work without distraction' ) }
 				messageActivated={ __( 'Fullscreen mode activated' ) }

diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js
@@ -9,7 +9,7 @@ import {
 import { render, unmountComponentAtNode } from '@wordpress/element';
 import { dispatch, select } from '@wordpress/data';
 import { addFilter } from '@wordpress/hooks';
-import { store as interfaceStore } from '@wordpress/interface';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -106,7 +106,7 @@ export function initializeEditor(
 		initialEdits
 	);
 
-	dispatch( interfaceStore ).setFeatureDefaults( 'core/edit-post', {
+	dispatch( preferencesStore ).setDefaults( 'core/edit-post', {
 		fixedToolbar: false,
 		welcomeGuide: true,
 		fullscreenMode: true,

diff --git a/packages/edit-post/src/plugins/welcome-guide-menu-item/index.js b/packages/edit-post/src/plugins/welcome-guide-menu-item/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { MoreMenuFeatureToggle } from '@wordpress/interface';
+import { PreferenceToggleMenuItem } from '@wordpress/preferences';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -17,9 +17,9 @@ export default function WelcomeGuideMenuItem() {
 	);
 
 	return (
-		<MoreMenuFeatureToggle
+		<PreferenceToggleMenuItem
 			scope="core/edit-post"
-			feature={ isTemplateMode ? 'welcomeGuideTemplate' : 'welcomeGuide' }
+			name={ isTemplateMode ? 'welcomeGuideTemplate' : 'welcomeGuide' }
 			label={ __( 'Welcome Guide' ) }
 		/>
 	);

diff --git a/packages/edit-post/src/store/actions.js b/packages/edit-post/src/store/actions.js
@@ -8,8 +8,9 @@ import { castArray, reduce } from 'lodash';
  */
 import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
-import { speak } from '@wordpress/a11y';
 import { store as interfaceStore } from '@wordpress/interface';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { speak } from '@wordpress/a11y';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -147,10 +148,13 @@ export function removeEditorPanel( panelName ) {
  * @param {string} feature Feature name.
  */
 export const toggleFeature = ( feature ) => ( { registry } ) =>
-	registry
-		.dispatch( interfaceStore )
-		.toggleFeature( 'core/edit-post', feature );
+	registry.dispatch( preferencesStore ).toggle( 'core/edit-post', feature );
 
+/**
+ * Triggers an action used to switch editor mode.
+ *
+ * @param {string} mode The editor mode.
+ */
 export const switchEditorMode = ( mode ) => ( { dispatch, registry } ) => {
 	dispatch( {
 		type: 'SWITCH_MODE',

diff --git a/packages/edit-post/src/store/selectors.js b/packages/edit-post/src/store/selectors.js
@@ -9,6 +9,7 @@ import { get, includes, some, flatten, values } from 'lodash';
  */
 import { createRegistrySelector } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
+import { store as preferencesStore } from '@wordpress/preferences';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
 /**
@@ -191,10 +192,7 @@ export function isModalActive( state, modalName ) {
  */
 export const isFeatureActive = createRegistrySelector(
 	( select ) => ( state, feature ) => {
-		return select( interfaceStore ).isFeatureActive(
-			'core/edit-post',
-			feature
-		);
+		return !! select( preferencesStore ).get( 'core/edit-post', feature );
 	}
 );
 

diff --git a/packages/edit-post/src/store/test/actions.js b/packages/edit-post/src/store/test/actions.js
@@ -3,6 +3,7 @@
  */
 import { createRegistry } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
+import { store as preferencesStore } from '@wordpress/preferences';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -22,6 +23,7 @@ function createRegistryWithStores() {
 		blockEditorStore,
 		coreStore,
 		interfaceStore,
+		preferencesStore,
 		editorStore,
 	].forEach( registry.register );
 	return registry;
@@ -53,15 +55,15 @@ describe( 'actions', () => {
 		registry.dispatch( editPostStore ).toggleFeature( 'welcomeGuide' );
 		expect(
 			registry
-				.select( interfaceStore )
-				.isFeatureActive( editPostStore.name, 'welcomeGuide' )
+				.select( preferencesStore )
+				.get( editPostStore.name, 'welcomeGuide' )
 		).toBe( true );
 
 		registry.dispatch( editPostStore ).toggleFeature( 'welcomeGuide' );
 		expect(
 			registry
-				.select( interfaceStore )
-				.isFeatureActive( editPostStore.name, 'welcomeGuide' )
+				.select( preferencesStore )
+				.get( editPostStore.name, 'welcomeGuide' )
 		).toBe( false );
 	} );
 	describe( 'switchEditorMode', () => {

diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
@@ -2,7 +2,6 @@
 @import "./components/header/style.scss";
 @import "./components/header/fullscreen-mode-close/style.scss";
 @import "./components/header/header-toolbar/style.scss";
-@import "./components/header/more-menu/style.scss";
 @import "./components/header/template-title/style.scss";
 @import "./components/keyboard-shortcut-help-modal/style.scss";
 @import "./components/layout/style.scss";

diff --git a/packages/nux/src/components/dot-tip/style.scss b/packages/nux/src/components/dot-tip/style.scss
@@ -114,12 +114,12 @@ $dot-scale: 3;  // How much the pulse animation should scale up by in size
 		margin-right: 0;
 	}
 
-	&.components-popover.edit-post-more-menu__content:not([data-y-axis="middle"])[data-y-axis="right"] .components-popover__content {
+	&.components-popover.interface-more-menu-dropdown__content:not([data-y-axis="middle"])[data-y-axis="right"] .components-popover__content {
 		/*!rtl:ignore*/
 		margin-left: -12px;
 	}
 
-	&.components-popover.edit-post-more-menu__content:not([data-y-axis="middle"])[data-y-axis="left"] .components-popover__content {
+	&.components-popover.interface-more-menu-dropdown__content:not([data-y-axis="middle"])[data-y-axis="left"] .components-popover__content {
 		/*!rtl:ignore*/
 		margin-right: -12px;
 	}