From f34d324ed161637e80bfc1f81d464d096b6e99dc Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 18 Aug 2021 16:56:37 +0800 Subject: [PATCH 1/5] Migrate preferences for customize widgets to interface package --- packages/customize-widgets/package.json | 1 + .../components/more-menu/feature-toggle.js | 56 ------------------- .../src/components/more-menu/index.js | 32 ++++------- .../components/sidebar-block-editor/index.js | 24 ++++---- .../src/components/welcome-guide/index.js | 14 ++--- packages/customize-widgets/src/index.js | 7 +++ .../customize-widgets/src/store/actions.js | 18 ------ .../customize-widgets/src/store/defaults.js | 6 -- .../customize-widgets/src/store/reducer.js | 47 ---------------- .../customize-widgets/src/store/selectors.js | 21 ------- .../data/src/plugins/persistence/index.js | 4 ++ 11 files changed, 42 insertions(+), 188 deletions(-) delete mode 100644 packages/customize-widgets/src/components/more-menu/feature-toggle.js delete mode 100644 packages/customize-widgets/src/store/defaults.js 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 ( - { - toggleFeature( feature ); - speakMessage(); - } } - role="menuitemcheckbox" - info={ info } - shortcut={ shortcut } - > - { label } - - ); -} diff --git a/packages/customize-widgets/src/components/more-menu/index.js b/packages/customize-widgets/src/components/more-menu/index.js index 3ddc71f5101566..3da46cd683cce7 100644 --- a/packages/customize-widgets/src/components/more-menu/index.js +++ b/packages/customize-widgets/src/components/more-menu/index.js @@ -1,30 +1,21 @@ /** * WordPress dependencies */ -import { - ToolbarDropdownMenu, - MenuGroup, - MenuItem, - VisuallyHidden, -} from '@wordpress/components'; +import { MenuGroup, MenuItem, 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 +36,15 @@ export default function MoreMenu() { return ( <> - { () => ( <> - { __( 'Keyboard shortcuts' ) } - @@ -102,7 +91,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/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; From 4d588fea8fa3206c8a6bcab78b3af2da236203af Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 18 Aug 2021 17:04:42 +0800 Subject: [PATCH 2/5] Ensure dropdown renders as a ToolbarDropdownMenu --- .../customize-widgets/src/components/more-menu/index.js | 8 +++++++- .../interface/src/components/more-menu-dropdown/README.md | 7 +++++++ .../interface/src/components/more-menu-dropdown/index.js | 5 +++-- 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/packages/customize-widgets/src/components/more-menu/index.js b/packages/customize-widgets/src/components/more-menu/index.js index 3da46cd683cce7..45c186f467c6e6 100644 --- a/packages/customize-widgets/src/components/more-menu/index.js +++ b/packages/customize-widgets/src/components/more-menu/index.js @@ -1,7 +1,12 @@ /** * WordPress dependencies */ -import { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components'; +import { + MenuGroup, + MenuItem, + ToolbarDropdownMenu, + VisuallyHidden, +} from '@wordpress/components'; import { useState } from '@wordpress/element'; import { __, _x } from '@wordpress/i18n'; import { external } from '@wordpress/icons'; @@ -37,6 +42,7 @@ export default function MoreMenu() { return ( <> 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 ) } - + ); } From 0c430e0bdb39d5c6dfb004ebdadb732c49a148c1 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 18 Aug 2021 17:27:09 +0800 Subject: [PATCH 3/5] Update package lock --- package-lock.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package-lock.json b/package-lock.json index a87085e073d400..f6629ca793463a 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", From ca1e8efc35fbda4bad811b9bda81e0fa7fff2a9a Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 18 Aug 2021 18:32:11 +0800 Subject: [PATCH 4/5] Fix disabling of welcome guide in widgets customizer tests --- .../e2e-tests/specs/widgets/customizing-widgets.test.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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' ) ); } } ); From e7c0f4a278103c60b3e54dc5eb87eed13d385ac2 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 19 Aug 2021 14:18:51 +0800 Subject: [PATCH 5/5] Remove persistence of preferences --- packages/customize-widgets/src/store/index.js | 1 - packages/edit-widgets/src/store/index.js | 1 - 2 files changed, 2 deletions(-) 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/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' ], }; /**