@wordpress/edit-site 4.0.1-next.f435e9e01b.0 → 4.0.3-next.a55ed9455a.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "4.0.1-next.f435e9e01b.0",
+	"version": "4.0.3-next.a55ed9455a.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,31 +27,33 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.3.1-next.f435e9e01b.0",
-		"@wordpress/api-fetch": "^6.0.1-next.f435e9e01b.0",
-		"@wordpress/block-editor": "^8.1.2-next.f435e9e01b.0",
-		"@wordpress/block-library": "^7.0.1-next.f435e9e01b.0",
-		"@wordpress/blocks": "^11.2.1-next.f435e9e01b.0",
-		"@wordpress/components": "^19.4.1-next.f435e9e01b.0",
-		"@wordpress/compose": "^5.1.1-next.f435e9e01b.0",
-		"@wordpress/core-data": "^4.1.1-next.f435e9e01b.0",
-		"@wordpress/data": "^6.2.2-next.f435e9e01b.0",
-		"@wordpress/data-controls": "^2.3.1-next.f435e9e01b.0",
-		"@wordpress/editor": "^12.2.1-next.f435e9e01b.0",
-		"@wordpress/element": "^4.1.1-next.f435e9e01b.0",
-		"@wordpress/hooks": "^3.3.1-next.f435e9e01b.0",
-		"@wordpress/html-entities": "^3.3.1-next.f435e9e01b.0",
-		"@wordpress/i18n": "^4.3.1-next.f435e9e01b.0",
-		"@wordpress/icons": "^6.3.1-next.f435e9e01b.0",
-		"@wordpress/interface": "^4.2.2-next.f435e9e01b.0",
-		"@wordpress/keyboard-shortcuts": "^3.1.2-next.f435e9e01b.0",
-		"@wordpress/keycodes": "^3.3.1-next.f435e9e01b.0",
-		"@wordpress/media-utils": "^3.1.1-next.f435e9e01b.0",
-		"@wordpress/notices": "^3.3.1-next.f435e9e01b.0",
-		"@wordpress/plugins": "^4.1.1-next.f435e9e01b.0",
-		"@wordpress/reusable-blocks": "^3.1.2-next.f435e9e01b.0",
-		"@wordpress/url": "^3.4.1-next.f435e9e01b.0",
-		"@wordpress/viewport": "^4.1.1-next.f435e9e01b.0",
+		"@wordpress/a11y": "^3.3.2-next.a55ed9455a.0",
+		"@wordpress/api-fetch": "^6.0.2-next.a55ed9455a.0",
+		"@wordpress/block-editor": "^8.2.1-next.a55ed9455a.0",
+		"@wordpress/block-library": "^7.0.3-next.a55ed9455a.0",
+		"@wordpress/blocks": "^11.2.3-next.a55ed9455a.0",
+		"@wordpress/components": "^19.6.1-next.a55ed9455a.0",
+		"@wordpress/compose": "^5.1.3-next.a55ed9455a.0",
+		"@wordpress/core-data": "^4.1.3-next.a55ed9455a.0",
+		"@wordpress/data": "^6.3.1-next.a55ed9455a.0",
+		"@wordpress/deprecated": "^3.3.2-next.a55ed9455a.0",
+		"@wordpress/editor": "^12.3.1-next.a55ed9455a.0",
+		"@wordpress/element": "^4.1.3-next.a55ed9455a.0",
+		"@wordpress/hooks": "^3.3.2-next.a55ed9455a.0",
+		"@wordpress/html-entities": "^3.3.2-next.a55ed9455a.0",
+		"@wordpress/i18n": "^4.3.2-next.a55ed9455a.0",
+		"@wordpress/icons": "^7.0.2-next.a55ed9455a.0",
+		"@wordpress/interface": "^4.2.4-next.a55ed9455a.0",
+		"@wordpress/keyboard-shortcuts": "^3.1.3-next.a55ed9455a.0",
+		"@wordpress/keycodes": "^3.3.2-next.a55ed9455a.0",
+		"@wordpress/media-utils": "^3.1.2-next.a55ed9455a.0",
+		"@wordpress/notices": "^3.3.3-next.a55ed9455a.0",
+		"@wordpress/plugins": "^4.1.4-next.a55ed9455a.0",
+		"@wordpress/preferences": "^1.0.0-prerelease",
+		"@wordpress/reusable-blocks": "^3.1.4-next.a55ed9455a.0",
+		"@wordpress/style-engine": "^0.2.1-next.a55ed9455a.0",
+		"@wordpress/url": "^3.4.2-next.a55ed9455a.0",
+		"@wordpress/viewport": "^4.1.3-next.a55ed9455a.0",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"history": "^5.1.0",
@@ -59,8 +61,12 @@
 		"react-autosize-textarea": "^7.1.0",
 		"rememo": "^3.0.0"
 	},
