@wordpress/edit-post 5.0.2 → 5.0.3

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 );
@@ -301,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;

package/src/components/preferences-modal/test/__snapshots__/index.js.snap

@@ -40,151 +40,308 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
   onRequestClose={[Function]}
   title="Preferences"
 >
-  <Navigation
-    activeMenu="preferences-menu"
-    onActivateMenu={[Function]}
+  <Card
+    isBorderless={true}
   >
-    <NavigationMenu
-      menu="preferences-menu"
-    >
-      <NavigationItem
-        key="general"
-        navigateToMenu="general"
-        title="General"
-      />
-      <NavigationItem
-        key="blocks"
-        navigateToMenu="blocks"
-        title="Blocks"
-      />
-      <NavigationItem
-        key="panels"
-        navigateToMenu="panels"
-        title="Panels"
-      />
-    </NavigationMenu>
-    <NavigationMenu
-      key="general-menu"
-      menu="general"
-      parentMenu="preferences-menu"
-      title="General"
-    >
-      <NavigationItem>
-        <Section
-          description="Customize options related to the block editor interface and editing flow."
-          title="Appearance"
+    <CardBody>
+      <NavigatorProvider
+        initialPath="/"
+      >
+        <NavigatorScreen
+          path="/"
         >
-          <WithSelect(WithDispatch(BaseOption))
-            featureName="reducedUI"
-            help="Compacts options and outlines in the toolbar."
-            label="Reduce the interface"
-          />
-          <WithSelect(WithDispatch(BaseOption))
-            featureName="focusMode"
-            help="Highlights the current block and fades other content."
-            label="Spotlight mode"
-          />
-          <WithSelect(WithDispatch(BaseOption))
-            featureName="showIconLabels"
-            help="Shows text instead of icons."
-            label="Display button labels"
-          />
-          <WithSelect(WithDispatch(BaseOption))
-            featureName="themeStyles"
-            help="Make the editor look like your theme."
-            label="Use theme styles"
-          />
-          <WithSelect(WithDispatch(BaseOption))
-            featureName="showBlockBreadcrumbs"
-            help="Shows block breadcrumbs at the bottom of the editor."
-            label="Display block breadcrumbs"
-          />
-        </Section>
-      </NavigationItem>
-    </NavigationMenu>
-    <NavigationMenu
-      key="blocks-menu"
-      menu="blocks"
-      parentMenu="preferences-menu"
-      title="Blocks"
-    >
-      <NavigationItem>
-        <Section
-          description="Customize how you interact with blocks in the block library and editing canvas."
-          title="Block interactions"
+          <ItemGroup>
+            <NavigationButton
+              as={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "__contextSystemKey__": Array [
+                    "Item",
+                  ],
+                  "render": [Function],
+                  "selector": ".components-item",
+                }
+              }
+              isAction={true}
+              key="general"
+              path="general"
+            >
+              <HStack
+                justify="space-between"
+              >
+                <FlexItem>
+                  <Truncate>
+                    General
+                  </Truncate>
+                </FlexItem>
+                <FlexItem>
+                  <Icon
+                    icon={
+                      <SVG
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <Path
+                          d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z"
+                        />
+                      </SVG>
+                    }
+                  />
+                </FlexItem>
+              </HStack>
+            </NavigationButton>
+            <NavigationButton
+              as={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "__contextSystemKey__": Array [
+                    "Item",
+                  ],
+                  "render": [Function],
+                  "selector": ".components-item",
+                }
+              }
+              isAction={true}
+              key="blocks"
+              path="blocks"
+            >
+              <HStack
+                justify="space-between"
+              >
+                <FlexItem>
+                  <Truncate>
+                    Blocks
+                  </Truncate>
+                </FlexItem>
+                <FlexItem>
+                  <Icon
+                    icon={
+                      <SVG
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <Path
+                          d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z"
+                        />
+                      </SVG>
+                    }
+                  />
+                </FlexItem>
+              </HStack>
+            </NavigationButton>
+            <NavigationButton
+              as={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "__contextSystemKey__": Array [
+                    "Item",
+                  ],
+                  "render": [Function],
+                  "selector": ".components-item",
+                }
+              }
+              isAction={true}
+              key="panels"
+              path="panels"
+            >
+              <HStack
+                justify="space-between"
+              >
+                <FlexItem>
+                  <Truncate>
+                    Panels
+                  </Truncate>
+                </FlexItem>
+                <FlexItem>
+                  <Icon
+                    icon={
+                      <SVG
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <Path
+                          d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z"
+                        />
+                      </SVG>
+                    }
+                  />
+                </FlexItem>
+              </HStack>
+            </NavigationButton>
+          </ItemGroup>
+        </NavigatorScreen>
+        <NavigatorScreen
+          key="general-menu"
+          path="general"
         >
