From af8adea678232af82e6e9228d0cd4b326e28393a Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 19 Aug 2021 11:14:29 +0800 Subject: [PATCH 1/4] Migrate post editor feature preferences to the interface package --- .../data/data-core-edit-post.md | 6 +- .../data/src/plugins/persistence/index.js | 1 + .../components/header/feature-toggle/index.js | 61 ------------------- .../src/components/header/more-menu/index.js | 21 +++---- .../components/header/writing-menu/index.js | 15 +++-- packages/edit-post/src/index.js | 13 ++++ .../plugins/welcome-guide-menu-item/index.js | 19 +++--- packages/edit-post/src/store/actions.js | 16 ++--- packages/edit-post/src/store/defaults.js | 9 --- packages/edit-post/src/store/reducer.js | 10 --- packages/edit-post/src/store/selectors.js | 11 +++- 11 files changed, 53 insertions(+), 129 deletions(-) delete mode 100644 packages/edit-post/src/components/header/feature-toggle/index.js diff --git a/docs/reference-guides/data/data-core-edit-post.md b/docs/reference-guides/data/data-core-edit-post.md index 2348d6544020da..e8dd31780a3ad6 100644 --- a/docs/reference-guides/data/data-core-edit-post.md +++ b/docs/reference-guides/data/data-core-edit-post.md @@ -502,16 +502,12 @@ _Returns_ ### toggleFeature -Returns an action object used to toggle a feature flag. +Triggers an action used to toggle a feature flag. _Parameters_ - _feature_ `string`: Feature name. -_Returns_ - -- `Object`: Action object. - ### togglePinnedPluginItem Triggers an action object used to toggle a plugin name flag. diff --git a/packages/data/src/plugins/persistence/index.js b/packages/data/src/plugins/persistence/index.js index f22e135100f166..24baf115aa1dcc 100644 --- a/packages/data/src/plugins/persistence/index.js +++ b/packages/data/src/plugins/persistence/index.js @@ -285,6 +285,7 @@ persistencePlugin.__unstableMigrate = ( pluginOptions ) => { persistence, 'core/customize-widgets' ); + migrateFeaturePreferencesToInterfaceStore( persistence, 'core/edit-post' ); }; export default persistencePlugin; diff --git a/packages/edit-post/src/components/header/feature-toggle/index.js b/packages/edit-post/src/components/header/feature-toggle/index.js deleted file mode 100644 index 13f72ae8d75a4e..00000000000000 --- a/packages/edit-post/src/components/header/feature-toggle/index.js +++ /dev/null @@ -1,61 +0,0 @@ -/** - * External dependencies - */ -import { flow } from 'lodash'; - -/** - * WordPress dependencies - */ -import { withSelect, withDispatch } from '@wordpress/data'; -import { compose } from '@wordpress/compose'; -import { MenuItem } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; -import { check } from '@wordpress/icons'; -import { speak } from '@wordpress/a11y'; - -/** - * Internal dependencies - */ -import { store as editPostStore } from '../../../store'; - -function FeatureToggle( { - onToggle, - isActive, - label, - info, - messageActivated, - messageDeactivated, - shortcut, -} ) { - const speakMessage = () => { - if ( isActive ) { - speak( messageDeactivated || __( 'Feature deactivated' ) ); - } else { - speak( messageActivated || __( 'Feature activated' ) ); - } - }; - - return ( - - { label } - - ); -} - -export default compose( [ - withSelect( ( select, { feature } ) => ( { - isActive: select( editPostStore ).isFeatureActive( feature ), - } ) ), - withDispatch( ( dispatch, ownProps ) => ( { - onToggle() { - dispatch( editPostStore ).toggleFeature( ownProps.feature ); - }, - } ) ), -] )( FeatureToggle ); diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/header/more-menu/index.js index 17b763b26f3749..ed06ba47259996 100644 --- a/packages/edit-post/src/components/header/more-menu/index.js +++ b/packages/edit-post/src/components/header/more-menu/index.js @@ -2,9 +2,12 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { DropdownMenu, MenuGroup } from '@wordpress/components'; -import { moreVertical } from '@wordpress/icons'; -import { ActionItem, PinnedItems } from '@wordpress/interface'; +import { MenuGroup } from '@wordpress/components'; +import { + ActionItem, + MoreMenuDropdown, + PinnedItems, +} from '@wordpress/interface'; import { useViewportMatch } from '@wordpress/compose'; /** @@ -17,26 +20,18 @@ import WritingMenu from '../writing-menu'; const POPOVER_PROPS = { className: 'edit-post-more-menu__content', - position: 'bottom left', -}; -const TOGGLE_PROPS = { - tooltipPosition: 'bottom', }; const MoreMenu = ( { showIconLabels } ) => { const isLargeViewport = useViewportMatch( 'large' ); return ( - { ( { onClose } ) => ( @@ -61,7 +56,7 @@ const MoreMenu = ( { showIconLabels } ) => { ) } - + ); }; diff --git a/packages/edit-post/src/components/header/writing-menu/index.js b/packages/edit-post/src/components/header/writing-menu/index.js index 71d3ddb339d20b..bcd4edad123ce2 100644 --- a/packages/edit-post/src/components/header/writing-menu/index.js +++ b/packages/edit-post/src/components/header/writing-menu/index.js @@ -5,11 +5,7 @@ import { MenuGroup } from '@wordpress/components'; import { __, _x } from '@wordpress/i18n'; import { useViewportMatch } from '@wordpress/compose'; import { displayShortcut } from '@wordpress/keycodes'; - -/** - * Internal dependencies - */ -import FeatureToggle from '../feature-toggle'; +import { MoreMenuFeatureToggle } from '@wordpress/interface'; function WritingMenu() { const isLargeViewport = useViewportMatch( 'medium' ); @@ -19,7 +15,8 @@ function WritingMenu() { return ( - - - select( editPostStore ).isEditingTemplate(), [] ); - const { toggleFeature } = useDispatch( editPostStore ); return ( - - toggleFeature( - isTemplateMode ? 'welcomeGuideTemplate' : 'welcomeGuide' - ) - } - > - { __( 'Welcome Guide' ) } - + ); } diff --git a/packages/edit-post/src/store/actions.js b/packages/edit-post/src/store/actions.js index 6cd238b06bdfde..d253d55e74efd7 100644 --- a/packages/edit-post/src/store/actions.js +++ b/packages/edit-post/src/store/actions.js @@ -153,17 +153,17 @@ export function removeEditorPanel( panelName ) { } /** - * Returns an action object used to toggle a feature flag. + * Triggers an action used to toggle a feature flag. * * @param {string} feature Feature name. - * - * @return {Object} Action object. */ -export function toggleFeature( feature ) { - return { - type: 'TOGGLE_FEATURE', - feature, - }; +export function* toggleFeature( feature ) { + yield controls.dispatch( + interfaceStore.name, + 'toggleFeature', + 'core/edit-post', + feature + ); } export function* switchEditorMode( mode ) { diff --git a/packages/edit-post/src/store/defaults.js b/packages/edit-post/src/store/defaults.js index 05cb4c8e1957a3..9bd5f366a02f9a 100644 --- a/packages/edit-post/src/store/defaults.js +++ b/packages/edit-post/src/store/defaults.js @@ -5,15 +5,6 @@ export const PREFERENCES_DEFAULTS = { opened: true, }, }, - features: { - fixedToolbar: false, - welcomeGuide: true, - fullscreenMode: true, - showIconLabels: false, - themeStyles: true, - showBlockBreadcrumbs: true, - welcomeGuideTemplate: true, - }, hiddenBlockTypes: [], preferredStyleVariations: {}, localAutosaveInterval: 15, diff --git a/packages/edit-post/src/store/reducer.js b/packages/edit-post/src/store/reducer.js index 2f9f0ec544bf0e..3441c613f5f619 100644 --- a/packages/edit-post/src/store/reducer.js +++ b/packages/edit-post/src/store/reducer.js @@ -78,16 +78,6 @@ export const preferences = flow( [ return state; }, - features( state, action ) { - if ( action.type === 'TOGGLE_FEATURE' ) { - return { - ...state, - [ action.feature ]: ! state[ action.feature ], - }; - } - - return state; - }, editorMode( state, action ) { if ( action.type === 'SWITCH_MODE' ) { return action.mode; diff --git a/packages/edit-post/src/store/selectors.js b/packages/edit-post/src/store/selectors.js index e8a8bddccbc168..2d40810a3cf569 100644 --- a/packages/edit-post/src/store/selectors.js +++ b/packages/edit-post/src/store/selectors.js @@ -189,9 +189,14 @@ export function isModalActive( state, modalName ) { * * @return {boolean} Is active. */ -export function isFeatureActive( state, feature ) { - return get( state.preferences.features, [ feature ], false ); -} +export const isFeatureActive = createRegistrySelector( + ( select ) => ( state, feature ) => { + return select( interfaceStore ).isFeatureActive( + 'core/edit-post', + feature + ); + } +); /** * Returns true if the plugin item is pinned to the header. From 256de69efcb2524254732bcfed2fd5e26c0f3105 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 19 Aug 2021 14:34:29 +0800 Subject: [PATCH 2/4] Remove snapshot for MoreMenu --- .../test/__snapshots__/index.js.snap | 129 ------------------ .../components/header/more-menu/test/index.js | 17 --- 2 files changed, 146 deletions(-) delete mode 100644 packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap delete mode 100644 packages/edit-post/src/components/header/more-menu/test/index.js diff --git a/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap deleted file mode 100644 index 9ffdb5a699ff04..00000000000000 --- a/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap +++ /dev/null @@ -1,129 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`MoreMenu should match snapshot 1`] = ` - - - - - } - label="Options" - popoverProps={ - Object { - "className": "edit-post-more-menu__content", - "position": "bottom left", - } - } - toggleProps={ - Object { - "showTooltip": true, - "tooltipPosition": "bottom", - } - } - > - -
- - - - } - label="Options" - onClick={[Function]} - onKeyDown={[Function]} - showTooltip={true} - tooltipPosition="bottom" - > - - - - -
- - - -`; diff --git a/packages/edit-post/src/components/header/more-menu/test/index.js b/packages/edit-post/src/components/header/more-menu/test/index.js deleted file mode 100644 index 2da96abe04ea4e..00000000000000 --- a/packages/edit-post/src/components/header/more-menu/test/index.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * External dependencies - */ -import { mount } from 'enzyme'; - -/** - * Internal dependencies - */ -import MoreMenu from '../index'; - -describe( 'MoreMenu', () => { - it( 'should match snapshot', () => { - const wrapper = mount( ); - - expect( wrapper ).toMatchSnapshot(); - } ); -} ); From fb569b6f74a097ad7177d2cf482c9116ba437e40 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 19 Aug 2021 14:37:42 +0800 Subject: [PATCH 3/4] Remove tests for actions/selectors that now call through to the interface store --- packages/edit-post/src/store/test/actions.js | 11 ----- .../edit-post/src/store/test/selectors.js | 46 ------------------- 2 files changed, 57 deletions(-) diff --git a/packages/edit-post/src/store/test/actions.js b/packages/edit-post/src/store/test/actions.js index 9525fbd1ce8800..06739597fd9349 100644 --- a/packages/edit-post/src/store/test/actions.js +++ b/packages/edit-post/src/store/test/actions.js @@ -15,7 +15,6 @@ import { togglePublishSidebar, openModal, closeModal, - toggleFeature, requestMetaBoxUpdates, setIsListViewOpened, } from '../actions'; @@ -90,16 +89,6 @@ describe( 'actions', () => { } ); } ); - describe( 'toggleFeature', () => { - it( 'should return TOGGLE_FEATURE action', () => { - const feature = 'name'; - expect( toggleFeature( feature ) ).toEqual( { - type: 'TOGGLE_FEATURE', - feature, - } ); - } ); - } ); - describe( 'requestMetaBoxUpdates', () => { it( 'should yield the REQUEST_META_BOX_UPDATES action', () => { const fulfillment = requestMetaBoxUpdates(); diff --git a/packages/edit-post/src/store/test/selectors.js b/packages/edit-post/src/store/test/selectors.js index 7ec6bf55546ba9..d9828eaa87e5a9 100644 --- a/packages/edit-post/src/store/test/selectors.js +++ b/packages/edit-post/src/store/test/selectors.js @@ -11,7 +11,6 @@ import { getPreference, isEditorPanelOpened, isModalActive, - isFeatureActive, hasMetaBoxes, isSavingMetaBoxes, getActiveMetaBoxLocations, @@ -239,51 +238,6 @@ describe( 'selectors', () => { } ); } ); - describe( 'isFeatureActive', () => { - it( 'is tolerant to an undefined features preference', () => { - // See: https://github.com/WordPress/gutenberg/issues/14580 - const state = { - preferences: {}, - }; - - expect( isFeatureActive( state, 'chicken' ) ).toBe( false ); - } ); - - it( 'should return true if feature is active', () => { - const state = { - preferences: { - features: { - chicken: true, - }, - }, - }; - - expect( isFeatureActive( state, 'chicken' ) ).toBe( true ); - } ); - - it( 'should return false if feature is not active', () => { - const state = { - preferences: { - features: { - chicken: false, - }, - }, - }; - - expect( isFeatureActive( state, 'chicken' ) ).toBe( false ); - } ); - - it( 'should return false if feature is not referred', () => { - const state = { - preferences: { - features: {}, - }, - }; - - expect( isFeatureActive( state, 'chicken' ) ).toBe( false ); - } ); - } ); - describe( 'hasMetaBoxes', () => { it( 'should return true if there are active meta boxes', () => { const state = { From 82d0bb09e8bdfdc4ed132733dd6b648166e94533 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 19 Aug 2021 14:48:50 +0800 Subject: [PATCH 4/4] Remove reducer test --- packages/edit-post/src/store/test/reducer.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/packages/edit-post/src/store/test/reducer.js b/packages/edit-post/src/store/test/reducer.js index 9ad1574f8de35a..67b097e27a8dd0 100644 --- a/packages/edit-post/src/store/test/reducer.js +++ b/packages/edit-post/src/store/test/reducer.js @@ -152,18 +152,6 @@ describe( 'state', () => { expect( state.editorMode ).toBe( 'text' ); } ); - it( 'should toggle a feature flag', () => { - const state = preferences( - deepFreeze( { features: { chicken: true } } ), - { - type: 'TOGGLE_FEATURE', - feature: 'chicken', - } - ); - - expect( state.features ).toEqual( { chicken: false } ); - } ); - describe( 'hiddenBlockTypes', () => { it( 'concatenates unique names on disable', () => { const original = deepFreeze( {