+	"peerDependencies": {
+		"react": "^17.0.0",
+		"react-dom": "^17.0.0"
+	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "14b2846015dfb1b440ce93accdd03842ebe5f1cd"
+	"gitHead": "c5108185851b824d531bce55991a3589947e8551"
 }

package/src/components/add-new-template/new-template-part.js

@@ -35,11 +35,17 @@ export default function NewTemplatePart( { postType } ) {
 		}
 
 		try {
+			// Currently template parts only allow latin chars.
+			// Fallback slug will receive suffix by default.
+			const cleanSlug =
+				kebabCase( title ).replace( /[^\w-]+/g, '' ) ||
+				'wp-custom-part';
+
 			const templatePart = await saveEntityRecord(
 				'postType',
 				'wp_template_part',
 				{
-					slug: kebabCase( title ),
+					slug: cleanSlug,
 					title,
 					content: '',
 					area,

package/src/components/app/index.js

@@ -3,6 +3,10 @@
  */
 import { SlotFillProvider } from '@wordpress/components';
 import { UnsavedChangesWarning } from '@wordpress/editor';
+import { store as noticesStore } from '@wordpress/notices';
+import { useDispatch } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { PluginArea } from '@wordpress/plugins';
 
 /**
  * Internal dependencies
@@ -14,6 +18,20 @@ import NavigationSidebar from '../navigation-sidebar';
 import getIsListPage from '../../utils/get-is-list-page';
 
 export default function EditSiteApp( { reboot } ) {
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	function onPluginAreaError( name ) {
+		createErrorNotice(
+			sprintf(
+				/* translators: %s: plugin name */
+				__(
+					'The "%s" plugin has encountered an error and cannot be rendered.'
+				),
+				name
+			)
+		);
+	}
+
 	return (
 		<SlotFillProvider>
 			<UnsavedChangesWarning />
@@ -29,6 +47,7 @@ export default function EditSiteApp( { reboot } ) {
 							) : (
 								<Editor onError={ reboot } />
 							) }
+							<PluginArea onError={ onPluginAreaError } />
 							{ /* Keep the instance of the sidebar to ensure focus will not be lost
 							 * when navigating to other pages. */ }
 							<NavigationSidebar

package/src/components/editor/global-styles-renderer.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { filter } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -25,7 +30,8 @@ function useGlobalStylesRenderer() {
 		}
 
 		const currentStoreSettings = getSettings();