-          <WithSelect(WithDispatch(BaseOption))
-            featureName="mostUsedBlocks"
-            help="Places the most frequent blocks in the block library."
-            label="Show most used blocks"
-          />
-          <WithSelect(WithDispatch(BaseOption))
-            featureName="keepCaretInsideBlock"
-            help="Aids screen readers by stopping text caret from leaving blocks."
-            label="Contain text cursor inside block"
-          />
-        </Section>
-        <Section
-          description="Disable blocks that you don't want to appear in the inserter. They can always be toggled back on later."
-          title="Visible blocks"
-        >
-          <WithSelect(BlockManager) />
-        </Section>
-      </NavigationItem>
-    </NavigationMenu>
-    <NavigationMenu
-      key="panels-menu"
-      menu="panels"
-      parentMenu="preferences-menu"
-      title="Panels"
-    >
-      <NavigationItem>
-        <Section
-          description="Choose what displays in the panel."
-          title="Document settings"
-        >
-          <EnablePluginDocumentSettingPanelOptionSlot />
-          <WithSelect(PostTaxonomies)
-            taxonomyWrapper={[Function]}
-          />
-          <PostFeaturedImageCheck>
-            <WithSelect(IfCondition(WithDispatch(BaseOption)))
-              label="Featured image"
-              panelName="featured-image"
+          <NavigationButton
+            aria-label="Navigate to the previous view"
+            icon={
+              <SVG
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <Path
+                  d="M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z"
+                />
+              </SVG>
+            }
+            isBack={true}
+            path="/"
+          >
+            Back
+          </NavigationButton>
+          <h2>
+            General
+          </h2>
+          <Section
+            description="Customize options related to the block editor interface and editing flow."
+            title="Appearance"
+          >
+            <WithSelect(WithDispatch(BaseOption))
+              featureName="reducedUI"
+              help="Compacts options and outlines in the toolbar."
+              label="Reduce the interface"
             />
-          </PostFeaturedImageCheck>
-          <PostExcerptCheck>
-            <WithSelect(IfCondition(WithDispatch(BaseOption)))
-              label="Excerpt"
-              panelName="post-excerpt"
+            <WithSelect(WithDispatch(BaseOption))
+              featureName="focusMode"
+              help="Highlights the current block and fades other content."
+              label="Spotlight mode"
             />
