Patterns: Update section heading levels

WordPress · Jul 4, 2023 · 4d988f7 · 4d988f7
1 parent 1be8fa3
commit 4d988f7
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 10 deletions.
diff --git a/packages/edit-site/src/components/page-patterns/grid-item.js b/packages/edit-site/src/components/page-patterns/grid-item.js
@@ -12,7 +12,6 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
-	__experimentalHeading as Heading,
 	__experimentalHStack as HStack,
 	__unstableCompositeItem as CompositeItem,
 	Tooltip,
@@ -155,12 +154,7 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 								icon={ itemIcon }
 							/>
 						) }
-						<Flex
-							as={ Heading }
-							level={ 5 }
-							gap={ 0 }
-							justify="left"
-						>
+						<Flex as="span" gap={ 0 } justify="left">
 							{ item.title }
 							{ item.type === PATTERNS && (
 								<Tooltip

diff --git a/packages/edit-site/src/components/page-patterns/patterns-list.js b/packages/edit-site/src/components/page-patterns/patterns-list.js
@@ -76,7 +76,9 @@ export default function PatternsList( { categoryId, type } ) {
 			{ ! isResolving && !! syncedPatterns.length && (
 				<>
 					<VStack className="edit-site-patterns__section-header">
-						<Heading level={ 4 }>{ __( 'Synced' ) }</Heading>
+						<Heading as="h2" level={ 4 }>
+							{ __( 'Synced' ) }
+						</Heading>
 						<Text variant="muted" as="p">
 							{ __(
 								'Patterns that are kept in sync across your site'
@@ -94,7 +96,9 @@ export default function PatternsList( { categoryId, type } ) {
 			{ ! isResolving && !! unsyncedPatterns.length && (
 				<>
 					<VStack className="edit-site-patterns__section-header">
-						<Heading level={ 4 }>{ __( 'Standard' ) }</Heading>
+						<Heading as="h2" level={ 4 }>
+							{ __( 'Standard' ) }
+						</Heading>
 						<Text variant="muted" as="p">
 							{ __(
 								'Patterns that can be changed freely without affecting your site'

diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
@@ -91,7 +91,7 @@
 }
 
 .edit-site-patterns__pattern-title {
-	color: $gray-600;
+	color: $gray-200;
 
 	.edit-site-patterns__pattern-icon {
 		border-radius: $grid-unit-05;