diff --git a/package-lock.json b/package-lock.json
index 4b844255cdf747..629b31cb939cbf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18264,6 +18264,7 @@
"@wordpress/hooks": "file:packages/hooks",
"@wordpress/i18n": "file:packages/i18n",
"@wordpress/icons": "file:packages/icons",
+ "@wordpress/interface": "file:packages/interface",
"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
"@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts",
"@wordpress/keycodes": "file:packages/keycodes",
diff --git a/packages/customize-widgets/package.json b/packages/customize-widgets/package.json
index 24184a2e74106b..1be81999fee62d 100644
--- a/packages/customize-widgets/package.json
+++ b/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",
diff --git a/packages/customize-widgets/src/components/more-menu/feature-toggle.js b/packages/customize-widgets/src/components/more-menu/feature-toggle.js
deleted file mode 100644
index 6235a0171814a0..00000000000000
--- a/packages/customize-widgets/src/components/more-menu/feature-toggle.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { MenuItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { check } from '@wordpress/icons';
-import { speak } from '@wordpress/a11y';
-
-/**
- * Internal dependencies
- */
-import { store as customizeWidgetsStore } from '../../store';
-
-export default function FeatureToggle( {
- label,
- info,
- messageActivated,
- messageDeactivated,
- shortcut,
- feature,
-} ) {
- const isActive = useSelect(
- ( select ) =>
- select( customizeWidgetsStore ).__unstableIsFeatureActive(
- feature
- ),
- [ feature ]
- );
- const { __unstableToggleFeature: toggleFeature } = useDispatch(
- customizeWidgetsStore
- );
- const speakMessage = () => {
- if ( isActive ) {
- speak( messageDeactivated || __( 'Feature deactivated' ) );
- } else {
- speak( messageActivated || __( 'Feature activated' ) );
- }
- };
-
- return (
-
- );
-}
diff --git a/packages/customize-widgets/src/components/more-menu/index.js b/packages/customize-widgets/src/components/more-menu/index.js
index 3ddc71f5101566..45c186f467c6e6 100644
--- a/packages/customize-widgets/src/components/more-menu/index.js
+++ b/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 (
<>
-
{ () => (
<>
-
{ __( 'Keyboard shortcuts' ) }
-
@@ -102,7 +97,8 @@ export default function MoreMenu() {
-
) }
-
+
{
+ 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( () => {
diff --git a/packages/customize-widgets/src/components/welcome-guide/index.js b/packages/customize-widgets/src/components/welcome-guide/index.js
index 0011789b19c4cf..a754db6c2d60d3 100644
--- a/packages/customize-widgets/src/components/welcome-guide/index.js
+++ b/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 } ) {
diff --git a/packages/customize-widgets/src/index.js b/packages/customize-widgets/src/index.js
index e578b491adbb90..8751caab3a8115 100644
--- a/packages/customize-widgets/src/index.js
+++ b/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 ) ||
diff --git a/packages/customize-widgets/src/store/actions.js b/packages/customize-widgets/src/store/actions.js
index e1ee14b4682d74..30926701e1f26f 100644
--- a/packages/customize-widgets/src/store/actions.js
+++ b/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.
*
diff --git a/packages/customize-widgets/src/store/defaults.js b/packages/customize-widgets/src/store/defaults.js
deleted file mode 100644
index 61227800b91f72..00000000000000
--- a/packages/customize-widgets/src/store/defaults.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export const PREFERENCES_DEFAULTS = {
- features: {
- fixedToolbar: false,
- welcomeGuide: true,
- },
-};
diff --git a/packages/customize-widgets/src/store/index.js b/packages/customize-widgets/src/store/index.js
index d50209f4b95994..558492379cdf88 100644
--- a/packages/customize-widgets/src/store/index.js
+++ b/packages/customize-widgets/src/store/index.js
@@ -22,7 +22,6 @@ const storeConfig = {
reducer,
selectors,
actions,
- persist: [ 'preferences' ],
};
/**
diff --git a/packages/customize-widgets/src/store/reducer.js b/packages/customize-widgets/src/store/reducer.js
index bfc2cbfdcc4366..c55613c2db2ea8 100644
--- a/packages/customize-widgets/src/store/reducer.js
+++ b/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,
} );
diff --git a/packages/customize-widgets/src/store/selectors.js b/packages/customize-widgets/src/store/selectors.js
index 855bb17780b62d..63962af151d15d 100644
--- a/packages/customize-widgets/src/store/selectors.js
+++ b/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.
*
diff --git a/packages/data/src/plugins/persistence/index.js b/packages/data/src/plugins/persistence/index.js
index 448df46ee05ea7..f22e135100f166 100644
--- a/packages/data/src/plugins/persistence/index.js
+++ b/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;
diff --git a/packages/e2e-tests/specs/widgets/customizing-widgets.test.js b/packages/e2e-tests/specs/widgets/customizing-widgets.test.js
index 9a529972743c9c..f5e03ecb4b1bfb 100644
--- a/packages/e2e-tests/specs/widgets/customizing-widgets.test.js
+++ b/packages/e2e-tests/specs/widgets/customizing-widgets.test.js
@@ -26,14 +26,14 @@ describe( 'Widgets Customizer', () => {
// Disable welcome guide if it is enabled.
const isWelcomeGuideActive = await page.evaluate( () =>
wp.data
- .select( 'core/customize-widgets' )
- .__unstableIsFeatureActive( 'welcomeGuide' )
+ .select( 'core/interface' )
+ .isFeatureActive( 'core/customize-widgets', 'welcomeGuide' )
);
if ( isWelcomeGuideActive ) {
await page.evaluate( () =>
wp.data
- .dispatch( 'core/customize-widgets' )
- .__unstableToggleFeature( 'welcomeGuide' )
+ .dispatch( 'core/interface' )
+ .toggleFeature( 'core/customize-widgets', 'welcomeGuide' )
);
}
} );
diff --git a/packages/edit-widgets/src/store/index.js b/packages/edit-widgets/src/store/index.js
index 329bd71fdc18cb..970fedc92ff483 100644
--- a/packages/edit-widgets/src/store/index.js
+++ b/packages/edit-widgets/src/store/index.js
@@ -27,7 +27,6 @@ const storeConfig = {
selectors,
resolvers,
actions,
- persist: [ 'preferences' ],
};
/**
diff --git a/packages/interface/src/components/more-menu-dropdown/README.md b/packages/interface/src/components/more-menu-dropdown/README.md
index 5b849c34e21635..712b1cb2645bb0 100644
--- a/packages/interface/src/components/more-menu-dropdown/README.md
+++ b/packages/interface/src/components/more-menu-dropdown/README.md
@@ -37,6 +37,13 @@ function MyEditorMenu() {
## Props
+### as
+
+Provide a component that the dropdown should render as. This may be useful if you need `MoreMenuDropdown` to render a `ToolbarDropdownMenu` instead of a `DropdownMenu`. Defaults to `DropdownMenu`.
+
+- Type: `Component`
+- Required: No.
+
### className
Provide an additional class name to the dropdown component.
diff --git a/packages/interface/src/components/more-menu-dropdown/index.js b/packages/interface/src/components/more-menu-dropdown/index.js
index 3a61d8f621403f..cc9ab69d0e6a59 100644
--- a/packages/interface/src/components/more-menu-dropdown/index.js
+++ b/packages/interface/src/components/more-menu-dropdown/index.js
@@ -11,6 +11,7 @@ import { __ } from '@wordpress/i18n';
import { moreVertical } from '@wordpress/icons';
export default function MoreMenuDropdown( {
+ as: DropdownComponent = DropdownMenu,
className,
/* translators: button label text should, if possible, be under 16 characters. */
label = __( 'Options' ),
@@ -19,7 +20,7 @@ export default function MoreMenuDropdown( {
children,
} ) {
return (
-
{ ( onClose ) => children( onClose ) }
-
+
);
}