-          </PostExcerptCheck>
-          <WithSelect(PostTypeSupportCheck)
-            supportKeys={
-              Array [
-                "comments",
-                "trackbacks",
-              ]
+            <WithSelect(WithDispatch(BaseOption))
+              featureName="showIconLabels"
+              help="Shows text instead of icons."
+              label="Display button labels"
+            />
+            <WithSelect(WithDispatch(BaseOption))
+              featureName="themeStyles"
+              help="Make the editor look like your theme."
+              label="Use theme styles"
+            />
+            <WithSelect(WithDispatch(BaseOption))
+              featureName="showBlockBreadcrumbs"
+              help="Shows block breadcrumbs at the bottom of the editor."
+              label="Display block breadcrumbs"
+            />
+          </Section>
+        </NavigatorScreen>
+        <NavigatorScreen
+          key="blocks-menu"
+          path="blocks"
+        >
+          <NavigationButton
+            aria-label="Navigate to the previous view"
+            icon={
+              <SVG
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <Path
+                  d="M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z"
+                />
+              </SVG>
             }
+            isBack={true}
+            path="/"
+          >
+            Back
+          </NavigationButton>
+          <h2>
+            Blocks
+          </h2>
+          <Section
+            description="Customize how you interact with blocks in the block library and editing canvas."
+            title="Block interactions"
           >
-            <WithSelect(IfCondition(WithDispatch(BaseOption)))
-              label="Discussion"
-              panelName="discussion-panel"
+            <WithSelect(WithDispatch(BaseOption))
+              featureName="mostUsedBlocks"
+              help="Places the most frequent blocks in the block library."
+              label="Show most used blocks"
+            />
+            <WithSelect(WithDispatch(BaseOption))
+              featureName="keepCaretInsideBlock"
+              help="Aids screen readers by stopping text caret from leaving blocks."
+              label="Contain text cursor inside block"
             />
-          </WithSelect(PostTypeSupportCheck)>
-          <PageAttributesCheck>
-            <WithSelect(IfCondition(WithDispatch(BaseOption)))
-              label="Page attributes"
-              panelName="page-attributes"
+          </Section>
+          <Section
+            description="Disable blocks that you don't want to appear in the inserter. They can always be toggled back on later."
+            title="Visible blocks"
+          >
+            <WithSelect(BlockManager) />
+          </Section>
+        </NavigatorScreen>
+        <NavigatorScreen
+          key="panels-menu"
+          path="panels"
+        >
+          <NavigationButton
+            aria-label="Navigate to the previous view"
+            icon={
+              <SVG
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <Path
+                  d="M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z"
+                />
+              </SVG>
+            }
+            isBack={true}
+            path="/"
+          >
+            Back
+          </NavigationButton>
+          <h2>
+            Panels
+          </h2>
+          <Section
+            description="Choose what displays in the panel."
+            title="Document settings"
+          >
+            <EnablePluginDocumentSettingPanelOptionSlot />
+            <WithSelect(PostTaxonomies)
+              taxonomyWrapper={[Function]}
             />
-          </PageAttributesCheck>
-        </Section>
-        <WithSelect(MetaBoxesSection)
-          description="Add extra areas to the editor."
-          title="Additional"
-        />
-      </NavigationItem>
-    </NavigationMenu>
-  </Navigation>
+            <PostFeaturedImageCheck>
+              <WithSelect(IfCondition(WithDispatch(BaseOption)))
+                label="Featured image"
+                panelName="featured-image"
+              />
+            </PostFeaturedImageCheck>
+            <PostExcerptCheck>
+              <WithSelect(IfCondition(WithDispatch(BaseOption)))
+                label="Excerpt"
+                panelName="post-excerpt"
+              />
+            </PostExcerptCheck>
+            <WithSelect(PostTypeSupportCheck)
+              supportKeys={
+                Array [
+                  "comments",
+                  "trackbacks",
+                ]
+              }
+            >
+              <WithSelect(IfCondition(WithDispatch(BaseOption)))
+                label="Discussion"
+                panelName="discussion-panel"
+              />
+            </WithSelect(PostTypeSupportCheck)>
+            <PageAttributesCheck>
+              <WithSelect(IfCondition(WithDispatch(BaseOption)))
+                label="Page attributes"
+                panelName="page-attributes"
+              />
+            </PageAttributesCheck>
+          </Section>
+          <WithSelect(MetaBoxesSection)
+            description="Add extra areas to the editor."
+            title="Additional"
+          />
+        </NavigatorScreen>
+      </NavigatorProvider>
+    </CardBody>
+  </Card>
 </Modal>
 `;

package/src/components/secondary-sidebar/inserter-sidebar.js

@@ -53,6 +53,7 @@ export default function InserterSidebar() {
 					__experimentalInsertionIndex={
 						insertionPoint.insertionIndex
 					}
+					__experimentalFilterValue={ insertionPoint.filterValue }
 				/>
 			</div>
 		</div>

package/src/components/sidebar/plugin-sidebar/index.js

@@ -88,7 +88,7 @@ export default function PluginSidebarEditPost( { className, ...props } ) {
 				'showIconLabels'
 			),
 		};
-	} );
+	}, [] );
 	return (
 		<ComplementaryArea
 			panelClassName={ className }