@wordpress/edit-post 5.0.1-next.253d9b6e21.0 → 5.0.3

package/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' ) }

package/src/components/keyboard-shortcut-help-modal/dynamic-shortcut.js

@@ -10,19 +10,22 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import Shortcut from './shortcut';
 
 function DynamicShortcut( { name } ) {
-	const { keyCombination, description, aliases } = useSelect( ( select ) => {
-		const {
-			getShortcutKeyCombination,
-			getShortcutDescription,
-			getShortcutAliases,
-		} = select( keyboardShortcutsStore );
+	const { keyCombination, description, aliases } = useSelect(
+		( select ) => {
+			const {
+				getShortcutKeyCombination,
+				getShortcutDescription,
+				getShortcutAliases,
+			} = select( keyboardShortcutsStore );
 
-		return {
-			keyCombination: getShortcutKeyCombination( name ),
-			aliases: getShortcutAliases( name ),
-			description: getShortcutDescription( name ),
-		};
-	} );
+			return {
+				keyCombination: getShortcutKeyCombination( name ),
+				aliases: getShortcutAliases( name ),
+				description: getShortcutDescription( name ),
+			};
+		},
+		[ name ]
+	);
 
 	if ( ! keyCombination ) {
 		return null;

package/src/components/keyboard-shortcut-help-modal/index.js

@@ -91,9 +91,7 @@ const ShortcutCategorySection = ( {
 };
 
 export function KeyboardShortcutHelpModal( { isModalActive, toggleModal } ) {
-	useShortcut( 'core/edit-post/keyboard-shortcuts', toggleModal, {
-		bindGlobal: true,
-	} );
+	useShortcut( 'core/edit-post/keyboard-shortcuts', toggleModal );
 
 	if ( ! isModalActive ) {
 		return null;

package/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KeyboardShortcutHelpModal should match snapshot when the modal is active 1`] = `
-<WithInstanceId(Modal)
+<Modal
   className="edit-post-keyboard-shortcut-help-modal"
   closeLabel="Close"
   onRequestClose={[Function]}
@@ -80,7 +80,7 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
     }
     title="Text formatting"
   />
-</WithInstanceId(Modal)>
+</Modal>
 `;
 
 exports[`KeyboardShortcutHelpModal should match snapshot when the modal is not active 1`] = `""`;

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

@@ -131,44 +131,31 @@ function KeyboardShortcuts() {
 			);
 		},
 		{
-			bindGlobal: true,
 			isDisabled: isModeToggleDisabled,
 		}
 	);
 
-	useShortcut(
-		'core/edit-post/toggle-fullscreen',
-		() => {
-			toggleFeature( 'fullscreenMode' );
-		},
-		{
-			bindGlobal: true,
+	useShortcut( 'core/edit-post/toggle-fullscreen', () => {
+		toggleFeature( 'fullscreenMode' );
+	} );
+
+	useShortcut( 'core/edit-post/toggle-sidebar', ( event ) => {
+		// This shortcut has no known clashes, but use preventDefault to prevent any
+		// obscure shortcuts from triggering.
+		event.preventDefault();
+
+		if ( isEditorSidebarOpened() ) {
+			closeGeneralSidebar();
+		} else {
+			const sidebarToOpen = getBlockSelectionStart()
+				? 'edit-post/block'
+				: 'edit-post/document';
+			openGeneralSidebar( sidebarToOpen );
 		}
-	);
+	} );
 
-	useShortcut(
-		'core/edit-post/toggle-sidebar',
-		( event ) => {
-			// This shortcut has no known clashes, but use preventDefault to prevent any
-			// obscure shortcuts from triggering.
-			event.preventDefault();
-
-			if ( isEditorSidebarOpened() ) {
-				closeGeneralSidebar();
-			} else {
-				const sidebarToOpen = getBlockSelectionStart()
-					? 'edit-post/block'
-					: 'edit-post/document';
-				openGeneralSidebar( sidebarToOpen );
-			}
-		},
-		{ bindGlobal: true }
-	);
-
-	useShortcut(
-		'core/edit-post/toggle-list-view',
-		() => setIsListViewOpened( ! isListViewOpened() ),
-		{ bindGlobal: true }
+	useShortcut( 'core/edit-post/toggle-list-view', () =>
+		setIsListViewOpened( ! isListViewOpened() )
 	);
 
 	return null;

package/src/components/layout/index.js

@@ -15,7 +15,7 @@ import {
 	EditorSnackbars,
 	store as editorStore,
 } from '@wordpress/editor';
-import { AsyncModeProvider, useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { BlockBreadcrumb } from '@wordpress/block-editor';
 import { Button, ScrollLock, Popover } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
@@ -112,12 +112,10 @@ function Layout( { styles } ) {
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
 			previousShortcut: select(
 				keyboardShortcutsStore
-			).getAllShortcutRawKeyCombinations(
-				'core/edit-post/previous-region'
-			),
+			).getAllShortcutKeyCombinations( 'core/edit-post/previous-region' ),
 			nextShortcut: select(
 				keyboardShortcutsStore
-			).getAllShortcutRawKeyCombinations( 'core/edit-post/next-region' ),
+			).getAllShortcutKeyCombinations( 'core/edit-post/next-region' ),
 			showIconLabels: select( editPostStore ).isFeatureActive(
 				'showIconLabels'
 			),
@@ -175,11 +173,7 @@ function Layout( { styles } ) {
 			return <InserterSidebar />;
 		}
 		if ( mode === 'visual' && isListViewOpened ) {
-			return (
-				<AsyncModeProvider value="true">
-					<ListViewSidebar />
-				</AsyncModeProvider>
-			);
+			return <ListViewSidebar />;
 		}
 		return null;
 	};

package/src/components/meta-boxes/index.js

@@ -6,7 +6,9 @@ import { map } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect, useRegistry } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -15,7 +17,44 @@ import MetaBoxesArea from './meta-boxes-area';
 import MetaBoxVisibility from './meta-box-visibility';
 import { store as editPostStore } from '../../store';
 
-function MetaBoxes( { location, isVisible, metaBoxes } ) {
+export default function MetaBoxes( { location } ) {
+	const registry = useRegistry();
+	const {
+		metaBoxes,
+		isVisible,
+		areMetaBoxesInitialized,
+		isEditorReady,
+	} = useSelect(
+		( select ) => {
+			const { __unstableIsEditorReady } = select( editorStore );
+			const {
+				isMetaBoxLocationVisible,
+				getMetaBoxesPerLocation,
+				areMetaBoxesInitialized: _areMetaBoxesInitialized,
+			} = select( editPostStore );
+			return {
+				metaBoxes: getMetaBoxesPerLocation( location ),
+				isVisible: isMetaBoxLocationVisible( location ),
+				areMetaBoxesInitialized: _areMetaBoxesInitialized(),
+				isEditorReady: __unstableIsEditorReady(),
+			};
+		},
+		[ location ]
+	);
+
+	// When editor is ready, initialize postboxes (wp core script) and metabox
+	// saving. This initializes all meta box locations, not just this specific
+	// one.
+	useEffect( () => {
+		if ( isEditorReady && ! areMetaBoxesInitialized ) {
+			registry.dispatch( editPostStore ).initializeMetaBoxes();
+		}
+	}, [ isEditorReady, areMetaBoxesInitialized ] );
+
+	if ( ! areMetaBoxesInitialized ) {
+		return null;
+	}
+
 	return (
 		<>
 			{ map( metaBoxes, ( { id } ) => (
@@ -25,14 +64,3 @@ function MetaBoxes( { location, isVisible, metaBoxes } ) {
 		</>
 	);
 }
-
-export default withSelect( ( select, { location } ) => {
-	const { isMetaBoxLocationVisible, getMetaBoxesPerLocation } = select(
-		editPostStore
-	);
-
-	return {
-		metaBoxes: getMetaBoxesPerLocation( location ),
-		isVisible: isMetaBoxLocationVisible( location ),
-	};
-} )( MetaBoxes );

package/src/components/preferences-modal/index.js

@@ -7,13 +7,21 @@ import { get } from 'lodash';
  * WordPress dependencies
  */
 import {
-	__experimentalNavigation as Navigation,
-	__experimentalNavigationMenu as NavigationMenu,
-	__experimentalNavigationItem as NavigationItem,
+	__experimentalNavigatorProvider as NavigatorProvider,
+	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalUseNavigator as useNavigator,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+	__experimentalHStack as HStack,
+	__experimentalTruncate as Truncate,
+	FlexItem,
 	Modal,
 	TabPanel,
+	Button,
+	Card,
+	CardBody,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { isRTL, __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useMemo, useCallback, useState } from '@wordpress/element';
@@ -26,6 +34,7 @@ import {
 	store as editorStore,
 } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
+import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -44,6 +53,21 @@ import BlockManager from '../block-manager';
 const MODAL_NAME = 'edit-post/preferences';
 const PREFERENCES_MENU = 'preferences-menu';
 
+function NavigationButton( {
+	as: Tag = Button,
+	path,
+	isBack = false,
+	...props
+} ) {
+	const navigator = useNavigator();
+	return (
+		<Tag
+			onClick={ () => navigator.push( path, { isBack } ) }
+			{ ...props }
+		/>
+	);
+}
+
 export default function PreferencesModal() {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const { closeModal } = useDispatch( editPostStore );
@@ -243,14 +267,12 @@ export default function PreferencesModal() {
 								/>
 							</PageAttributesCheck>
 						</Section>
-						<Section
+						<MetaBoxesSection
 							title={ __( 'Additional' ) }
 							description={ __(
 								'Add extra areas to the editor.'
 							) }
-						>
-							<MetaBoxesSection />
-						</Section>
+						/>
 					</>
 				),
 			},
@@ -303,34 +325,66 @@ export default function PreferencesModal() {
 		);
 	} else {
 		modalContent = (
-			<Navigation
-				activeMenu={ activeMenu }
-				onActivateMenu={ setActiveMenu }
-			>
-				<NavigationMenu menu={ PREFERENCES_MENU }>
-					{ tabs.map( ( tab ) => {
-						return (
-							<NavigationItem
-								key={ tab.name }
-								title={ tab.title }
-								navigateToMenu={ tab.name }
-							/>
-						);
-					} ) }
-				</NavigationMenu>
-				{ sections.map( ( section ) => {
-					return (
-						<NavigationMenu
-							key={ `${ section.name }-menu` }
-							menu={ section.name }
-							title={ section.tabLabel }
-							parentMenu={ PREFERENCES_MENU }
-						>
-							<NavigationItem>{ section.content }</NavigationItem>
-						</NavigationMenu>
-					);
-				} ) }
-			</Navigation>
+			<Card isBorderless>
+				<CardBody>
+					<NavigatorProvider initialPath="/">
+						<NavigatorScreen path="/">
+							<ItemGroup>
+								{ tabs.map( ( tab ) => {
+									return (
+										<NavigationButton
+											key={ tab.name }
+											path={ tab.name }
+											as={ Item }
+											isAction
+										>
+											<HStack justify="space-between">
+												<FlexItem>
+													<Truncate>
+														{ tab.title }
+													</Truncate>
+												</FlexItem>
+												<FlexItem>
+													<Icon
+														icon={
+															isRTL()
+																? chevronLeft
+																: chevronRight
+														}
+													/>
+												</FlexItem>
+											</HStack>
+										</NavigationButton>
+									);
+								} ) }
+							</ItemGroup>
+						</NavigatorScreen>
+						{ sections.map( ( section ) => {
+							return (
+								<NavigatorScreen
+									key={ `${ section.name }-menu` }
+									path={ section.name }
+								>
+									<NavigationButton
+										path="/"
+										icon={
+											isRTL() ? chevronRight : chevronLeft
+										}
+										isBack
+										aria-label={ __(
+											'Navigate to the previous view'
+										) }
+									>
+										{ __( 'Back' ) }
+									</NavigationButton>
+									<h2>{ section.tabLabel }</h2>
+									{ section.content }
+								</NavigatorScreen>
+							);
+						} ) }
+					</NavigatorProvider>
+				</CardBody>
+			</Card>
 		);
 	}
 	return (

package/src/components/preferences-modal/style.scss

@@ -26,10 +26,10 @@ $vertical-tabs-width: 160px;
 	}
 
 	.components-navigation {
-		background-color: $white;
 		padding: 0;
 		max-height: 100%;
 		overflow-y: auto;
+		color: $black;
 
 		> * {
 			// Matches spacing cleared from the modal content element.
@@ -38,42 +38,26 @@ $vertical-tabs-width: 160px;
 
 		.components-navigation__menu {
 			margin: 0;
-			color: $gray-900;
 
 			.components-navigation__item {
-				color: $gray-900; // The inheritance of some items is quite strong, so we have to duplicate this one.
-
 				& > button {
-					color: inherit;
 					padding: 3px $grid-unit-20;
 					height: $grid-unit-60;
 					// Aligns button text instead of button box.
 					margin: 0 #{-$grid-unit-20};
 					width: calc(#{$grid-unit-40} + 100%);
 					&:focus {
-						background: $gray-100;
 						font-weight: 500;
 					}
-					&:hover {
-						color: var(--wp-admin-theme-color);
-					}
-				}
-				.components-toggle-control__label {
-					color: inherit;
 				}
 			}
 			.components-navigation__menu-title-heading {
-				color: inherit;
 				border-bottom: 1px solid $gray-300;
 				padding-left: 0;
 				padding-right: 0;
 			}
 			.components-navigation__back-button {
-				color: inherit;
 				padding-left: 0;
-				&:hover {
-					color: var(--wp-admin-theme-color);
-				}
 			}
 			.edit-post-preferences-modal__custom-fields-confirmation-button {
 				width: auto;