Migrate customize widgets editor to use new preferences package

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.customize-widgets-more-menu__content": 99998,
 	".components-popover.edit-post-more-menu__content": 99998,
 	".components-popover.edit-site-more-menu__content": 99998,
 	".components-popover.interface-more-menu__content": 99998,

packages/customize-widgets/package.json

@@ -41,6 +41,7 @@
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/media-utils": "file:../media-utils",
+		"@wordpress/preferences": "file:../preferences",
 		"@wordpress/widgets": "file:../widgets",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21"

packages/customize-widgets/src/components/more-menu/index.js

@@ -12,17 +12,14 @@ import { __, _x } from '@wordpress/i18n';
 import { external } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
-import { MoreMenuDropdown, MoreMenuFeatureToggle } from '@wordpress/interface';
+import { MoreMenuDropdown } from '@wordpress/interface';
+import { PreferenceToggleMenuItem } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
 import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
 
-const POPOVER_PROPS = {
-	className: 'customize-widgets-more-menu__content',
-};
-
 export default function MoreMenu() {
 	const [
 		isKeyboardShortcutsModalActive,
@@ -38,17 +35,13 @@ export default function MoreMenu() {
 
 	return (
 		<>
-			<MoreMenuDropdown
-				as={ ToolbarDropdownMenu }
-				className="customize-widgets-more-menu"
-				popoverProps={ POPOVER_PROPS }
-			>
+			<MoreMenuDropdown as={ ToolbarDropdownMenu }>
 				{ () => (
 					<>
 						<MenuGroup label={ _x( 'View', 'noun' ) }>
-							<MoreMenuFeatureToggle
+							<PreferenceToggleMenuItem
 								scope="core/customize-widgets"
-								feature="fixedToolbar"
+								name="fixedToolbar"
 								label={ __( 'Top toolbar' ) }
 								info={ __(
 									'Access all block and document tools in a single place'
@@ -70,9 +63,9 @@ export default function MoreMenu() {
 							>
 								{ __( 'Keyboard shortcuts' ) }
 							</MenuItem>
-							<MoreMenuFeatureToggle
+							<PreferenceToggleMenuItem
 								scope="core/customize-widgets"
-								feature="welcomeGuide"
+								name="welcomeGuide"
 								label={ __( 'Welcome Guide' ) }
 							/>
 							<MenuItem
@@ -94,9 +87,9 @@ export default function MoreMenu() {
 							</MenuItem>
 						</MenuGroup>
 						<MenuGroup label={ __( 'Preferences' ) }>
-							<MoreMenuFeatureToggle
+							<PreferenceToggleMenuItem
 								scope="core/customize-widgets"
-								feature="keepCaretInsideBlock"
+								name="keepCaretInsideBlock"
 								label={ __(
 									'Contain text cursor inside block'
 								) }

packages/customize-widgets/src/components/sidebar-block-editor/index.js

@@ -22,7 +22,7 @@ import {
 	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
 import { uploadMedia } from '@wordpress/media-utils';
-import { store as interfaceStore } from '@wordpress/interface';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -48,21 +48,21 @@ export default function SidebarBlockEditor( {
 		keepCaretInsideBlock,
 		isWelcomeGuideActive,
 	} = useSelect( ( select ) => {
-		const { isFeatureActive } = select( interfaceStore );
+		const { get } = select( preferencesStore );
 		return {
 			hasUploadPermissions: defaultTo(
 				select( coreStore ).canUser( 'create', 'media' ),
 				true
 			),
-			isFixedToolbarActive: isFeatureActive(
+			isFixedToolbarActive: !! get(
 				'core/customize-widgets',
 				'fixedToolbar'
 			),
-			keepCaretInsideBlock: isFeatureActive(
+			keepCaretInsideBlock: !! get(
 				'core/customize-widgets',
 				'keepCaretInsideBlock'
 			),
-			isWelcomeGuideActive: isFeatureActive(
+			isWelcomeGuideActive: !! get(
 				'core/customize-widgets',
 				'welcomeGuide'
 			),

packages/customize-widgets/src/components/welcome-guide/index.js

@@ -4,10 +4,10 @@
 import { __ } from '@wordpress/i18n';
 import { Button, ExternalLink } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 export default function WelcomeGuide( { sidebar } ) {
-	const { toggleFeature } = useDispatch( interfaceStore );
+	const { toggle } = useDispatch( preferencesStore );
 
 	const isEntirelyBlockWidgets = sidebar
 		.getWidgets()
@@ -46,7 +46,7 @@ export default function WelcomeGuide( { sidebar } ) {
 				className="customize-widgets-welcome-guide__button"
 				variant="primary"
 				onClick={ () =>
-					toggleFeature( 'core/customize-widgets', 'welcomeGuide' )
+					toggle( 'core/customize-widgets', 'welcomeGuide' )
 				}
 			>
 				{ __( 'Got it' ) }

packages/customize-widgets/src/index.js

@@ -17,7 +17,7 @@ import {
 	store as blocksStore,
 } from '@wordpress/blocks';
 import { dispatch } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -44,7 +44,7 @@ const ENABLE_EXPERIMENTAL_FSE_BLOCKS = false;
  * @param {Object} blockEditorSettings Block editor settings.
  */
 export function initialize( editorName, blockEditorSettings ) {
-	dispatch( interfaceStore ).setFeatureDefaults( 'core/customize-widgets', {
+	dispatch( preferencesStore ).setDefaults( 'core/customize-widgets', {
 		fixedToolbar: false,
 		welcomeGuide: true,
 	} );

packages/customize-widgets/src/store/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createReduxStore, registerStore } from '@wordpress/data';
+import { createReduxStore, register } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -14,7 +14,7 @@ import { STORE_NAME } from './constants';
 /**
  * Block editor data store configuration.
  *
- * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#registerStore
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#registering-a-store
  *
  * @type {Object}
  */
@@ -32,7 +32,4 @@ const storeConfig = {
  * @type {Object}
  */
 export const store = createReduxStore( STORE_NAME, storeConfig );
-
-// Once we build a more generic persistence plugin that works across types of stores
-// we'd be able to replace this with a register call.
-registerStore( STORE_NAME, storeConfig );
+register( store );

packages/customize-widgets/src/style.scss

@@ -2,7 +2,6 @@
 @import "./components/header/style.scss";
 @import "./components/inserter/style.scss";
 @import "./components/keyboard-shortcut-help-modal/style.scss";
-@import "./components/more-menu/style.scss";
 @import "./components/sidebar-block-editor/style.scss";
 @import "./components/welcome-guide/style.scss";
 @import "./controls/style.scss";

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

@@ -355,7 +355,7 @@ persistencePlugin.__unstableMigrate = ( pluginOptions ) => {
 		persistence,
 		'core/edit-widgets'
 	);
-	migrateFeaturePreferencesToInterfaceStore(
+	migrateFeaturePreferencesToPreferencesStore(
 		persistence,
 		'core/customize-widgets'
 	);

packages/e2e-tests/specs/widgets/customizing-widgets.test.js

@@ -25,16 +25,17 @@ describe( 'Widgets Customizer', () => {
 		await visitAdminPage( 'customize.php' );
 
 		// Disable welcome guide if it is enabled.
-		const isWelcomeGuideActive = await page.evaluate( () =>
-			wp.data
-				.select( 'core/interface' )
-				.isFeatureActive( 'core/customize-widgets', 'welcomeGuide' )
+		const isWelcomeGuideActive = await page.evaluate(
+			() =>
+				!! wp.data
+					.select( 'core/preferences' )
+					.get( 'core/customize-widgets', 'welcomeGuide' )
 		);
 		if ( isWelcomeGuideActive ) {
 			await page.evaluate( () =>
 				wp.data
-					.dispatch( 'core/interface' )
-					.toggleFeature( 'core/customize-widgets', 'welcomeGuide' )
+					.dispatch( 'core/preferences' )
+					.toggle( 'core/customize-widgets', 'welcomeGuide' )
 			);
 		}
 	} );