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

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/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>
 	);

package/src/components/keyboard-shortcuts/index.js

@@ -91,7 +91,7 @@ function KeyboardShortcuts( { openEntitiesSavedStates } ) {
 }
 
 function KeyboardShortcutsRegister() {
-	// Registering the shortcuts
+	// Registering the shortcuts.
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 	useEffect( () => {
 		registerShortcut( {

package/src/components/list/table.js

@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
+import {
+	store as coreStore,
+	__experimentalUseEntityRecords as useEntityRecords,
+} from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	VisuallyHidden,
@@ -18,26 +21,15 @@ import Actions from './actions';
 import AddedBy from './added-by';
 
 export default function Table( { templateType } ) {
-	const { templates, isLoading, postType } = useSelect(
-		( select ) => {
-			const {
-				getEntityRecords,
-				hasFinishedResolution,
-				getPostType,
-			} = select( coreStore );
-
-			return {
-				templates: getEntityRecords( 'postType', templateType, {
-					per_page: -1,
-				} ),
-				isLoading: ! hasFinishedResolution( 'getEntityRecords', [
-					'postType',
-					templateType,
-					{ per_page: -1 },
-				] ),
-				postType: getPostType( templateType ),
-			};
-		},
+	const { records: templates, isResolving: isLoading } = useEntityRecords(
+		'postType',
+		templateType,
+		{
+			per_page: -1,
+		}
+	);
+	const postType = useSelect(
+		( select ) => select( coreStore ).getPostType( templateType ),
 		[ templateType ]
 	);
 

package/src/components/navigation-sidebar/navigation-panel/index.js

@@ -40,17 +40,22 @@ function NavLink( { params, replace, ...props } ) {
 }
 
 const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
-	const { isNavigationOpen, siteTitle } = useSelect( ( select ) => {
-		const { getEntityRecord } = select( coreDataStore );
+	const { homeTemplate, isNavigationOpen, siteTitle } = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( coreDataStore );
+			const { getSettings, isNavigationOpened } = select( editSiteStore );
 
-		const siteData =
-			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
+			const siteData =
+				getEntityRecord( 'root', '__unstableBase', undefined ) || {};
 
-		return {
-			siteTitle: siteData.name,
-			isNavigationOpen: select( editSiteStore ).isNavigationOpened(),
-		};
-	}, [] );
+			return {
+				siteTitle: siteData.name,
+				homeTemplate: getSettings().__unstableHomeTemplate,
+				isNavigationOpen: isNavigationOpened(),
+			};
+		},
+		[]
+	);
 	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
 
 	const closeOnEscape = ( event ) => {
@@ -91,8 +96,8 @@ const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
 									title={ __( 'Site' ) }
 									item={ SITE_EDITOR_KEY }
 									params={ {
-										postId: undefined,
-										postType: undefined,
+										postId: homeTemplate?.postId,
+										postType: homeTemplate?.postType,
 									} }
 								/>
 								<NavLink

package/src/components/navigation-sidebar/navigation-toggle/test/index.js

@@ -14,7 +14,7 @@ import { useSelect } from '@wordpress/data';
 import NavigationToggle from '..';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => {
-	// This allows us to tweak the returned value on each test
+	// This allows us to tweak the returned value on each test.
 	const mock = jest.fn();
 	return mock;
 } );

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

@@ -5,17 +5,17 @@ import { DropdownMenu, FlexItem, FlexBlock, Flex } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { styles, moreVertical } from '@wordpress/icons';
 import { useDispatch } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
 import DefaultSidebar from './default-sidebar';
 import { GlobalStylesUI, useGlobalStylesReset } from '../global-styles';
-import { store as editSiteStore } from '../../store';
 
 export default function GlobalStylesSidebar() {
 	const [ canReset, onReset ] = useGlobalStylesReset();
-	const { toggleFeature } = useDispatch( editSiteStore );
+	const { toggle } = useDispatch( preferencesStore );
 
 	return (
 		<DefaultSidebar
@@ -46,7 +46,10 @@ export default function GlobalStylesSidebar() {
 								{
 									title: __( 'Welcome Guide' ),
 									onClick: () =>
-										toggleFeature( 'welcomeGuideStyles' ),
+										toggle(
+											'core/edit-site',
+											'welcomeGuideStyles'
+										),
 								},
 							] }
 						/>

package/src/components/sidebar/style.scss

@@ -20,7 +20,7 @@
 .edit-site-global-styles-sidebar {
 	display: flex;
 	flex-direction: column;
-	height: 100%;
+	min-height: 100%;
 
 	&__panel,
 	&__navigator-provider {

package/src/components/welcome-guide/editor.js

@@ -5,18 +5,22 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { Guide } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
 import WelcomeGuideImage from './image';
-import { store as editSiteStore } from '../../store';
 
 export default function WelcomeGuideEditor() {
-	const { toggleFeature } = useDispatch( editSiteStore );
+	const { toggle } = useDispatch( preferencesStore );
 
 	const isActive = useSelect(
-		( select ) => select( editSiteStore ).isFeatureActive( 'welcomeGuide' ),
+		( select ) =>
+			!! select( preferencesStore ).get(
+				'core/edit-site',
+				'welcomeGuide'
+			),
 		[]
 	);
 
@@ -29,7 +33,7 @@ export default function WelcomeGuideEditor() {
 			className="edit-site-welcome-guide"
 			contentLabel={ __( 'Welcome to the site editor' ) }
 			finishButtonText={ __( 'Get Started' ) }
-			onFinish={ () => toggleFeature( 'welcomeGuide' ) }
+			onFinish={ () => toggle( 'core/edit-site', 'welcomeGuide' ) }
 			pages={ [
 				{
 					image: (

package/src/components/welcome-guide/styles.js

@@ -5,6 +5,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { ExternalLink, Guide } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as interfaceStore } from '@wordpress/interface';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -13,7 +14,7 @@ import WelcomeGuideImage from './image';
 import { store as editSiteStore } from '../../store';
 
 export default function WelcomeGuideStyles() {
-	const { toggleFeature } = useDispatch( editSiteStore );
+	const { toggle } = useDispatch( preferencesStore );
 
 	const { isActive, isStylesOpen } = useSelect( ( select ) => {
 		const sidebar = select( interfaceStore ).getActiveComplementaryArea(
@@ -21,7 +22,8 @@ export default function WelcomeGuideStyles() {
 		);
 
 		return {
-			isActive: select( editSiteStore ).isFeatureActive(
+			isActive: !! select( preferencesStore ).get(
+				'core/edit-site',
 				'welcomeGuideStyles'
 			),
 			isStylesOpen: sidebar === 'edit-site/global-styles',
@@ -37,7 +39,7 @@ export default function WelcomeGuideStyles() {
 			className="edit-site-welcome-guide"
 			contentLabel={ __( 'Welcome to styles' ) }
 			finishButtonText={ __( 'Get Started' ) }
-			onFinish={ () => toggleFeature( 'welcomeGuideStyles' ) }
+			onFinish={ () => toggle( 'core/edit-site', 'welcomeGuideStyles' ) }
 			pages={ [
 				{
 					image: (

package/src/index.js

@@ -13,6 +13,7 @@ import {
 	__experimentalFetchUrlData as fetchUrlData,
 } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
+import { store as preferencesStore } from '@wordpress/preferences';
 import { __ } from '@wordpress/i18n';
 import { store as viewportStore } from '@wordpress/viewport';
 import { getQueryArgs } from '@wordpress/url';
@@ -24,7 +25,6 @@ import './hooks';
 import { store as editSiteStore } from './store';
 import EditSiteApp from './components/app';
 import getIsListPage from './utils/get-is-list-page';
-import redirectToHomepage from './components/routes/redirect-to-homepage';
 import ErrorBoundaryWarning from './components/error-boundary/warning';
 
 /**
@@ -35,20 +35,14 @@ import ErrorBoundaryWarning from './components/error-boundary/warning';
  * @param {Element} target   DOM node in which editor is rendered.
  * @param {?Object} settings Editor settings object.
  */
-export async function reinitializeEditor( target, settings ) {
-	// The site editor relies on `postType` and `postId` params in the URL to
-	// define what's being edited. When visiting via the dashboard link, these
-	// won't be present. Do a client side redirect to the 'homepage' if that's
-	// the case.
-	try {
-		await redirectToHomepage( settings.siteUrl );
-	} catch ( error ) {
+export function reinitializeEditor( target, settings ) {
+	// Display warning if editor wasn't able to resolve homepage template.
+	if ( ! settings.__unstableHomeTemplate ) {
 		render(
 			<ErrorBoundaryWarning
 				message={ __(
 					'The editor is unable to find a block template for the homepage.'
 				) }
-				error={ error }
 				dashboardLink="index.php"
 			/>,
 			target
@@ -63,6 +57,14 @@ export async function reinitializeEditor( target, settings ) {
 	// We dispatch actions and update the store synchronously before rendering
 	// so that we won't trigger unnecessary re-renders with useEffect.
 	{
+		dispatch( preferencesStore ).setDefaults( 'core/edit-site', {
+			editorMode: 'visual',
+			fixedToolbar: false,
+			focusMode: false,
+			welcomeGuide: true,
+			welcomeGuideStyles: true,
+		} );
+
 		dispatch( editSiteStore ).updateSettings( settings );
 
 		// Keep the defaultTemplateTypes in the core/editor settings too,

package/src/store/actions.js

@@ -3,6 +3,7 @@
  */
 import apiFetch from '@wordpress/api-fetch';
 import { parse, __unstableSerializeAndClean } from '@wordpress/blocks';
+import deprecated from '@wordpress/deprecated';
 import { addQueryArgs, getPathAndQueryString } from '@wordpress/url';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
@@ -10,6 +11,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { speak } from '@wordpress/a11y';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -18,16 +20,21 @@ import { STORE_NAME as editSiteStoreName } from './constants';
 import isTemplateRevertable from '../utils/is-template-revertable';
 
 /**
- * Action that toggles a feature flag.
+ * Dispatches an action that toggles a feature flag.
  *
- * @param {string} feature Feature name.
- *
- * @return {Object} Action object.
+ * @param {string} featureName Feature name.
  */
-export function toggleFeature( feature ) {
-	return {
-		type: 'TOGGLE_FEATURE',
-		feature,
+export function toggleFeature( featureName ) {
+	return function ( { registry } ) {
+		deprecated( "select( 'core/edit-site' ).toggleFeature( featureName )", {
+			since: '6.0',
+			alternative:
+				"select( 'core/preferences').toggle( 'core/edit-site', featureName )",
+		} );
+
+		registry
+			.dispatch( preferencesStore )
+			.toggle( 'core/edit-site', featureName );
 	};
 }
 
@@ -374,12 +381,12 @@ export const revertTemplate = (
 			template.type,
 			template.id,
 			{
-				content: serializeBlocks, // required to make the `undo` behave correctly
-				blocks: edited.blocks, // required to revert the blocks in the editor
+				content: serializeBlocks, // Required to make the `undo` behave correctly.
+				blocks: edited.blocks, // Required to revert the blocks in the editor.
 				source: 'custom', // required to avoid turning the editor into a dirty state
 			},
 			{
-				undoIgnore: true, // required to merge this edit with the last undo level
+				undoIgnore: true, // Required to merge this edit with the last undo level.
 			}
 		);
 
@@ -449,8 +456,10 @@ export const closeGeneralSidebar = () => ( { registry } ) => {
 		.disableComplementaryArea( editSiteStoreName );
 };
 
-export const switchEditorMode = ( mode ) => ( { dispatch, registry } ) => {
-	dispatch( { type: 'SWITCH_MODE', mode } );
+export const switchEditorMode = ( mode ) => ( { registry } ) => {
+	registry
+		.dispatch( 'core/preferences' )
+		.set( 'core/edit-site', 'editorMode', mode );
 
 	// Unselect blocks when we switch to a non visual mode.
 	if ( mode !== 'visual' ) {

package/src/store/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createReduxStore, registerStore } from '@wordpress/data';
+import { createReduxStore, register } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -15,11 +15,7 @@ export const storeConfig = {
 	reducer,
 	actions,
 	selectors,
-	persist: [ 'preferences' ],
 };
 
 export const store = createReduxStore( STORE_NAME, storeConfig );
-
-// Once we build a more generic persistence plugin that works across types of stores
-// we'd be able to replace this with a register call.
-registerStore( STORE_NAME, storeConfig );
+register( store );

package/src/store/reducer.js

@@ -6,37 +6,8 @@ import { combineReducers } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { PREFERENCES_DEFAULTS } from './defaults';
 import { MENU_ROOT } from '../components/navigation-sidebar/navigation-panel/constants';
 
-/**
- * Reducer returning the user preferences.
- *
- * @param {Object} state  Current state.
- * @param {Object} action Dispatched action.
- * @return {Object} Updated state.
- */
-export const preferences = combineReducers( {
-	features( state = PREFERENCES_DEFAULTS.features, action ) {
-		switch ( action.type ) {
-			case 'TOGGLE_FEATURE': {
-				return {
-					...state,
-					[ action.feature ]: ! state[ action.feature ],
-				};
-			}
-			default:
-				return state;
-		}
-	},
-	editorMode( state = PREFERENCES_DEFAULTS.editorMode, action ) {
-		if ( action.type === 'SWITCH_MODE' ) {
-			return action.mode;
-		}
-		return state;
-	},
-} );
-
 /**
  * Reducer returning the editing canvas device type.
  *
@@ -213,7 +184,6 @@ export function listViewPanel( state = false, action ) {
 }
 
 export default combineReducers( {
-	preferences,
 	deviceType,
 	settings,
 	editedPost,