Try: Sticky header on Patterns page

WordPress · Jul 16, 2023 · e520e9e · e520e9e
1 parent 33bf984
commit e520e9e
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 76 deletions.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -186,6 +186,7 @@ $z-layers: (
 	".edit-site-layout__hub": 3,
 	".edit-site-layout__header": 2,
 	".edit-site-page-header": 2,
+	".edit-site-patterns__header": 2,
 	".edit-site-layout__canvas-container": 2,
 	".edit-site-layout__sidebar": 1,
 	".edit-site-layout__canvas-container.is-resizing::after": 100,

diff --git a/packages/edit-site/src/components/page-patterns/patterns-list.js b/packages/edit-site/src/components/page-patterns/patterns-list.js
@@ -72,84 +72,89 @@ export default function PatternsList( { categoryId, type } ) {
 	const description = SYNC_DESCRIPTIONS[ syncFilter ];
 
 	return (
-		<VStack spacing={ 6 }>
-			<PatternsHeader
-				categoryId={ categoryId }
-				type={ type }
-				titleId={ titleId }
-				descriptionId={ descriptionId }
-			/>
-
-			<Flex alignment="stretch" wrap>
-				{ isMobileViewport && (
-					<SidebarButton
-						icon={ isRTL() ? chevronRight : chevronLeft }
-						label={ __( 'Back' ) }
-						onClick={ () => {
-							// Go back in history if we came from the Patterns page.
-							// Otherwise push a stack onto the history.
-							if ( location.state?.backPath === '/patterns' ) {
-								history.back();
-							} else {
-								history.push( { path: '/patterns' } );
-							}
-						} }
-					/>
+		<>
+			<VStack className="edit-site-patterns__header" spacing={ 6 }>
+				<PatternsHeader
+					categoryId={ categoryId }
+					type={ type }
+					titleId={ titleId }
+					descriptionId={ descriptionId }
+				/>
+				<Flex alignment="stretch" wrap>
+					{ isMobileViewport && (
+						<SidebarButton
+							icon={ isRTL() ? chevronRight : chevronLeft }
+							label={ __( 'Back' ) }
+							onClick={ () => {
+								// Go back in history if we came from the Patterns page.
+								// Otherwise push a stack onto the history.
+								if (
+									location.state?.backPath === '/patterns'
+								) {
+									history.back();
+								} else {
+									history.push( { path: '/patterns' } );
+								}
+							} }
+						/>
+					) }
+					<FlexBlock className="edit-site-patterns__search-block">
+						<SearchControl
+							className="edit-site-patterns__search"
+							onChange={ ( value ) => setFilterValue( value ) }
+							placeholder={ __( 'Search patterns' ) }
+							label={ __( 'Search patterns' ) }
+							value={ filterValue }
+							__nextHasNoMarginBottom
+						/>
+					</FlexBlock>
+					{ categoryId === USER_PATTERN_CATEGORY && (
+						<ToggleGroupControl
+							className="edit-site-patterns__sync-status-filter"
+							hideLabelFromVision
+							label={ __( 'Filter by sync status' ) }
+							value={ syncFilter }
+							isBlock
+							onChange={ ( value ) => setSyncFilter( value ) }
+							__nextHasNoMarginBottom
+						>
+							{ Object.entries( SYNC_FILTERS ).map(
+								( [ key, label ] ) => (
+									<ToggleGroupControlOption
+										className="edit-site-patterns__sync-status-filter-option"
+										key={ key }
+										value={ key }
+										label={ label }
+									/>
+								)
+							) }
+						</ToggleGroupControl>
+					) }
+				</Flex>
+			</VStack>
+			<VStack className="edit-site-patterns__section" spacing={ 6 }>
+				{ syncFilter !== 'all' && (
+					<VStack className="edit-site-patterns__section-header">
+						<Heading as="h3" level={ 5 } id={ titleId }>
+							{ title }
+						</Heading>
+						{ description ? (
+							<Text variant="muted" as="p" id={ descriptionId }>
+								{ description }
+							</Text>
+						) : null }
+					</VStack>
 				) }
-				<FlexBlock className="edit-site-patterns__search-block">
-					<SearchControl
-						className="edit-site-patterns__search"
-						onChange={ ( value ) => setFilterValue( value ) }
-						placeholder={ __( 'Search patterns' ) }
-						label={ __( 'Search patterns' ) }
-						value={ filterValue }
-						__nextHasNoMarginBottom
+				{ hasPatterns && (
+					<Grid
+						categoryId={ categoryId }
+						items={ patterns }
+						aria-labelledby={ titleId }
+						aria-describedby={ descriptionId }
 					/>
-				</FlexBlock>
-				{ categoryId === USER_PATTERN_CATEGORY && (
-					<ToggleGroupControl
-						className="edit-site-patterns__sync-status-filter"
-						hideLabelFromVision
-						label={ __( 'Filter by sync status' ) }
-						value={ syncFilter }
-						isBlock
-						onChange={ ( value ) => setSyncFilter( value ) }
-						__nextHasNoMarginBottom
-					>
-						{ Object.entries( SYNC_FILTERS ).map(
-							( [ key, label ] ) => (
-								<ToggleGroupControlOption
-									className="edit-site-patterns__sync-status-filter-option"
-									key={ key }
-									value={ key }
-									label={ label }
-								/>
-							)
-						) }
-					</ToggleGroupControl>
 				) }
-			</Flex>
-			{ syncFilter !== 'all' && (
-				<VStack className="edit-site-patterns__section-header">
-					<Heading as="h3" level={ 5 } id={ titleId }>
-						{ title }
-					</Heading>
-					{ description ? (
-						<Text variant="muted" as="p" id={ descriptionId }>
-							{ description }
-						</Text>
-					) : null }
-				</VStack>
-			) }
-			{ hasPatterns && (
-				<Grid
-					categoryId={ categoryId }
-					items={ patterns }
-					aria-labelledby={ titleId }
-					aria-describedby={ descriptionId }
-				/>
-			) }
-			{ ! isResolving && ! hasPatterns && <NoPatterns /> }
-		</VStack>
+				{ ! isResolving && ! hasPatterns && <NoPatterns /> }
+			</VStack>
+		</>
 	);
 }
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
@@ -3,6 +3,15 @@
 	background: none;
 	margin: $header-height 0 0;
 	border-radius: 0;
+	padding: 0;
+	overflow-x: auto;
+
+	.edit-site-page-content {
+		height: 100%;
+		position: relative;
+		padding: 0 0 $grid-unit-40;
+	}
+
 	.components-base-control {
 		width: 100%;
 		@include break-medium {
@@ -80,6 +89,18 @@
 	}
 }
 
+.edit-site-patterns__header {
+	position: sticky;
+	top: 0;
+	background: $gray-900;
+	padding: $grid-unit-40 $grid-unit-40 $grid-unit-20;
+	z-index: z-index(".edit-site-patterns__header");
+}
+
+.edit-site-patterns__section {
+	padding: $grid-unit-20 $grid-unit-40 0;
+}
+
 .edit-site-patterns__section-header {
 	.screen-reader-shortcut:focus {
 		top: 0;