Patterns: Rename Library to Patterns

packages/core-commands/src/site-editor-navigation-commands.js

@@ -203,7 +203,7 @@ function useSiteEditorBasicNavigationCommands() {
 			icon: symbolFilled,
 			callback: ( { close } ) => {
 				const args = {
-					path: '/library',
+					path: '/patterns',
 				};
 				const targetUrl = addQueryArgs( 'site-editor.php', args );
 				if ( isSiteEditor ) {

packages/edit-site/src/components/create-pattern-modal/index.js

@@ -18,7 +18,7 @@ import { useDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { SYNC_TYPES, USER_PATTERN_CATEGORY } from '../page-library/utils';
+import { SYNC_TYPES, USER_PATTERN_CATEGORY } from '../page-patterns/utils';
 
 export default function CreatePatternModal( {
 	closeModal,

packages/edit-site/src/components/page-main/index.js

@@ -6,7 +6,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
-import PageLibrary from '../page-library';
+import PagePatterns from '../page-patterns';
 import PageTemplateParts from '../page-template-parts';
 import PageTemplates from '../page-templates';
 import { unlock } from '../../lock-unlock';
@@ -22,8 +22,8 @@ export default function PageMain() {
 		return <PageTemplates />;
 	} else if ( path === '/wp_template_part/all' ) {
 		return <PageTemplateParts />;
-	} else if ( path === '/library' ) {
-		return <PageLibrary />;
+	} else if ( path === '/patterns' ) {
+		return <PagePatterns />;
 	}
 
 	return null;

packages/edit-site/src/components/page-library/grid-item.js → packages/edit-site/src/components/page-patterns/grid-item.js

@@ -39,7 +39,7 @@ import { useLink } from '../routes/link';
 
 export default function GridItem( { categoryId, composite, icon, item } ) {
 	const instanceId = useInstanceId( GridItem );
-	const descriptionId = `edit-site-library__pattern-description-${ instanceId }`;
+	const descriptionId = `edit-site-patterns__pattern-description-${ instanceId }`;
 	const [ isDeleteDialogOpen, setIsDeleteDialogOpen ] = useState( false );
 
 	const { __experimentalDeleteReusableBlock } =
@@ -61,10 +61,10 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 	};
 
 	const isEmpty = ! item.blocks?.length;
-	const patternClassNames = classnames( 'edit-site-library__pattern', {
+	const patternClassNames = classnames( 'edit-site-patterns__pattern', {
 		'is-placeholder': isEmpty,
 	} );
-	const previewClassNames = classnames( 'edit-site-library__preview', {
+	const previewClassNames = classnames( 'edit-site-patterns__preview', {
 		'is-inactive': item.type === PATTERNS,
 	} );
 
@@ -132,14 +132,14 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 				) }
 				<HStack
 					aria-hidden="true"
-					className="edit-site-library__footer"
+					className="edit-site-patterns__footer"
 					justify="space-between"
 				>
 					<HStack
 						alignment="center"
 						justify="left"
 						spacing={ 3 }
-						className="edit-site-library__pattern-title"
+						className="edit-site-patterns__pattern-title"
 					>
 						{ icon && <Icon icon={ itemIcon } /> }
 						<Heading level={ 5 }>{ item.title }</Heading>
@@ -148,10 +148,10 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 						<DropdownMenu
 							icon={ moreHorizontal }
 							label={ __( 'Actions' ) }
-							className="edit-site-library__dropdown"
+							className="edit-site-patterns__dropdown"
 							popoverProps={ { placement: 'bottom-end' } }
 							toggleProps={ {
-								className: 'edit-site-library__button',
+								className: 'edit-site-patterns__button',
 								isSmall: true,
 								describedBy: sprintf(
 									/* translators: %s: pattern name */

packages/edit-site/src/components/page-library/grid.js → packages/edit-site/src/components/page-patterns/grid.js

@@ -22,7 +22,7 @@ export default function Grid( { categoryId, label, icon, items } ) {
 		<Composite
 			{ ...composite }
 			role="listbox"
-			className="edit-site-library__grid"
+			className="edit-site-patterns__grid"
 			aria-label={ label }
 		>
 			{ items.map( ( item ) => (

packages/edit-site/src/components/page-library/index.js → packages/edit-site/src/components/page-patterns/index.js

@@ -11,25 +11,25 @@ import { getQueryArgs } from '@wordpress/url';
 import { DEFAULT_CATEGORY, DEFAULT_TYPE } from './utils';
 import Page from '../page';
 import PatternsList from './patterns-list';
-import useLibrarySettings from './use-library-settings';
+import usePatternSettings from './use-pattern-settings';
 import { unlock } from '../../lock-unlock';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 
-export default function PageLibrary() {
+export default function PagePatterns() {
 	const { categoryType, categoryId } = getQueryArgs( window.location.href );
 	const type = categoryType || DEFAULT_TYPE;
 	const category = categoryId || DEFAULT_CATEGORY;
-	const settings = useLibrarySettings();
+	const settings = usePatternSettings();
 
 	// Wrap everything in a block editor provider.
 	// This ensures 'styles' that are needed for the previews are synced
 	// from the site editor store to the block editor store.
 	return (
 		<ExperimentalBlockEditorProvider settings={ settings }>
 			<Page
-				className="edit-site-library"
-				title={ __( 'Library content' ) }
+				className="edit-site-patterns"
+				title={ __( 'Patterns content' ) }
 				hideTitleFromUI
 			>
 				<PatternsList type={ type } categoryId={ category } />

packages/edit-site/src/components/page-library/no-patterns.js → packages/edit-site/src/components/page-patterns/no-patterns.js

@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 
 export default function NoPatterns() {
 	return (
-		<div className="edit-site-library__no-results">
+		<div className="edit-site-patterns__no-results">
 			{ __( 'No patterns found.' ) }
 		</div>
 	);

packages/edit-site/src/components/page-library/patterns-list.js → packages/edit-site/src/components/page-patterns/patterns-list.js

@@ -51,19 +51,19 @@ export default function PatternsList( { categoryId, type } ) {
 						icon={ isRTL() ? chevronRight : chevronLeft }
 						label={ __( 'Back' ) }
 						onClick={ () => {
-							// Go back in history if we came from the library page.
+							// Go back in history if we came from the Patterns page.
 							// Otherwise push a stack onto the history.
-							if ( location.state?.backPath === '/library' ) {
+							if ( location.state?.backPath === '/patterns' ) {
 								history.back();
 							} else {
-								history.push( { path: '/library' } );
+								history.push( { path: '/patterns' } );
 							}
 						} }
 					/>
 				) }
 				<FlexBlock>
 					<SearchControl
-						className="edit-site-library__search"
+						className="edit-site-patterns__search"
 						onChange={ ( value ) => setFilterValue( value ) }
 						placeholder={ __( 'Search patterns' ) }
 						label={ __( 'Search patterns' ) }
@@ -75,7 +75,7 @@ export default function PatternsList( { categoryId, type } ) {
 			{ isResolving && __( 'Loading' ) }
 			{ ! isResolving && !! syncedPatterns.length && (
 				<>
-					<VStack className="edit-site-library__section-header">
+					<VStack className="edit-site-patterns__section-header">
 						<Heading level={ 4 }>{ __( 'Synced' ) }</Heading>
 						<Text variant="muted" as="p">
 							{ __(
@@ -93,7 +93,7 @@ export default function PatternsList( { categoryId, type } ) {
 			) }
 			{ ! isResolving && !! unsyncedPatterns.length && (
 				<>
-					<VStack className="edit-site-library__section-header">
+					<VStack className="edit-site-patterns__section-header">
 						<Heading level={ 4 }>{ __( 'Standard' ) }</Heading>
 						<Text variant="muted" as="p">
 							{ __(

packages/edit-site/src/components/page-library/style.scss → packages/edit-site/src/components/page-patterns/style.scss

@@ -1,4 +1,4 @@
-.edit-site-library {
+.edit-site-patterns {
 	background: rgba(0, 0, 0, 0.05);
 	margin: $header-height 0 0;
 	.components-text {
@@ -14,7 +14,7 @@
 	}
 }
 
-.edit-site-library__grid {
+.edit-site-patterns__grid {
 	column-gap: $grid-unit-30;
 	@include break-large() {
 		column-count: 2;
@@ -25,13 +25,13 @@
 	padding-top: $border-width-focus-fallback;
 	margin-bottom: $grid-unit-40;
 
-	.edit-site-library__pattern {
+	.edit-site-patterns__pattern {
 		break-inside: avoid-column;
 		display: flex;
 		flex-direction: column;
 		margin-bottom: $grid-unit-60;
 
-		.edit-site-library__preview {
+		.edit-site-patterns__preview {
 			border-radius: $radius-block-ui;
 			cursor: pointer;
 			overflow: hidden;
@@ -48,12 +48,12 @@
 			}
 		}
 
-		.edit-site-library__footer,
-		.edit-site-library__button {
+		.edit-site-patterns__footer,
+		.edit-site-patterns__button {
 			color: $gray-600;
 		}
 
-		&.is-placeholder .edit-site-library__preview {
+		&.is-placeholder .edit-site-patterns__preview {
 			min-height: $grid-unit-80;
 			color: $gray-600;
 			border: 1px dashed $gray-800;
@@ -67,15 +67,15 @@
 		}
 	}
 
-	.edit-site-library__preview {
+	.edit-site-patterns__preview {
 		flex: 1;
 		margin-bottom: $grid-unit-20;
 	}
 }
 
 // The increased specificity here is to overcome component styles
 // without relying on internal component class names.
-.edit-site-library__search {
+.edit-site-patterns__search {
 	&#{&} input[type="search"] {
 		background: $gray-800;
 		color: $gray-200;
@@ -90,7 +90,7 @@
 	}
 }
 
-.edit-site-library__pattern-title {
+.edit-site-patterns__pattern-title {
 	color: $gray-600;
 
 	svg {
@@ -100,6 +100,6 @@
 	}
 }
 
-.edit-site-library__no-results {
+.edit-site-patterns__no-results {
 	color: $gray-600;
 }

packages/edit-site/src/components/page-library/use-library-settings.js → packages/edit-site/src/components/page-patterns/use-pattern-settings.js

@@ -12,7 +12,7 @@ import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import { filterOutDuplicatesByName } from './utils';
 
-export default function useLibrarySettings() {
+export default function usePatternSettings() {
 	const storedSettings = useSelect( ( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
 		return getSettings();

packages/edit-site/src/components/sidebar-navigation-screen-main/index.js

@@ -75,11 +75,11 @@ export default function SidebarNavigationScreenMain() {
 					</NavigatorButton>
 					<NavigatorButton
 						as={ SidebarNavigationItem }
-						path="/library"
+						path="/patterns"
 						withChevron
 						icon={ symbol }
 					>
-						{ __( 'Library' ) }
+						{ __( 'Patterns' ) }
 					</NavigatorButton>
 				</ItemGroup>
 			}

packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js

@@ -33,7 +33,7 @@ export default function SidebarNavigationScreenPattern() {
 	const backPath =
 		! categoryType && postType === 'wp_template_part'
 			? '/wp_template_part/all'
-			: '/library';
+			: '/patterns';
 
 	return (
 		<SidebarNavigationScreen

packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js → packages/edit-site/src/components/sidebar-navigation-screen-patterns/category-item.js

@@ -14,15 +14,15 @@ export default function CategoryItem( {
 } ) {
 	const linkInfo = useLink(
 		{
-			path: '/library',
+			path: '/patterns',
 			categoryType: type,
 			categoryId: id,
 		},
 		{
 			// Keep a record of where we came from in state so we can
-			// use the browser's back button to go back to the library.
+			// use the browser's back button to go back to Patterns.
 			// See the implementation of the back button in patterns-list.
-			backPath: '/library',
+			backPath: '/patterns',
 		}
 	);
 

packages/edit-site/src/components/sidebar-navigation-screen-library/index.js → packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js

@@ -19,7 +19,7 @@ import AddNewPattern from '../add-new-pattern';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import CategoryItem from './category-item';
-import { DEFAULT_CATEGORY, DEFAULT_TYPE } from '../page-library/utils';
+import { DEFAULT_CATEGORY, DEFAULT_TYPE } from '../page-patterns/utils';
 import { store as editSiteStore } from '../../store';
 import { useLink } from '../routes/link';
 import usePatternCategories from './use-pattern-categories';
@@ -33,7 +33,7 @@ const templatePartAreaLabels = {
 	uncategorized: __( 'Uncategorized' ),
 };
 
-export default function SidebarNavigationScreenLibrary() {
+export default function SidebarNavigationScreenPatterns() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const { categoryType, categoryId } = getQueryArgs( window.location.href );
 	const currentCategory = categoryId || DEFAULT_CATEGORY;
@@ -68,19 +68,19 @@ export default function SidebarNavigationScreenLibrary() {
 	return (
 		<SidebarNavigationScreen
 			isRoot={ isTemplatePartsMode }
-			title={ __( 'Library' ) }
+			title={ __( 'Patterns' ) }
 			description={ __(
 				'Manage what patterns are available when editing your site.'
 			) }
 			actions={ <AddNewPattern /> }
 			footer={ footer }
 			content={
 				<>
-					{ isLoading && __( 'Loading library' ) }
+					{ isLoading && __( 'Loading patterns' ) }
 					{ ! isLoading && (
 						<>
 							{ ! hasTemplateParts && ! hasPatterns && (
-								<ItemGroup className="edit-site-sidebar-navigation-screen-library__group">
+								<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
 									<Item>
 										{ __(
 											'No template parts or patterns found'
@@ -89,7 +89,7 @@ export default function SidebarNavigationScreenLibrary() {
 								</ItemGroup>
 							) }
 							{ hasMyPatterns && (
-								<ItemGroup className="edit-site-sidebar-navigation-screen-library__group">
+								<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
 									<CategoryItem
 										key={ myPatterns.name }
 										count={ myPatterns.count }
@@ -106,7 +106,7 @@ export default function SidebarNavigationScreenLibrary() {
 								</ItemGroup>
 							) }
 							{ hasTemplateParts && (
-								<ItemGroup className="edit-site-sidebar-navigation-screen-library__group">
+								<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
 									{ Object.entries( templatePartAreas ).map(
 										( [ area, parts ] ) => (
 											<CategoryItem
@@ -133,7 +133,7 @@ export default function SidebarNavigationScreenLibrary() {
 								</ItemGroup>
 							) }
 							{ hasPatterns && (
-								<ItemGroup className="edit-site-sidebar-navigation-screen-library__group">
+								<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
 									{ patternCategories.map( ( category ) => (
 										<CategoryItem
 											key={ category.name }

packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss

@@ -0,0 +1,3 @@
+.edit-site-sidebar-navigation-screen-patterns__group {
+	margin-bottom: $grid-unit-30;
+}

packages/edit-site/src/components/sidebar-navigation-screen-library/use-theme-patterns.js → packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-theme-patterns.js

@@ -11,7 +11,7 @@ import { useMemo } from '@wordpress/element';
 import {
 	CORE_PATTERN_SOURCES,
 	filterOutDuplicatesByName,
-} from '../page-library/utils';
+} from '../page-patterns/utils';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';