Migrate customize widgets feature preferences to interface package (#…

…34135)

* Migrate preferences for customize widgets to interface package

* Ensure dropdown renders as a ToolbarDropdownMenu

* Update package lock

* Fix disabling of welcome guide in widgets customizer tests

* Remove persistence of preferences

packages/customize-widgets/package.json

@@ -37,6 +37,7 @@
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
+		"@wordpress/interface": "file:../interface",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/keycodes": "file:../keycodes",

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

@@ -2,29 +2,25 @@
  * WordPress dependencies
  */
 import {
-	ToolbarDropdownMenu,
 	MenuGroup,
 	MenuItem,
+	ToolbarDropdownMenu,
 	VisuallyHidden,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import { external, moreVertical } from '@wordpress/icons';
+import { external } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
+import { MoreMenuDropdown, MoreMenuFeatureToggle } from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
-import FeatureToggle from './feature-toggle';
 import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
 
 const POPOVER_PROPS = {
 	className: 'customize-widgets-more-menu__content',
-	position: 'bottom left',
-};
-const TOGGLE_PROPS = {
-	tooltipPosition: 'bottom',
 };
 
 export default function MoreMenu() {
@@ -45,18 +41,16 @@ export default function MoreMenu() {
 
 	return (
 		<>
-			<ToolbarDropdownMenu
+			<MoreMenuDropdown
+				as={ ToolbarDropdownMenu }
 				className="customize-widgets-more-menu"
-				icon={ moreVertical }
-				/* translators: button label text should, if possible, be under 16 characters. */
-				label={ __( 'Options' ) }
 				popoverProps={ POPOVER_PROPS }
-				toggleProps={ TOGGLE_PROPS }
 			>
 				{ () => (
 					<>
 						<MenuGroup label={ _x( 'View', 'noun' ) }>
-							<FeatureToggle
+							<MoreMenuFeatureToggle
+								scope="core/customize-widgets"
 								feature="fixedToolbar"
 								label={ __( 'Top toolbar' ) }
 								info={ __(
@@ -79,7 +73,8 @@ export default function MoreMenu() {
 							>
 								{ __( 'Keyboard shortcuts' ) }
 							</MenuItem>
-							<FeatureToggle
+							<MoreMenuFeatureToggle
+								scope="core/customize-widgets"
 								feature="welcomeGuide"
 								label={ __( 'Welcome Guide' ) }
 							/>
@@ -102,7 +97,8 @@ export default function MoreMenu() {
 							</MenuItem>
 						</MenuGroup>
 						<MenuGroup label={ __( 'Preferences' ) }>
-							<FeatureToggle
+							<MoreMenuFeatureToggle
+								scope="core/customize-widgets"
 								feature="keepCaretInsideBlock"
 								label={ __(
 									'Contain text cursor inside block'
@@ -120,7 +116,7 @@ export default function MoreMenu() {
 						</MenuGroup>
 					</>
 				) }
-			</ToolbarDropdownMenu>
+			</MoreMenuDropdown>
 			<KeyboardShortcutHelpModal
 				isModalActive={ isKeyboardShortcutsModalActive }
 				toggleModal={ toggleKeyboardShortcutsModal }

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

@@ -21,6 +21,7 @@ import {
 	__unstableBlockSettingsMenuFirstItem,
 } from '@wordpress/block-editor';
 import { uploadMedia } from '@wordpress/media-utils';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -29,7 +30,6 @@ import BlockInspectorButton from '../block-inspector-button';
 import Header from '../header';
 import useInserter from '../inserter/use-inserter';
 import SidebarEditorProvider from './sidebar-editor-provider';
-import { store as customizeWidgetsStore } from '../../store';
 import WelcomeGuide from '../welcome-guide';
 import KeyboardShortcuts from '../keyboard-shortcuts';
 import BlockAppender from '../block-appender';
@@ -47,20 +47,24 @@ export default function SidebarBlockEditor( {
 		keepCaretInsideBlock,
 		isWelcomeGuideActive,
 	} = useSelect( ( select ) => {
+		const { isFeatureActive } = select( interfaceStore );
 		return {
 			hasUploadPermissions: defaultTo(
 				select( coreStore ).canUser( 'create', 'media' ),
 				true
 			),
-			isFixedToolbarActive: select(
-				customizeWidgetsStore
-			).__unstableIsFeatureActive( 'fixedToolbar' ),
-			keepCaretInsideBlock: select(
-				customizeWidgetsStore
-			).__unstableIsFeatureActive( 'keepCaretInsideBlock' ),
-			isWelcomeGuideActive: select(
-				customizeWidgetsStore
-			).__unstableIsFeatureActive( 'welcomeGuide' ),
+			isFixedToolbarActive: isFeatureActive(
+				'core/customize-widgets',
+				'fixedToolbar'
+			),
+			keepCaretInsideBlock: isFeatureActive(
+				'core/customize-widgets',
+				'keepCaretInsideBlock'
+			),
+			isWelcomeGuideActive: isFeatureActive(
+				'core/customize-widgets',
+				'welcomeGuide'
+			),
 		};
 	}, [] );
 	const settings = useMemo( () => {

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

@@ -4,16 +4,10 @@
 import { __ } from '@wordpress/i18n';
 import { Button, ExternalLink } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as customizeWidgetsStore } from '../../store';
+import { store as interfaceStore } from '@wordpress/interface';
 
 export default function WelcomeGuide( { sidebar } ) {
-	const { __unstableToggleFeature: toggleFeature } = useDispatch(
-		customizeWidgetsStore
-	);
+	const { toggleFeature } = useDispatch( interfaceStore );
 
 	const isEntirelyBlockWidgets = sidebar
 		.getWidgets()
@@ -51,7 +45,9 @@ export default function WelcomeGuide( { sidebar } ) {
 			<Button
 				className="customize-widgets-welcome-guide__button"
 				variant="primary"
-				onClick={ () => toggleFeature( 'welcomeGuide' ) }
+				onClick={ () =>
+					toggleFeature( 'core/customize-widgets', 'welcomeGuide' )
+				}
 			>
 				{ __( 'Got it' ) }
 			</Button>

packages/customize-widgets/src/index.js

@@ -12,6 +12,8 @@ import {
 	registerLegacyWidgetVariations,
 } from '@wordpress/widgets';
 import { setFreeformContentHandlerName } from '@wordpress/blocks';
+import { dispatch } from '@wordpress/data';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -33,6 +35,11 @@ const ENABLE_EXPERIMENTAL_FSE_BLOCKS = false;
  * @param {Object} blockEditorSettings Block editor settings.
  */
 export function initialize( editorName, blockEditorSettings ) {
+	dispatch( interfaceStore ).setFeatureDefaults( 'core/customize-widgets', {
+		fixedToolbar: false,
+		welcomeGuide: true,
+	} );
+
 	const coreBlocks = __experimentalGetCoreBlocks().filter( ( block ) => {
 		return ! (
 			DISABLED_BLOCKS.includes( block.name ) ||

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

@@ -1,21 +1,3 @@
-/**
- * Returns an action object used to toggle a feature flag.
- *
- * This function is unstable, as it is mostly copied from the edit-post
- * package. Editor features and preferences have a lot of scope for
- * being generalized and refactored.
- *
- * @param {string} feature Feature name.
- *
- * @return {Object} Action object.
- */
-export function __unstableToggleFeature( feature ) {
-	return {
-		type: 'TOGGLE_FEATURE',
-		feature,
-	};
-}
-
 /**
  * Returns an action object used to open/close the inserter.
  *

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

@@ -22,7 +22,6 @@ const storeConfig = {
 	reducer,
 	selectors,
 	actions,
-	persist: [ 'preferences' ],
 };
 
 /**

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

@@ -1,30 +1,8 @@
-/**
- * External dependencies
- */
-import { flow } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { combineReducers } from '@wordpress/data';
 
-/**
- * Internal dependencies
- */
-import { PREFERENCES_DEFAULTS } from './defaults';
-
-/**
- * Higher-order reducer creator which provides the given initial state for the
- * original reducer.
- *
- * @param {*} initialState Initial state to provide to reducer.
- *
- * @return {Function} Higher-order reducer.
- */
-const createWithInitialState = ( initialState ) => ( reducer ) => {
-	return ( state = initialState, action ) => reducer( state, action );
-};
-
 /**
  * Reducer tracking whether the inserter is open.
  *
@@ -39,31 +17,6 @@ function blockInserterPanel( state = false, action ) {
 	return state;
 }
 
-/**
- * Reducer returning the user preferences.
- *
- * @param {Object} state  Current state.
- * @param {Object} action Dispatched action.
- *
- * @return {Object} Updated state.
- */
-export const preferences = flow( [
-	combineReducers,
-	createWithInitialState( PREFERENCES_DEFAULTS ),
-] )( {
-	features( state, action ) {
-		if ( action.type === 'TOGGLE_FEATURE' ) {
-			return {
-				...state,
-				[ action.feature ]: ! state[ action.feature ],
-			};
-		}
-
-		return state;
-	},
-} );
-
 export default combineReducers( {
 	blockInserterPanel,
-	preferences,
 } );

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

@@ -1,24 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
-/**
- * Returns whether the given feature is enabled or not.
- *
- * This function is unstable, as it is mostly copied from the edit-post
- * package. Editor features and preferences have a lot of scope for
- * being generalized and refactored.
- *
- * @param {Object} state   Global application state.
- * @param {string} feature Feature slug.
- *
- * @return {boolean} Is active.
- */
-export function __unstableIsFeatureActive( state, feature ) {
-	return get( state.preferences.features, [ feature ], false );
-}
-
 /**
  * Returns true if the inserter is opened.
  *

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

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