Migrate post editor feature preferences to the interface package

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.

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;

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 (
-		<DropdownMenu
+		<MoreMenuDropdown
 			className="edit-post-more-menu"
-			icon={ moreVertical }
-			/* translators: button label text should, if possible, be under 16 characters. */
-			label={ __( 'Options' ) }
 			popoverProps={ POPOVER_PROPS }
 			toggleProps={ {
 				showTooltip: ! showIconLabels,
 				...( showIconLabels && { variant: 'tertiary' } ),
-				...TOGGLE_PROPS,
 			} }
 		>
 			{ ( { onClose } ) => (
@@ -61,7 +56,7 @@ const MoreMenu = ( { showIconLabels } ) => {
 					</MenuGroup>
 				</>
 			) }
-		</DropdownMenu>
+		</MoreMenuDropdown>
 	);
 };
 

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 (
 		<MenuGroup label={ _x( 'View', 'noun' ) }>
-			<FeatureToggle
+			<MoreMenuFeatureToggle
+				scope="core/edit-post"
 				feature="fixedToolbar"
 				label={ __( 'Top toolbar' ) }
 				info={ __(
@@ -28,14 +25,16 @@ function WritingMenu() {
 				messageActivated={ __( 'Top toolbar activated' ) }
 				messageDeactivated={ __( 'Top toolbar deactivated' ) }
 			/>
-			<FeatureToggle
+			<MoreMenuFeatureToggle
+				scope="core/edit-post"
 				feature="focusMode"
 				label={ __( 'Spotlight mode' ) }
 				info={ __( 'Focus on one block at a time' ) }
 				messageActivated={ __( 'Spotlight mode activated' ) }
 				messageDeactivated={ __( 'Spotlight mode deactivated' ) }
 			/>
-			<FeatureToggle
+			<MoreMenuFeatureToggle
+				scope="core/edit-post"
 				feature="fullscreenMode"
 				label={ __( 'Fullscreen mode' ) }
 				info={ __( 'Work without distraction' ) }

packages/edit-post/src/index.js

@@ -6,6 +6,8 @@ import {
 	__experimentalRegisterExperimentalCoreBlocks,
 } from '@wordpress/block-library';
 import { render, unmountComponentAtNode } from '@wordpress/element';
+import { dispatch } from '@wordpress/data';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -88,6 +90,17 @@ export function initializeEditor(
 		settings,
 		initialEdits
 	);
+
+	dispatch( interfaceStore ).setFeatureDefaults( 'core/edit-post', {
+		fixedToolbar: false,
+		welcomeGuide: true,
+		fullscreenMode: true,
+		showIconLabels: false,
+		themeStyles: true,
+		showBlockBreadcrumbs: true,
+		welcomeGuideTemplate: true,
+	} );
+
 	registerCoreBlocks();
 	if ( process.env.GUTENBERG_PHASE === 2 ) {
 		__experimentalRegisterExperimentalCoreBlocks( {

packages/edit-post/src/plugins/welcome-guide-menu-item/index.js

@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { MenuItem } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { MoreMenuFeatureToggle } from '@wordpress/interface';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -15,17 +15,12 @@ export default function WelcomeGuideMenuItem() {
 		( select ) => select( editPostStore ).isEditingTemplate(),
 		[]
 	);
-	const { toggleFeature } = useDispatch( editPostStore );
 
 	return (
-		<MenuItem
-			onClick={ () =>
-				toggleFeature(
-					isTemplateMode ? 'welcomeGuideTemplate' : 'welcomeGuide'
-				)
-			}
-		>
-			{ __( 'Welcome Guide' ) }
-		</MenuItem>
+		<MoreMenuFeatureToggle
+			scope="core/edit-post"
+			feature={ isTemplateMode ? 'welcomeGuideTemplate' : 'welcomeGuide' }
+			label={ __( 'Welcome Guide' ) }
+		/>
 	);
 }