Update/page list footer (WordPress#51438)

* use footer for page navigation screen * updates templates to use nav footer * use footer for page navigation screen * updates templates to use nav footer * use footer for page navigation screen * updates templates to use nav footer
pewresearch · Jul 13, 2023 · f9a14de · f9a14de
1 parent cd1ea95
commit f9a14de
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 65 deletions.
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js
@@ -180,38 +180,39 @@ export default function SidebarNavigationScreenPages() {
 										</PageItem>
 									);
 								} ) }
-								<VStack className="edit-site-sidebar-navigation-screen__sticky-section">
-									{ dynamicPageTemplates?.map( ( item ) => (
-										<PageItem
-											postType="wp_template"
-											postId={ item.id }
-											key={ item.id }
-											icon={ layout }
-											withChevron
-										>
-											<Truncate numberOfLines={ 1 }>
-												{ decodeEntities(
-													item.title?.rendered ||
-														__( '(no title)' )
-												) }
-											</Truncate>
-										</PageItem>
-									) ) }
-									<SidebarNavigationItem
-										className="edit-site-sidebar-navigation-screen-pages__see-all"
-										href="edit.php?post_type=page"
-										onClick={ () => {
-											document.location =
-												'edit.php?post_type=page';
-										} }
-									>
-										{ __( 'Manage all pages' ) }
-									</SidebarNavigationItem>
-								</VStack>
 							</ItemGroup>
 						) }
 					</>
 				}
+				footer={
+					<VStack spacing={ 0 }>
+						{ dynamicPageTemplates?.map( ( item ) => (
+							<PageItem
+								postType="wp_template"
+								postId={ item.id }
+								key={ item.id }
+								icon={ layout }
+								withChevron
+							>
+								<Truncate numberOfLines={ 1 }>
+									{ decodeEntities(
+										item.title?.rendered ||
+											__( '(no title)' )
+									) }
+								</Truncate>
+							</PageItem>
+						) ) }
+						<SidebarNavigationItem
+							className="edit-site-sidebar-navigation-screen-pages__see-all"
+							href="edit.php?post_type=page"
+							onClick={ () => {
+								document.location = 'edit.php?post_type=page';
+							} }
+						>
+							{ __( 'Manage all pages' ) }
+						</SidebarNavigationItem>
+					</VStack>
+				}
 			/>
 		</>
 	);

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
@@ -147,34 +147,28 @@ export default function SidebarNavigationScreenTemplates() {
 									) }
 								</TemplateItem>
 							) ) }
-							{ ! isMobileViewport && (
-								<>
-									<SidebarNavigationItem
-										className="edit-site-sidebar-navigation-screen-templates__see-all"
-										withChevron
-										{ ...browseAllLink }
-									>
-										{ config[ postType ].labels.manage }
-									</SidebarNavigationItem>
-									{ !! config[ postType ].labels
-										.reusableBlocks && (
-										<SidebarNavigationItem
-											as="a"
-											href="edit.php?post_type=wp_block"
-											withChevron
-										>
-											{
-												config[ postType ].labels
-													.reusableBlocks
-											}
-										</SidebarNavigationItem>
-									) }
-								</>
-							) }
 						</ItemGroup>
 					) }
 				</>
 			}
+			footer={
+				! isMobileViewport && (
+					<>
+						<SidebarNavigationItem withChevron { ...browseAllLink }>
+							{ config[ postType ].labels.manage }
+						</SidebarNavigationItem>
+						{ !! config[ postType ].labels.reusableBlocks && (
+							<SidebarNavigationItem
+								as="a"
+								href="edit.php?post_type=wp_block"
+								withChevron
+							>
+								{ config[ postType ].labels.reusableBlocks }
+							</SidebarNavigationItem>
+						) }
+					</>
+				)
+			}
 		/>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-templates/style.scss
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -82,7 +82,7 @@
 	}
 }
 
-.edit-site-sidebar-navigation-screen__sticky-section.edit-site-sidebar-navigation-screen__sticky-section {
+.edit-site-sidebar-navigation-screen__footer {
 	position: sticky;
 	bottom: 0;
 	background-color: $gray-900;
@@ -92,10 +92,3 @@
 	border-top: 1px solid $gray-800;
 	box-shadow: 0 #{-$grid-unit-10} $grid-unit-20 $gray-900;
 }
-
-.edit-site-sidebar-navigation-screen__footer {
-	position: sticky;
-	bottom: 0;
-	background-color: $gray-900;
-	padding: $grid-unit-20 0;
-}
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
@@ -33,7 +33,6 @@
 @import "./components/sidebar-navigation-screen-navigation-menu/style.scss";
 @import "./components/sidebar-navigation-screen-page/style.scss";
 @import "./components/sidebar-navigation-screen-template/style.scss";
-@import "./components/sidebar-navigation-screen-templates/style.scss";
 @import "./components/sidebar-navigation-subtitle/style.scss";
 @import "./components/site-hub/style.scss";
 @import "./components/sidebar-navigation-screen-navigation-menus/style.scss";