-		const nonGlobalStyles = currentStoreSettings?.styles?.filter(
+		const nonGlobalStyles = filter(
+			currentStoreSettings.styles,
 			( style ) => ! style.isGlobalStyles
 		);
 		updateSettings( {

package/src/components/editor/index.js

@@ -16,13 +16,11 @@ import {
 	EditorSnackbars,
 	EntitiesSavedStates,
 } from '@wordpress/editor';
-import { __, sprintf } from '@wordpress/i18n';
-import { PluginArea } from '@wordpress/plugins';
+import { __ } from '@wordpress/i18n';
 import {
 	ShortcutProvider,
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
-import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -111,7 +109,6 @@ function Editor( { onError } ) {
 	}, [] );
 	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
-	const { createErrorNotice } = useDispatch( noticesStore );
 
 	const [
 		isEntitiesSavedStatesOpen,
@@ -167,7 +164,7 @@ function Editor( { onError } ) {
 		[ enableComplementaryArea ]
 	);
 
-	// Don't render the Editor until the settings are set and loaded
+	// Don't render the Editor until the settings are set and loaded.
 	const isReady =
 		settings?.siteUrl &&
 		templateType !== undefined &&
@@ -183,18 +180,6 @@ function Editor( { onError } ) {
 		return null;
 	};
 
-	function onPluginAreaError( name ) {
-		createErrorNotice(
-			sprintf(
-				/* translators: %s: plugin name */
-				__(
-					'The "%s" plugin has encountered an error and cannot be rendered.'
-				),
-				name
-			)
-		);
-	}
-
 	// Only announce the title once the editor is ready to prevent "Replace"
 	// action in <URlQueryController> from double-announcing.
 	useTitle( isReady && __( 'Editor (beta)' ) );
@@ -314,9 +299,6 @@ function Editor( { onError } ) {
 										/>
 										<WelcomeGuide />
 										<Popover.Slot />
-										<PluginArea
-											onError={ onPluginAreaError }
-										/>
 									</ErrorBoundary>
 								</BlockContextProvider>
 							</GlobalStylesProvider>

package/src/components/error-boundary/index.js

@@ -3,18 +3,11 @@
  */
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { Warning } from '@wordpress/block-editor';
-import { useCopyToClipboard } from '@wordpress/compose';
 
-function CopyButton( { text, children } ) {
-	const ref = useCopyToClipboard( text );
-	return (
-		<Button variant="secondary" ref={ ref }>
-			{ children }
-		</Button>
-	);
-}
+/**
+ * Internal dependencies
+ */
+import ErrorBoundaryWarning from './warning';
 
 export default class ErrorBoundary extends Component {
 	constructor() {
@@ -42,23 +35,13 @@ export default class ErrorBoundary extends Component {
 		}
 
 		return (
-			<Warning
-				className="editor-error-boundary"
-				actions={ [
-					<Button
-						key="recovery"
-						onClick={ this.reboot }
-						variant="secondary"
-					>
-						{ __( 'Attempt Recovery' ) }
-					</Button>,
-					<CopyButton key="copy-error" text={ error.stack }>
-						{ __( 'Copy Error' ) }
-					</CopyButton>,
-				] }
-			>
-				{ __( 'The editor has encountered an unexpected error.' ) }
-			</Warning>
+			<ErrorBoundaryWarning
+				message={ __(
+					'The editor has encountered an unexpected error.'
+				) }
+				error={ error }
+				reboot={ this.reboot }
+			/>
 		);
 	}
 }

package/src/components/error-boundary/warning.js

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { Warning } from '@wordpress/block-editor';
+import { useCopyToClipboard } from '@wordpress/compose';
+
+function CopyButton( { text, children } ) {
+	const ref = useCopyToClipboard( text );
+	return (
+		<Button variant="secondary" ref={ ref }>
+			{ children }
+		</Button>
+	);
+}
+
+export default function ErrorBoundaryWarning( {
+	message,
+	error,
+	reboot,
+	dashboardLink,
+} ) {
+	const actions = [];
+
+	if ( reboot ) {
+		actions.push(
+			<Button key="recovery" onClick={ reboot } variant="secondary">
+				{ __( 'Attempt Recovery' ) }
+			</Button>
+		);
+	}
+
+	if ( error ) {
+		actions.push(
+			<CopyButton key="copy-error" text={ error.stack }>
+				{ __( 'Copy Error' ) }
+			</CopyButton>
+		);
+	}
+
+	if ( dashboardLink ) {
+		actions.push(
+			<Button
+				key="back-to-dashboard"
+				variant="secondary"
+				href={ dashboardLink }
+			>
+				{ __( 'Back to dashboard' ) }
+			</Button>
+		);
+	}
+
+	return (
+		<Warning className="editor-error-boundary" actions={ actions }>
+			{ message }
+		</Warning>
+	);
+}

package/src/components/global-styles/navigation-button.js

@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import {
-	__experimentalUseNavigator as useNavigator,
+	__experimentalNavigatorButton as NavigatorButton,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
 	__experimentalItem as Item,
 	FlexItem,
 	__experimentalHStack as HStack,
@@ -25,32 +26,12 @@ function GenericNavigationButton( { icon, children, ...props } ) {
 	);
 }
 
-function NavigationButton( { path, ...props } ) {
-	const { goTo } = useNavigator();
-
-	const dataAttrName = 'data-navigator-focusable-id';
-	const dataAttrValue = path;
-
-	const dataAttrCssSelector = `[${ dataAttrName }="${ dataAttrValue }"]`;
-
-	const buttonProps = {
-		...props,
-		[ dataAttrName ]: dataAttrValue,
-	};
-
-	return (
-		<GenericNavigationButton
-			onClick={ () =>
-				goTo( path, { focusTargetSelector: dataAttrCssSelector } )
-			}
-			{ ...buttonProps }
-		/>
-	);
+function NavigationButton( props ) {
+	return <NavigatorButton as={ GenericNavigationButton } { ...props } />;
 }
 
-function NavigationBackButton( { ...props } ) {
-	const { goBack } = useNavigator();
-	return <GenericNavigationButton onClick={ goBack } { ...props } />;
+function NavigationBackButton( props ) {
+	return <NavigatorBackButton as={ GenericNavigationButton } { ...props } />;
 }
 
 export { NavigationButton, NavigationBackButton };

package/src/components/global-styles/screen-block-list.js

@@ -1,7 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { getBlockTypes } from '@wordpress/blocks';
+import { store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import {
 	FlexItem,
@@ -19,6 +20,29 @@ import { useHasTypographyPanel } from './typography-panel';
 import ScreenHeader from './header';
 import { NavigationButton } from './navigation-button';
 
+function useSortedBlockTypes() {
+	const blockItems = useSelect(
+		( select ) => select( blocksStore ).getBlockTypes(),
+		[]
+	);
+	// Ensure core blocks are prioritized in the returned results,
+	// because third party blocks can be registered earlier than
+	// the core blocks (usually by using the `init` action),
+	// thus affecting the display order.
+	// We don't sort reusable blocks as they are handled differently.
+	const groupByType = ( blocks, block ) => {
+		const { core, noncore } = blocks;
+		const type = block.name.startsWith( 'core/' ) ? core : noncore;
+		type.push( block );
+		return blocks;
+	};
+	const {
+		core: coreItems,
+		noncore: nonCoreItems,
+	} = blockItems.reduce( groupByType, { core: [], noncore: [] } );
+	return [ ...coreItems, ...nonCoreItems ];
+}
+
 function BlockMenuItem( { block } ) {
 	const hasTypographyPanel = useHasTypographyPanel( block.name );
 	const hasColorPanel = useHasColorPanel( block.name );
@@ -45,6 +69,7 @@ function BlockMenuItem( { block } ) {
 }
 
 function ScreenBlockList() {
+	const sortedBlockTypes = useSortedBlockTypes();
 	return (
 		<>
 			<ScreenHeader
@@ -53,7 +78,7 @@ function ScreenBlockList() {
 					'Customize the appearance of specific blocks and for the whole site.'
 				) }
 			/>
-			{ getBlockTypes().map( ( block ) => (
+			{ sortedBlockTypes.map( ( block ) => (
 				<BlockMenuItem
 					block={ block }
 					key={ 'menu-itemblock-' + block.name }

package/src/components/global-styles/screen-typography.js

@@ -99,8 +99,7 @@ function ScreenTypography( { name } ) {
 					</VStack>
 				</div>
 			) }
-
-			{ /* no typography elements support yet for blocks */ }
+			{ /* No typography elements support yet for blocks. */ }
 			{ !! name && <TypographyPanel name={ name } element="text" /> }
 		</>
 	);

package/src/components/global-styles/typography-panel.js

@@ -7,7 +7,11 @@ import {
 	__experimentalFontAppearanceControl as FontAppearanceControl,
 	__experimentalLetterSpacingControl as LetterSpacingControl,
 } from '@wordpress/block-editor';
-import { PanelBody, FontSizePicker } from '@wordpress/components';
+import {
+	PanelBody,
+	FontSizePicker,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -143,10 +147,13 @@ export default function TypographyPanel( { name, element } ) {
 				/>
 			) }
 			{ hasLineHeightEnabled && (
-				<LineHeightControl
-					value={ lineHeight }
-					onChange={ setLineHeight }
-				/>
+				<Spacer marginBottom={ 6 }>
+					<LineHeightControl
+						__nextHasNoMarginBottom={ true }
+						value={ lineHeight }
+						onChange={ setLineHeight }
+					/>
+				</Spacer>
 			) }
 			{ hasAppearanceControl && (
 				<FontAppearanceControl

package/src/components/global-styles/use-global-styles-output.js

@@ -23,6 +23,7 @@ import {
 	getBlockTypes,
 } from '@wordpress/blocks';
 import { useEffect, useState, useContext } from '@wordpress/element';
+import { getCSSRules } from '@wordpress/style-engine';
 
 /**
  * Internal dependencies
@@ -146,11 +147,11 @@ function flattenTree( input = {}, prefix, token ) {
  * @return {Array} An array of style declarations.
  */
 function getStylesDeclarations( blockStyles = {} ) {
-	return reduce(
+	const output = reduce(
 		STYLE_PROPERTY,
-		( declarations, { value, properties }, key ) => {
+		( declarations, { value, properties, useEngine }, key ) => {
 			const pathToValue = value;
-			if ( first( pathToValue ) === 'elements' ) {
+			if ( first( pathToValue ) === 'elements' || useEngine ) {
 				return declarations;
 			}
 
@@ -188,6 +189,21 @@ function getStylesDeclarations( blockStyles = {} ) {
 		},
 		[]
 	);
+
+	// The goal is to move everything to server side generated engine styles
+	// This is temporary as we absorb more and more styles into the engine.
+	const extraRules = getCSSRules( blockStyles, { selector: 'self' } );
+	extraRules.forEach( ( rule ) => {
+		if ( rule.selector !== 'self' ) {
+			throw "This style can't be added as inline style";
+		}
+		const cssProperty = rule.key.startsWith( '--' )
+			? rule.key
+			: kebabCase( rule.key );
+		output.push( `${ cssProperty }: ${ compileStyleValue( rule.value ) }` );
+	} );
+
+	return output;
 }
 
 export const getNodesWithStyles = ( tree, blockSelectors ) => {

package/src/components/global-styles/utils.js

@@ -3,7 +3,7 @@
  */
 import { get, find, isString } from 'lodash';
 
-/* Supporting data */
+/* Supporting data. */
 export const ROOT_BLOCK_NAME = 'root';
 export const ROOT_BLOCK_SELECTOR = 'body';
 export const ROOT_BLOCK_SUPPORTS = [
@@ -103,7 +103,7 @@ function findInPresetsBy(
 						if ( presetProperty === 'slug' ) {
 							return presetObject;
 						}
-						// if there is a highest priority preset with the same slug but different value the preset we found was overwritten and should be ignored.
+						// If there is a highest priority preset with the same slug but different value the preset we found was overwritten and should be ignored.
 						const highestPresetObjectWithSameSlug = findInPresetsBy(
 							features,
 							blockName,

package/src/components/header/index.js

@@ -91,7 +91,7 @@ export default function Header( {
 
 	const openInserter = useCallback( () => {
 		if ( isInserterOpen ) {
-			// Focusing the inserter button closes the inserter popover
+			// Focusing the inserter button closes the inserter popover.
 			inserterButton.current.focus();
 		} else {
 			setIsInserterOpened( true );

package/src/components/header/more-menu/index.js

@@ -5,34 +5,21 @@ import { __, _x } from '@wordpress/i18n';
 import { useReducer } from '@wordpress/element';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { displayShortcut } from '@wordpress/keycodes';
-import { external, moreVertical } from '@wordpress/icons';
-import {
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
-	VisuallyHidden,
-} from '@wordpress/components';
-import { ActionItem } from '@wordpress/interface';
+import { external } from '@wordpress/icons';
+import { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';
+import { ActionItem, MoreMenuDropdown } from '@wordpress/interface';
+import { PreferenceToggleMenuItem } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
 import KeyboardShortcutHelpModal from '../../keyboard-shortcut-help-modal';
-import FeatureToggle from '../feature-toggle';
 import ToolsMoreMenuGroup from '../tools-more-menu-group';
 import SiteExport from './site-export';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
 import CopyContentMenuItem from './copy-content-menu-item';
 import ModeSwitcher from '../mode-switcher';
 
-const POPOVER_PROPS = {
-	className: 'edit-site-more-menu__content',
-	position: 'bottom left',
-};
-const TOGGLE_PROPS = {
-	tooltipPosition: 'bottom',
-};
-
 export default function MoreMenu() {
 	const [ isModalActive, toggleModal ] = useReducer(
 		( isActive ) => ! isActive,
@@ -43,18 +30,13 @@ export default function MoreMenu() {
 
 	return (
 		<>
-			<DropdownMenu
-				className="edit-site-more-menu"
-				icon={ moreVertical }
-				label={ __( 'More tools & options' ) }
-				popoverProps={ POPOVER_PROPS }
-				toggleProps={ TOGGLE_PROPS }
-			>
+			<MoreMenuDropdown>
 				{ ( { onClose } ) => (
 					<>
 						<MenuGroup label={ _x( 'View', 'noun' ) }>
-							<FeatureToggle
-								feature="fixedToolbar"
+							<PreferenceToggleMenuItem
+								scope="core/edit-site"
+								name="fixedToolbar"
 								label={ __( 'Top toolbar' ) }
 								info={ __(
 									'Access all block and document tools in a single place'
@@ -66,8 +48,9 @@ export default function MoreMenu() {
 									'Top toolbar deactivated'
 								) }
 							/>
-							<FeatureToggle
-								feature="focusMode"
+							<PreferenceToggleMenuItem
+								scope="core/edit-site"
+								name="focusMode"
 								label={ __( 'Spotlight mode' ) }
 								info={ __( 'Focus on one block at a time' ) }
 								messageActivated={ __(
@@ -118,7 +101,7 @@ export default function MoreMenu() {
 						</MenuGroup>
 					</>
 				) }
-			</DropdownMenu>
+			</MoreMenuDropdown>
 			<KeyboardShortcutHelpModal
 				isModalActive={ isModalActive }
 				toggleModal={ toggleModal }

package/src/components/header/more-menu/site-export.js

@@ -44,7 +44,7 @@ export default function SiteExport() {
 			role="menuitem"
 			icon={ download }
 			onClick={ handleExport }
-			info={ __( 'Download your templates and template parts.' ) }
+			info={ __( 'Download your templates and styles as a theme.' ) }
 		>
 			{ _x( 'Export', 'site exporter menu item' ) }
 		</MenuItem>

package/src/components/header/more-menu/welcome-guide-menu-item.js

@@ -4,17 +4,13 @@
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import { MenuItem } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 export default function WelcomeGuideMenuItem() {
-	const { toggleFeature } = useDispatch( editSiteStore );
+	const { toggle } = useDispatch( preferencesStore );
 
 	return (
-		<MenuItem onClick={ () => toggleFeature( 'welcomeGuide' ) }>
+		<MenuItem onClick={ () => toggle( 'core/edit-site', 'welcomeGuide' ) }>
 			{ __( 'Welcome Guide' ) }
 		</MenuItem>
 	);