diff --git a/packages/edit-site/src/components/page-patterns/header.js b/packages/edit-site/src/components/page-patterns/header.js index 6d493fd866349..1237b85d6c978 100644 --- 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 index c53057b17aef9..86043ae12d62b 100644 --- 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 ( @@ -115,7 +129,16 @@ export default function PatternsList( { categoryId, type } ) { ) } - + + + { title } + + { description ? ( + + { description } + + ) : null } + { hasPatterns && (