@wordpress/edit-post 5.0.1-next.5df0cd52b7.0 → 5.0.4

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PreferencesModal should match snapshot when the modal is active large viewports 1`] = `
-<WithInstanceId(Modal)
+<Modal
   className="edit-post-preferences-modal"
   closeLabel="Close"
   onRequestClose={[Function]}
@@ -30,163 +30,361 @@ exports[`PreferencesModal should match snapshot when the modal is active large v
   >
     <Component />
   </TabPanel>
-</WithInstanceId(Modal)>
+</Modal>
 `;
 
 exports[`PreferencesModal should match snapshot when the modal is active small viewports 1`] = `
-<WithInstanceId(Modal)
+<Modal
   className="edit-post-preferences-modal"
   closeLabel="Close"
   onRequestClose={[Function]}
   title="Preferences"
 >
-  <Navigation
-    activeMenu="preferences-menu"
-    onActivateMenu={[Function]}
+  <NavigatorProvider
+    initialPath="/"
   >
-    <NavigationMenu
-      menu="preferences-menu"
+    <NavigatorScreen
+      path="/"
     >
-      <NavigationItem
-        key="general"
-        navigateToMenu="general"
-        title="General"
-      />
-      <NavigationItem
-        key="blocks"
-        navigateToMenu="blocks"
-        title="Blocks"
-      />
-      <NavigationItem
-        key="panels"
-        navigateToMenu="panels"
-        title="Panels"
-      />
-    </NavigationMenu>
-    <NavigationMenu
+      <Card
+        isBorderless={true}
+        size="small"
+      >
+        <CardBody>
+          <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>
+        </CardBody>
+      </Card>
+    </NavigatorScreen>
+    <NavigatorScreen
       key="general-menu"
-      menu="general"
-      parentMenu="preferences-menu"
-      title="General"
+      path="general"
     >
-      <NavigationItem>
-        <Section
-          description="Customize options related to the block editor interface and editing flow."
-          title="Appearance"
+      <Card
+        isBorderless={true}
+        size="large"
+      >
+        <CardHeader
+          gap="6"
+          isBorderless={false}
+          justify="left"
+          size="small"
         >
-          <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"
+          <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="/"
           />
-        </Section>
-      </NavigationItem>
-    </NavigationMenu>
-    <NavigationMenu
+          <Text
+            size="16"
+          >
+            General
+          </Text>
+        </CardHeader>
+        <CardBody>
+          <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"
+            />
+            <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>
+        </CardBody>
+      </Card>
+    </NavigatorScreen>
+    <NavigatorScreen
       key="blocks-menu"
-      menu="blocks"
-      parentMenu="preferences-menu"
-      title="Blocks"
+      path="blocks"
     >
-      <NavigationItem>
-        <Section
-          description="Customize how you interact with blocks in the block library and editing canvas."
-          title="Block interactions"
+      <Card
+        isBorderless={true}
+        size="large"
+      >
+        <CardHeader
+          gap="6"
+          isBorderless={false}
+          justify="left"
+          size="small"
         >
-          <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"
+          <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="/"
           />
-        </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
+          <Text
+            size="16"
+          >
+            Blocks
+          </Text>
+        </CardHeader>
+        <CardBody>
+          <Section
+            description="Customize how you interact with blocks in the block library and editing canvas."
+            title="Block interactions"
+          >
+            <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>
+        </CardBody>
+      </Card>
+    </NavigatorScreen>
+    <NavigatorScreen
       key="panels-menu"
-      menu="panels"
-      parentMenu="preferences-menu"
-      title="Panels"
+      path="panels"
     >
-      <NavigationItem>
-        <Section
-          description="Choose what displays in the panel."
-          title="Document settings"
+      <Card
+        isBorderless={true}
+        size="large"
+      >
+        <CardHeader
+          gap="6"
+          isBorderless={false}
+          justify="left"
+          size="small"
         >
-          <EnablePluginDocumentSettingPanelOptionSlot />
-          <WithSelect(PostTaxonomies)
-            taxonomyWrapper={[Function]}
-          />
-          <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",
-              ]
+          <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="/"
+          />
+          <Text
+            size="16"
           >
-            <WithSelect(IfCondition(WithDispatch(BaseOption)))
-              label="Discussion"
-              panelName="discussion-panel"
-            />
-          </WithSelect(PostTypeSupportCheck)>
-          <PageAttributesCheck>
-            <WithSelect(IfCondition(WithDispatch(BaseOption)))
-              label="Page attributes"
-              panelName="page-attributes"
+            Panels
+          </Text>
+        </CardHeader>
+        <CardBody>
+          <Section
+            description="Choose what displays in the panel."
+            title="Document settings"
+          >
+            <EnablePluginDocumentSettingPanelOptionSlot />
+            <WithSelect(PostTaxonomies)
+              taxonomyWrapper={[Function]}
             />
-          </PageAttributesCheck>
-        </Section>
-        <Section
-          description="Add extra areas to the editor."
-          title="Additional"
-        >
-          <WithSelect(MetaBoxesSection) />
-        </Section>
-      </NavigationItem>
-    </NavigationMenu>
-  </Navigation>
-</WithInstanceId(Modal)>
+            <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"
+          />
+        </CardBody>
+      </Card>
+    </NavigatorScreen>
+  </NavigatorProvider>
+</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/secondary-sidebar/list-view-sidebar.js

@@ -65,6 +65,7 @@ export default function ListViewSidebar() {
 				<ListView
 					onSelect={ selectEditorBlock }
 					showNestedBlocks
+					__experimentalFeatures
 					__experimentalPersistentListViewFeatures
 				/>
 			</div>

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

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

package/src/components/sidebar/post-link/index.js

@@ -95,7 +95,11 @@ function PostLink( {
 					/>
 					<p>
 						{ __( 'The last part of the URL.' ) }{ ' ' }
-						<ExternalLink href="https://wordpress.org/support/article/writing-posts/#post-field-descriptions">
+						<ExternalLink
+							href={ __(
+								'https://wordpress.org/support/article/writing-posts/#post-field-descriptions'
+							) }
+						>
 							{ __( 'Read about permalinks' ) }
 						</ExternalLink>
 					</p>

package/src/components/sidebar/template/actions.js

@@ -63,6 +63,11 @@ function PostTemplateActions() {
 
 	async function onCreateTemplate( event ) {
 		event.preventDefault();
+
+		if ( isBusy ) {
+			return;
+		}
+
 		setIsBusy( true );
 
 		const newTemplateContent =
@@ -137,7 +142,7 @@ function PostTemplateActions() {
 					} }
 					overlayClassName="edit-post-template__modal"
 				>
-					<form onSubmit={ isBusy ? undefined : onCreateTemplate }>
+					<form onSubmit={ onCreateTemplate }>
 						<Flex align="flex-start" gap={ 8 }>
 							<FlexItem>
 								<TextControl

package/src/components/sidebar/template-summary/index.js

@@ -22,7 +22,7 @@ function TemplateSummary() {
 
 	return (
 		<PanelBody>
-			<Flex align="flex-start">
+			<Flex align="flex-start" gap="3">
 				<FlexItem>
 					<Icon icon={ layout } />
 				</FlexItem>

package/src/components/sidebar/template-summary/style.scss

@@ -1,4 +1,5 @@
 h2.edit-post-template-summary__title {
-	margin: 0;
 	line-height: $icon-size;
+	margin: 0 0 $grid-unit-05;
+	font-weight: 500;
 }

package/src/components/text-editor/style.scss

@@ -5,36 +5,26 @@
 	flex-grow: 1;
 
 	// Post title.
-	.editor-post-title.editor-post-title__block {
+	.editor-post-title {
 		max-width: none;
 		line-height: $default-line-height;
 
-		// This needs specificity to change the title block appearance on the code editor.
-		.editor-post-title__input.editor-post-title__input.editor-post-title__input {
-			font-family: $editor-html-font;
-			font-size: 2.5em;
-			font-weight: normal;
-		}
+		font-family: $editor-html-font;
+		font-size: 2.5em;
+		font-weight: normal;
 
-		// Always show outlines in code editor
-		.editor-post-title__input {
-			border: $border-width solid $gray-600;
-			margin-bottom: -$border-width;
+		border: $border-width solid $gray-600;
 
-			// Same padding as body.
-			padding: $grid-unit-20;
-			@include break-small() {
-				padding: $grid-unit-30;
-			}
+		// Same padding as body.
+		padding: $grid-unit-20;
 
-			&:focus {
-				border-color: var(--wp-admin-theme-color);
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			}
+		@include break-small() {
+			padding: $grid-unit-30;
 		}
 
-		@include break-small() {
-			padding: 0;
+		&:focus {
+			border-color: var(--wp-admin-theme-color);
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 	}
 }