@wordpress/edit-post 5.0.2 → 5.0.6

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

@@ -40,151 +40,351 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
   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>
-        <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"
+          />
+        </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/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/index.js

@@ -47,13 +47,15 @@ export function TemplatePanel() {
 			getCurrentPostType,
 		} = select( editorStore );
 		const { getPostType, getEntityRecords, canUser } = select( coreStore );
-		const _isViewable =
-			getPostType( getCurrentPostType() )?.viewable ?? false;
+		const currentPostType = getCurrentPostType();
+		const _isViewable = getPostType( currentPostType )?.viewable ?? false;
 		const _supportsTemplateMode =
 			select( editorStore ).getEditorSettings().supportsTemplateMode &&
 			_isViewable;
 
-		const wpTemplates = getEntityRecords( 'postType', 'wp_template' );
+		const wpTemplates = getEntityRecords( 'postType', 'wp_template', {
+			post_type: currentPostType,
+		} );
 
 		const newAvailableTemplates = fromPairs(
 			( wpTemplates || [] ).map( ( { slug, title } ) => [

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/visual-editor/style.scss

@@ -42,12 +42,11 @@
 		// Center.
 		margin-left: auto;
 		margin-right: auto;
-
-		// Margins between the title and the first block, or appender, do not collapse.
-		// However in that support block gap, the first items in post content do not have a top margin.
-		// By leveraging the gap variable, with a fallback of zero, we handle both cases.
-		margin-bottom: var(--wp--style--block-gap, 0);
 	}
+
+	// Add extra margin at the top, to push down the Title area in the post editor.
+	margin-top: 4rem;
+	margin-bottom: var(--wp--style--block-gap);
 }
 
 .edit-post-visual-editor__exit-template-mode {

package/src/components/welcome-guide/style.scss

@@ -4,6 +4,11 @@
 	&__image {
 		background: #00a0d2;
 		margin: 0 0 $grid-unit-20;
+		> img {
+			display: block;
+			max-width: 100%;
+			object-fit: cover;
+		}
 	}
 
 	&__heading {