Fix descriptions

WordPress · Jul 9, 2023 · 2ec62ae · 2ec62ae
1 parent ffde59f
commit 2ec62ae
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/packages/edit-site/src/components/page-patterns/header.js b/packages/edit-site/src/components/page-patterns/header.js
@@ -37,7 +37,7 @@ export default function PatternsHeader( {
 	let title, description;
 	if ( categoryId === USER_PATTERN_CATEGORY && type === USER_PATTERNS ) {
 		title = __( 'My Patterns' );
-		description = __( 'Patterns that are kept in sync across your site.' ); // TODO
+		description = '';
 	} else if ( type === TEMPLATE_PARTS ) {
 		const templatePartArea = templatePartAreas.find(
 			( area ) => area.area === categoryId

diff --git a/packages/edit-site/src/components/page-patterns/patterns-list.js b/packages/edit-site/src/components/page-patterns/patterns-list.js
@@ -9,6 +9,8 @@ import {
 	FlexBlock,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
 } from '@wordpress/components';
 import { __, isRTL } from '@wordpress/i18n';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
@@ -35,6 +37,16 @@ const SYNC_FILTERS = {
 	[ SYNC_TYPES.unsynced ]: __( 'Standard' ),
 };
 
+const SYNC_DESCRIPTIONS = {
+	all: '',
+	[ SYNC_TYPES.full ]: __(
+		'Patterns that are kept in sync across your site.'
+	),
+	[ SYNC_TYPES.unsynced ]: __(
+		'Patterns that can be changed freely without affecting your site.'
+	),
+};
+
 export default function PatternsList( { categoryId, type } ) {
 	const location = useLocation();
 	const history = useHistory();
@@ -56,6 +68,8 @@ export default function PatternsList( { categoryId, type } ) {
 	const descriptionId = `${ id }-description`;
 
 	const hasPatterns = patterns.length;
+	const title = SYNC_FILTERS[ syncFilter ];
+	const description = SYNC_DESCRIPTIONS[ syncFilter ];
 
 	return (
 		<VStack spacing={ 6 }>
@@ -115,7 +129,16 @@ export default function PatternsList( { categoryId, type } ) {
 					</ToggleGroupControl>
 				) }
 			</Flex>
-
+			<VStack className="edit-site-patterns__section-header">
+				<Heading as="h2" level={ 4 } id={ titleId }>
+					{ title }
+				</Heading>
+				{ description ? (
+					<Text variant="muted" as="p" id={ descriptionId }>
+						{ description }
+					</Text>
+				) : null }
+			</VStack>
 			{ hasPatterns && (
 				<Grid
 					categoryId={ categoryId }