From d3731da85ba5e8fece2e31612e57c10b687cb17e Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 25 May 2023 15:59:18 +1000
Subject: [PATCH 01/73] Add placeholder Library page

---
 .../edit-site/src/components/library/grid.js  | 14 ++++++
 .../edit-site/src/components/library/index.js | 47 +++++++++++++++++++
 .../src/components/library/use-patterns.js    |  5 ++
 3 files changed, 66 insertions(+)
 create mode 100644 packages/edit-site/src/components/library/grid.js
 create mode 100644 packages/edit-site/src/components/library/index.js
 create mode 100644 packages/edit-site/src/components/library/use-patterns.js

diff --git a/packages/edit-site/src/components/library/grid.js b/packages/edit-site/src/components/library/grid.js
new file mode 100644
index 00000000000000..96e021dabe052a
--- /dev/null
+++ b/packages/edit-site/src/components/library/grid.js
@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+import usePatterns from './use-patterns';
+
+export default function Grid() {
+	const patterns = usePatterns();
+
+	return (
+		<div className="edit-site-library__grid">
+			{ patterns.map( () => '' ) }
+		</div>
+	);
+}
diff --git a/packages/edit-site/src/components/library/index.js b/packages/edit-site/src/components/library/index.js
new file mode 100644
index 00000000000000..ef1873c2b01121
--- /dev/null
+++ b/packages/edit-site/src/components/library/index.js
@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { EditorSnackbars } from '@wordpress/editor';
+import { __ } from '@wordpress/i18n';
+import { InterfaceSkeleton } from '@wordpress/interface';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+
+/**
+ * Internal dependencies
+ */
+import Grid from './grid';
+import useTitle from '../routes/use-title';
+
+export default function Library() {
+	// Do we need shortcuts if we aren't displaying a header?
+	const { previousShortcut, nextShortcut } = useSelect( ( select ) => {
+		return {
+			previousShortcut: select(
+				keyboardShortcutsStore
+			).getAllShortcutKeyCombinations( 'core/edit-site/previous-region' ),
+			nextShortcut: select(
+				keyboardShortcutsStore
+			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
+		};
+	}, [] );
+
+	useTitle( __( 'Library' ) );
+
+	// If we only have a single region, due to not including a header on this page,
+	// do we need the aria-label section?
+	const regionLabels = { body: __( 'Library - Content' ) };
+
+	return (
+		<InterfaceSkeleton
+			className="edit-site-library"
+			labels={ regionLabels }
+			notices={ <EditorSnackbars /> }
+			content={ <Grid /> }
+			shortcuts={ {
+				previous: previousShortcut,
+				next: nextShortcut,
+			} }
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/library/use-patterns.js b/packages/edit-site/src/components/library/use-patterns.js
new file mode 100644
index 00000000000000..b6a65fd32db559
--- /dev/null
+++ b/packages/edit-site/src/components/library/use-patterns.js
@@ -0,0 +1,5 @@
+export default function usePattern() {
+	// TODO: Implement retrieval, sorting and merging of user created patterns,
+	// template parts, reusable blocks etc.
+	return [];
+}

From a46d4b58be49e68f9836223e99f0391c7efafc43 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 25 May 2023 17:27:50 +1000
Subject: [PATCH 02/73] Add placeholder Library nav screen

---
 .../sidebar-navigation-item/index.js          |   2 +
 .../category-item.js                          |  23 ++++
 .../index.js                                  | 116 ++++++++++++++++++
 .../style.scss                                |   5 +
 .../use-pattern-categories.js                 |  34 +++++
 .../use-template-part-areas.js                |  33 +++++
 packages/edit-site/src/style.scss             |   1 +
 7 files changed, 214 insertions(+)
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-library/style.scss
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-library/use-template-part-areas.js

diff --git a/packages/edit-site/src/components/sidebar-navigation-item/index.js b/packages/edit-site/src/components/sidebar-navigation-item/index.js
index 18b8ea42516cbe..44a41f12d7d691 100644
--- a/packages/edit-site/src/components/sidebar-navigation-item/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-item/index.js
@@ -18,6 +18,7 @@ export default function SidebarNavigationItem( {
 	className,
 	icon,
 	withChevron = false,
+	suffix,
 	children,
 	...props
 } ) {
@@ -45,6 +46,7 @@ export default function SidebarNavigationItem( {
 						size={ 24 }
 					/>
 				) }
+				{ ! withChevron && suffix }
 			</HStack>
 		</Item>
 	);
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
new file mode 100644
index 00000000000000..1d6685ff41cffc
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
@@ -0,0 +1,23 @@
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import { useLink } from '../routes/link';
+
+export default function CategoryItem( { count, icon, label, name, type } ) {
+	const linkInfo = useLink( { path: `/library/${ type }/${ name }` } );
+
+	if ( ! count ) {
+		return;
+	}
+
+	return (
+		<SidebarNavigationItem
+			{ ...linkInfo }
+			icon={ icon }
+			suffix={ <span>{ count }</span> }
+		>
+			{ label }
+		</SidebarNavigationItem>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
new file mode 100644
index 00000000000000..5eae3f1d32e8a8
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
@@ -0,0 +1,116 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+} from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import { getTemplatePartIcon } from '@wordpress/editor';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import CategoryItem from './category-item';
+import usePatternCategories from './use-pattern-categories';
+import useTemplatePartAreas from './use-template-part-areas';
+import { store as editSiteStore } from '../../store';
+
+const templatePartAreaLabels = {
+	header: __( 'Headers' ),
+	footer: __( 'Footers' ),
+	sidebar: __( 'Sidebar' ),
+	rest: __( 'Uncategorized' ), // TODO: Find correct label for this.
+};
+
+export default function SidebarNavigationScreenLibrary() {
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+
+	const { templatePartAreas, hasTemplateParts, isLoading } =
+		useTemplatePartAreas();
+	const { patternCategories, hasPatterns } = usePatternCategories();
+
+	const isTemplatePartsMode = useSelect( ( select ) => {
+		const settings = select( editSiteStore ).getSettings();
+		return !! settings.supportsTemplatePartsMode;
+	}, [] );
+
+	return (
+		<SidebarNavigationScreen
+			isRoot={ isTemplatePartsMode }
+			title={ __( 'Library' ) }
+			description={ __(
+				'Manage what patterns are available when editing your site.'
+			) }
+			// actions={ {} }
+			content={
+				<>
+					{ isLoading && __( 'Loading library' ) }
+					{ ! isLoading && (
+						<>
+							{ ! hasTemplateParts && ! hasPatterns && (
+								<ItemGroup className="edit-site-sidebar-navigation-screen-library__group">
+									<Item>
+										{ __(
+											'No template parts or patterns found'
+										) }
+									</Item>
+								</ItemGroup>
+							) }
+							{ hasTemplateParts && (
+								<ItemGroup className="edit-site-sidebar-navigation-screen-library__group">
+									{ Object.entries( templatePartAreas ).map(
+										( [ area, parts ] ) => (
+											<CategoryItem
+												key={ area }
+												count={ parts.length }
+												icon={ getTemplatePartIcon(
+													area
+												) }
+												label={
+													templatePartAreaLabels[
+														area
+													]
+												}
+												name={ area }
+												type="wp_template_part"
+											/>
+										)
+									) }
+								</ItemGroup>
+							) }
+							{ hasPatterns && (
+								<ItemGroup className="edit-site-sidebar-navigation-screen-library__group">
+									{ patternCategories.map( ( category ) => (
+										<CategoryItem
+											key={ category.name }
+											count={ category.count }
+											label={ category.label }
+											name={ category.name }
+											type="pattern"
+										/>
+									) ) }
+								</ItemGroup>
+							) }
+							<ItemGroup>
+								{ ! isMobileViewport && (
+									<SidebarNavigationItem
+										as="a"
+										href="edit.php?post_type=wp_block"
+										withChevron
+									>
+										{ __( 'Manage all reusable blocks' ) }
+									</SidebarNavigationItem>
+								) }
+							</ItemGroup>
+						</>
+					) }
+				</>
+			}
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-library/style.scss
new file mode 100644
index 00000000000000..a054e62b34ad98
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/style.scss
@@ -0,0 +1,5 @@
+.edit-site-sidebar-navigation-screen-library__group {
+	padding-bottom: $grid-unit-20;
+	border-bottom: 1px solid $gray-800;
+	margin-bottom: $grid-unit-20;
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
new file mode 100644
index 00000000000000..a933821afe1ee3
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+export default function usePatternCategories() {
+	return useSelect( ( select ) => {
+		const { __experimentalGetAllowedPatterns, getSettings } =
+			select( blockEditorStore );
+		const patterns = __experimentalGetAllowedPatterns();
+		const patternCategories = {};
+
+		getSettings().__experimentalBlockPatternCategories.forEach(
+			( category ) => {
+				category.count = 0;
+				patternCategories[ category.name ] = category;
+			}
+		);
+
+		patterns.forEach( ( pattern ) => {
+			pattern.categories.forEach( ( patternCategory ) => {
+				if ( patternCategories[ patternCategory ] ) {
+					patternCategories[ patternCategory ].count += 1;
+				}
+			} );
+		} );
+
+		return {
+			hasPatterns: !! patterns.length,
+			patternCategories: Object.values( patternCategories ),
+		};
+	}, [] );
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-template-part-areas.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-template-part-areas.js
new file mode 100644
index 00000000000000..795af3144470a3
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-template-part-areas.js
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityRecords } from '@wordpress/core-data';
+
+const getTemplatePartAreas = ( items ) => {
+	const allItems = items || [];
+
+	const groupedByArea = allItems.reduce(
+		( accumulator, item ) => {
+			const key = accumulator[ item.area ] ? item.area : 'rest';
+			accumulator[ key ].push( item );
+			return accumulator;
+		},
+		{ header: [], footer: [], sidebar: [], rest: [] }
+	);
+
+	return groupedByArea;
+};
+
+export default function useTemplatePartAreas() {
+	const { records: templateParts, isResolving: isLoading } = useEntityRecords(
+		'postType',
+		'wp_template_part',
+		{ per_page: -1 }
+	);
+
+	return {
+		hasTemplateParts: templateParts ? !! templateParts.length : false,
+		isLoading,
+		templatePartAreas: getTemplatePartAreas( templateParts ),
+	};
+}
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 5f434bb84f8f7c..8e4196838c314f 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -31,6 +31,7 @@
 @import "./components/sidebar-navigation-screen/style.scss";
 @import "./components/sidebar-navigation-screen-details-footer/style.scss";
 @import "./components/sidebar-navigation-screen-global-styles/style.scss";
+@import "./components/sidebar-navigation-screen-library/style.scss";
 @import "./components/sidebar-navigation-screen-navigation-menu/style.scss";
 @import "./components/sidebar-navigation-screen-page/style.scss";
 @import "components/sidebar-navigation-screen-details-panel/style.scss";

From 6c2a135ad7e30aef1574bad3bfc014268011ced0 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 25 May 2023 17:28:52 +1000
Subject: [PATCH 03/73] Use placeholder library page and nav screen

---
 packages/edit-site/src/components/layout/index.js     |  8 +++++---
 .../sidebar-navigation-screen-main/index.js           |  2 +-
 packages/edit-site/src/components/sidebar/index.js    |  9 ++++++++-
 packages/edit-site/src/utils/get-is-library-page.js   | 11 +++++++++++
 4 files changed, 25 insertions(+), 5 deletions(-)
 create mode 100644 packages/edit-site/src/utils/get-is-library-page.js

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index 29b4605e67d259..a477ae6957c152 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -36,6 +36,7 @@ import Sidebar from '../sidebar';
 import Editor from '../editor';
 import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
+import getIsLibraryPage from '../../utils/get-is-library-page';
 import getIsListPage from '../../utils/get-is-list-page';
 import Header from '../header-edit-mode';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
@@ -65,8 +66,9 @@ export default function Layout() {
 
 	const hubRef = useRef();
 	const { params } = useLocation();
+	const isLibraryPage = getIsLibraryPage( params );
 	const isListPage = getIsListPage( params );
-	const isEditorPage = ! isListPage;
+	const isEditorPage = ! isListPage && ! isLibraryPage;
 	const { hasFixedToolbar, canvasMode, previousShortcut, nextShortcut } =
 		useSelect( ( select ) => {
 			const { getAllShortcutKeyCombinations } = select(
@@ -93,14 +95,14 @@ export default function Layout() {
 	const disableMotion = useReducedMotion();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const showSidebar =
-		( isMobileViewport && ! isListPage ) ||
+		( isMobileViewport && isEditorPage ) ||
 		( ! isMobileViewport && ( canvasMode === 'view' || ! isEditorPage ) );
 	const showCanvas =
 		( isMobileViewport && isEditorPage && isEditing ) ||
 		! isMobileViewport ||
 		! isEditorPage;
 	const isFullCanvas =
-		( isMobileViewport && isListPage ) || ( isEditorPage && isEditing );
+		( isMobileViewport && ! isEditorPage ) || ( isEditorPage && isEditing );
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
 	const [ fullResizer ] = useResizeObserver();
 	const [ isResizing ] = useState( false );
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
index 5c89c9f72a23b2..6e7810abe81c05 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
@@ -75,7 +75,7 @@ export default function SidebarNavigationScreenMain() {
 					</NavigatorButton>
 					<NavigatorButton
 						as={ SidebarNavigationItem }
-						path="/wp_template_part"
+						path="/library"
 						withChevron
 						icon={ symbol }
 					>
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
index 7e5ede23cc1638..beda8082eeb01e 100644
--- a/packages/edit-site/src/components/sidebar/index.js
+++ b/packages/edit-site/src/components/sidebar/index.js
@@ -12,6 +12,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+import SidebarNavigationScreenLibrary from '../sidebar-navigation-screen-library';
 import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';
 import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
 import SidebarNavigationScreenTemplatePart from '../sidebar-navigation-screen-template-part';
@@ -55,7 +56,13 @@ function SidebarScreens() {
 			<NavigatorScreen path="/:postType(wp_template|wp_template_part)">
 				<SidebarNavigationScreenTemplates />
 			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template|wp_template_part)/all">
+			<NavigatorScreen path="/library">
+				<SidebarNavigationScreenLibrary />
+			</NavigatorScreen>
+			<NavigatorScreen path="/library/:categoryType(wp_template_part|pattern)/:categoryName">
+				<SidebarNavigationScreenLibrary />
+			</NavigatorScreen>
+			<NavigatorScreen path="/:postType(wp_template)/all">
 				<SidebarNavigationScreenTemplatesBrowse />
 			</NavigatorScreen>
 			<NavigatorScreen path="/:postType(wp_template)/:postId">
diff --git a/packages/edit-site/src/utils/get-is-library-page.js b/packages/edit-site/src/utils/get-is-library-page.js
new file mode 100644
index 00000000000000..c978deb26a44f6
--- /dev/null
+++ b/packages/edit-site/src/utils/get-is-library-page.js
@@ -0,0 +1,11 @@
+/*
+ * Returns if the params match the library page route.
+ *
+ * @param {Object} params      The url params.
+ * @param {string} params.path The current path.
+ *
+ * @return {boolean} Is library page or not.
+ */
+export default function getIsLibraryPage( { path } ) {
+	return path === '/library';
+}

From 01b56aef84d35079bb61344286e1d9ec8179f7f1 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 25 May 2023 19:47:54 +1000
Subject: [PATCH 04/73] Add dodgy placeholder display for patterns or template
 parts

---
 .../edit-site/src/components/library/grid.js  | 34 ++++++++++++-
 .../src/components/library/style.scss         | 50 +++++++++++++++++++
 .../src/components/library/use-patterns.js    | 29 +++++++++--
 packages/edit-site/src/style.scss             |  1 +
 4 files changed, 110 insertions(+), 4 deletions(-)
 create mode 100644 packages/edit-site/src/components/library/style.scss

diff --git a/packages/edit-site/src/components/library/grid.js b/packages/edit-site/src/components/library/grid.js
index 96e021dabe052a..6197627f1d4466 100644
--- a/packages/edit-site/src/components/library/grid.js
+++ b/packages/edit-site/src/components/library/grid.js
@@ -1,3 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, __experimentalHStack as HStack } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { moreHorizontal } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
@@ -6,9 +13,34 @@ import usePatterns from './use-patterns';
 export default function Grid() {
 	const patterns = usePatterns();
 
+	if ( ! patterns ) {
+		return null;
+	}
+
+	if ( ! patterns.length ) {
+		return <div>{ __( 'No patterns found.' ) }</div>;
+	}
+
 	return (
 		<div className="edit-site-library__grid">
-			{ patterns.map( () => '' ) }
+			{ patterns.map( ( pattern ) => (
+				<div key={ pattern.id } className="edit-site-library__pattern">
+					<div className="edit-site-library__preview">
+						{ pattern.id }
+					</div>
+					<HStack
+						className="edit-site-library__footer"
+						justify="space-between"
+					>
+						<span>{ pattern.title.rendered }</span>
+						<Button
+							className="edit-site-library__button"
+							icon={ moreHorizontal }
+							isSmall
+						/>
+					</HStack>
+				</div>
+			) ) }
 		</div>
 	);
 }
diff --git a/packages/edit-site/src/components/library/style.scss b/packages/edit-site/src/components/library/style.scss
new file mode 100644
index 00000000000000..fa103a5ecfbd18
--- /dev/null
+++ b/packages/edit-site/src/components/library/style.scss
@@ -0,0 +1,50 @@
+.edit-site-library {
+	width: 100%;
+
+	.interface-interface-skeleton__content {
+		border-radius: 0;
+	}
+}
+
+.edit-site-library__grid {
+	column-count: 2;
+	column-gap: $grid-unit-30;
+
+	// Small top padding required to avoid cutting off the visible outline
+	// when hovering items.
+	padding-top: $border-width-focus-fallback;
+
+	.edit-site-library__pattern {
+		break-inside: avoid-column;
+		display: flex;
+		flex-direction: column;
+		margin-bottom: $grid-unit-60;
+
+		// Temp styles for testing - delete asap
+		min-height: 250px;
+
+		&:nth-child(2) {
+			min-height: 400px;
+		}
+
+		&:nth-child(3) {
+			min-height: 600px;
+		}
+
+		.edit-site-library__preview {
+			border-radius: $radius-block-ui * 4;
+			background: #ededed;
+		}
+
+		.edit-site-library__footer,
+		.edit-site-library__button {
+			color: #e0e0e0;
+		}
+		// END: temp styles for testing.
+	}
+
+	.edit-site-library__preview {
+		flex: 1;
+		margin-bottom: $grid-unit-30;
+	}
+}
diff --git a/packages/edit-site/src/components/library/use-patterns.js b/packages/edit-site/src/components/library/use-patterns.js
index b6a65fd32db559..e9a5ab4279c47a 100644
--- a/packages/edit-site/src/components/library/use-patterns.js
+++ b/packages/edit-site/src/components/library/use-patterns.js
@@ -1,5 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
+
+const TYPE = 'wp_template_part';
+
 export default function usePattern() {
-	// TODO: Implement retrieval, sorting and merging of user created patterns,
-	// template parts, reusable blocks etc.
-	return [];
+	const { records: allPatterns } = useEntityRecords( 'postType', TYPE, {
+		per_page: -1,
+	} );
+	const patterns = useSelect(
+		( select ) =>
+			allPatterns?.filter(
+				( pattern ) =>
+					! select( coreStore ).isDeletingEntityRecord(
+						'postType',
+						TYPE,
+						pattern.id
+					)
+			),
+		[ allPatterns ]
+	);
+
+	// TODO: Add sorting etc.
+	return patterns;
 }
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 8e4196838c314f..2d9dd417358412 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -8,6 +8,7 @@
 @import "./components/global-styles/screen-revisions/style.scss";
 @import "./components/header-edit-mode/style.scss";
 @import "./components/header-edit-mode/document-actions/style.scss";
+@import "./components/library/style.scss";
 @import "./components/list/style.scss";
 @import "./components/page/style.scss";
 @import "./components/table/style.scss";

From e59b58711e6d9af26aae50a22b131da612b309e1 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Sun, 28 May 2023 15:07:09 +1000
Subject: [PATCH 05/73] Temporarily add category type and name to query params

---
 packages/edit-site/src/components/library/grid.js           | 4 ++--
 packages/edit-site/src/components/library/index.js          | 5 ++++-
 .../sidebar-navigation-screen-library/category-item.js      | 6 +++++-
 packages/edit-site/src/components/sidebar/index.js          | 3 ---
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/edit-site/src/components/library/grid.js b/packages/edit-site/src/components/library/grid.js
index 6197627f1d4466..0ce126e4119e29 100644
--- a/packages/edit-site/src/components/library/grid.js
+++ b/packages/edit-site/src/components/library/grid.js
@@ -10,8 +10,8 @@ import { moreHorizontal } from '@wordpress/icons';
  */
 import usePatterns from './use-patterns';
 
-export default function Grid() {
-	const patterns = usePatterns();
+export default function Grid( { type, name } ) {
+	const patterns = usePatterns( type, name );
 
 	if ( ! patterns ) {
 		return null;
diff --git a/packages/edit-site/src/components/library/index.js b/packages/edit-site/src/components/library/index.js
index ef1873c2b01121..c496e09a7d151b 100644
--- a/packages/edit-site/src/components/library/index.js
+++ b/packages/edit-site/src/components/library/index.js
@@ -6,6 +6,7 @@ import { EditorSnackbars } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { InterfaceSkeleton } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { getQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -14,6 +15,8 @@ import Grid from './grid';
 import useTitle from '../routes/use-title';
 
 export default function Library() {
+	const { categoryType, categoryName } = getQueryArgs( window.location.href );
+
 	// Do we need shortcuts if we aren't displaying a header?
 	const { previousShortcut, nextShortcut } = useSelect( ( select ) => {
 		return {
@@ -37,7 +40,7 @@ export default function Library() {
 			className="edit-site-library"
 			labels={ regionLabels }
 			notices={ <EditorSnackbars /> }
-			content={ <Grid /> }
+			content={ <Grid type={ categoryType } name={ categoryName } /> }
 			shortcuts={ {
 				previous: previousShortcut,
 				next: nextShortcut,
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
index 1d6685ff41cffc..229299237c8cfd 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
@@ -5,7 +5,11 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import { useLink } from '../routes/link';
 
 export default function CategoryItem( { count, icon, label, name, type } ) {
-	const linkInfo = useLink( { path: `/library/${ type }/${ name }` } );
+	const linkInfo = useLink( {
+		path: '/library',
+		categoryType: type,
+		categoryName: name,
+	} );
 
 	if ( ! count ) {
 		return;
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
index beda8082eeb01e..5c36eb964fd338 100644
--- a/packages/edit-site/src/components/sidebar/index.js
+++ b/packages/edit-site/src/components/sidebar/index.js
@@ -59,9 +59,6 @@ function SidebarScreens() {
 			<NavigatorScreen path="/library">
 				<SidebarNavigationScreenLibrary />
 			</NavigatorScreen>
-			<NavigatorScreen path="/library/:categoryType(wp_template_part|pattern)/:categoryName">
-				<SidebarNavigationScreenLibrary />
-			</NavigatorScreen>
 			<NavigatorScreen path="/:postType(wp_template)/all">
 				<SidebarNavigationScreenTemplatesBrowse />
 			</NavigatorScreen>

From 322104482f8b73c1c3135ddbcee51c67227da3fd Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Mon, 29 May 2023 09:29:32 +1000
Subject: [PATCH 06/73] Try displaying patterns and template parts

---
 .../edit-site/src/components/library/grid.js  |  66 ++++++---
 .../src/components/library/style.scss         |  14 +-
 .../src/components/library/use-patterns.js    | 128 +++++++++++++++---
 .../index.js                                  |   2 +-
 .../use-pattern-categories.js                 |  83 +++++++++---
 .../use-template-part-areas.js                |   4 +-
 6 files changed, 227 insertions(+), 70 deletions(-)

diff --git a/packages/edit-site/src/components/library/grid.js b/packages/edit-site/src/components/library/grid.js
index 0ce126e4119e29..8775ca208f8fec 100644
--- a/packages/edit-site/src/components/library/grid.js
+++ b/packages/edit-site/src/components/library/grid.js
@@ -1,7 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { Button, __experimentalHStack as HStack } from '@wordpress/components';
+import { BlockPreview } from '@wordpress/block-editor';
+import {
+	Button,
+	VisuallyHidden,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { moreHorizontal } from '@wordpress/icons';
 
@@ -10,8 +16,41 @@ import { moreHorizontal } from '@wordpress/icons';
  */
 import usePatterns from './use-patterns';
 
+const GridItem = ( { item } ) => {
+	const instanceId = useInstanceId( GridItem );
+	const descriptionId = `edit-site-library__pattern-description-${ instanceId }`;
+
+	return (
+		<div
+			className="edit-site-library__pattern"
+			aria-label={ item.title }
+			aria-describedby={ item.description ? descriptionId : undefined }
+		>
+			<div className="edit-site-library__preview">
+				<BlockPreview blocks={ item.blocks } />
+				{ !! item.description && (
+					<VisuallyHidden id={ descriptionId }>
+						{ item.description }
+					</VisuallyHidden>
+				) }
+			</div>
+			<HStack
+				className="edit-site-library__footer"
+				justify="space-between"
+			>
+				<span>{ item.title }</span>
+				<Button
+					className="edit-site-library__button"
+					icon={ moreHorizontal }
+					isSmall
+				/>
+			</HStack>
+		</div>
+	);
+};
+
 export default function Grid( { type, name } ) {
-	const patterns = usePatterns( type, name );
+	const [ patterns, isResolving ] = usePatterns( type, name );
 
 	if ( ! patterns ) {
 		return null;
@@ -23,24 +62,11 @@ export default function Grid( { type, name } ) {
 
 	return (
 		<div className="edit-site-library__grid">
-			{ patterns.map( ( pattern ) => (
-				<div key={ pattern.id } className="edit-site-library__pattern">
-					<div className="edit-site-library__preview">
-						{ pattern.id }
-					</div>
-					<HStack
-						className="edit-site-library__footer"
-						justify="space-between"
-					>
-						<span>{ pattern.title.rendered }</span>
-						<Button
-							className="edit-site-library__button"
-							icon={ moreHorizontal }
-							isSmall
-						/>
-					</HStack>
-				</div>
-			) ) }
+			{ isResolving && __( 'Loading' ) }
+			{ ! isResolving &&
+				patterns.map( ( pattern ) => (
+					<GridItem key={ pattern.name } item={ pattern } />
+				) ) }
 		</div>
 	);
 }
diff --git a/packages/edit-site/src/components/library/style.scss b/packages/edit-site/src/components/library/style.scss
index fa103a5ecfbd18..45a0c906270820 100644
--- a/packages/edit-site/src/components/library/style.scss
+++ b/packages/edit-site/src/components/library/style.scss
@@ -13,6 +13,8 @@
 	// Small top padding required to avoid cutting off the visible outline
 	// when hovering items.
 	padding-top: $border-width-focus-fallback;
+	padding-left: $grid-unit-15;
+	padding-right: $grid-unit-15;
 
 	.edit-site-library__pattern {
 		break-inside: avoid-column;
@@ -21,19 +23,9 @@
 		margin-bottom: $grid-unit-60;
 
 		// Temp styles for testing - delete asap
-		min-height: 250px;
-
-		&:nth-child(2) {
-			min-height: 400px;
-		}
-
-		&:nth-child(3) {
-			min-height: 600px;
-		}
-
 		.edit-site-library__preview {
 			border-radius: $radius-block-ui * 4;
-			background: #ededed;
+			overflow: hidden;
 		}
 
 		.edit-site-library__footer,
diff --git a/packages/edit-site/src/components/library/use-patterns.js b/packages/edit-site/src/components/library/use-patterns.js
index e9a5ab4279c47a..58c80695231bed 100644
--- a/packages/edit-site/src/components/library/use-patterns.js
+++ b/packages/edit-site/src/components/library/use-patterns.js
@@ -1,28 +1,122 @@
 /**
  * WordPress dependencies
  */
+import { parse } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
-import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useMemo } from '@wordpress/element';
 
-const TYPE = 'wp_template_part';
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
+
+const TEMPLATE_PARTS = 'wp_template_part';
+const PATTERNS = 'pattern';
+
+const createTemplatePartId = ( theme, slug ) =>
+	theme && slug ? theme + '//' + slug : null;
+
+const toPattern = ( templatePart ) => ( {
+	name: createTemplatePartId( templatePart.theme, templatePart.slug ),
+	title: templatePart.title.rendered,
+	blocks: parse( templatePart.content.raw ),
+	templatePart,
+} );
+
+const useTemplatePartsAsPatterns = ( area, postType = TEMPLATE_PARTS ) => {
+	const { templateParts, isResolving } = useSelect(
+		( select ) => {
+			if ( postType !== TEMPLATE_PARTS ) {
+				return { templateParts: [], isResolving: false };
+			}
+
+			const { getEntityRecords, isResolving: _isResolving } =
+				select( coreStore );
+			const query = { per_page: -1 };
+
+			return {
+				templateParts: getEntityRecords( 'postType', postType, query ),
+				isResolving: _isResolving( 'getEntityRecords', [
+					'postType',
+					'wp_template_part',
+					query,
+				] ),
+			};
+		},
+		[ postType ]
+	);
+
+	const filteredTemplateParts = useMemo( () => {
+		if ( ! templateParts ) {
+			return [];
+		}
+
+		const partsAsPatterns = [];
+
+		templateParts?.forEach( ( templatePart ) => {
+			if ( ! area || templatePart.area === area ) {
+				partsAsPatterns.push( toPattern( templatePart ) );
+			}
+		} );
 
-export default function usePattern() {
-	const { records: allPatterns } = useEntityRecords( 'postType', TYPE, {
-		per_page: -1,
+		return partsAsPatterns;
+	}, [ templateParts, area ] );
+
+	return { templateParts: filteredTemplateParts, isResolving };
+};
+
+const useBlockPatternsByCategory = ( category, postType = PATTERNS ) => {
+	const blockPatterns = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+		const settings = getSettings();
+		return (
+			settings.__experimentalAdditionalBlockPatterns ??
+			settings.__experimentalBlockPatterns
+		);
 	} );
-	const patterns = useSelect(
-		( select ) =>
-			allPatterns?.filter(
-				( pattern ) =>
-					! select( coreStore ).isDeletingEntityRecord(
-						'postType',
-						TYPE,
-						pattern.id
-					)
-			),
-		[ allPatterns ]
+
+	const restBlockPatterns = useSelect( ( select ) =>
+		select( coreStore ).getBlockPatterns()
+	);
+
+	const patterns = useMemo(
+		() =>
+			[ ...( blockPatterns || [] ), ...( restBlockPatterns || [] ) ]
+				.filter(
+					( x, index, arr ) =>
+						index === arr.findIndex( ( y ) => x.name === y.name )
+				)
+				.map( ( pattern ) => ( {
+					...pattern,
+					blocks: parse( pattern.content ),
+				} ) ),
+		[ blockPatterns, restBlockPatterns ]
+	);
+
+	if ( postType !== PATTERNS ) {
+		return [];
+	}
+
+	if ( ! category ) {
+		return patterns || [];
+	}
+
+	return patterns.filter( ( pattern ) =>
+		pattern.categories?.includes( category )
+	);
+};
+
+export default function usePatterns( categoryType, categoryName ) {
+	const patterns = useBlockPatternsByCategory( categoryName, categoryType );
+	const { templateParts, isResolving } = useTemplatePartsAsPatterns(
+		categoryName,
+		categoryType
 	);
 
 	// TODO: Add sorting etc.
-	return patterns;
+
+	const results = [ ...templateParts, ...patterns ];
+	return [ results, isResolving ];
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
index 5eae3f1d32e8a8..5567bb18053e89 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
@@ -24,7 +24,7 @@ const templatePartAreaLabels = {
 	header: __( 'Headers' ),
 	footer: __( 'Footers' ),
 	sidebar: __( 'Sidebar' ),
-	rest: __( 'Uncategorized' ), // TODO: Find correct label for this.
+	uncategorized: __( 'Uncategorized' ), // TODO: Find correct label for this.
 };
 
 export default function SidebarNavigationScreenLibrary() {
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
index a933821afe1ee3..1f1b2341e8202b 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
@@ -1,34 +1,79 @@
 /**
  * WordPress dependencies
  */
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
 
 export default function usePatternCategories() {
-	return useSelect( ( select ) => {
-		const { __experimentalGetAllowedPatterns, getSettings } =
-			select( blockEditorStore );
-		const patterns = __experimentalGetAllowedPatterns();
-		const patternCategories = {};
-
-		getSettings().__experimentalBlockPatternCategories.forEach(
-			( category ) => {
+	const { blockPatterns, blockPatternCategories } = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+		const settings = getSettings();
+
+		return {
+			blockPatterns:
+				settings.__experimentalAdditionalBlockPatterns ??
+				settings.__experimentalBlockPatterns,
+			blockPatternCategories:
+				settings.__experimentalAdditionalBlockPatternCategories ??
+				settings.__experimentalBlockPatternCategories,
+		};
+	} );
+
+	const { restBlockPatterns, restBlockPatternCategories } = useSelect(
+		( select ) => ( {
+			restBlockPatterns: select( coreStore ).getBlockPatterns(),
+			restBlockPatternCategories:
+				select( coreStore ).getBlockPatternCategories(),
+		} )
+	);
+
+	const patterns = useMemo(
+		() =>
+			[
+				...( blockPatterns || [] ),
+				...( restBlockPatterns || [] ),
+			].filter(
+				( x, index, arr ) =>
+					index === arr.findIndex( ( y ) => x.name === y.name )
+			),
+		[ blockPatterns, restBlockPatterns ]
+	);
+
+	const categories = useMemo( () => {
+		const combinedCategories = [
+			...( blockPatternCategories || [] ),
+			...( restBlockPatternCategories || [] ),
+		];
+
+		const categoryMap = {};
+
+		combinedCategories.forEach( ( category ) => {
+			if ( ! categoryMap[ category.name ] ) {
 				category.count = 0;
-				patternCategories[ category.name ] = category;
+				categoryMap[ category.name ] = category;
 			}
-		);
+		} );
 
 		patterns.forEach( ( pattern ) => {
-			pattern.categories.forEach( ( patternCategory ) => {
-				if ( patternCategories[ patternCategory ] ) {
-					patternCategories[ patternCategory ].count += 1;
+			pattern.categories?.forEach( ( patternCategory ) => {
+				if ( categoryMap[ patternCategory ] ) {
+					categoryMap[ patternCategory ].count += 1;
 				}
 			} );
 		} );
 
-		return {
-			hasPatterns: !! patterns.length,
-			patternCategories: Object.values( patternCategories ),
-		};
-	}, [] );
+		return categoryMap;
+	}, [ blockPatternCategories, restBlockPatternCategories, patterns ] );
+
+	return {
+		hasPatterns: !! patterns.length,
+		patternCategories: Object.values( categories ),
+	};
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-template-part-areas.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-template-part-areas.js
index 795af3144470a3..aa258344d132da 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-template-part-areas.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-template-part-areas.js
@@ -8,11 +8,11 @@ const getTemplatePartAreas = ( items ) => {
 
 	const groupedByArea = allItems.reduce(
 		( accumulator, item ) => {
-			const key = accumulator[ item.area ] ? item.area : 'rest';
+			const key = accumulator[ item.area ] ? item.area : 'uncategorized';
 			accumulator[ key ].push( item );
 			return accumulator;
 		},
-		{ header: [], footer: [], sidebar: [], rest: [] }
+		{ header: [], footer: [], sidebar: [], uncategorized: [] }
 	);
 
 	return groupedByArea;

From b6172744b05eb4d71241ae7641415ea34086bc33 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Mon, 29 May 2023 18:10:07 +1000
Subject: [PATCH 07/73] Highlight active category nav item

---
 .../edit-site/src/components/library/grid.js    |  4 ++--
 .../edit-site/src/components/library/index.js   |  7 ++++++-
 .../category-item.js                            | 10 +++++++++-
 .../sidebar-navigation-screen-library/index.js  | 17 +++++++++++++++++
 .../style.scss                                  |  4 ++++
 5 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/library/grid.js b/packages/edit-site/src/components/library/grid.js
index 8775ca208f8fec..3ef8c389a3d4e5 100644
--- a/packages/edit-site/src/components/library/grid.js
+++ b/packages/edit-site/src/components/library/grid.js
@@ -49,8 +49,8 @@ const GridItem = ( { item } ) => {
 	);
 };
 
-export default function Grid( { type, name } ) {
-	const [ patterns, isResolving ] = usePatterns( type, name );
+export default function Grid( { type, category } ) {
+	const [ patterns, isResolving ] = usePatterns( type, category );
 
 	if ( ! patterns ) {
 		return null;
diff --git a/packages/edit-site/src/components/library/index.js b/packages/edit-site/src/components/library/index.js
index c496e09a7d151b..c963530c5d61f9 100644
--- a/packages/edit-site/src/components/library/index.js
+++ b/packages/edit-site/src/components/library/index.js
@@ -14,8 +14,13 @@ import { getQueryArgs } from '@wordpress/url';
 import Grid from './grid';
 import useTitle from '../routes/use-title';
 
+const DEFAULT_TYPE = 'wp_template_part';
+const DEFAULT_CATEGORY = 'header';
+
 export default function Library() {
 	const { categoryType, categoryName } = getQueryArgs( window.location.href );
+	const type = categoryType || DEFAULT_TYPE;
+	const category = categoryName || DEFAULT_CATEGORY;
 
 	// Do we need shortcuts if we aren't displaying a header?
 	const { previousShortcut, nextShortcut } = useSelect( ( select ) => {
@@ -40,7 +45,7 @@ export default function Library() {
 			className="edit-site-library"
 			labels={ regionLabels }
 			notices={ <EditorSnackbars /> }
-			content={ <Grid type={ categoryType } name={ categoryName } /> }
+			content={ <Grid type={ type } category={ category } /> }
 			shortcuts={ {
 				previous: previousShortcut,
 				next: nextShortcut,
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
index 229299237c8cfd..def480419326f6 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
@@ -4,7 +4,14 @@
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { useLink } from '../routes/link';
 
-export default function CategoryItem( { count, icon, label, name, type } ) {
+export default function CategoryItem( {
+	count,
+	icon,
+	isActive,
+	label,
+	name,
+	type,
+} ) {
 	const linkInfo = useLink( {
 		path: '/library',
 		categoryType: type,
@@ -20,6 +27,7 @@ export default function CategoryItem( { count, icon, label, name, type } ) {
 			{ ...linkInfo }
 			icon={ icon }
 			suffix={ <span>{ count }</span> }
+			className={ isActive ? 'is-active-category' : undefined }
 		>
 			{ label }
 		</SidebarNavigationItem>
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
index 5567bb18053e89..80b57d1ac6304a 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
@@ -9,6 +9,7 @@ import { useViewportMatch } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { getTemplatePartIcon } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
+import { getQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -20,6 +21,9 @@ import usePatternCategories from './use-pattern-categories';
 import useTemplatePartAreas from './use-template-part-areas';
 import { store as editSiteStore } from '../../store';
 
+const DEFAULT_CATEGORY = 'header';
+const DEFAULT_TYPE = 'wp_template_part';
+
 const templatePartAreaLabels = {
 	header: __( 'Headers' ),
 	footer: __( 'Footers' ),
@@ -29,6 +33,9 @@ const templatePartAreaLabels = {
 
 export default function SidebarNavigationScreenLibrary() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const { categoryType, categoryName } = getQueryArgs( window.location.href );
+	const currentCategory = categoryName || DEFAULT_CATEGORY;
+	const currentType = categoryType || DEFAULT_TYPE;
 
 	const { templatePartAreas, hasTemplateParts, isLoading } =
 		useTemplatePartAreas();
@@ -78,6 +85,11 @@ export default function SidebarNavigationScreenLibrary() {
 												}
 												name={ area }
 												type="wp_template_part"
+												isActive={
+													currentCategory === area &&
+													currentType ===
+														'wp_template_part'
+												}
 											/>
 										)
 									) }
@@ -92,6 +104,11 @@ export default function SidebarNavigationScreenLibrary() {
 											label={ category.label }
 											name={ category.name }
 											type="pattern"
+											isActive={
+												currentCategory ===
+													category.name &&
+												currentType === 'pattern'
+											}
 										/>
 									) ) }
 								</ItemGroup>
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-library/style.scss
index a054e62b34ad98..2f30d25e0c649a 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/style.scss
@@ -3,3 +3,7 @@
 	border-bottom: 1px solid $gray-800;
 	margin-bottom: $grid-unit-20;
 }
+
+.edit-site-sidebar-navigation-item.is-active-category {
+	background: $gray-800;
+}

From 4f15ff1bd83abe2f3c773fd1fddfc1a53e466eaa Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 30 May 2023 16:55:18 +1000
Subject: [PATCH 08/73] Add placeholder dropdown for deleting patterns

---
 .../edit-site/src/components/library/grid.js  | 30 +++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/packages/edit-site/src/components/library/grid.js b/packages/edit-site/src/components/library/grid.js
index 3ef8c389a3d4e5..8f29f3f5bf7493 100644
--- a/packages/edit-site/src/components/library/grid.js
+++ b/packages/edit-site/src/components/library/grid.js
@@ -3,7 +3,9 @@
  */
 import { BlockPreview } from '@wordpress/block-editor';
 import {
-	Button,
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
 	VisuallyHidden,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
@@ -39,11 +41,29 @@ const GridItem = ( { item } ) => {
 				justify="space-between"
 			>
 				<span>{ item.title }</span>
-				<Button
-					className="edit-site-library__button"
+				<DropdownMenu
 					icon={ moreHorizontal }
-					isSmall
-				/>
+					label={ __( 'Actions' ) }
+					className="edit-site-library__dropdown"
+					popoverProps={ { placement: 'bottom-end' } }
+					toggleProps={ {
+						className: 'edit-site-library__button',
+						isSmall: true,
+					} }
+				>
+					{ ( { onClose } ) => (
+						<MenuGroup>
+							<MenuItem
+								onClick={ () => {
+									// TODO: Implement pattern / template part deletion.
+									onClose();
+								} }
+							>
+								{ __( 'Delete' ) }
+							</MenuItem>
+						</MenuGroup>
+					) }
+				</DropdownMenu>
 			</HStack>
 		</div>
 	);

From 330cee3e051206e1eaab92f9dd81594472a41456 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 30 May 2023 17:14:54 +1000
Subject: [PATCH 09/73] Try making pattern previews clickable

---
 .../edit-site/src/components/library/grid.js  | 35 +++++++++++++++----
 .../edit-site/src/components/library/index.js |  8 ++++-
 .../src/components/library/style.scss         |  1 +
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/packages/edit-site/src/components/library/grid.js b/packages/edit-site/src/components/library/grid.js
index 8f29f3f5bf7493..bb931506146ce0 100644
--- a/packages/edit-site/src/components/library/grid.js
+++ b/packages/edit-site/src/components/library/grid.js
@@ -8,6 +8,9 @@ import {
 	MenuItem,
 	VisuallyHidden,
 	__experimentalHStack as HStack,
+	__unstableComposite as Composite,
+	__unstableUseCompositeState as useCompositeState,
+	__unstableCompositeItem as CompositeItem,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
@@ -18,7 +21,7 @@ import { moreHorizontal } from '@wordpress/icons';
  */
 import usePatterns from './use-patterns';
 
-const GridItem = ( { item } ) => {
+const GridItem = ( { composite, item } ) => {
 	const instanceId = useInstanceId( GridItem );
 	const descriptionId = `edit-site-library__pattern-description-${ instanceId }`;
 
@@ -28,14 +31,22 @@ const GridItem = ( { item } ) => {
 			aria-label={ item.title }
 			aria-describedby={ item.description ? descriptionId : undefined }
 		>
-			<div className="edit-site-library__preview">
+			<CompositeItem
+				className="edit-site-library__preview"
+				role="option"
+				as="div"
+				{ ...composite }
+				onClick={ () => {
+					// TODO: Implement pattern editing flow.
+				} }
+			>
 				<BlockPreview blocks={ item.blocks } />
 				{ !! item.description && (
 					<VisuallyHidden id={ descriptionId }>
 						{ item.description }
 					</VisuallyHidden>
 				) }
-			</div>
+			</CompositeItem>
 			<HStack
 				className="edit-site-library__footer"
 				justify="space-between"
@@ -69,8 +80,9 @@ const GridItem = ( { item } ) => {
 	);
 };
 
-export default function Grid( { type, category } ) {
+export default function Grid( { category, label, type } ) {
 	const [ patterns, isResolving ] = usePatterns( type, category );
+	const composite = useCompositeState( { orientation: 'vertical' } );
 
 	if ( ! patterns ) {
 		return null;
@@ -81,12 +93,21 @@ export default function Grid( { type, category } ) {
 	}
 
 	return (
-		<div className="edit-site-library__grid">
+		<Composite
+			{ ...composite }
+			role="listbox"
+			className="edit-site-library__grid"
+			aria-label={ label }
+		>
 			{ isResolving && __( 'Loading' ) }
 			{ ! isResolving &&
 				patterns.map( ( pattern ) => (
-					<GridItem key={ pattern.name } item={ pattern } />
+					<GridItem
+						key={ pattern.name }
+						item={ pattern }
+						composite={ composite }
+					/>
 				) ) }
-		</div>
+		</Composite>
 	);
 }
diff --git a/packages/edit-site/src/components/library/index.js b/packages/edit-site/src/components/library/index.js
index c963530c5d61f9..0a1e05e9abe3e4 100644
--- a/packages/edit-site/src/components/library/index.js
+++ b/packages/edit-site/src/components/library/index.js
@@ -45,7 +45,13 @@ export default function Library() {
 			className="edit-site-library"
 			labels={ regionLabels }
 			notices={ <EditorSnackbars /> }
-			content={ <Grid type={ type } category={ category } /> }
+			content={
+				<Grid
+					type={ type }
+					category={ category }
+					label={ __( 'Patterns list' ) }
+				/>
+			}
 			shortcuts={ {
 				previous: previousShortcut,
 				next: nextShortcut,
diff --git a/packages/edit-site/src/components/library/style.scss b/packages/edit-site/src/components/library/style.scss
index 45a0c906270820..f230a8d009828c 100644
--- a/packages/edit-site/src/components/library/style.scss
+++ b/packages/edit-site/src/components/library/style.scss
@@ -25,6 +25,7 @@
 		// Temp styles for testing - delete asap
 		.edit-site-library__preview {
 			border-radius: $radius-block-ui * 4;
+			cursor: pointer;
 			overflow: hidden;
 		}
 

From 7514f83c4c27ae4f6a6d421c671968e0f0662d20 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 30 May 2023 17:55:50 +1000
Subject: [PATCH 10/73] Add placeholder create pattern modal and action

---
 .../src/components/add-new-pattern/index.js   | 59 +++++++++++++++++
 .../components/create-pattern-modal/index.js  | 64 +++++++++++++++++++
 .../index.js                                  | 13 +++-
 3 files changed, 134 insertions(+), 2 deletions(-)
 create mode 100644 packages/edit-site/src/components/add-new-pattern/index.js
 create mode 100644 packages/edit-site/src/components/create-pattern-modal/index.js

diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js
new file mode 100644
index 00000000000000..14b1296510300c
--- /dev/null
+++ b/packages/edit-site/src/components/add-new-pattern/index.js
@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+// import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { plus } from '@wordpress/icons';
+import { store as noticesStore } from '@wordpress/notices';
+// import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import CreatePatternModal from '../create-pattern-modal';
+// import { unlock } from '../../private-apis';
+
+// const { useHistory } = unlock( routerPrivateApis );
+
+export default function AddNewPattern( { toggleProps } ) {
+	// const history = useHistory();
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const { createErrorNotice } = useDispatch( noticesStore );
+	// const { saveEntityRecord } = useDispatch( coreStore );
+
+	async function createPattern( { name } ) {
+		if ( ! name ) {
+			createErrorNotice( __( 'Name is not defined.' ), {
+				type: 'snackbar',
+			} );
+			return;
+		}
+
+		// TODO: Implement saving of pattern.
+		setIsModalOpen( false );
+	}
+
+	const { as: Toggle = Button, ...restToggleProps } = toggleProps ?? {};
+
+	return (
+		<>
+			<Toggle
+				{ ...restToggleProps }
+				onClick={ () => {
+					setIsModalOpen( true );
+				} }
+				icon={ plus }
+				label={ __( 'Create pattern' ) }
+			/>
+			{ isModalOpen && (
+				<CreatePatternModal
+					closeModal={ () => setIsModalOpen( false ) }
+					onCreate={ createPattern }
+				/>
+			) }
+		</>
+	);
+}
diff --git a/packages/edit-site/src/components/create-pattern-modal/index.js b/packages/edit-site/src/components/create-pattern-modal/index.js
new file mode 100644
index 00000000000000..a324553588eb17
--- /dev/null
+++ b/packages/edit-site/src/components/create-pattern-modal/index.js
@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	TextControl,
+	Button,
+	Modal,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+
+export default function CreatePatternModal( { closeModal, onCreate } ) {
+	const [ name, setName ] = useState( '' );
+	const [ isSubmitting, setIsSubmitting ] = useState( false );
+
+	return (
+		<Modal
+			title={ __( 'Create a pattern' ) }
+			onRequestClose={ closeModal }
+			overlayClassName="edit-site-create-pattern-modal"
+		>
+			<form
+				onSubmit={ async ( event ) => {
+					event.preventDefault();
+					if ( ! name ) {
+						return;
+					}
+					setIsSubmitting( true );
+					await onCreate( { name } );
+				} }
+			>
+				<VStack spacing="4">
+					<TextControl
+						__nextHasNoMarginBottom
+						label={ __( 'Name' ) }
+						value={ name }
+						onChange={ setName }
+						required
+					/>
+					<HStack justify="right">
+						<Button
+							variant="tertiary"
+							onClick={ () => {
+								closeModal();
+							} }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							variant="primary"
+							type="submit"
+							disabled={ ! name }
+							isBusy={ isSubmitting }
+						>
+							{ __( 'Create' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
index 80b57d1ac6304a..269d67c3a1d968 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
@@ -14,12 +14,14 @@ import { getQueryArgs } from '@wordpress/url';
 /**
  * Internal dependencies
  */
+import AddNewPattern from '../add-new-pattern';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import CategoryItem from './category-item';
+import SidebarButton from '../sidebar-button';
+import { store as editSiteStore } from '../../store';
 import usePatternCategories from './use-pattern-categories';
 import useTemplatePartAreas from './use-template-part-areas';
-import { store as editSiteStore } from '../../store';
 
 const DEFAULT_CATEGORY = 'header';
 const DEFAULT_TYPE = 'wp_template_part';
@@ -53,7 +55,14 @@ export default function SidebarNavigationScreenLibrary() {
 			description={ __(
 				'Manage what patterns are available when editing your site.'
 			) }
-			// actions={ {} }
+			actions={
+				<AddNewPattern
+					patternType={ categoryType }
+					toggleProps={ {
+						as: SidebarButton,
+					} }
+				/>
+			}
 			content={
 				<>
 					{ isLoading && __( 'Loading library' ) }

From 2fa73e0ec9add5cc5aae1c860d37108b6cbfafdc Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 31 May 2023 12:01:18 +1000
Subject: [PATCH 11/73] Add category select to create pattern modal

---
 .../components/create-pattern-modal/index.js  | 33 +++++++++++++++++--
 .../create-pattern-modal/style.scss           |  3 ++
 packages/edit-site/src/style.scss             |  1 +
 3 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 packages/edit-site/src/components/create-pattern-modal/style.scss

diff --git a/packages/edit-site/src/components/create-pattern-modal/index.js b/packages/edit-site/src/components/create-pattern-modal/index.js
index a324553588eb17..86c35ee785d0d0 100644
--- a/packages/edit-site/src/components/create-pattern-modal/index.js
+++ b/packages/edit-site/src/components/create-pattern-modal/index.js
@@ -5,22 +5,42 @@ import {
 	TextControl,
 	Button,
 	Modal,
+	SelectControl,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import usePatternCategories from '../sidebar-navigation-screen-library/use-pattern-categories';
+
 export default function CreatePatternModal( { closeModal, onCreate } ) {
 	const [ name, setName ] = useState( '' );
+	const [ categoryName, setCategoryName ] = useState( '' );
 	const [ isSubmitting, setIsSubmitting ] = useState( false );
 
+	const { patternCategories } = usePatternCategories();
+
+	const options = patternCategories.map( ( category ) => ( {
+		label: category.label,
+		value: category.name,
+	} ) );
+
 	return (
 		<Modal
 			title={ __( 'Create a pattern' ) }
 			onRequestClose={ closeModal }
 			overlayClassName="edit-site-create-pattern-modal"
 		>
+			<p>
+				{ __(
+					'Turn this block into a pattern for you to reuse later'
+				) }
+			</p>
+
 			<form
 				onSubmit={ async ( event ) => {
 					event.preventDefault();
@@ -33,11 +53,20 @@ export default function CreatePatternModal( { closeModal, onCreate } ) {
 			>
 				<VStack spacing="4">
 					<TextControl
-						__nextHasNoMarginBottom
+						className="edit-site-create-pattern-modal__input"
 						label={ __( 'Name' ) }
-						value={ name }
 						onChange={ setName }
+						placeholder={ __( 'My pattern' ) }
 						required
+						value={ name }
+						__nextHasNoMarginBottom
+					/>
+					<SelectControl
+						label={ __( 'Category' ) }
+						onChange={ setCategoryName }
+						options={ options }
+						size="__unstable-large"
+						value={ categoryName }
 					/>
 					<HStack justify="right">
 						<Button
diff --git a/packages/edit-site/src/components/create-pattern-modal/style.scss b/packages/edit-site/src/components/create-pattern-modal/style.scss
new file mode 100644
index 00000000000000..f3dcd5fff37c89
--- /dev/null
+++ b/packages/edit-site/src/components/create-pattern-modal/style.scss
@@ -0,0 +1,3 @@
+.edit-site-create-pattern-modal__input input {
+	height: 40px;
+}
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 2d9dd417358412..bb73b50aeb5b65 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -18,6 +18,7 @@
 @import "./components/sidebar-edit-mode/sidebar-card/style.scss";
 @import "./components/sidebar-edit-mode/template-panel/style.scss";
 @import "./components/editor/style.scss";
+@import "./components/create-pattern-modal/style.scss";
 @import "./components/create-template-part-modal/style.scss";
 @import "./components/secondary-sidebar/style.scss";
 @import "./components/welcome-guide/style.scss";

From 99f540b1fa5fa6de69e9f79a1a1dc25ddcde817c Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Wed, 31 May 2023 16:03:14 +1200
Subject: [PATCH 12/73] Remove the library url params when existing library

---
 .../components/sync-state-with-url/use-sync-path-with-url.js    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js b/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js
index 93a6db650b6dc3..67fe6e60860dae 100644
--- a/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js
+++ b/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js
@@ -90,6 +90,8 @@ export default function useSyncPathWithURL() {
 			updateUrlParams( {
 				postType: undefined,
 				postId: undefined,
+				categoryType: undefined,
+				categoryName: undefined,
 				path:
 					navigatorLocation.path === '/'
 						? undefined

From 32a8f6d8891707b948939d50ea6026f45225b312 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 31 May 2023 13:36:14 +0800
Subject: [PATCH 13/73] Fix pattern styles not loading on fresh reload of
 Library page (#51114)

---
 .../edit-site/src/components/library/index.js | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/edit-site/src/components/library/index.js b/packages/edit-site/src/components/library/index.js
index 0a1e05e9abe3e4..9dda5d7323dbf1 100644
--- a/packages/edit-site/src/components/library/index.js
+++ b/packages/edit-site/src/components/library/index.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { EditorSnackbars } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
@@ -13,6 +14,10 @@ import { getQueryArgs } from '@wordpress/url';
  */
 import Grid from './grid';
 import useTitle from '../routes/use-title';
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
+
+const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 
 const DEFAULT_TYPE = 'wp_template_part';
 const DEFAULT_CATEGORY = 'header';
@@ -36,6 +41,11 @@ export default function Library() {
 
 	useTitle( __( 'Library' ) );
 
+	const settings = useSelect(
+		( select ) => select( editSiteStore ).getSettings(),
+		[]
+	);
+
 	// If we only have a single region, due to not including a header on this page,
 	// do we need the aria-label section?
 	const regionLabels = { body: __( 'Library - Content' ) };
@@ -46,11 +56,16 @@ export default function Library() {
 			labels={ regionLabels }
 			notices={ <EditorSnackbars /> }
 			content={
-				<Grid
-					type={ type }
-					category={ category }
-					label={ __( 'Patterns list' ) }
-				/>
+				// 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.
+				<ExperimentalBlockEditorProvider settings={ settings }>
+					<Grid
+						type={ type }
+						category={ category }
+						label={ __( 'Patterns list' ) }
+					/>
+				</ExperimentalBlockEditorProvider>
 			}
 			shortcuts={ {
 				previous: previousShortcut,

From 1ef2c8b964481131b8297aa8d6a715659583324f Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 1 Jun 2023 15:25:12 +1000
Subject: [PATCH 14/73] Hook up template part preview to existing edit page

This also adds a temporary hack to the sidebar-navigation-screen so the back button from the existing template part editing will return to the previously selected category in the library.
---
 .../edit-site/src/components/library/grid.js  |  20 +++-
 .../src/components/library/use-patterns.js    |   2 +
 .../index.js                                  | 104 ++++++++++++++++++
 .../sidebar-navigation-screen/index.js        |  24 +++-
 .../edit-site/src/components/sidebar/index.js |   6 +-
 .../use-sync-path-with-url.js                 |   7 ++
 6 files changed, 152 insertions(+), 11 deletions(-)
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js

diff --git a/packages/edit-site/src/components/library/grid.js b/packages/edit-site/src/components/library/grid.js
index bb931506146ce0..2a24062e9cd812 100644
--- a/packages/edit-site/src/components/library/grid.js
+++ b/packages/edit-site/src/components/library/grid.js
@@ -19,12 +19,22 @@ import { moreHorizontal } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import { useLink } from '../routes/link';
 import usePatterns from './use-patterns';
 
-const GridItem = ( { composite, item } ) => {
+const GridItem = ( { category, composite, item } ) => {
 	const instanceId = useInstanceId( GridItem );
 	const descriptionId = `edit-site-library__pattern-description-${ instanceId }`;
 
+	const { onClick } = useLink( {
+		path: '/library',
+		postType: item.type,
+		postId: item.name,
+		categoryName: category,
+		categoryType: item.type,
+		canvas: 'edit',
+	} );
+
 	return (
 		<div
 			className="edit-site-library__pattern"
@@ -36,9 +46,10 @@ const GridItem = ( { composite, item } ) => {
 				role="option"
 				as="div"
 				{ ...composite }
-				onClick={ () => {
-					// TODO: Implement pattern editing flow.
-				} }
+				onClick={
+					// TODO: When patterns can be edited this should simply call onClick
+					item.type === 'wp_template_part' ? onClick : undefined
+				}
 			>
 				<BlockPreview blocks={ item.blocks } />
 				{ !! item.description && (
@@ -105,6 +116,7 @@ export default function Grid( { category, label, type } ) {
 					<GridItem
 						key={ pattern.name }
 						item={ pattern }
+						category={ category }
 						composite={ composite }
 					/>
 				) ) }
diff --git a/packages/edit-site/src/components/library/use-patterns.js b/packages/edit-site/src/components/library/use-patterns.js
index 58c80695231bed..0f634a018addb9 100644
--- a/packages/edit-site/src/components/library/use-patterns.js
+++ b/packages/edit-site/src/components/library/use-patterns.js
@@ -22,6 +22,7 @@ const toPattern = ( templatePart ) => ( {
 	name: createTemplatePartId( templatePart.theme, templatePart.slug ),
 	title: templatePart.title.rendered,
 	blocks: parse( templatePart.content.raw ),
+	type: templatePart.type,
 	templatePart,
 } );
 
@@ -90,6 +91,7 @@ const useBlockPatternsByCategory = ( category, postType = PATTERNS ) => {
 				)
 				.map( ( pattern ) => ( {
 					...pattern,
+					type: 'pattern',
 					blocks: parse( pattern.content ),
 				} ) ),
 		[ blockPatterns, restBlockPatterns ]
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js
new file mode 100644
index 00000000000000..fbaf69eb42186c
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js
@@ -0,0 +1,104 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf, _x } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { pencil } from '@wordpress/icons';
+import {
+	__experimentalUseNavigator as useNavigator,
+	Icon,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import useEditedEntityRecord from '../use-edited-entity-record';
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
+import SidebarButton from '../sidebar-button';
+import { useAddedBy } from '../list/added-by';
+
+function usePatternTitleAndDescription( postType, postId ) {
+	const { getDescription, getTitle, record } = useEditedEntityRecord(
+		postType,
+		postId
+	);
+	const currentTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme(),
+		[]
+	);
+	const addedBy = useAddedBy( postType, postId );
+	const isAddedByActiveTheme =
+		addedBy.type === 'theme' && record.theme === currentTheme?.stylesheet;
+	const title = getTitle();
+	let descriptionText = getDescription();
+
+	if ( ! descriptionText && addedBy.text ) {
+		descriptionText = sprintf(
+			// translators: %s: template part title e.g: "Header".
+			__( 'This is your %s template part.' ),
+			getTitle()
+		);
+	}
+
+	const description = (
+		<>
+			{ descriptionText }
+
+			{ addedBy.text && ! isAddedByActiveTheme && (
+				<span className="edit-site-sidebar-navigation-screen-template__added-by-description">
+					<span className="edit-site-sidebar-navigation-screen-template__added-by-description-author">
+						<span className="edit-site-sidebar-navigation-screen-template__added-by-description-author-icon">
+							{ addedBy.imageUrl ? (
+								<img
+									src={ addedBy.imageUrl }
+									alt=""
+									width="24"
+									height="24"
+								/>
+							) : (
+								<Icon icon={ addedBy.icon } />
+							) }
+						</span>
+						{ addedBy.text }
+					</span>
+
+					{ addedBy.isCustomized && (
+						<span className="edit-site-sidebar-navigation-screen-template__added-by-description-customized">
+							{ _x( '(Customized)', 'template part' ) }
+						</span>
+					) }
+				</span>
+			) }
+		</>
+	);
+
+	return { title, description };
+}
+
+export default function SidebarNavigationScreenPattern() {
+	const { params } = useNavigator();
+	const { postType, postId } = params;
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const { title, description } = usePatternTitleAndDescription(
+		postType,
+		postId
+	);
+
+	return (
+		<SidebarNavigationScreen
+			title={ title }
+			actions={
+				<SidebarButton
+					onClick={ () => setCanvasMode( 'edit' ) }
+					label={ __( 'Edit' ) }
+					icon={ pencil }
+				/>
+			}
+			backPath={ '/library' }
+			description={ description }
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
index d62d95d626a879..c60757673a2219 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
@@ -3,9 +3,10 @@
  */
 import {
 	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	__experimentalNavigatorToParentButton as NavigatorToParentButton,
 	__experimentalHeading as Heading,
+	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+	__experimentalUseNavigator as useNavigator,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { isRTL, __, sprintf } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
@@ -31,6 +32,7 @@ export default function SidebarNavigationScreen( {
 	content,
 	footer,
 	description,
+	backPath,
 } ) {
 	const { dashboardLink } = useSelect( ( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
@@ -39,7 +41,9 @@ export default function SidebarNavigationScreen( {
 		};
 	}, [] );
 	const { getTheme } = useSelect( coreStore );
+	const { goTo } = useNavigator();
 	const theme = getTheme( currentlyPreviewingTheme() );
+	const icon = isRTL() ? chevronRight : chevronLeft;
 
 	return (
 		<>
@@ -53,15 +57,23 @@ export default function SidebarNavigationScreen( {
 					alignment="flex-start"
 					className="edit-site-sidebar-navigation-screen__title-icon"
 				>
-					{ ! isRoot ? (
+					{ ! isRoot && ! backPath && (
 						<NavigatorToParentButton
 							as={ SidebarButton }
-							icon={ isRTL() ? chevronRight : chevronLeft }
+							icon={ icon }
 							label={ __( 'Back' ) }
 						/>
-					) : (
+					) }
+					{ ! isRoot && backPath && (
+						<SidebarButton
+							onClick={ () => goTo( backPath, { isBack: true } ) }
+							icon={ icon }
+							label={ __( 'Back' ) }
+						/>
+					) }
+					{ isRoot && (
 						<SidebarButton
-							icon={ isRTL() ? chevronRight : chevronLeft }
+							icon={ icon }
 							label={
 								! isPreviewingTheme()
 									? __( 'Go back to the Dashboard' )
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
index 5c36eb964fd338..ded8ce0d333a94 100644
--- a/packages/edit-site/src/components/sidebar/index.js
+++ b/packages/edit-site/src/components/sidebar/index.js
@@ -16,6 +16,7 @@ import SidebarNavigationScreenLibrary from '../sidebar-navigation-screen-library
 import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';
 import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
 import SidebarNavigationScreenTemplatePart from '../sidebar-navigation-screen-template-part';
+import SidebarNavigationScreenPattern from '../sidebar-navigation-screen-pattern';
 import useSyncPathWithURL, {
 	getPathFromURL,
 } from '../sync-state-with-url/use-sync-path-with-url';
@@ -53,12 +54,15 @@ function SidebarScreens() {
 			<NavigatorScreen path="/page/:postId">
 				<SidebarNavigationScreenPage />
 			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template|wp_template_part)">
+			<NavigatorScreen path="/:postType(wp_template)">
 				<SidebarNavigationScreenTemplates />
 			</NavigatorScreen>
 			<NavigatorScreen path="/library">
 				<SidebarNavigationScreenLibrary />
 			</NavigatorScreen>
+			<NavigatorScreen path="/:postType(wp_template_part)/:postId">
+				<SidebarNavigationScreenPattern />
+			</NavigatorScreen>
 			<NavigatorScreen path="/:postType(wp_template)/all">
 				<SidebarNavigationScreenTemplatesBrowse />
 			</NavigatorScreen>
diff --git a/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js b/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js
index 67fe6e60860dae..723083de103ad2 100644
--- a/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js
+++ b/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js
@@ -86,6 +86,13 @@ export default function useSyncPathWithURL() {
 				postId: navigatorParams?.postId,
 				path: undefined,
 			} );
+		} else if ( navigatorLocation.path === '/library' ) {
+			updateUrlParams( {
+				postType: undefined,
+				postId: undefined,
+				canvas: undefined,
+				path: navigatorLocation.path,
+			} );
 		} else {
 			updateUrlParams( {
 				postType: undefined,

From 0123b0ba0d7ca6d84ebe2e44bd261691817bccf0 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 1 Jun 2023 17:07:10 +1000
Subject: [PATCH 15/73] Fix template part pattern display in library

---
 .../edit-site/src/components/library/index.js |  8 +--
 .../library/use-library-settings.js           | 53 +++++++++++++++++++
 2 files changed, 55 insertions(+), 6 deletions(-)
 create mode 100644 packages/edit-site/src/components/library/use-library-settings.js

diff --git a/packages/edit-site/src/components/library/index.js b/packages/edit-site/src/components/library/index.js
index 9dda5d7323dbf1..ed30dcf06a6892 100644
--- a/packages/edit-site/src/components/library/index.js
+++ b/packages/edit-site/src/components/library/index.js
@@ -13,9 +13,9 @@ import { getQueryArgs } from '@wordpress/url';
  * Internal dependencies
  */
 import Grid from './grid';
+import useLibrarySettings from './use-library-settings';
 import useTitle from '../routes/use-title';
 import { unlock } from '../../private-apis';
-import { store as editSiteStore } from '../../store';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 
@@ -26,6 +26,7 @@ export default function Library() {
 	const { categoryType, categoryName } = getQueryArgs( window.location.href );
 	const type = categoryType || DEFAULT_TYPE;
 	const category = categoryName || DEFAULT_CATEGORY;
+	const settings = useLibrarySettings();
 
 	// Do we need shortcuts if we aren't displaying a header?
 	const { previousShortcut, nextShortcut } = useSelect( ( select ) => {
@@ -41,11 +42,6 @@ export default function Library() {
 
 	useTitle( __( 'Library' ) );
 
-	const settings = useSelect(
-		( select ) => select( editSiteStore ).getSettings(),
-		[]
-	);
-
 	// If we only have a single region, due to not including a header on this page,
 	// do we need the aria-label section?
 	const regionLabels = { body: __( 'Library - Content' ) };
diff --git a/packages/edit-site/src/components/library/use-library-settings.js b/packages/edit-site/src/components/library/use-library-settings.js
new file mode 100644
index 00000000000000..aa78e51a3a9e59
--- /dev/null
+++ b/packages/edit-site/src/components/library/use-library-settings.js
@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
+
+export default function useLibrarySettings() {
+	const storedSettings = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+		return getSettings();
+	}, [] );
+
+	const settingsBlockPatterns =
+		storedSettings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
+		storedSettings.__experimentalBlockPatterns; // WP 5.9
+
+	const restBlockPatterns = useSelect(
+		( select ) => select( coreStore ).getBlockPatterns(),
+		[]
+	);
+
+	const blockPatterns = useMemo(
+		() =>
+			[
+				...( settingsBlockPatterns || [] ),
+				...( restBlockPatterns || [] ),
+			].filter(
+				( x, index, arr ) =>
+					index === arr.findIndex( ( y ) => x.name === y.name )
+			),
+		[ ( settingsBlockPatterns, restBlockPatterns ) ]
+	);
+
+	const settings = useMemo( () => {
+		const { __experimentalAdditionalBlockPatterns, ...restStoredSettings } =
+			storedSettings;
+
+		return {
+			...restStoredSettings,
+			__experimentalBlockPatterns: blockPatterns,
+			__unstableIsPreviewMode: true,
+		};
+	}, [ storedSettings, blockPatterns ] );
+
+	return settings;
+}

From 0b6737d7a28968527dda0067bb21f7c7463bdcb7 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 1 Jun 2023 18:45:49 +1000
Subject: [PATCH 16/73] Try retrieving user created patterns from wp_block CPT

---
 .../src/components/library/use-patterns.js    | 59 ++++++++++++++++---
 .../use-pattern-categories.js                 | 19 ++++++
 2 files changed, 71 insertions(+), 7 deletions(-)

diff --git a/packages/edit-site/src/components/library/use-patterns.js b/packages/edit-site/src/components/library/use-patterns.js
index 0f634a018addb9..5c5cfe6c532761 100644
--- a/packages/edit-site/src/components/library/use-patterns.js
+++ b/packages/edit-site/src/components/library/use-patterns.js
@@ -12,13 +12,15 @@ import { useMemo } from '@wordpress/element';
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
 
+const EMPTY_PATTERN_LIST = [];
 const TEMPLATE_PARTS = 'wp_template_part';
 const PATTERNS = 'pattern';
+const USER_PATTERNS = 'wp_block';
 
 const createTemplatePartId = ( theme, slug ) =>
 	theme && slug ? theme + '//' + slug : null;
 
-const toPattern = ( templatePart ) => ( {
+const templatePartToPattern = ( templatePart ) => ( {
 	name: createTemplatePartId( templatePart.theme, templatePart.slug ),
 	title: templatePart.title.rendered,
 	blocks: parse( templatePart.content.raw ),
@@ -30,7 +32,10 @@ const useTemplatePartsAsPatterns = ( area, postType = TEMPLATE_PARTS ) => {
 	const { templateParts, isResolving } = useSelect(
 		( select ) => {
 			if ( postType !== TEMPLATE_PARTS ) {
-				return { templateParts: [], isResolving: false };
+				return {
+					templateParts: EMPTY_PATTERN_LIST,
+					isResolving: false,
+				};
 			}
 
 			const { getEntityRecords, isResolving: _isResolving } =
@@ -51,14 +56,14 @@ const useTemplatePartsAsPatterns = ( area, postType = TEMPLATE_PARTS ) => {
 
 	const filteredTemplateParts = useMemo( () => {
 		if ( ! templateParts ) {
-			return [];
+			return EMPTY_PATTERN_LIST;
 		}
 
 		const partsAsPatterns = [];
 
 		templateParts?.forEach( ( templatePart ) => {
 			if ( ! area || templatePart.area === area ) {
-				partsAsPatterns.push( toPattern( templatePart ) );
+				partsAsPatterns.push( templatePartToPattern( templatePart ) );
 			}
 		} );
 
@@ -98,11 +103,11 @@ const useBlockPatternsByCategory = ( category, postType = PATTERNS ) => {
 	);
 
 	if ( postType !== PATTERNS ) {
-		return [];
+		return EMPTY_PATTERN_LIST;
 	}
 
 	if ( ! category ) {
-		return patterns || [];
+		return patterns || EMPTY_PATTERN_LIST;
 	}
 
 	return patterns.filter( ( pattern ) =>
@@ -110,8 +115,48 @@ const useBlockPatternsByCategory = ( category, postType = PATTERNS ) => {
 	);
 };
 
+const reusableBlockToPattern = ( reusableBlock ) => ( {
+	blocks: parse( reusableBlock.content.raw ),
+	// TODO: Update this when we allow non-synced patterns to belong in multiple categories.
+	categories: [ reusableBlock.meta?.wp_block_categories ],
+	name: reusableBlock.slug,
+	title: reusableBlock.title.raw,
+	type: reusableBlock.type,
+	reusableBlock,
+} );
+
+const useUserPatterns = ( category, categoryType = PATTERNS ) => {
+	const postType = categoryType === PATTERNS ? USER_PATTERNS : categoryType;
+	const userPatterns = useSelect(
+		( select ) => {
+			if ( postType !== USER_PATTERNS ) {
+				return EMPTY_PATTERN_LIST;
+			}
+
+			const { getEntityRecords } = select( coreStore );
+			const nonSyncedPatterns = getEntityRecords( 'postType', postType, {
+				per_page: -1,
+			} );
+
+			if ( ! nonSyncedPatterns ) {
+				return EMPTY_PATTERN_LIST;
+			}
+
+			return nonSyncedPatterns.map( ( item ) =>
+				reusableBlockToPattern( item )
+			);
+		},
+		[ postType ]
+	);
+
+	return userPatterns.filter( ( pattern ) =>
+		pattern.categories?.includes( category )
+	);
+};
+
 export default function usePatterns( categoryType, categoryName ) {
 	const patterns = useBlockPatternsByCategory( categoryName, categoryType );
+	const userPatterns = useUserPatterns( categoryName, categoryType );
 	const { templateParts, isResolving } = useTemplatePartsAsPatterns(
 		categoryName,
 		categoryType
@@ -119,6 +164,6 @@ export default function usePatterns( categoryType, categoryName ) {
 
 	// TODO: Add sorting etc.
 
-	const results = [ ...templateParts, ...patterns ];
+	const results = [ ...templateParts, ...patterns, ...userPatterns ];
 	return [ results, isResolving ];
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
index 1f1b2341e8202b..0a1b95a6fdf75f 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
@@ -11,6 +11,22 @@ import { useMemo } from '@wordpress/element';
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
 
+const useUserPatterns = () => {
+	const userPatterns = useSelect( ( select ) => {
+		const { getEntityRecords } = select( coreStore );
+		const nonSyncedPatterns = getEntityRecords( 'postType', 'wp_block', {
+			per_page: -1,
+		} );
+
+		return nonSyncedPatterns?.map( ( item ) => ( {
+			categories: [ item.meta?.wp_block_categories ],
+			name: item.slug,
+		} ) );
+	}, [] );
+
+	return userPatterns;
+};
+
 export default function usePatternCategories() {
 	const { blockPatterns, blockPatternCategories } = useSelect( ( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
@@ -34,11 +50,14 @@ export default function usePatternCategories() {
 		} )
 	);
 
+	const userPatterns = useUserPatterns();
+
 	const patterns = useMemo(
 		() =>
 			[
 				...( blockPatterns || [] ),
 				...( restBlockPatterns || [] ),
+				...( userPatterns || [] ),
 			].filter(
 				( x, index, arr ) =>
 					index === arr.findIndex( ( y ) => x.name === y.name )

From dc0d64f0e885819d022a5bb04c698265c185a19a Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 2 Jun 2023 10:05:25 +1000
Subject: [PATCH 17/73] Update now user created patterns have category arrays

---
 packages/edit-site/src/components/library/use-patterns.js      | 3 +--
 .../use-pattern-categories.js                                  | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/library/use-patterns.js b/packages/edit-site/src/components/library/use-patterns.js
index 5c5cfe6c532761..aec76e68643059 100644
--- a/packages/edit-site/src/components/library/use-patterns.js
+++ b/packages/edit-site/src/components/library/use-patterns.js
@@ -117,8 +117,7 @@ const useBlockPatternsByCategory = ( category, postType = PATTERNS ) => {
 
 const reusableBlockToPattern = ( reusableBlock ) => ( {
 	blocks: parse( reusableBlock.content.raw ),
-	// TODO: Update this when we allow non-synced patterns to belong in multiple categories.
-	categories: [ reusableBlock.meta?.wp_block_categories ],
+	categories: reusableBlock.meta?.wp_block_categories,
 	name: reusableBlock.slug,
 	title: reusableBlock.title.raw,
 	type: reusableBlock.type,
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
index 0a1b95a6fdf75f..5269f917cfcf43 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
@@ -19,7 +19,7 @@ const useUserPatterns = () => {
 		} );
 
 		return nonSyncedPatterns?.map( ( item ) => ( {
-			categories: [ item.meta?.wp_block_categories ],
+			categories: item.meta?.wp_block_categories,
 			name: item.slug,
 		} ) );
 	}, [] );

From aa3095887a18f1b203a207ec507f96eca5c9d61a Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 2 Jun 2023 16:18:57 +1000
Subject: [PATCH 18/73] Update user created patterns based of new meta wp_block
 property

---
 packages/edit-site/src/components/library/use-patterns.js       | 2 +-
 .../sidebar-navigation-screen-library/use-pattern-categories.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/library/use-patterns.js b/packages/edit-site/src/components/library/use-patterns.js
index aec76e68643059..fdc3f3f1a0ca6f 100644
--- a/packages/edit-site/src/components/library/use-patterns.js
+++ b/packages/edit-site/src/components/library/use-patterns.js
@@ -117,7 +117,7 @@ const useBlockPatternsByCategory = ( category, postType = PATTERNS ) => {
 
 const reusableBlockToPattern = ( reusableBlock ) => ( {
 	blocks: parse( reusableBlock.content.raw ),
-	categories: reusableBlock.meta?.wp_block_categories,
+	categories: reusableBlock.meta?.wp_block?.categories,
 	name: reusableBlock.slug,
 	title: reusableBlock.title.raw,
 	type: reusableBlock.type,
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
index 5269f917cfcf43..12287ecd257654 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
@@ -19,7 +19,7 @@ const useUserPatterns = () => {
 		} );
 
 		return nonSyncedPatterns?.map( ( item ) => ( {
-			categories: item.meta?.wp_block_categories,
+			categories: item.meta?.wp_block?.categories,
 			name: item.slug,
 		} ) );
 	}, [] );

From 0be9c45222e58a4cb5caec8f3fb566bb3ca7c84a Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 2 Jun 2023 16:30:13 +1000
Subject: [PATCH 19/73] Remove new template part screen as it was covered by
 pattern screen

---
 .../index.js                                  |   6 +-
 .../index.js                                  | 167 ------------------
 ...template-part-navigation-menu-list-item.js |  28 ---
 .../template-part-navigation-menu-list.js     |  21 ---
 .../template-part-navigation-menu.js          |  30 ----
 .../template-part-navigation-menus.js         |  33 ----
 .../edit-site/src/components/sidebar/index.js |   4 -
 7 files changed, 3 insertions(+), 286 deletions(-)
 delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-template-part/index.js
 delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-template-part/template-part-navigation-menu-list-item.js
 delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-template-part/template-part-navigation-menu-list.js
 delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-template-part/template-part-navigation-menu.js
 delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-template-part/template-part-navigation-menus.js

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js
index fbaf69eb42186c..fc733387d4c3ad 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js
@@ -37,8 +37,8 @@ function usePatternTitleAndDescription( postType, postId ) {
 
 	if ( ! descriptionText && addedBy.text ) {
 		descriptionText = sprintf(
-			// translators: %s: template part title e.g: "Header".
-			__( 'This is your %s template part.' ),
+			// translators: %s: pattern title e.g: "Header".
+			__( 'This is your %s pattern.' ),
 			getTitle()
 		);
 	}
@@ -67,7 +67,7 @@ function usePatternTitleAndDescription( postType, postId ) {
 
 					{ addedBy.isCustomized && (
 						<span className="edit-site-sidebar-navigation-screen-template__added-by-description-customized">
-							{ _x( '(Customized)', 'template part' ) }
+							{ _x( '(Customized)', 'pattern' ) }
 						</span>
 					) }
 				</span>
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template-part/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-template-part/index.js
deleted file mode 100644
index 664c708792dc9b..00000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-template-part/index.js
+++ /dev/null
@@ -1,167 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf, _x } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { pencil } from '@wordpress/icons';
-import {
-	__experimentalUseNavigator as useNavigator,
-	Icon,
-} from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import useEditedEntityRecord from '../use-edited-entity-record';
-import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
-import SidebarButton from '../sidebar-button';
-import { useAddedBy } from '../list/added-by';
-import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
-import TemplatePartNavigationMenus from './template-part-navigation-menus';
-
-function useTemplateDetails( postType, postId ) {
-	const { getDescription, getTitle, record } = useEditedEntityRecord(
-		postType,
-		postId
-	);
-
-	const currentTheme = useSelect(
-		( select ) => select( coreStore ).getCurrentTheme(),
-		[]
-	);
-	const addedBy = useAddedBy( postType, postId );
-	const isAddedByActiveTheme =
-		addedBy.type === 'theme' && record.theme === currentTheme?.stylesheet;
-	const title = getTitle();
-	let descriptionText = getDescription();
-
-	if ( ! descriptionText && addedBy.text ) {
-		descriptionText = sprintf(
-			// translators: %s: template part title e.g: "Header".
-			__( 'This is your %s template part.' ),
-			getTitle()
-		);
-	}
-
-	const description = (
-		<>
-			{ descriptionText }
-
-			{ addedBy.text && ! isAddedByActiveTheme && (
-				<span className="edit-site-sidebar-navigation-screen-template__added-by-description">
-					<span className="edit-site-sidebar-navigation-screen-template__added-by-description-author">
-						<span className="edit-site-sidebar-navigation-screen-template__added-by-description-author-icon">
-							{ addedBy.imageUrl ? (
-								<img
-									src={ addedBy.imageUrl }
-									alt=""
-									width="24"
-									height="24"
-								/>
-							) : (
-								<Icon icon={ addedBy.icon } />
-							) }
-						</span>
-						{ addedBy.text }
-					</span>
-
-					{ addedBy.isCustomized && (
-						<span className="edit-site-sidebar-navigation-screen-template__added-by-description-customized">
-							{ _x( '(Customized)', 'template part' ) }
-						</span>
-					) }
-				</span>
-			) }
-		</>
-	);
-
-	const footer = !! record?.modified ? (
-		<SidebarNavigationScreenDetailsFooter
-			lastModifiedDateTime={ record.modified }
-		/>
-	) : null;
-
-	return { title, description, footer };
-}
-
-export default function SidebarNavigationScreenTemplatePart() {
-	const { params } = useNavigator();
-	const { postType, postId } = params;
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-
-	const { record } = useEditedEntityRecord( postType, postId );
-
-	const { title, description, footer } = useTemplateDetails(
-		postType,
-		postId
-	);
-
-	const navigationBlocks = getBlocksOfTypeFromBlocks(
-		'core/navigation',
-		record?.blocks
-	);
-
-	// Get a list of the navigation menu ids from the navigation blocks'
-	// ref attribute.
-	const navigationMenuIds = navigationBlocks?.map( ( block ) => {
-		return block.attributes.ref;
-	} );
-
-	return (
-		<SidebarNavigationScreen
-			title={ title }
-			actions={
-				<SidebarButton
-					onClick={ () => setCanvasMode( 'edit' ) }
-					label={ __( 'Edit' ) }
-					icon={ pencil }
-				/>
-			}
-			description={ description }
-			content={
-				<TemplatePartNavigationMenus menus={ navigationMenuIds } />
-			}
-			footer={ footer }
-		/>
-	);
-}
-
-/**
- * Retrieves a list of specific blocks from a given tree of blocks.
- *
- * @param {string} targetBlock the name of the block to find.
- * @param {Array}  blocks      a list of blocks from the template part entity.
- * @return {Array} a list of any navigation blocks found in the blocks.
- */
-function getBlocksOfTypeFromBlocks( targetBlock, blocks ) {
-	if ( ! targetBlock || ! blocks?.length ) return [];
-
-	const findInBlocks = ( _blocks ) => {
-		if ( ! _blocks ) {
-			return [];
-		}
-
-		const navigationBlocks = [];
-
-		for ( const block of _blocks ) {
-			if ( block.name === targetBlock ) {
-				navigationBlocks.push( block );
-			}
-
-			if ( block?.innerBlocks ) {
-				const innerNavigationBlocks = findInBlocks( block.innerBlocks );
-
-				if ( innerNavigationBlocks.length ) {
-					navigationBlocks.push( ...innerNavigationBlocks );
-				}
-			}
-		}
-
-		return navigationBlocks;
-	};
-
-	return findInBlocks( blocks );
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template-part/template-part-navigation-menu-list-item.js b/packages/edit-site/src/components/sidebar-navigation-screen-template-part/template-part-navigation-menu-list-item.js
deleted file mode 100644
index b685c766107a32..00000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-template-part/template-part-navigation-menu-list-item.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEntityProp } from '@wordpress/core-data';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import SidebarNavigationItem from '../sidebar-navigation-item';
-import { useLink } from '../routes/link';
-
-export default function TemplatePartNavigationMenuListItem( { id } ) {
-	const [ title ] = useEntityProp( 'postType', 'wp_navigation', 'title', id );
-
-	const linkInfo = useLink( {
-		postId: id,
-		postType: 'wp_navigation',
-	} );
-
-	if ( ! id ) return null;
-
-	return (
-		<SidebarNavigationItem withChevron { ...linkInfo }>
-			{ title || __( '(no title)' ) }
-		</SidebarNavigationItem>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template-part/template-part-navigation-menu-list.js b/packages/edit-site/src/components/sidebar-navigation-screen-template-part/template-part-navigation-menu-list.js
deleted file mode 100644
index 4171b1e782575e..00000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-template-part/template-part-navigation-menu-list.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-/**
- * Internal dependencies
- */
-import TemplatePartNavigationMenuListItem from './template-part-navigation-menu-list-item';
-
-export default function TemplatePartNavigationMenuList( { menus } ) {
-	return (
-		<ItemGroup className="edit-site-sidebar-navigation-screen-template-part-navigation-menu-list">
-			{ menus.map( ( menuId ) => (
-				<TemplatePartNavigationMenuListItem
-					key={ menuId }
-					id={ menuId }
-				/>
-			) ) }
-		</ItemGroup>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template-part/template-part-navigation-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-template-part/template-part-navigation-menu.js
deleted file mode 100644
index f451c17e00adb7..00000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-template-part/template-part-navigation-menu.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { __experimentalHeading as Heading } from '@wordpress/components';
-import { useEntityProp } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import NavigationMenuEditor from '../sidebar-navigation-screen-navigation-menu/navigation-menu-editor';
-
-export default function TemplatePartNavigationMenu( { id } ) {
-	const [ title ] = useEntityProp( 'postType', 'wp_navigation', 'title', id );
-
-	if ( ! id ) return null;
-
-	return (
-		<>
-			<Heading
-				className="edit-site-sidebar-navigation-screen-template-part-navigation-menu__title"
-				size="12"
-				upperCase={ true }
-			>
-				{ title?.rendered || __( 'Navigation' ) }
-			</Heading>
-			<NavigationMenuEditor navigationMenuId={ id } />
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template-part/template-part-navigation-menus.js b/packages/edit-site/src/components/sidebar-navigation-screen-template-part/template-part-navigation-menus.js
deleted file mode 100644
index 418b1d4423b202..00000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-template-part/template-part-navigation-menus.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { __experimentalHeading as Heading } from '@wordpress/components';
-/**
- * Internal dependencies
- */
-import TemplatePartNavigationMenu from './template-part-navigation-menu';
-import TemplatePartNavigationMenuList from './template-part-navigation-menu-list';
-
-export default function TemplatePartNavigationMenus( { menus } ) {
-	if ( ! menus.length ) return null;
-
-	// if there is a single menu then render TemplatePartNavigationMenu
-	if ( menus.length === 1 ) {
-		return <TemplatePartNavigationMenu id={ menus[ 0 ] } />;
-	}
-
-	// if there are multiple menus then render TemplatePartNavigationMenuList
-	return (
-		<>
-			<Heading
-				className="edit-site-sidebar-navigation-screen-template-part-navigation-menu__title"
-				size="12"
-				upperCase={ true }
-			>
-				{ __( 'Navigation' ) }
-			</Heading>
-			<TemplatePartNavigationMenuList menus={ menus } />
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
index ded8ce0d333a94..1249d14d378662 100644
--- a/packages/edit-site/src/components/sidebar/index.js
+++ b/packages/edit-site/src/components/sidebar/index.js
@@ -15,7 +15,6 @@ import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
 import SidebarNavigationScreenLibrary from '../sidebar-navigation-screen-library';
 import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';
 import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
-import SidebarNavigationScreenTemplatePart from '../sidebar-navigation-screen-template-part';
 import SidebarNavigationScreenPattern from '../sidebar-navigation-screen-pattern';
 import useSyncPathWithURL, {
 	getPathFromURL,
@@ -69,9 +68,6 @@ function SidebarScreens() {
 			<NavigatorScreen path="/:postType(wp_template)/:postId">
 				<SidebarNavigationScreenTemplate />
 			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template_part)/:postId">
-				<SidebarNavigationScreenTemplatePart />
-			</NavigatorScreen>
 		</>
 	);
 }

From 46d813047ad1a3420a67fc74c6e022b368e06439 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 2 Jun 2023 16:46:05 +1000
Subject: [PATCH 20/73] Allow user created patterns to be clicked on

---
 packages/edit-site/src/components/library/grid.js         | 7 ++-----
 packages/edit-site/src/components/library/use-patterns.js | 1 +
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/edit-site/src/components/library/grid.js b/packages/edit-site/src/components/library/grid.js
index 2a24062e9cd812..6f332022483789 100644
--- a/packages/edit-site/src/components/library/grid.js
+++ b/packages/edit-site/src/components/library/grid.js
@@ -29,7 +29,7 @@ const GridItem = ( { category, composite, item } ) => {
 	const { onClick } = useLink( {
 		path: '/library',
 		postType: item.type,
-		postId: item.name,
+		postId: item.type === 'wp_block' ? item.id : item.name,
 		categoryName: category,
 		categoryType: item.type,
 		canvas: 'edit',
@@ -46,10 +46,7 @@ const GridItem = ( { category, composite, item } ) => {
 				role="option"
 				as="div"
 				{ ...composite }
-				onClick={
-					// TODO: When patterns can be edited this should simply call onClick
-					item.type === 'wp_template_part' ? onClick : undefined
-				}
+				onClick={ item.type !== 'pattern' ? onClick : undefined }
 			>
 				<BlockPreview blocks={ item.blocks } />
 				{ !! item.description && (
diff --git a/packages/edit-site/src/components/library/use-patterns.js b/packages/edit-site/src/components/library/use-patterns.js
index fdc3f3f1a0ca6f..337ddb142a1ec4 100644
--- a/packages/edit-site/src/components/library/use-patterns.js
+++ b/packages/edit-site/src/components/library/use-patterns.js
@@ -118,6 +118,7 @@ const useBlockPatternsByCategory = ( category, postType = PATTERNS ) => {
 const reusableBlockToPattern = ( reusableBlock ) => ( {
 	blocks: parse( reusableBlock.content.raw ),
 	categories: reusableBlock.meta?.wp_block?.categories,
+	id: reusableBlock.id,
 	name: reusableBlock.slug,
 	title: reusableBlock.title.raw,
 	type: reusableBlock.type,

From 834869926a76dd7dec1206e8fcfb936cd3d54a19 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 2 Jun 2023 16:50:29 +1000
Subject: [PATCH 21/73] Fix typos

---
 packages/edit-site/src/components/editor/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index 9436b79e786743..7b098ced577f3b 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -114,7 +114,7 @@ export default function Editor( { isLoading } ) {
 	const isViewMode = canvasMode === 'view';
 	const isEditMode = canvasMode === 'edit';
 	const showVisualEditor = isViewMode || editorMode === 'visual';
-	const shouldShowBlockBreakcrumbs =
+	const shouldShowBlockBreadcrumbs =
 		showBlockBreadcrumbs &&
 		isEditMode &&
 		showVisualEditor &&
@@ -157,7 +157,7 @@ export default function Editor( { isLoading } ) {
 	}
 
 	// Only announce the title once the editor is ready to prevent "Replace"
-	// action in <URlQueryController> from double-announcing.
+	// action in <URLQueryController> from double-announcing.
 	useTitle( hasLoadedPost && title );
 
 	return (
@@ -227,7 +227,7 @@ export default function Editor( { isLoading } ) {
 								)
 							}
 							footer={
-								shouldShowBlockBreakcrumbs && (
+								shouldShowBlockBreadcrumbs && (
 									<BlockBreadcrumb
 										rootLabelText={
 											hasPageContentFocus

From 4860fafb75f2a1ba7db406d5836ae581c78b194d Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 2 Jun 2023 17:09:49 +1000
Subject: [PATCH 22/73] Fix classnames

---
 .../components/sidebar-navigation-screen-pattern/index.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js
index fc733387d4c3ad..7d23d5f4937d06 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js
@@ -48,9 +48,9 @@ function usePatternTitleAndDescription( postType, postId ) {
 			{ descriptionText }
 
 			{ addedBy.text && ! isAddedByActiveTheme && (
-				<span className="edit-site-sidebar-navigation-screen-template__added-by-description">
-					<span className="edit-site-sidebar-navigation-screen-template__added-by-description-author">
-						<span className="edit-site-sidebar-navigation-screen-template__added-by-description-author-icon">
+				<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description">
+					<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-author">
+						<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-author-icon">
 							{ addedBy.imageUrl ? (
 								<img
 									src={ addedBy.imageUrl }
@@ -66,7 +66,7 @@ function usePatternTitleAndDescription( postType, postId ) {
 					</span>
 
 					{ addedBy.isCustomized && (
-						<span className="edit-site-sidebar-navigation-screen-template__added-by-description-customized">
+						<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-customized">
 							{ _x( '(Customized)', 'pattern' ) }
 						</span>
 					) }

From 1bc7c9128b02cfb6e36174c61a08ef7c3a4dbd1b Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 2 Jun 2023 18:20:15 +1000
Subject: [PATCH 23/73] Hook up reusable block editing

---
 docs/reference-guides/data/data-core-edit-site.md | 12 ++++++++++++
 packages/edit-site/src/components/editor/index.js | 11 +++++++----
 .../sidebar-navigation-screen-pattern/index.js    | 12 ++++++++++++
 .../edit-site/src/components/sidebar/index.js     |  2 +-
 .../use-init-edited-entity-from-url.js            |  5 ++++-
 .../sync-state-with-url/use-sync-path-with-url.js |  1 +
 packages/edit-site/src/store/actions.js           | 15 +++++++++++++++
 7 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/docs/reference-guides/data/data-core-edit-site.md b/docs/reference-guides/data/data-core-edit-site.md
index a2610c2647c65d..9c77919fad9cbb 100644
--- a/docs/reference-guides/data/data-core-edit-site.md
+++ b/docs/reference-guides/data/data-core-edit-site.md
@@ -366,6 +366,18 @@ _Returns_
 
 -   `number`: The resolved template ID for the page route.
 
+### setReusableBlock
+
+Action that sets a reusable block.
+
+_Parameters_
+
+-   _reusableBlockId_ `string`: The reusable block ID.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### setTemplate
 
 Action that sets a template, optionally fetching it from REST API.
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index 7b098ced577f3b..7045461b7ceaee 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -54,6 +54,12 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
+const typeLabels = {
+	wp_template: __( 'Template Part' ),
+	wp_template_part: __( 'Template Part' ),
+	wp_block: __( 'Pattern' ),
+};
+
 export default function Editor( { isLoading } ) {
 	const {
 		record: editedPost,
@@ -144,10 +150,7 @@ export default function Editor( { isLoading } ) {
 
 	let title;
 	if ( hasLoadedPost ) {
-		const type =
-			editedPostType === 'wp_template'
-				? __( 'Template' )
-				: __( 'Template Part' );
+		const type = typeLabels[ editedPostType ] ?? __( 'Template' );
 		title = sprintf(
 			// translators: A breadcrumb trail in browser tab. %1$s: title of template being edited, %2$s: type of template (Template or Template Part).
 			__( '%1$s ‹ %2$s ‹ Editor' ),
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js
index 7d23d5f4937d06..8b5a72913ee889 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js
@@ -15,6 +15,7 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import useEditedEntityRecord from '../use-edited-entity-record';
+import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
@@ -43,6 +44,14 @@ function usePatternTitleAndDescription( postType, postId ) {
 		);
 	}
 
+	if ( ! descriptionText && postType === 'wp_block' && record?.title ) {
+		descriptionText = sprintf(
+			// translators: %s: user created pattern title e.g. "Footer".
+			__( 'This is your %s pattern.' ),
+			record.title
+		);
+	}
+
 	const description = (
 		<>
 			{ descriptionText }
@@ -82,6 +91,9 @@ export default function SidebarNavigationScreenPattern() {
 	const { params } = useNavigator();
 	const { postType, postId } = params;
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+
+	useInitEditedEntityFromURL();
+
 	const { title, description } = usePatternTitleAndDescription(
 		postType,
 		postId
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
index 1249d14d378662..eef37a44339956 100644
--- a/packages/edit-site/src/components/sidebar/index.js
+++ b/packages/edit-site/src/components/sidebar/index.js
@@ -59,7 +59,7 @@ function SidebarScreens() {
 			<NavigatorScreen path="/library">
 				<SidebarNavigationScreenLibrary />
 			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template_part)/:postId">
+			<NavigatorScreen path="/:postType(wp_template_part|wp_block)/:postId">
 				<SidebarNavigationScreenPattern />
 			</NavigatorScreen>
 			<NavigatorScreen path="/:postType(wp_template)/all">
diff --git a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
index 32413a943bb9a6..c3e71d9b3a5622 100644
--- a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
+++ b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
@@ -31,7 +31,7 @@ export default function useInitEditedEntityFromURL() {
 		};
 	}, [] );
 
-	const { setTemplate, setTemplatePart, setPage, setNavigationMenu } =
+	const { setReusableBlock, setTemplate, setTemplatePart, setPage, setNavigationMenu } =
 		useDispatch( editSiteStore );
 
 	useEffect( () => {
@@ -46,6 +46,9 @@ export default function useInitEditedEntityFromURL() {
 				case 'wp_navigation':
 					setNavigationMenu( postId );
 					break;
+				case 'wp_block':
+					setReusableBlock( postId );
+					break;
 				default:
 					setPage( {
 						context: { postType, postId },
diff --git a/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js b/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js
index 723083de103ad2..ae8993c7f412d5 100644
--- a/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js
+++ b/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js
@@ -18,6 +18,7 @@ export function getPathFromURL( urlParams ) {
 	// Compute the navigator path based on the URL params.
 	if ( urlParams?.postType && urlParams?.postId ) {
 		switch ( urlParams.postType ) {
+			case 'wp_block':
 			case 'wp_template':
 			case 'wp_template_part':
 			case 'page':
diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js
index eba997f1a6f682..53f88f9bee4265 100644
--- a/packages/edit-site/src/store/actions.js
+++ b/packages/edit-site/src/store/actions.js
@@ -191,6 +191,21 @@ export function setNavigationMenu( navigationMenuId ) {
 	};
 }
 
+/**
+ * Action that sets a reusable block.
+ *
+ * @param {string} reusableBlockId The reusable block ID.
+ *
+ * @return {Object} Action object.
+ */
+export function setReusableBlock( reusableBlockId ) {
+	return {
+		type: 'SET_EDITED_POST',
+		postType: 'wp_block',
+		id: reusableBlockId,
+	};
+}
+
 /**
  * @deprecated
  */

From 96c9e5560150ccca0dc5bf5bd49b008d164f6076 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Mon, 5 Jun 2023 16:38:26 +1000
Subject: [PATCH 24/73] Try adding delete for user patterns

---
 .../edit-site/src/components/library/grid.js  | 87 +++++++++++++------
 .../src/components/library/use-patterns.js    | 12 +--
 .../use-pattern-categories.js                 |  2 +-
 3 files changed, 68 insertions(+), 33 deletions(-)

diff --git a/packages/edit-site/src/components/library/grid.js b/packages/edit-site/src/components/library/grid.js
index 6f332022483789..70326f9c09e7ee 100644
--- a/packages/edit-site/src/components/library/grid.js
+++ b/packages/edit-site/src/components/library/grid.js
@@ -13,14 +13,36 @@ import {
 	__unstableCompositeItem as CompositeItem,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
+import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { moreHorizontal } from '@wordpress/icons';
+import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
 
 /**
  * Internal dependencies
  */
 import { useLink } from '../routes/link';
-import usePatterns from './use-patterns';
+import { usePatterns, PATTERNS, USER_PATTERNS } from './use-patterns';
+
+const DeleteMenuItem = ( { item, onClose } ) => {
+	const { __experimentalDeleteReusableBlock } =
+		useDispatch( reusableBlocksStore );
+
+	if ( item.type !== USER_PATTERNS ) {
+		return;
+	}
+
+	return (
+		<MenuItem
+			onClick={ () => {
+				__experimentalDeleteReusableBlock( item.id );
+				onClose();
+			} }
+		>
+			{ __( 'Delete' ) }
+		</MenuItem>
+	);
+};
 
 const GridItem = ( { category, composite, item } ) => {
 	const instanceId = useInstanceId( GridItem );
@@ -29,7 +51,7 @@ const GridItem = ( { category, composite, item } ) => {
 	const { onClick } = useLink( {
 		path: '/library',
 		postType: item.type,
-		postId: item.type === 'wp_block' ? item.id : item.name,
+		postId: item.type === USER_PATTERNS ? item.id : item.name,
 		categoryName: category,
 		categoryType: item.type,
 		canvas: 'edit',
@@ -46,7 +68,7 @@ const GridItem = ( { category, composite, item } ) => {
 				role="option"
 				as="div"
 				{ ...composite }
-				onClick={ item.type !== 'pattern' ? onClick : undefined }
+				onClick={ item.type !== PATTERNS ? onClick : undefined }
 			>
 				<BlockPreview blocks={ item.blocks } />
 				{ !! item.description && (
@@ -60,29 +82,27 @@ const GridItem = ( { category, composite, item } ) => {
 				justify="space-between"
 			>
 				<span>{ item.title }</span>
-				<DropdownMenu
-					icon={ moreHorizontal }
-					label={ __( 'Actions' ) }
-					className="edit-site-library__dropdown"
-					popoverProps={ { placement: 'bottom-end' } }
-					toggleProps={ {
-						className: 'edit-site-library__button',
-						isSmall: true,
-					} }
-				>
-					{ ( { onClose } ) => (
-						<MenuGroup>
-							<MenuItem
-								onClick={ () => {
-									// TODO: Implement pattern / template part deletion.
-									onClose();
-								} }
-							>
-								{ __( 'Delete' ) }
-							</MenuItem>
-						</MenuGroup>
-					) }
-				</DropdownMenu>
+				{ item.type === USER_PATTERNS && (
+					<DropdownMenu
+						icon={ moreHorizontal }
+						label={ __( 'Actions' ) }
+						className="edit-site-library__dropdown"
+						popoverProps={ { placement: 'bottom-end' } }
+						toggleProps={ {
+							className: 'edit-site-library__button',
+							isSmall: true,
+						} }
+					>
+						{ ( { onClose } ) => (
+							<MenuGroup>
+								<DeleteMenuItem
+									item={ item }
+									onClose={ onClose }
+								/>
+							</MenuGroup>
+						) }
+					</DropdownMenu>
+				) }
 			</HStack>
 		</div>
 	);
@@ -97,7 +117,20 @@ export default function Grid( { category, label, type } ) {
 	}
 
 	if ( ! patterns.length ) {
-		return <div>{ __( 'No patterns found.' ) }</div>;
+		// TODO: Implement redirecting to root library page or proper empty state.
+		return (
+			<div
+				style={ {
+					color: '#e0e0e0',
+					height: '100%',
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'center',
+				} }
+			>
+				{ __( 'No patterns found.' ) }
+			</div>
+		);
 	}
 
 	return (
diff --git a/packages/edit-site/src/components/library/use-patterns.js b/packages/edit-site/src/components/library/use-patterns.js
index 337ddb142a1ec4..047f93dcabb24a 100644
--- a/packages/edit-site/src/components/library/use-patterns.js
+++ b/packages/edit-site/src/components/library/use-patterns.js
@@ -13,9 +13,9 @@ import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
 
 const EMPTY_PATTERN_LIST = [];
-const TEMPLATE_PARTS = 'wp_template_part';
-const PATTERNS = 'pattern';
-const USER_PATTERNS = 'wp_block';
+export const TEMPLATE_PARTS = 'wp_template_part';
+export const PATTERNS = 'pattern';
+export const USER_PATTERNS = 'wp_block';
 
 const createTemplatePartId = ( theme, slug ) =>
 	theme && slug ? theme + '//' + slug : null;
@@ -154,7 +154,7 @@ const useUserPatterns = ( category, categoryType = PATTERNS ) => {
 	);
 };
 
-export default function usePatterns( categoryType, categoryName ) {
+export const usePatterns = ( categoryType, categoryName ) => {
 	const patterns = useBlockPatternsByCategory( categoryName, categoryType );
 	const userPatterns = useUserPatterns( categoryName, categoryType );
 	const { templateParts, isResolving } = useTemplatePartsAsPatterns(
@@ -166,4 +166,6 @@ export default function usePatterns( categoryType, categoryName ) {
 
 	const results = [ ...templateParts, ...patterns, ...userPatterns ];
 	return [ results, isResolving ];
-}
+};
+
+export default usePatterns;
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
index 12287ecd257654..84816dccd0ffe1 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
@@ -62,7 +62,7 @@ export default function usePatternCategories() {
 				( x, index, arr ) =>
 					index === arr.findIndex( ( y ) => x.name === y.name )
 			),
-		[ blockPatterns, restBlockPatterns ]
+		[ blockPatterns, restBlockPatterns, userPatterns ]
 	);
 
 	const categories = useMemo( () => {

From bd53f4c61ce0ab77b30442b18f06637c51d20f29 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 6 Jun 2023 10:37:08 +1000
Subject: [PATCH 25/73] Add snackbar notices for user-created pattern deletion

---
 .../edit-site/src/components/library/grid.js  | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/edit-site/src/components/library/grid.js b/packages/edit-site/src/components/library/grid.js
index 70326f9c09e7ee..e49a8de2025110 100644
--- a/packages/edit-site/src/components/library/grid.js
+++ b/packages/edit-site/src/components/library/grid.js
@@ -16,6 +16,7 @@ import { useInstanceId } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { moreHorizontal } from '@wordpress/icons';
+import { store as noticesStore } from '@wordpress/notices';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
 
 /**
@@ -27,20 +28,32 @@ import { usePatterns, PATTERNS, USER_PATTERNS } from './use-patterns';
 const DeleteMenuItem = ( { item, onClose } ) => {
 	const { __experimentalDeleteReusableBlock } =
 		useDispatch( reusableBlocksStore );
+	const { createErrorNotice, createSuccessNotice } =
+		useDispatch( noticesStore );
 
 	if ( item.type !== USER_PATTERNS ) {
 		return;
 	}
 
+	const deleteReusableBlock = async () => {
+		try {
+			await __experimentalDeleteReusableBlock( item.id );
+			createSuccessNotice( __( 'Pattern successfully deleted.' ), {
+				type: 'snackbar',
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while deleting the pattern.' );
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+		} finally {
+			onClose();
+		}
+	};
+
 	return (
-		<MenuItem
-			onClick={ () => {
-				__experimentalDeleteReusableBlock( item.id );
-				onClose();
-			} }
-		>
-			{ __( 'Delete' ) }
-		</MenuItem>
+		<MenuItem onClick={ deleteReusableBlock }>{ __( 'Delete' ) }</MenuItem>
 	);
 };
 

From f1ba5ac80a69a77069724bdf1fefe76c9b6fb753 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 6 Jun 2023 13:20:51 +1000
Subject: [PATCH 26/73] Hook up pattern creation modal

---
 .../src/components/add-new-pattern/index.js   | 59 ++++++++++++++++---
 .../components/create-pattern-modal/index.js  | 16 +++--
 2 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js
index 14b1296510300c..6fa21b36aeb972 100644
--- a/packages/edit-site/src/components/add-new-pattern/index.js
+++ b/packages/edit-site/src/components/add-new-pattern/index.js
@@ -2,29 +2,29 @@
  * WordPress dependencies
  */
 import { Button } from '@wordpress/components';
-// import { store as coreStore } from '@wordpress/core-data';
+import { store as coreStore } from '@wordpress/core-data';
 import { useDispatch } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { plus } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
-// import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import CreatePatternModal from '../create-pattern-modal';
-// import { unlock } from '../../private-apis';
+import { unlock } from '../../private-apis';
 
-// const { useHistory } = unlock( routerPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 
 export default function AddNewPattern( { toggleProps } ) {
-	// const history = useHistory();
+	const history = useHistory();
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { createErrorNotice } = useDispatch( noticesStore );
-	// const { saveEntityRecord } = useDispatch( coreStore );
+	const { saveEntityRecord } = useDispatch( coreStore );
 
-	async function createPattern( { name } ) {
+	async function createPattern( { name, categoryName } ) {
 		if ( ! name ) {
 			createErrorNotice( __( 'Name is not defined.' ), {
 				type: 'snackbar',
@@ -32,8 +32,49 @@ export default function AddNewPattern( { toggleProps } ) {
 			return;
 		}
 
-		// TODO: Implement saving of pattern.
-		setIsModalOpen( false );
+		if ( ! categoryName ) {
+			createErrorNotice( __( 'Category is not defined.' ), {
+				type: 'snackbar',
+			} );
+			return;
+		}
+
+		try {
+			// TODO: Enforce unique pattern names?
+
+			const pattern = await saveEntityRecord(
+				'postType',
+				'wp_block',
+				{
+					title: name || __( 'Untitled Pattern' ),
+					content: '',
+					status: 'publish',
+					meta: {
+						wp_block: {
+							sync_status: 'notSynced',
+							categories: [ categoryName ],
+						},
+					},
+				},
+				{ throwOnError: true }
+			);
+
+			setIsModalOpen( false );
+
+			history.push( {
+				postId: pattern.id,
+				postType: 'wp_block',
+				canvas: 'edit',
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while creating the pattern.' );
+
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+			setIsModalOpen( false );
+		}
 	}
 
 	const { as: Toggle = Button, ...restToggleProps } = toggleProps ?? {};
diff --git a/packages/edit-site/src/components/create-pattern-modal/index.js b/packages/edit-site/src/components/create-pattern-modal/index.js
index 86c35ee785d0d0..8708c531da9666 100644
--- a/packages/edit-site/src/components/create-pattern-modal/index.js
+++ b/packages/edit-site/src/components/create-pattern-modal/index.js
@@ -24,10 +24,14 @@ export default function CreatePatternModal( { closeModal, onCreate } ) {
 
 	const { patternCategories } = usePatternCategories();
 
-	const options = patternCategories.map( ( category ) => ( {
-		label: category.label,
-		value: category.name,
-	} ) );
+	const options = patternCategories
+		.map( ( category ) => ( {
+			label: category.label,
+			value: category.name,
+		} ) )
+		.concat( [
+			{ value: '', label: __( 'Select a category' ), disabled: true },
+		] );
 
 	return (
 		<Modal
@@ -48,7 +52,7 @@ export default function CreatePatternModal( { closeModal, onCreate } ) {
 						return;
 					}
 					setIsSubmitting( true );
-					await onCreate( { name } );
+					await onCreate( { name, categoryName } );
 				} }
 			>
 				<VStack spacing="4">
@@ -80,7 +84,7 @@ export default function CreatePatternModal( { closeModal, onCreate } ) {
 						<Button
 							variant="primary"
 							type="submit"
-							disabled={ ! name }
+							disabled={ ! name || ! categoryName }
 							isBusy={ isSubmitting }
 						>
 							{ __( 'Create' ) }

From 6675328e89a18e3e8864a1a5bc6ff78bc654b6f2 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 6 Jun 2023 13:32:53 +1000
Subject: [PATCH 27/73] Make new patterns return to correct category

---
 packages/edit-site/src/components/add-new-pattern/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js
index 6fa21b36aeb972..19190ccb7754c1 100644
--- a/packages/edit-site/src/components/add-new-pattern/index.js
+++ b/packages/edit-site/src/components/add-new-pattern/index.js
@@ -64,6 +64,8 @@ export default function AddNewPattern( { toggleProps } ) {
 			history.push( {
 				postId: pattern.id,
 				postType: 'wp_block',
+				categoryType: 'wp_block',
+				categoryName,
 				canvas: 'edit',
 			} );
 		} catch ( error ) {

From 0046f1de61dd7ca2478b28cdc43d4cbc75999854 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 6 Jun 2023 20:17:58 +1000
Subject: [PATCH 28/73] Try updating the Library to use pattern category
 taxonomy

---
 .../src/components/add-new-pattern/index.js   |  16 +--
 .../components/create-pattern-modal/index.js  |  28 ++---
 .../edit-site/src/components/library/grid.js  |  11 +-
 .../edit-site/src/components/library/index.js |   6 +-
 .../library/use-library-settings.js           |   2 +-
 .../src/components/library/use-patterns.js    |  37 +++---
 .../category-item.js                          |   4 +-
 .../index.js                                  |  12 +-
 .../use-pattern-categories.js                 | 114 +++++++-----------
 .../use-theme-patterns.js                     |  40 ++++++
 .../use-sync-path-with-url.js                 |   2 +-
 11 files changed, 146 insertions(+), 126 deletions(-)
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-library/use-theme-patterns.js

diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js
index 19190ccb7754c1..190765e906f862 100644
--- a/packages/edit-site/src/components/add-new-pattern/index.js
+++ b/packages/edit-site/src/components/add-new-pattern/index.js
@@ -24,7 +24,7 @@ export default function AddNewPattern( { toggleProps } ) {
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { saveEntityRecord } = useDispatch( coreStore );
 
-	async function createPattern( { name, categoryName } ) {
+	async function createPattern( { name, categoryId } ) {
 		if ( ! name ) {
 			createErrorNotice( __( 'Name is not defined.' ), {
 				type: 'snackbar',
@@ -32,8 +32,8 @@ export default function AddNewPattern( { toggleProps } ) {
 			return;
 		}
 
-		if ( ! categoryName ) {
-			createErrorNotice( __( 'Category is not defined.' ), {
+		if ( ! categoryId ) {
+			createErrorNotice( __( 'Category has not been selected.' ), {
 				type: 'snackbar',
 			} );
 			return;
@@ -49,12 +49,8 @@ export default function AddNewPattern( { toggleProps } ) {
 					title: name || __( 'Untitled Pattern' ),
 					content: '',
 					status: 'publish',
-					meta: {
-						wp_block: {
-							sync_status: 'notSynced',
-							categories: [ categoryName ],
-						},
-					},
+					meta: { wp_block: { sync_status: 'notSynced' } },
+					wp_pattern: [ categoryId ],
 				},
 				{ throwOnError: true }
 			);
@@ -65,7 +61,7 @@ export default function AddNewPattern( { toggleProps } ) {
 				postId: pattern.id,
 				postType: 'wp_block',
 				categoryType: 'wp_block',
-				categoryName,
+				categoryId,
 				canvas: 'edit',
 			} );
 		} catch ( error ) {
diff --git a/packages/edit-site/src/components/create-pattern-modal/index.js b/packages/edit-site/src/components/create-pattern-modal/index.js
index 8708c531da9666..a4af79e437dfab 100644
--- a/packages/edit-site/src/components/create-pattern-modal/index.js
+++ b/packages/edit-site/src/components/create-pattern-modal/index.js
@@ -9,25 +9,25 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
+import { useEntityRecords } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 
-/**
- * Internal dependencies
- */
-import usePatternCategories from '../sidebar-navigation-screen-library/use-pattern-categories';
-
 export default function CreatePatternModal( { closeModal, onCreate } ) {
 	const [ name, setName ] = useState( '' );
-	const [ categoryName, setCategoryName ] = useState( '' );
+	const [ categoryId, setCategoryId ] = useState( '' );
 	const [ isSubmitting, setIsSubmitting ] = useState( false );
 
-	const { patternCategories } = usePatternCategories();
+	const { records: categories } = useEntityRecords(
+		'taxonomy',
+		'wp_pattern',
+		{ per_page: -1, hide_empty: false, context: 'view' }
+	);
 
-	const options = patternCategories
+	const options = ( categories || [] )
 		.map( ( category ) => ( {
-			label: category.label,
-			value: category.name,
+			label: category.name,
+			value: category.id,
 		} ) )
 		.concat( [
 			{ value: '', label: __( 'Select a category' ), disabled: true },
@@ -52,7 +52,7 @@ export default function CreatePatternModal( { closeModal, onCreate } ) {
 						return;
 					}
 					setIsSubmitting( true );
-					await onCreate( { name, categoryName } );
+					await onCreate( { name, categoryId } );
 				} }
 			>
 				<VStack spacing="4">
@@ -67,10 +67,10 @@ export default function CreatePatternModal( { closeModal, onCreate } ) {
 					/>
 					<SelectControl
 						label={ __( 'Category' ) }
-						onChange={ setCategoryName }
+						onChange={ setCategoryId }
 						options={ options }
 						size="__unstable-large"
-						value={ categoryName }
+						value={ categoryId }
 					/>
 					<HStack justify="right">
 						<Button
@@ -84,7 +84,7 @@ export default function CreatePatternModal( { closeModal, onCreate } ) {
 						<Button
 							variant="primary"
 							type="submit"
-							disabled={ ! name || ! categoryName }
+							disabled={ ! name || ! categoryId }
 							isBusy={ isSubmitting }
 						>
 							{ __( 'Create' ) }
diff --git a/packages/edit-site/src/components/library/grid.js b/packages/edit-site/src/components/library/grid.js
index e49a8de2025110..fbf212a5c2e201 100644
--- a/packages/edit-site/src/components/library/grid.js
+++ b/packages/edit-site/src/components/library/grid.js
@@ -57,7 +57,7 @@ const DeleteMenuItem = ( { item, onClose } ) => {
 	);
 };
 
-const GridItem = ( { category, composite, item } ) => {
+const GridItem = ( { categoryId, composite, item } ) => {
 	const instanceId = useInstanceId( GridItem );
 	const descriptionId = `edit-site-library__pattern-description-${ instanceId }`;
 
@@ -65,7 +65,7 @@ const GridItem = ( { category, composite, item } ) => {
 		path: '/library',
 		postType: item.type,
 		postId: item.type === USER_PATTERNS ? item.id : item.name,
-		categoryName: category,
+		categoryId,
 		categoryType: item.type,
 		canvas: 'edit',
 	} );
@@ -121,8 +121,8 @@ const GridItem = ( { category, composite, item } ) => {
 	);
 };
 
-export default function Grid( { category, label, type } ) {
-	const [ patterns, isResolving ] = usePatterns( type, category );
+export default function Grid( { categoryId, label, type } ) {
+	const [ patterns, isResolving ] = usePatterns( type, categoryId );
 	const composite = useCompositeState( { orientation: 'vertical' } );
 
 	if ( ! patterns ) {
@@ -130,7 +130,6 @@ export default function Grid( { category, label, type } ) {
 	}
 
 	if ( ! patterns.length ) {
-		// TODO: Implement redirecting to root library page or proper empty state.
 		return (
 			<div
 				style={ {
@@ -159,7 +158,7 @@ export default function Grid( { category, label, type } ) {
 					<GridItem
 						key={ pattern.name }
 						item={ pattern }
-						category={ category }
+						categoryId={ categoryId }
 						composite={ composite }
 					/>
 				) ) }
diff --git a/packages/edit-site/src/components/library/index.js b/packages/edit-site/src/components/library/index.js
index ed30dcf06a6892..94ca60fcc2cc1e 100644
--- a/packages/edit-site/src/components/library/index.js
+++ b/packages/edit-site/src/components/library/index.js
@@ -23,9 +23,9 @@ const DEFAULT_TYPE = 'wp_template_part';
 const DEFAULT_CATEGORY = 'header';
 
 export default function Library() {
-	const { categoryType, categoryName } = getQueryArgs( window.location.href );
+	const { categoryType, categoryId } = getQueryArgs( window.location.href );
 	const type = categoryType || DEFAULT_TYPE;
-	const category = categoryName || DEFAULT_CATEGORY;
+	const category = categoryId || DEFAULT_CATEGORY;
 	const settings = useLibrarySettings();
 
 	// Do we need shortcuts if we aren't displaying a header?
@@ -58,7 +58,7 @@ export default function Library() {
 				<ExperimentalBlockEditorProvider settings={ settings }>
 					<Grid
 						type={ type }
-						category={ category }
+						categoryId={ category }
 						label={ __( 'Patterns list' ) }
 					/>
 				</ExperimentalBlockEditorProvider>
diff --git a/packages/edit-site/src/components/library/use-library-settings.js b/packages/edit-site/src/components/library/use-library-settings.js
index aa78e51a3a9e59..58913437bcbc99 100644
--- a/packages/edit-site/src/components/library/use-library-settings.js
+++ b/packages/edit-site/src/components/library/use-library-settings.js
@@ -35,7 +35,7 @@ export default function useLibrarySettings() {
 				( x, index, arr ) =>
 					index === arr.findIndex( ( y ) => x.name === y.name )
 			),
-		[ ( settingsBlockPatterns, restBlockPatterns ) ]
+		[ settingsBlockPatterns, restBlockPatterns ]
 	);
 
 	const settings = useMemo( () => {
diff --git a/packages/edit-site/src/components/library/use-patterns.js b/packages/edit-site/src/components/library/use-patterns.js
index 047f93dcabb24a..aa956f4bfee9bb 100644
--- a/packages/edit-site/src/components/library/use-patterns.js
+++ b/packages/edit-site/src/components/library/use-patterns.js
@@ -3,7 +3,7 @@
  */
 import { parse } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
+import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
 import { useMemo } from '@wordpress/element';
 
 /**
@@ -73,7 +73,7 @@ const useTemplatePartsAsPatterns = ( area, postType = TEMPLATE_PARTS ) => {
 	return { templateParts: filteredTemplateParts, isResolving };
 };
 
-const useBlockPatternsByCategory = ( category, postType = PATTERNS ) => {
+const useBlockPatternsByCategory = ( categoryId, postType = PATTERNS ) => {
 	const blockPatterns = useSelect( ( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
 		const settings = getSettings();
@@ -90,6 +90,7 @@ const useBlockPatternsByCategory = ( category, postType = PATTERNS ) => {
 	const patterns = useMemo(
 		() =>
 			[ ...( blockPatterns || [] ), ...( restBlockPatterns || [] ) ]
+				.filter( ( pattern ) => pattern.source !== 'core' )
 				.filter(
 					( x, index, arr ) =>
 						index === arr.findIndex( ( y ) => x.name === y.name )
@@ -102,22 +103,27 @@ const useBlockPatternsByCategory = ( category, postType = PATTERNS ) => {
 		[ blockPatterns, restBlockPatterns ]
 	);
 
-	if ( postType !== PATTERNS ) {
-		return EMPTY_PATTERN_LIST;
-	}
+	// Non-user-created patterns (e.g. theme patterns ) will have string
+	// category names in their assigned categories array. We'll need to
+	// to retrieve the current category's name to match them.
+	const { record: category } = useEntityRecord(
+		'taxonomy',
+		'wp_pattern',
+		categoryId
+	);
 
-	if ( ! category ) {
-		return patterns || EMPTY_PATTERN_LIST;
+	if ( postType !== PATTERNS || ! category ) {
+		return EMPTY_PATTERN_LIST;
 	}
 
 	return patterns.filter( ( pattern ) =>
-		pattern.categories?.includes( category )
+		pattern.categories?.includes( category.name )
 	);
 };
 
 const reusableBlockToPattern = ( reusableBlock ) => ( {
 	blocks: parse( reusableBlock.content.raw ),
-	categories: reusableBlock.meta?.wp_block?.categories,
+	categories: reusableBlock.wp_pattern,
 	id: reusableBlock.id,
 	name: reusableBlock.slug,
 	title: reusableBlock.title.raw,
@@ -125,8 +131,9 @@ const reusableBlockToPattern = ( reusableBlock ) => ( {
 	reusableBlock,
 } );
 
-const useUserPatterns = ( category, categoryType = PATTERNS ) => {
+const useUserPatterns = ( categoryId, categoryType = PATTERNS ) => {
 	const postType = categoryType === PATTERNS ? USER_PATTERNS : categoryType;
+	const currentId = parseInt( categoryId );
 	const userPatterns = useSelect(
 		( select ) => {
 			if ( postType !== USER_PATTERNS ) {
@@ -150,15 +157,15 @@ const useUserPatterns = ( category, categoryType = PATTERNS ) => {
 	);
 
 	return userPatterns.filter( ( pattern ) =>
-		pattern.categories?.includes( category )
+		pattern.categories?.includes( currentId )
 	);
 };
 
-export const usePatterns = ( categoryType, categoryName ) => {
-	const patterns = useBlockPatternsByCategory( categoryName, categoryType );
-	const userPatterns = useUserPatterns( categoryName, categoryType );
+export const usePatterns = ( categoryType, categoryId ) => {
+	const patterns = useBlockPatternsByCategory( categoryId, categoryType );
+	const userPatterns = useUserPatterns( categoryId, categoryType );
 	const { templateParts, isResolving } = useTemplatePartsAsPatterns(
-		categoryName,
+		categoryId,
 		categoryType
 	);
 
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
index def480419326f6..7bd207b21bc5f6 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
@@ -7,15 +7,15 @@ import { useLink } from '../routes/link';
 export default function CategoryItem( {
 	count,
 	icon,
+	id,
 	isActive,
 	label,
-	name,
 	type,
 } ) {
 	const linkInfo = useLink( {
 		path: '/library',
 		categoryType: type,
-		categoryName: name,
+		categoryId: id,
 	} );
 
 	if ( ! count ) {
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
index 269d67c3a1d968..1cfe73a907e5de 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
@@ -35,8 +35,8 @@ const templatePartAreaLabels = {
 
 export default function SidebarNavigationScreenLibrary() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const { categoryType, categoryName } = getQueryArgs( window.location.href );
-	const currentCategory = categoryName || DEFAULT_CATEGORY;
+	const { categoryType, categoryId } = getQueryArgs( window.location.href );
+	const currentCategory = categoryId || DEFAULT_CATEGORY;
 	const currentType = categoryType || DEFAULT_TYPE;
 
 	const { templatePartAreas, hasTemplateParts, isLoading } =
@@ -92,7 +92,7 @@ export default function SidebarNavigationScreenLibrary() {
 														area
 													]
 												}
-												name={ area }
+												id={ area }
 												type="wp_template_part"
 												isActive={
 													currentCategory === area &&
@@ -110,12 +110,12 @@ export default function SidebarNavigationScreenLibrary() {
 										<CategoryItem
 											key={ category.name }
 											count={ category.count }
-											label={ category.label }
-											name={ category.name }
+											label={ category.name }
+											id={ category.id }
 											type="pattern"
 											isActive={
 												currentCategory ===
-													category.name &&
+													category.id &&
 												currentType === 'pattern'
 											}
 										/>
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
index 84816dccd0ffe1..552628c7929ad1 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
@@ -1,86 +1,61 @@
 /**
  * WordPress dependencies
  */
-import { store as coreStore } from '@wordpress/core-data';
+import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
-import { store as editSiteStore } from '../../store';
-
-const useUserPatterns = () => {
-	const userPatterns = useSelect( ( select ) => {
-		const { getEntityRecords } = select( coreStore );
-		const nonSyncedPatterns = getEntityRecords( 'postType', 'wp_block', {
-			per_page: -1,
-		} );
-
-		return nonSyncedPatterns?.map( ( item ) => ( {
-			categories: item.meta?.wp_block?.categories,
-			name: item.slug,
-		} ) );
-	}, [] );
-
-	return userPatterns;
-};
+import useThemePatterns from './use-theme-patterns';
 
 export default function usePatternCategories() {
-	const { blockPatterns, blockPatternCategories } = useSelect( ( select ) => {
-		const { getSettings } = unlock( select( editSiteStore ) );
-		const settings = getSettings();
-
-		return {
-			blockPatterns:
-				settings.__experimentalAdditionalBlockPatterns ??
-				settings.__experimentalBlockPatterns,
-			blockPatternCategories:
-				settings.__experimentalAdditionalBlockPatternCategories ??
-				settings.__experimentalBlockPatternCategories,
-		};
-	} );
-
-	const { restBlockPatterns, restBlockPatternCategories } = useSelect(
-		( select ) => ( {
-			restBlockPatterns: select( coreStore ).getBlockPatterns(),
-			restBlockPatternCategories:
-				select( coreStore ).getBlockPatternCategories(),
-		} )
+	const { records: categories } = useEntityRecords(
+		'taxonomy',
+		'wp_pattern',
+		{ per_page: -1, hide_empty: false, context: 'view' }
 	);
 
-	const userPatterns = useUserPatterns();
-
-	const patterns = useMemo(
-		() =>
-			[
-				...( blockPatterns || [] ),
-				...( restBlockPatterns || [] ),
-				...( userPatterns || [] ),
-			].filter(
-				( x, index, arr ) =>
-					index === arr.findIndex( ( y ) => x.name === y.name )
-			),
-		[ blockPatterns, restBlockPatterns, userPatterns ]
+	// We're collecting the both user & theme patterns along with the taxonomy
+	// categories so that we can recalculate the category counts to reflect
+	// merged patterns, additions, or deletions.
+	const themePatterns = useThemePatterns();
+	const userPatterns = useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecords( 'postType', 'wp_block', {
+				per_page: -1,
+			} ),
+		[]
 	);
 
-	const categories = useMemo( () => {
-		const combinedCategories = [
-			...( blockPatternCategories || [] ),
-			...( restBlockPatternCategories || [] ),
-		];
+	const patternCategories = useMemo( () => {
+		if ( ! categories ) {
+			return [];
+		}
 
 		const categoryMap = {};
+		const categoriesWithCounts = [];
 
-		combinedCategories.forEach( ( category ) => {
-			if ( ! categoryMap[ category.name ] ) {
-				category.count = 0;
-				categoryMap[ category.name ] = category;
+		// Create a map that we can easily update category counts
+		// for both user and theme patterns that match.
+		categories.forEach( ( patternCategory ) => {
+			if ( ! categoryMap[ patternCategory.id ] ) {
+				const category = { ...patternCategory, count: 0 };
+				categoryMap[ category.id ] = category;
+				categoryMap[ category.slug ] = category;
 			}
 		} );
 
-		patterns.forEach( ( pattern ) => {
+		( userPatterns || [] ).forEach( ( pattern ) => {
+			pattern.wp_pattern?.forEach( ( categoryId ) => {
+				if ( categoryMap[ categoryId ] ) {
+					categoryMap[ categoryId ].count += 1;
+				}
+			} );
+		} );
+
+		themePatterns.forEach( ( pattern ) => {
 			pattern.categories?.forEach( ( patternCategory ) => {
 				if ( categoryMap[ patternCategory ] ) {
 					categoryMap[ patternCategory ].count += 1;
@@ -88,11 +63,14 @@ export default function usePatternCategories() {
 			} );
 		} );
 
-		return categoryMap;
-	}, [ blockPatternCategories, restBlockPatternCategories, patterns ] );
+		categories.forEach( ( category ) => {
+			if ( categoryMap[ category.id ].count ) {
+				categoriesWithCounts.push( categoryMap[ category.id ] );
+			}
+		} );
+
+		return categoriesWithCounts;
+	}, [ categories, themePatterns, userPatterns ] );
 
-	return {
-		hasPatterns: !! patterns.length,
-		patternCategories: Object.values( categories ),
-	};
+	return { patternCategories, hasPatterns: !! patternCategories.length };
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-theme-patterns.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-theme-patterns.js
new file mode 100644
index 00000000000000..6b6219cd0252cd
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-theme-patterns.js
@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
+
+export default function useThemePatterns() {
+	const blockPatterns = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+
+		return (
+			getSettings().__experimentalAdditionalBlockPatterns ??
+			getSettings().__experimentalBlockPatterns
+		);
+	} );
+
+	const restBlockPatterns = useSelect( ( select ) =>
+		select( coreStore ).getBlockPatterns()
+	);
+
+	const patterns = useMemo(
+		() =>
+			[ ...( blockPatterns || [] ), ...( restBlockPatterns || [] ) ]
+				.filter( ( pattern ) => pattern.source !== 'core' )
+				.filter(
+					( x, index, arr ) =>
+						index === arr.findIndex( ( y ) => x.name === y.name )
+				),
+		[ blockPatterns, restBlockPatterns ]
+	);
+
+	return patterns;
+}
diff --git a/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js b/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js
index ae8993c7f412d5..ee9fa0fffb801e 100644
--- a/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js
+++ b/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js
@@ -99,7 +99,7 @@ export default function useSyncPathWithURL() {
 				postType: undefined,
 				postId: undefined,
 				categoryType: undefined,
-				categoryName: undefined,
+				categoryId: undefined,
 				path:
 					navigatorLocation.path === '/'
 						? undefined

From ce25de7f563c2a9c87fb7b9a03469af55942d226 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 7 Jun 2023 11:54:42 +1000
Subject: [PATCH 29/73] Fix theme pattern display in Grid

---
 packages/edit-site/src/components/library/use-patterns.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/library/use-patterns.js b/packages/edit-site/src/components/library/use-patterns.js
index aa956f4bfee9bb..8dc3c4cc776336 100644
--- a/packages/edit-site/src/components/library/use-patterns.js
+++ b/packages/edit-site/src/components/library/use-patterns.js
@@ -117,7 +117,7 @@ const useBlockPatternsByCategory = ( categoryId, postType = PATTERNS ) => {
 	}
 
 	return patterns.filter( ( pattern ) =>
-		pattern.categories?.includes( category.name )
+		pattern.categories?.includes( category.slug )
 	);
 };
 

From ea3a45f17ba504d3875d62960f11af1b0f7d8227 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 7 Jun 2023 16:00:17 +1000
Subject: [PATCH 30/73] Fix selected pattern category detection

---
 .../src/components/sidebar-navigation-screen-library/index.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
index 1cfe73a907e5de..f02eedffb5b3c7 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
@@ -115,7 +115,7 @@ export default function SidebarNavigationScreenLibrary() {
 											type="pattern"
 											isActive={
 												currentCategory ===
-													category.id &&
+													`${ category.id }` &&
 												currentType === 'pattern'
 											}
 										/>

From 211780548988b1c22fda4d04a8894db944b9bc15 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 8 Jun 2023 16:54:21 +1000
Subject: [PATCH 31/73] Use invalidateResolution to clear taxonomy cache

Not sure if this will be better than manual counts as we'll likely still need to get userPatterns back to collect an Uncategorized group.
---
 .../src/components/add-new-pattern/index.js   | 10 +++++-
 .../edit-site/src/components/library/grid.js  |  7 ++++
 .../use-pattern-categories.js                 | 36 ++++---------------
 3 files changed, 23 insertions(+), 30 deletions(-)

diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js
index 190765e906f862..be9c32bfe211c7 100644
--- a/packages/edit-site/src/components/add-new-pattern/index.js
+++ b/packages/edit-site/src/components/add-new-pattern/index.js
@@ -22,7 +22,7 @@ export default function AddNewPattern( { toggleProps } ) {
 	const history = useHistory();
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { createErrorNotice } = useDispatch( noticesStore );
-	const { saveEntityRecord } = useDispatch( coreStore );
+	const { saveEntityRecord, invalidateResolution } = useDispatch( coreStore );
 
 	async function createPattern( { name, categoryId } ) {
 		if ( ! name ) {
@@ -55,6 +55,14 @@ export default function AddNewPattern( { toggleProps } ) {
 				{ throwOnError: true }
 			);
 
+			// Invalidate pattern category taxonomy so nav screen can reflect
+			// up-to-date counts.
+			invalidateResolution( 'getEntityRecords', [
+				'taxonomy',
+				'wp_pattern',
+				{ per_page: -1, hide_empty: false, context: 'view' },
+			] );
+
 			setIsModalOpen( false );
 
 			history.push( {
diff --git a/packages/edit-site/src/components/library/grid.js b/packages/edit-site/src/components/library/grid.js
index fbf212a5c2e201..b9f0fd0a11d18c 100644
--- a/packages/edit-site/src/components/library/grid.js
+++ b/packages/edit-site/src/components/library/grid.js
@@ -13,6 +13,7 @@ import {
 	__unstableCompositeItem as CompositeItem,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
+import { store as coreStore } from '@wordpress/core-data';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { moreHorizontal } from '@wordpress/icons';
@@ -26,6 +27,7 @@ import { useLink } from '../routes/link';
 import { usePatterns, PATTERNS, USER_PATTERNS } from './use-patterns';
 
 const DeleteMenuItem = ( { item, onClose } ) => {
+	const { invalidateResolution } = useDispatch( coreStore );
 	const { __experimentalDeleteReusableBlock } =
 		useDispatch( reusableBlocksStore );
 	const { createErrorNotice, createSuccessNotice } =
@@ -38,6 +40,11 @@ const DeleteMenuItem = ( { item, onClose } ) => {
 	const deleteReusableBlock = async () => {
 		try {
 			await __experimentalDeleteReusableBlock( item.id );
+			invalidateResolution( 'getEntityRecords', [
+				'taxonomy',
+				'wp_pattern',
+				{ per_page: -1, hide_empty: false, context: 'view' },
+			] );
 			createSuccessNotice( __( 'Pattern successfully deleted.' ), {
 				type: 'snackbar',
 			} );
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
index 552628c7929ad1..d1be1ad1fc5a6f 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
+import { useEntityRecords } from '@wordpress/core-data';
 import { useMemo } from '@wordpress/element';
 
 /**
@@ -17,18 +16,7 @@ export default function usePatternCategories() {
 		{ per_page: -1, hide_empty: false, context: 'view' }
 	);
 
-	// We're collecting the both user & theme patterns along with the taxonomy
-	// categories so that we can recalculate the category counts to reflect
-	// merged patterns, additions, or deletions.
 	const themePatterns = useThemePatterns();
-	const userPatterns = useSelect(
-		( select ) =>
-			select( coreStore ).getEntityRecords( 'postType', 'wp_block', {
-				per_page: -1,
-			} ),
-		[]
-	);
-
 	const patternCategories = useMemo( () => {
 		if ( ! categories ) {
 			return [];
@@ -38,23 +26,13 @@ export default function usePatternCategories() {
 		const categoriesWithCounts = [];
 
 		// Create a map that we can easily update category counts
-		// for both user and theme patterns that match.
+		// for theme patterns that match.
 		categories.forEach( ( patternCategory ) => {
-			if ( ! categoryMap[ patternCategory.id ] ) {
-				const category = { ...patternCategory, count: 0 };
-				categoryMap[ category.id ] = category;
-				categoryMap[ category.slug ] = category;
+			if ( ! categoryMap[ patternCategory.slug ] ) {
+				categoryMap[ patternCategory.slug ] = { ...patternCategory };
 			}
 		} );
 
-		( userPatterns || [] ).forEach( ( pattern ) => {
-			pattern.wp_pattern?.forEach( ( categoryId ) => {
-				if ( categoryMap[ categoryId ] ) {
-					categoryMap[ categoryId ].count += 1;
-				}
-			} );
-		} );
-
 		themePatterns.forEach( ( pattern ) => {
 			pattern.categories?.forEach( ( patternCategory ) => {
 				if ( categoryMap[ patternCategory ] ) {
@@ -64,13 +42,13 @@ export default function usePatternCategories() {
 		} );
 
 		categories.forEach( ( category ) => {
-			if ( categoryMap[ category.id ].count ) {
-				categoriesWithCounts.push( categoryMap[ category.id ] );
+			if ( categoryMap[ category.slug ].count ) {
+				categoriesWithCounts.push( categoryMap[ category.slug ] );
 			}
 		} );
 
 		return categoriesWithCounts;
-	}, [ categories, themePatterns, userPatterns ] );
+	}, [ categories, themePatterns ] );
 
 	return { patternCategories, hasPatterns: !! patternCategories.length };
 }

From 027296c2d5dcd3fb396e108d9862346f23d16cc0 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 8 Jun 2023 17:25:30 +1000
Subject: [PATCH 32/73] Include uncategorized reusable block patterns in
 Library

---
 .../src/components/library/use-patterns.js    |  9 ++++-
 .../use-pattern-categories.js                 | 33 +++++++++++++++++--
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/library/use-patterns.js b/packages/edit-site/src/components/library/use-patterns.js
index 8dc3c4cc776336..cafcd3f07fa799 100644
--- a/packages/edit-site/src/components/library/use-patterns.js
+++ b/packages/edit-site/src/components/library/use-patterns.js
@@ -133,7 +133,6 @@ const reusableBlockToPattern = ( reusableBlock ) => ( {
 
 const useUserPatterns = ( categoryId, categoryType = PATTERNS ) => {
 	const postType = categoryType === PATTERNS ? USER_PATTERNS : categoryType;
-	const currentId = parseInt( categoryId );
 	const userPatterns = useSelect(
 		( select ) => {
 			if ( postType !== USER_PATTERNS ) {
@@ -156,6 +155,14 @@ const useUserPatterns = ( categoryId, categoryType = PATTERNS ) => {
 		[ postType ]
 	);
 
+	if ( categoryId === 'uncategorized' ) {
+		return userPatterns.filter(
+			( pattern ) => ! pattern.categories?.length
+		);
+	}
+
+	const currentId = parseInt( categoryId );
+
 	return userPatterns.filter( ( pattern ) =>
 		pattern.categories?.includes( currentId )
 	);
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
index d1be1ad1fc5a6f..c2f8a98cc0ad3d 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
@@ -1,8 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { useEntityRecords } from '@wordpress/core-data';
+import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -16,6 +18,29 @@ export default function usePatternCategories() {
 		{ per_page: -1, hide_empty: false, context: 'view' }
 	);
 
+	const userPatterns = useSelect( ( select ) =>
+		select( coreStore ).getEntityRecords( 'postType', 'wp_block', {
+			per_page: -1,
+		} )
+	);
+
+	const uncategorized = useMemo( () => {
+		const category = {
+			count: 0,
+			id: 'uncategorized',
+			slug: 'uncategorized',
+			name: __( 'Uncategorized' ),
+		};
+
+		( userPatterns || [] ).forEach( ( pattern ) => {
+			if ( ! pattern.wp_pattern?.length ) {
+				category.count += 1;
+			}
+		} );
+
+		return category;
+	}, [ userPatterns ] );
+
 	const themePatterns = useThemePatterns();
 	const patternCategories = useMemo( () => {
 		if ( ! categories ) {
@@ -47,8 +72,12 @@ export default function usePatternCategories() {
 			}
 		} );
 
+		if ( uncategorized.count ) {
+			categoriesWithCounts.push( uncategorized );
+		}
+
 		return categoriesWithCounts;
-	}, [ categories, themePatterns ] );
+	}, [ categories, themePatterns, uncategorized ] );
 
 	return { patternCategories, hasPatterns: !! patternCategories.length };
 }

From 53bcb37b2cf360f591aa79aff3d126abf5b14912 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 8 Jun 2023 17:39:15 +1000
Subject: [PATCH 33/73] Make pattern category selection option and add sync
 toggle

---
 .../src/components/add-new-pattern/index.js   | 13 +++------
 .../components/create-pattern-modal/index.js  | 27 +++++++++++++++++--
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js
index be9c32bfe211c7..4f4e96bf8e6c83 100644
--- a/packages/edit-site/src/components/add-new-pattern/index.js
+++ b/packages/edit-site/src/components/add-new-pattern/index.js
@@ -24,7 +24,7 @@ export default function AddNewPattern( { toggleProps } ) {
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { saveEntityRecord, invalidateResolution } = useDispatch( coreStore );
 
-	async function createPattern( { name, categoryId } ) {
+	async function createPattern( { name, categoryId, syncType } ) {
 		if ( ! name ) {
 			createErrorNotice( __( 'Name is not defined.' ), {
 				type: 'snackbar',
@@ -32,12 +32,7 @@ export default function AddNewPattern( { toggleProps } ) {
 			return;
 		}
 
-		if ( ! categoryId ) {
-			createErrorNotice( __( 'Category has not been selected.' ), {
-				type: 'snackbar',
-			} );
-			return;
-		}
+		const categories = categoryId ? [ categoryId ] : undefined;
 
 		try {
 			// TODO: Enforce unique pattern names?
@@ -49,8 +44,8 @@ export default function AddNewPattern( { toggleProps } ) {
 					title: name || __( 'Untitled Pattern' ),
 					content: '',
 					status: 'publish',
-					meta: { wp_block: { sync_status: 'notSynced' } },
-					wp_pattern: [ categoryId ],
+					meta: { wp_block: { sync_status: syncType } },
+					wp_pattern: categories,
 				},
 				{ throwOnError: true }
 			);
diff --git a/packages/edit-site/src/components/create-pattern-modal/index.js b/packages/edit-site/src/components/create-pattern-modal/index.js
index a4af79e437dfab..a56d3d2144ae5f 100644
--- a/packages/edit-site/src/components/create-pattern-modal/index.js
+++ b/packages/edit-site/src/components/create-pattern-modal/index.js
@@ -6,6 +6,7 @@ import {
 	Button,
 	Modal,
 	SelectControl,
+	ToggleControl,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
@@ -13,9 +14,15 @@ import { useEntityRecords } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 
+const SYNC_TYPES = {
+	full: 'fully',
+	unsynced: 'unsynced',
+};
+
 export default function CreatePatternModal( { closeModal, onCreate } ) {
 	const [ name, setName ] = useState( '' );
 	const [ categoryId, setCategoryId ] = useState( '' );
+	const [ syncType, setSyncType ] = useState( SYNC_TYPES.full );
 	const [ isSubmitting, setIsSubmitting ] = useState( false );
 
 	const { records: categories } = useEntityRecords(
@@ -33,6 +40,12 @@ export default function CreatePatternModal( { closeModal, onCreate } ) {
 			{ value: '', label: __( 'Select a category' ), disabled: true },
 		] );
 
+	const onSyncChange = () => {
+		setSyncType(
+			syncType === SYNC_TYPES.full ? SYNC_TYPES.unsynced : SYNC_TYPES.full
+		);
+	};
+
 	return (
 		<Modal
 			title={ __( 'Create a pattern' ) }
@@ -52,7 +65,7 @@ export default function CreatePatternModal( { closeModal, onCreate } ) {
 						return;
 					}
 					setIsSubmitting( true );
-					await onCreate( { name, categoryId } );
+					await onCreate( { name, categoryId, syncType } );
 				} }
 			>
 				<VStack spacing="4">
@@ -72,6 +85,16 @@ export default function CreatePatternModal( { closeModal, onCreate } ) {
 						size="__unstable-large"
 						value={ categoryId }
 					/>
+					<ToggleControl
+						label={ __( 'Synced' ) }
+						onChange={ onSyncChange }
+						help={
+							syncType === SYNC_TYPES.full
+								? __( 'Content is synced' )
+								: __( 'Content is not synced' )
+						}
+						checked={ syncType === SYNC_TYPES.full }
+					/>
 					<HStack justify="right">
 						<Button
 							variant="tertiary"
@@ -84,7 +107,7 @@ export default function CreatePatternModal( { closeModal, onCreate } ) {
 						<Button
 							variant="primary"
 							type="submit"
-							disabled={ ! name || ! categoryId }
+							disabled={ ! name }
 							isBusy={ isSubmitting }
 						>
 							{ __( 'Create' ) }

From 495042971d2fb26f779e2767cf5622d616d2132d Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 13 Jun 2023 16:16:00 +1000
Subject: [PATCH 34/73] Separate display of synced/unsynced patterns

---
 .../src/components/library/grid-item.js       | 136 +++++++++++++++
 .../edit-site/src/components/library/grid.js  | 159 ++----------------
 .../edit-site/src/components/library/index.js |   4 +-
 .../src/components/library/no-patterns.js     |  12 ++
 .../src/components/library/patterns-list.js   |  66 ++++++++
 .../src/components/library/style.scss         |  65 ++++++-
 .../src/components/library/use-patterns.js    |  70 +++++---
 7 files changed, 337 insertions(+), 175 deletions(-)
 create mode 100644 packages/edit-site/src/components/library/grid-item.js
 create mode 100644 packages/edit-site/src/components/library/no-patterns.js
 create mode 100644 packages/edit-site/src/components/library/patterns-list.js

diff --git a/packages/edit-site/src/components/library/grid-item.js b/packages/edit-site/src/components/library/grid-item.js
new file mode 100644
index 00000000000000..87eeb74ee67413
--- /dev/null
+++ b/packages/edit-site/src/components/library/grid-item.js
@@ -0,0 +1,136 @@
+/**
+ * WordPress dependencies
+ */
+import { BlockPreview } from '@wordpress/block-editor';
+import {
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+	VisuallyHidden,
+	__experimentalHStack as HStack,
+	__unstableCompositeItem as CompositeItem,
+} from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { Icon, moreHorizontal } from '@wordpress/icons';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
+
+/**
+ * Internal dependencies
+ */
+import { useLink } from '../routes/link';
+import { PATTERNS, USER_PATTERNS } from './use-patterns';
+
+const DeleteMenuItem = ( { item, onClose } ) => {
+	const { invalidateResolution } = useDispatch( coreStore );
+	const { __experimentalDeleteReusableBlock } =
+		useDispatch( reusableBlocksStore );
+	const { createErrorNotice, createSuccessNotice } =
+		useDispatch( noticesStore );
+
+	if ( item.type !== USER_PATTERNS ) {
+		return;
+	}
+
+	const deleteReusableBlock = async () => {
+		try {
+			await __experimentalDeleteReusableBlock( item.id );
+			invalidateResolution( 'getEntityRecords', [
+				'taxonomy',
+				'wp_pattern',
+				{ per_page: -1, hide_empty: false, context: 'view' },
+			] );
+			createSuccessNotice( __( 'Pattern successfully deleted.' ), {
+				type: 'snackbar',
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while deleting the pattern.' );
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+		} finally {
+			onClose();
+		}
+	};
+
+	return (
+		<MenuItem onClick={ deleteReusableBlock }>{ __( 'Delete' ) }</MenuItem>
+	);
+};
+
+const GridItem = ( { categoryId, composite, icon, item } ) => {
+	const instanceId = useInstanceId( GridItem );
+	const descriptionId = `edit-site-library__pattern-description-${ instanceId }`;
+
+	const { onClick } = useLink( {
+		path: '/library',
+		postType: item.type,
+		postId: item.type === USER_PATTERNS ? item.id : item.name,
+		categoryId,
+		categoryType: item.type,
+		canvas: 'edit',
+	} );
+
+	return (
+		<div
+			className="edit-site-library__pattern"
+			aria-label={ item.title }
+			aria-describedby={ item.description ? descriptionId : undefined }
+		>
+			<CompositeItem
+				className="edit-site-library__preview"
+				role="option"
+				as="div"
+				{ ...composite }
+				onClick={ item.type !== PATTERNS ? onClick : undefined }
+			>
+				<BlockPreview blocks={ item.blocks } />
+				{ !! item.description && (
+					<VisuallyHidden id={ descriptionId }>
+						{ item.description }
+					</VisuallyHidden>
+				) }
+			</CompositeItem>
+			<HStack
+				className="edit-site-library__footer"
+				justify="space-between"
+			>
+				<HStack
+					alignment="center"
+					justify="left"
+					className="edit-site-library__pattern-title"
+				>
+					{ icon && <Icon icon={ icon } /> }
+					<span>{ item.title }</span>
+				</HStack>
+				{ item.type === USER_PATTERNS && (
+					<DropdownMenu
+						icon={ moreHorizontal }
+						label={ __( 'Actions' ) }
+						className="edit-site-library__dropdown"
+						popoverProps={ { placement: 'bottom-end' } }
+						toggleProps={ {
+							className: 'edit-site-library__button',
+							isSmall: true,
+						} }
+					>
+						{ ( { onClose } ) => (
+							<MenuGroup>
+								<DeleteMenuItem
+									item={ item }
+									onClose={ onClose }
+								/>
+							</MenuGroup>
+						) }
+					</DropdownMenu>
+				) }
+			</HStack>
+		</div>
+	);
+};
+
+export default GridItem;
diff --git a/packages/edit-site/src/components/library/grid.js b/packages/edit-site/src/components/library/grid.js
index b9f0fd0a11d18c..cbd1f7ee724d2b 100644
--- a/packages/edit-site/src/components/library/grid.js
+++ b/packages/edit-site/src/components/library/grid.js
@@ -1,157 +1,23 @@
 /**
  * WordPress dependencies
  */
-import { BlockPreview } from '@wordpress/block-editor';
 import {
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
-	VisuallyHidden,
-	__experimentalHStack as HStack,
 	__unstableComposite as Composite,
 	__unstableUseCompositeState as useCompositeState,
-	__unstableCompositeItem as CompositeItem,
 } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
-import { store as coreStore } from '@wordpress/core-data';
-import { useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { moreHorizontal } from '@wordpress/icons';
-import { store as noticesStore } from '@wordpress/notices';
-import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
 
 /**
  * Internal dependencies
  */
-import { useLink } from '../routes/link';
-import { usePatterns, PATTERNS, USER_PATTERNS } from './use-patterns';
+import GridItem from './grid-item';
 
-const DeleteMenuItem = ( { item, onClose } ) => {
-	const { invalidateResolution } = useDispatch( coreStore );
-	const { __experimentalDeleteReusableBlock } =
-		useDispatch( reusableBlocksStore );
-	const { createErrorNotice, createSuccessNotice } =
-		useDispatch( noticesStore );
-
-	if ( item.type !== USER_PATTERNS ) {
-		return;
-	}
-
-	const deleteReusableBlock = async () => {
-		try {
-			await __experimentalDeleteReusableBlock( item.id );
-			invalidateResolution( 'getEntityRecords', [
-				'taxonomy',
-				'wp_pattern',
-				{ per_page: -1, hide_empty: false, context: 'view' },
-			] );
-			createSuccessNotice( __( 'Pattern successfully deleted.' ), {
-				type: 'snackbar',
-			} );
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'An error occurred while deleting the pattern.' );
-			createErrorNotice( errorMessage, { type: 'snackbar' } );
-		} finally {
-			onClose();
-		}
-	};
-
-	return (
-		<MenuItem onClick={ deleteReusableBlock }>{ __( 'Delete' ) }</MenuItem>
-	);
-};
-
-const GridItem = ( { categoryId, composite, item } ) => {
-	const instanceId = useInstanceId( GridItem );
-	const descriptionId = `edit-site-library__pattern-description-${ instanceId }`;
-
-	const { onClick } = useLink( {
-		path: '/library',
-		postType: item.type,
-		postId: item.type === USER_PATTERNS ? item.id : item.name,
-		categoryId,
-		categoryType: item.type,
-		canvas: 'edit',
-	} );
-
-	return (
-		<div
-			className="edit-site-library__pattern"
-			aria-label={ item.title }
-			aria-describedby={ item.description ? descriptionId : undefined }
-		>
-			<CompositeItem
-				className="edit-site-library__preview"
-				role="option"
-				as="div"
-				{ ...composite }
-				onClick={ item.type !== PATTERNS ? onClick : undefined }
-			>
-				<BlockPreview blocks={ item.blocks } />
-				{ !! item.description && (
-					<VisuallyHidden id={ descriptionId }>
-						{ item.description }
-					</VisuallyHidden>
-				) }
-			</CompositeItem>
-			<HStack
-				className="edit-site-library__footer"
-				justify="space-between"
-			>
-				<span>{ item.title }</span>
-				{ item.type === USER_PATTERNS && (
-					<DropdownMenu
-						icon={ moreHorizontal }
-						label={ __( 'Actions' ) }
-						className="edit-site-library__dropdown"
-						popoverProps={ { placement: 'bottom-end' } }
-						toggleProps={ {
-							className: 'edit-site-library__button',
-							isSmall: true,
-						} }
-					>
-						{ ( { onClose } ) => (
-							<MenuGroup>
-								<DeleteMenuItem
-									item={ item }
-									onClose={ onClose }
-								/>
-							</MenuGroup>
-						) }
-					</DropdownMenu>
-				) }
-			</HStack>
-		</div>
-	);
-};
-
-export default function Grid( { categoryId, label, type } ) {
-	const [ patterns, isResolving ] = usePatterns( type, categoryId );
+export default function Grid( { categoryId, label, icon, items } ) {
 	const composite = useCompositeState( { orientation: 'vertical' } );
 
-	if ( ! patterns ) {
+	if ( ! items?.length ) {
 		return null;
 	}
 
-	if ( ! patterns.length ) {
-		return (
-			<div
-				style={ {
-					color: '#e0e0e0',
-					height: '100%',
-					display: 'flex',
-					alignItems: 'center',
-					justifyContent: 'center',
-				} }
-			>
-				{ __( 'No patterns found.' ) }
-			</div>
-		);
-	}
-
 	return (
 		<Composite
 			{ ...composite }
@@ -159,16 +25,15 @@ export default function Grid( { categoryId, label, type } ) {
 			className="edit-site-library__grid"
 			aria-label={ label }
 		>
-			{ isResolving && __( 'Loading' ) }
-			{ ! isResolving &&
-				patterns.map( ( pattern ) => (
-					<GridItem
-						key={ pattern.name }
-						item={ pattern }
-						categoryId={ categoryId }
-						composite={ composite }
-					/>
-				) ) }
+			{ items.map( ( item ) => (
+				<GridItem
+					key={ item.name }
+					icon={ icon }
+					item={ item }
+					categoryId={ categoryId }
+					composite={ composite }
+				/>
+			) ) }
 		</Composite>
 	);
 }
diff --git a/packages/edit-site/src/components/library/index.js b/packages/edit-site/src/components/library/index.js
index 94ca60fcc2cc1e..4e87f4a09cc958 100644
--- a/packages/edit-site/src/components/library/index.js
+++ b/packages/edit-site/src/components/library/index.js
@@ -12,7 +12,7 @@ import { getQueryArgs } from '@wordpress/url';
 /**
  * Internal dependencies
  */
-import Grid from './grid';
+import PatternsList from './patterns-list';
 import useLibrarySettings from './use-library-settings';
 import useTitle from '../routes/use-title';
 import { unlock } from '../../private-apis';
@@ -56,7 +56,7 @@ export default function Library() {
 				// This ensures 'styles' that are needed for the previews are synced
 				// from the site editor store to the block editor store.
 				<ExperimentalBlockEditorProvider settings={ settings }>
-					<Grid
+					<PatternsList
 						type={ type }
 						categoryId={ category }
 						label={ __( 'Patterns list' ) }
diff --git a/packages/edit-site/src/components/library/no-patterns.js b/packages/edit-site/src/components/library/no-patterns.js
new file mode 100644
index 00000000000000..27d9380aab661c
--- /dev/null
+++ b/packages/edit-site/src/components/library/no-patterns.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export default function NoPatterns() {
+	return (
+		<div className="edit-site-library__no-results">
+			{ __( 'No patterns found.' ) }
+		</div>
+	);
+}
diff --git a/packages/edit-site/src/components/library/patterns-list.js b/packages/edit-site/src/components/library/patterns-list.js
new file mode 100644
index 00000000000000..dab58afe3fb686
--- /dev/null
+++ b/packages/edit-site/src/components/library/patterns-list.js
@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+
+import {
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { symbol } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Grid from './grid';
+import NoPatterns from './no-patterns';
+import usePatterns from './use-patterns';
+
+export default function PatternsList( { categoryId, label, type } ) {
+	const [ patterns, isResolving ] = usePatterns( type, categoryId );
+	const { syncedPatterns, unsyncedPatterns } = patterns;
+	const hasPatterns = !! syncedPatterns.length || !! unsyncedPatterns.length;
+
+	return (
+		<VStack spacing={ 6 }>
+			{ isResolving && __( 'Loading' ) }
+			{ ! isResolving && !! syncedPatterns.length && (
+				<>
+					<VStack className="edit-site-library__section-header">
+						<Heading level={ 5 }>{ __( 'Synced' ) }</Heading>
+						<Text as="p">
+							{ __(
+								'Make a change to one of these patterns and have it reflected across your entire site.'
+							) }
+						</Text>
+					</VStack>
+					<Grid
+						icon={ symbol }
+						categoryId={ categoryId }
+						label={ label }
+						items={ syncedPatterns }
+					/>
+				</>
+			) }
+			{ ! isResolving && !! unsyncedPatterns.length && (
+				<>
+					<VStack className="edit-site-library__section-header">
+						<Heading level={ 5 }>{ __( 'Standard' ) }</Heading>
+						<Text as="p">
+							{ __(
+								'Insert and customize without stating in sync'
+							) }
+						</Text>
+					</VStack>
+					<Grid
+						categoryId={ categoryId }
+						label={ label }
+						items={ unsyncedPatterns }
+					/>
+				</>
+			) }
+			{ ! isResolving && ! hasPatterns && <NoPatterns /> }
+		</VStack>
+	);
+}
diff --git a/packages/edit-site/src/components/library/style.scss b/packages/edit-site/src/components/library/style.scss
index f230a8d009828c..3fc024688a4425 100644
--- a/packages/edit-site/src/components/library/style.scss
+++ b/packages/edit-site/src/components/library/style.scss
@@ -1,8 +1,26 @@
-.edit-site-library {
-	width: 100%;
+$library-color: #e0e0e0;
 
-	.interface-interface-skeleton__content {
-		border-radius: 0;
+.edit-site-layout {
+	.edit-site-library {
+		width: 100%;
+
+		.interface-interface-skeleton__editor {
+			.interface-interface-skeleton__body {
+				.interface-interface-skeleton__content {
+					border-radius: 0;
+				}
+			}
+		}
+	}
+}
+
+.edit-site-library__section-header {
+	p {
+		color: $library-color;
+	}
+
+	h5 {
+		color: #fff;
 	}
 }
 
@@ -13,8 +31,6 @@
 	// Small top padding required to avoid cutting off the visible outline
 	// when hovering items.
 	padding-top: $border-width-focus-fallback;
-	padding-left: $grid-unit-15;
-	padding-right: $grid-unit-15;
 
 	.edit-site-library__pattern {
 		break-inside: avoid-column;
@@ -31,7 +47,7 @@
 
 		.edit-site-library__footer,
 		.edit-site-library__button {
-			color: #e0e0e0;
+			color: $library-color;
 		}
 		// END: temp styles for testing.
 	}
@@ -41,3 +57,38 @@
 		margin-bottom: $grid-unit-30;
 	}
 }
+
+// The increased specificity here is to overcome component styles
+// without relying on internal component class names.
+.edit-site-library__search {
+	&#{&} input[type="search"] {
+		background: $gray-800;
+		color: $library-color;
+
+		&:focus {
+			background: $gray-800;
+		}
+	}
+
+	svg {
+		fill: $library-color;
+	}
+}
+
+.edit-site-library__pattern-title {
+	color: $library-color;
+
+	svg {
+		border-radius: $grid-unit-05;
+		background: var(--wp-block-synced-color);
+		fill: $library-color;
+	}
+}
+
+.edit-site-library__no-results {
+	color: $library-color;
+	// height: 100%,
+	// display: flex,
+	// alignItems: center,
+	// justifyContent: center,
+}
diff --git a/packages/edit-site/src/components/library/use-patterns.js b/packages/edit-site/src/components/library/use-patterns.js
index cafcd3f07fa799..c9a74f66dc400b 100644
--- a/packages/edit-site/src/components/library/use-patterns.js
+++ b/packages/edit-site/src/components/library/use-patterns.js
@@ -16,6 +16,10 @@ const EMPTY_PATTERN_LIST = [];
 export const TEMPLATE_PARTS = 'wp_template_part';
 export const PATTERNS = 'pattern';
 export const USER_PATTERNS = 'wp_block';
+const SYNC_TYPES = {
+	full: 'fully',
+	unsynced: 'unsynced',
+};
 
 const createTemplatePartId = ( theme, slug ) =>
 	theme && slug ? theme + '//' + slug : null;
@@ -133,53 +137,81 @@ const reusableBlockToPattern = ( reusableBlock ) => ( {
 
 const useUserPatterns = ( categoryId, categoryType = PATTERNS ) => {
 	const postType = categoryType === PATTERNS ? USER_PATTERNS : categoryType;
-	const userPatterns = useSelect(
+	const unfilteredPatterns = useSelect(
 		( select ) => {
 			if ( postType !== USER_PATTERNS ) {
-				return EMPTY_PATTERN_LIST;
+				return {};
 			}
 
 			const { getEntityRecords } = select( coreStore );
-			const nonSyncedPatterns = getEntityRecords( 'postType', postType, {
+			const records = getEntityRecords( 'postType', postType, {
 				per_page: -1,
 			} );
 
-			if ( ! nonSyncedPatterns ) {
-				return EMPTY_PATTERN_LIST;
+			if ( ! records ) {
+				return {};
 			}
 
-			return nonSyncedPatterns.map( ( item ) =>
-				reusableBlockToPattern( item )
-			);
+			const patterns = { synced: [], unsynced: [] };
+
+			records.forEach( ( record ) => {
+				const pattern = reusableBlockToPattern( record );
+
+				if ( record.meta?.wp_block?.sync_status === SYNC_TYPES.full ) {
+					patterns.synced.push( pattern );
+				} else {
+					patterns.unsynced.push( pattern );
+				}
+			} );
+
+			return patterns;
 		},
 		[ postType ]
 	);
 
 	if ( categoryId === 'uncategorized' ) {
-		return userPatterns.filter(
-			( pattern ) => ! pattern.categories?.length
-		);
+		return {
+			syncedPatterns: unfilteredPatterns.synced?.filter(
+				( pattern ) => ! pattern.categories?.length
+			),
+			unsyncedPatterns: unfilteredPatterns.unsynced?.filter(
+				( pattern ) => ! pattern.categories?.length
+			),
+		};
 	}
 
 	const currentId = parseInt( categoryId );
 
-	return userPatterns.filter( ( pattern ) =>
-		pattern.categories?.includes( currentId )
-	);
+	return {
+		syncedPatterns: unfilteredPatterns.synced?.filter( ( pattern ) =>
+			pattern.categories?.includes( currentId )
+		),
+		unsyncedPatterns: unfilteredPatterns.unsynced?.filter( ( pattern ) =>
+			pattern.categories?.includes( currentId )
+		),
+	};
 };
 
 export const usePatterns = ( categoryType, categoryId ) => {
-	const patterns = useBlockPatternsByCategory( categoryId, categoryType );
-	const userPatterns = useUserPatterns( categoryId, categoryType );
+	const blockPatterns = useBlockPatternsByCategory(
+		categoryId,
+		categoryType
+	);
+	const { syncedPatterns = [], unsyncedPatterns = [] } = useUserPatterns(
+		categoryId,
+		categoryType
+	);
 	const { templateParts, isResolving } = useTemplatePartsAsPatterns(
 		categoryId,
 		categoryType
 	);
 
-	// TODO: Add sorting etc.
+	const patterns = {
+		syncedPatterns: [ ...templateParts, ...syncedPatterns ],
+		unsyncedPatterns: [ ...blockPatterns, ...unsyncedPatterns ],
+	};
 
-	const results = [ ...templateParts, ...patterns, ...userPatterns ];
-	return [ results, isResolving ];
+	return [ patterns, isResolving ];
 };
 
 export default usePatterns;

From a3bc2821b950238f192645d49ac075d8f0afdf68 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 13 Jun 2023 16:17:17 +1000
Subject: [PATCH 35/73] Add placeholder search control.

---
 .../src/components/library/patterns-list.js          | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/edit-site/src/components/library/patterns-list.js b/packages/edit-site/src/components/library/patterns-list.js
index dab58afe3fb686..bd7482aafa00d5 100644
--- a/packages/edit-site/src/components/library/patterns-list.js
+++ b/packages/edit-site/src/components/library/patterns-list.js
@@ -3,10 +3,12 @@
  */
 
 import {
+	SearchControl,
 	__experimentalHeading as Heading,
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { symbol } from '@wordpress/icons';
 
@@ -18,12 +20,22 @@ import NoPatterns from './no-patterns';
 import usePatterns from './use-patterns';
 
 export default function PatternsList( { categoryId, label, type } ) {
+	const [ query, setQuery ] = useState( '' );
 	const [ patterns, isResolving ] = usePatterns( type, categoryId );
 	const { syncedPatterns, unsyncedPatterns } = patterns;
 	const hasPatterns = !! syncedPatterns.length || !! unsyncedPatterns.length;
 
 	return (
 		<VStack spacing={ 6 }>
+			<SearchControl
+				className="edit-site-library__search"
+				onChange={ ( value ) => {
+					setQuery( value );
+				} }
+				placeholder={ __( 'Search patterns' ) }
+				value={ query }
+				__nextHasNoMarginBottom
+			/>
 			{ isResolving && __( 'Loading' ) }
 			{ ! isResolving && !! syncedPatterns.length && (
 				<>

From 50a084a4b734ffc9b7608bd144cf7828cae89447 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 13 Jun 2023 18:19:19 +1000
Subject: [PATCH 36/73] Update to use new Page components added along with
 Table

---
 .../edit-site/src/components/layout/index.js  |   8 +-
 .../edit-site/src/components/library/index.js |  72 -----------
 .../{library => page-library}/grid-item.js    |  11 +-
 .../{library => page-library}/grid.js         |   0
 .../src/components/page-library/index.js      | 113 ++++--------------
 .../{library => page-library}/no-patterns.js  |   0
 .../patterns-list.js                          |   0
 .../{library => page-library}/style.scss      |  19 ++-
 .../use-library-settings.js                   |   2 +-
 .../{library => page-library}/use-patterns.js |   2 +-
 .../src/components/page-main/index.js         |   2 +-
 .../edit-site/src/components/page/index.js    |  18 ++-
 packages/edit-site/src/style.scss             |   2 +-
 .../src/utils/get-is-library-page.js          |  11 --
 .../edit-site/src/utils/get-is-list-page.js   |   2 +-
 15 files changed, 65 insertions(+), 197 deletions(-)
 delete mode 100644 packages/edit-site/src/components/library/index.js
 rename packages/edit-site/src/components/{library => page-library}/grid-item.js (94%)
 rename packages/edit-site/src/components/{library => page-library}/grid.js (100%)
 rename packages/edit-site/src/components/{library => page-library}/no-patterns.js (100%)
 rename packages/edit-site/src/components/{library => page-library}/patterns-list.js (100%)
 rename packages/edit-site/src/components/{library => page-library}/style.scss (87%)
 rename packages/edit-site/src/components/{library => page-library}/use-library-settings.js (96%)
 rename packages/edit-site/src/components/{library => page-library}/use-patterns.js (99%)
 delete mode 100644 packages/edit-site/src/utils/get-is-library-page.js

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index a477ae6957c152..29b4605e67d259 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -36,7 +36,6 @@ import Sidebar from '../sidebar';
 import Editor from '../editor';
 import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
-import getIsLibraryPage from '../../utils/get-is-library-page';
 import getIsListPage from '../../utils/get-is-list-page';
 import Header from '../header-edit-mode';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
@@ -66,9 +65,8 @@ export default function Layout() {
 
 	const hubRef = useRef();
 	const { params } = useLocation();
-	const isLibraryPage = getIsLibraryPage( params );
 	const isListPage = getIsListPage( params );
-	const isEditorPage = ! isListPage && ! isLibraryPage;
+	const isEditorPage = ! isListPage;
 	const { hasFixedToolbar, canvasMode, previousShortcut, nextShortcut } =
 		useSelect( ( select ) => {
 			const { getAllShortcutKeyCombinations } = select(
@@ -95,14 +93,14 @@ export default function Layout() {
 	const disableMotion = useReducedMotion();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const showSidebar =
-		( isMobileViewport && isEditorPage ) ||
+		( isMobileViewport && ! isListPage ) ||
 		( ! isMobileViewport && ( canvasMode === 'view' || ! isEditorPage ) );
 	const showCanvas =
 		( isMobileViewport && isEditorPage && isEditing ) ||
 		! isMobileViewport ||
 		! isEditorPage;
 	const isFullCanvas =
-		( isMobileViewport && ! isEditorPage ) || ( isEditorPage && isEditing );
+		( isMobileViewport && isListPage ) || ( isEditorPage && isEditing );
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
 	const [ fullResizer ] = useResizeObserver();
 	const [ isResizing ] = useState( false );
diff --git a/packages/edit-site/src/components/library/index.js b/packages/edit-site/src/components/library/index.js
deleted file mode 100644
index 4e87f4a09cc958..00000000000000
--- a/packages/edit-site/src/components/library/index.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import { EditorSnackbars } from '@wordpress/editor';
-import { __ } from '@wordpress/i18n';
-import { InterfaceSkeleton } from '@wordpress/interface';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { getQueryArgs } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
-import PatternsList from './patterns-list';
-import useLibrarySettings from './use-library-settings';
-import useTitle from '../routes/use-title';
-import { unlock } from '../../private-apis';
-
-const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
-
-const DEFAULT_TYPE = 'wp_template_part';
-const DEFAULT_CATEGORY = 'header';
-
-export default function Library() {
-	const { categoryType, categoryId } = getQueryArgs( window.location.href );
-	const type = categoryType || DEFAULT_TYPE;
-	const category = categoryId || DEFAULT_CATEGORY;
-	const settings = useLibrarySettings();
-
-	// Do we need shortcuts if we aren't displaying a header?
-	const { previousShortcut, nextShortcut } = useSelect( ( select ) => {
-		return {
-			previousShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/edit-site/previous-region' ),
-			nextShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
-		};
-	}, [] );
-
-	useTitle( __( 'Library' ) );
-
-	// If we only have a single region, due to not including a header on this page,
-	// do we need the aria-label section?
-	const regionLabels = { body: __( 'Library - Content' ) };
-
-	return (
-		<InterfaceSkeleton
-			className="edit-site-library"
-			labels={ regionLabels }
-			notices={ <EditorSnackbars /> }
-			content={
-				// 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.
-				<ExperimentalBlockEditorProvider settings={ settings }>
-					<PatternsList
-						type={ type }
-						categoryId={ category }
-						label={ __( 'Patterns list' ) }
-					/>
-				</ExperimentalBlockEditorProvider>
-			}
-			shortcuts={ {
-				previous: previousShortcut,
-				next: nextShortcut,
-			} }
-		/>
-	);
-}
diff --git a/packages/edit-site/src/components/library/grid-item.js b/packages/edit-site/src/components/page-library/grid-item.js
similarity index 94%
rename from packages/edit-site/src/components/library/grid-item.js
rename to packages/edit-site/src/components/page-library/grid-item.js
index 87eeb74ee67413..f3aed978d513b8 100644
--- a/packages/edit-site/src/components/library/grid-item.js
+++ b/packages/edit-site/src/components/page-library/grid-item.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -75,6 +80,10 @@ const GridItem = ( { categoryId, composite, icon, item } ) => {
 		canvas: 'edit',
 	} );
 
+	const previewClassNames = classnames( 'edit-site-library__preview', {
+		'is-inactive': item.type === PATTERNS,
+	} );
+
 	return (
 		<div
 			className="edit-site-library__pattern"
@@ -82,7 +91,7 @@ const GridItem = ( { categoryId, composite, icon, item } ) => {
 			aria-describedby={ item.description ? descriptionId : undefined }
 		>
 			<CompositeItem
-				className="edit-site-library__preview"
+				className={ previewClassNames }
 				role="option"
 				as="div"
 				{ ...composite }
diff --git a/packages/edit-site/src/components/library/grid.js b/packages/edit-site/src/components/page-library/grid.js
similarity index 100%
rename from packages/edit-site/src/components/library/grid.js
rename to packages/edit-site/src/components/page-library/grid.js
diff --git a/packages/edit-site/src/components/page-library/index.js b/packages/edit-site/src/components/page-library/index.js
index b2bd1a0e932f85..33766d1089670e 100644
--- a/packages/edit-site/src/components/page-library/index.js
+++ b/packages/edit-site/src/components/page-library/index.js
@@ -1,104 +1,41 @@
 /**
  * WordPress dependencies
  */
-import {
-	VisuallyHidden,
-	__experimentalHeading as Heading,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
+import { getQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
 import Page from '../page';
-import Table from '../table';
-import Link from '../routes/link';
-import AddedBy from '../list/added-by';
-import TemplateActions from '../template-actions';
-import AddNewTemplate from '../add-new-template';
-import { store as editSiteStore } from '../../store';
+import PatternsList from './patterns-list';
+import useLibrarySettings from './use-library-settings';
+import { unlock } from '../../lock-unlock';
 
-export default function PageTemplates() {
-	const { records: templateParts } = useEntityRecords(
-		'postType',
-		'wp_template_part',
-		{
-			per_page: -1,
-		}
-	);
+const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 
-	const { canCreate } = useSelect( ( select ) => {
-		const { supportsTemplatePartsMode } =
-			select( editSiteStore ).getSettings();
-		return {
-			postType: select( coreStore ).getPostType( 'wp_template_part' ),
-			canCreate: ! supportsTemplatePartsMode,
-		};
-	} );
+const DEFAULT_TYPE = 'wp_template_part';
+const DEFAULT_CATEGORY = 'header';
 
-	const columns = [
-		{
-			header: __( 'Template Part' ),
-			cell: ( templatePart ) => (
-				<VStack>
-					<Heading level={ 5 }>
-						<Link
-							params={ {
-								postId: templatePart.id,
-								postType: templatePart.type,
-								canvas: 'edit',
-							} }
-						>
-							{ decodeEntities(
-								templatePart.title?.rendered ||
-									templatePart.slug
-							) }
-						</Link>
-					</Heading>
-				</VStack>
-			),
-			maxWidth: 400,
-		},
-		{
-			header: __( 'Added by' ),
-			cell: ( templatePart ) => (
-				<AddedBy
-					postType={ templatePart.type }
-					postId={ templatePart.id }
-				/>
-			),
-		},
-		{
-			header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
-			cell: ( templatePart ) => (
-				<TemplateActions
-					postType={ templatePart.type }
-					postId={ templatePart.id }
-				/>
-			),
-		},
-	];
+export default function PageLibrary() {
+	const { categoryType, categoryId } = getQueryArgs( window.location.href );
+	const type = categoryType || DEFAULT_TYPE;
+	const category = categoryId || DEFAULT_CATEGORY;
+	const settings = useLibrarySettings();
 
+	// 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 (
-		<Page
-			title={ __( 'Template Parts' ) }
-			actions={
-				canCreate && (
-					<AddNewTemplate
-						templateType={ 'wp_template_part' }
-						showIcon={ false }
-						toggleProps={ { variant: 'primary' } }
-					/>
-				)
-			}
-		>
-			{ templateParts && (
-				<Table data={ templateParts } columns={ columns } />
-			) }
-		</Page>
+		<ExperimentalBlockEditorProvider settings={ settings }>
+			<Page className="edit-site-library">
+				<PatternsList
+					type={ type }
+					categoryId={ category }
+					label={ __( 'Patterns list' ) }
+				/>
+			</Page>
+		</ExperimentalBlockEditorProvider>
 	);
 }
diff --git a/packages/edit-site/src/components/library/no-patterns.js b/packages/edit-site/src/components/page-library/no-patterns.js
similarity index 100%
rename from packages/edit-site/src/components/library/no-patterns.js
rename to packages/edit-site/src/components/page-library/no-patterns.js
diff --git a/packages/edit-site/src/components/library/patterns-list.js b/packages/edit-site/src/components/page-library/patterns-list.js
similarity index 100%
rename from packages/edit-site/src/components/library/patterns-list.js
rename to packages/edit-site/src/components/page-library/patterns-list.js
diff --git a/packages/edit-site/src/components/library/style.scss b/packages/edit-site/src/components/page-library/style.scss
similarity index 87%
rename from packages/edit-site/src/components/library/style.scss
rename to packages/edit-site/src/components/page-library/style.scss
index 3fc024688a4425..e7193ae3f53d85 100644
--- a/packages/edit-site/src/components/library/style.scss
+++ b/packages/edit-site/src/components/page-library/style.scss
@@ -1,17 +1,8 @@
 $library-color: #e0e0e0;
 
-.edit-site-layout {
-	.edit-site-library {
-		width: 100%;
-
-		.interface-interface-skeleton__editor {
-			.interface-interface-skeleton__body {
-				.interface-interface-skeleton__content {
-					border-radius: 0;
-				}
-			}
-		}
-	}
+.edit-site-library {
+	background: $gray-900;
+	margin: 0;
 }
 
 .edit-site-library__section-header {
@@ -43,6 +34,10 @@ $library-color: #e0e0e0;
 			border-radius: $radius-block-ui * 4;
 			cursor: pointer;
 			overflow: hidden;
+
+			&.is-inactive {
+				cursor: default;
+			}
 		}
 
 		.edit-site-library__footer,
diff --git a/packages/edit-site/src/components/library/use-library-settings.js b/packages/edit-site/src/components/page-library/use-library-settings.js
similarity index 96%
rename from packages/edit-site/src/components/library/use-library-settings.js
rename to packages/edit-site/src/components/page-library/use-library-settings.js
index 58913437bcbc99..07811997b371d1 100644
--- a/packages/edit-site/src/components/library/use-library-settings.js
+++ b/packages/edit-site/src/components/page-library/use-library-settings.js
@@ -8,7 +8,7 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
 export default function useLibrarySettings() {
diff --git a/packages/edit-site/src/components/library/use-patterns.js b/packages/edit-site/src/components/page-library/use-patterns.js
similarity index 99%
rename from packages/edit-site/src/components/library/use-patterns.js
rename to packages/edit-site/src/components/page-library/use-patterns.js
index c9a74f66dc400b..1b6862005075d7 100644
--- a/packages/edit-site/src/components/library/use-patterns.js
+++ b/packages/edit-site/src/components/page-library/use-patterns.js
@@ -9,7 +9,7 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
 const EMPTY_PATTERN_LIST = [];
diff --git a/packages/edit-site/src/components/page-main/index.js b/packages/edit-site/src/components/page-main/index.js
index 03fd0072cc3677..ebcf35dfb0c1f5 100644
--- a/packages/edit-site/src/components/page-main/index.js
+++ b/packages/edit-site/src/components/page-main/index.js
@@ -19,7 +19,7 @@ export default function PageMain() {
 
 	if ( path === '/wp_template/all' ) {
 		return <PageTemplates />;
-	} else if ( path === '/wp_template_part/all' ) {
+	} else if ( path === '/library' ) {
 		return <PageLibrary />;
 	}
 
diff --git a/packages/edit-site/src/components/page/index.js b/packages/edit-site/src/components/page/index.js
index 6836456c8eb9b9..c0c48ff65b056e 100644
--- a/packages/edit-site/src/components/page/index.js
+++ b/packages/edit-site/src/components/page/index.js
@@ -1,12 +1,24 @@
 /**
- * Internal dependencies
+ * External dependencies
  */
+import classnames from 'classnames';
 
+/**
+ * Internal dependencies
+ */
 import Header from './header';
 
-export default function Page( { title, subTitle, actions, children } ) {
+export default function Page( {
+	title,
+	subTitle,
+	actions,
+	children,
+	className,
+} ) {
+	const classes = classnames( 'edit-site-page', className );
+
 	return (
-		<div className="edit-site-page">
+		<div className={ classes }>
 			{ title && (
 				<Header
 					title={ title }
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index bb73b50aeb5b65..4c45f3c39dcafa 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -8,9 +8,9 @@
 @import "./components/global-styles/screen-revisions/style.scss";
 @import "./components/header-edit-mode/style.scss";
 @import "./components/header-edit-mode/document-actions/style.scss";
-@import "./components/library/style.scss";
 @import "./components/list/style.scss";
 @import "./components/page/style.scss";
+@import "./components/page-library/style.scss";
 @import "./components/table/style.scss";
 @import "./components/sidebar-edit-mode/style.scss";
 @import "./components/sidebar-edit-mode/page-panels/style.scss";
diff --git a/packages/edit-site/src/utils/get-is-library-page.js b/packages/edit-site/src/utils/get-is-library-page.js
deleted file mode 100644
index c978deb26a44f6..00000000000000
--- a/packages/edit-site/src/utils/get-is-library-page.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/*
- * Returns if the params match the library page route.
- *
- * @param {Object} params      The url params.
- * @param {string} params.path The current path.
- *
- * @return {boolean} Is library page or not.
- */
-export default function getIsLibraryPage( { path } ) {
-	return path === '/library';
-}
diff --git a/packages/edit-site/src/utils/get-is-list-page.js b/packages/edit-site/src/utils/get-is-list-page.js
index 3e7049985cc92a..890a0c7b0c8dc8 100644
--- a/packages/edit-site/src/utils/get-is-list-page.js
+++ b/packages/edit-site/src/utils/get-is-list-page.js
@@ -7,5 +7,5 @@
  * @return {boolean} Is list page or not.
  */
 export default function getIsListPage( { path } ) {
-	return path === '/wp_template/all' || path === '/wp_template_part/all';
+	return path === '/wp_template/all' || path === '/library';
 }

From a1acfc01c72ab6e9c8ef92712994f454abf7cb85 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 14 Jun 2023 10:12:50 +1000
Subject: [PATCH 37/73] Fix private apis imports

---
 packages/edit-site/src/components/add-new-pattern/index.js      | 2 +-
 .../sidebar-navigation-screen-library/use-theme-patterns.js     | 2 +-
 .../src/components/sidebar-navigation-screen-pattern/index.js   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js
index 4f4e96bf8e6c83..faf80833c4bd02 100644
--- a/packages/edit-site/src/components/add-new-pattern/index.js
+++ b/packages/edit-site/src/components/add-new-pattern/index.js
@@ -14,7 +14,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import CreatePatternModal from '../create-pattern-modal';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useHistory } = unlock( routerPrivateApis );
 
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-theme-patterns.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-theme-patterns.js
index 6b6219cd0252cd..f3f54767d88725 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-theme-patterns.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-theme-patterns.js
@@ -8,7 +8,7 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
 export default function useThemePatterns() {
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js
index 8b5a72913ee889..149f420ff6fb9b 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js
@@ -16,7 +16,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import useEditedEntityRecord from '../use-edited-entity-record';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
 import { useAddedBy } from '../list/added-by';

From d0830f5a353eb5cdd994ac4b0ca68962dbc6656f Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Wed, 14 Jun 2023 11:33:42 +1000
Subject: [PATCH 38/73] style changes to library

---
 .../src/components/page-library/grid-item.js  |  4 ++-
 .../components/page-library/patterns-list.js  |  8 ++---
 .../src/components/page-library/style.scss    | 34 ++++++++-----------
 .../sidebar-navigation-item/index.js          |  1 +
 .../sidebar-navigation-item/style.scss        |  4 +++
 .../index.js                                  | 26 ++++++++------
 .../style.scss                                |  4 +--
 7 files changed, 43 insertions(+), 38 deletions(-)

diff --git a/packages/edit-site/src/components/page-library/grid-item.js b/packages/edit-site/src/components/page-library/grid-item.js
index f3aed978d513b8..a363f1fc977105 100644
--- a/packages/edit-site/src/components/page-library/grid-item.js
+++ b/packages/edit-site/src/components/page-library/grid-item.js
@@ -12,6 +12,7 @@ import {
 	MenuGroup,
 	MenuItem,
 	VisuallyHidden,
+	__experimentalHeading as Heading,
 	__experimentalHStack as HStack,
 	__unstableCompositeItem as CompositeItem,
 } from '@wordpress/components';
@@ -111,10 +112,11 @@ const GridItem = ( { categoryId, composite, icon, item } ) => {
 				<HStack
 					alignment="center"
 					justify="left"
+					spacing={ 3 }
 					className="edit-site-library__pattern-title"
 				>
 					{ icon && <Icon icon={ icon } /> }
-					<span>{ item.title }</span>
+					<Heading level={ 5 }>{ item.title }</Heading>
 				</HStack>
 				{ item.type === USER_PATTERNS && (
 					<DropdownMenu
diff --git a/packages/edit-site/src/components/page-library/patterns-list.js b/packages/edit-site/src/components/page-library/patterns-list.js
index bd7482aafa00d5..68e67e25a006ca 100644
--- a/packages/edit-site/src/components/page-library/patterns-list.js
+++ b/packages/edit-site/src/components/page-library/patterns-list.js
@@ -40,8 +40,8 @@ export default function PatternsList( { categoryId, label, type } ) {
 			{ ! isResolving && !! syncedPatterns.length && (
 				<>
 					<VStack className="edit-site-library__section-header">
-						<Heading level={ 5 }>{ __( 'Synced' ) }</Heading>
-						<Text as="p">
+						<Heading level={ 4 }>{ __( 'Synced' ) }</Heading>
+						<Text variant="muted" as="p">
 							{ __(
 								'Make a change to one of these patterns and have it reflected across your entire site.'
 							) }
@@ -58,8 +58,8 @@ export default function PatternsList( { categoryId, label, type } ) {
 			{ ! isResolving && !! unsyncedPatterns.length && (
 				<>
 					<VStack className="edit-site-library__section-header">
-						<Heading level={ 5 }>{ __( 'Standard' ) }</Heading>
-						<Text as="p">
+						<Heading level={ 4 }>{ __( 'Standard' ) }</Heading>
+						<Text variant="muted" as="p">
 							{ __(
 								'Insert and customize without stating in sync'
 							) }
diff --git a/packages/edit-site/src/components/page-library/style.scss b/packages/edit-site/src/components/page-library/style.scss
index e7193ae3f53d85..44374b1e69c631 100644
--- a/packages/edit-site/src/components/page-library/style.scss
+++ b/packages/edit-site/src/components/page-library/style.scss
@@ -1,17 +1,12 @@
-$library-color: #e0e0e0;
-
 .edit-site-library {
-	background: $gray-900;
+	background: rgba(0, 0, 0, 0.05);
 	margin: 0;
-}
-
-.edit-site-library__section-header {
-	p {
-		color: $library-color;
+	.components-text {
+		color: $gray-600;
 	}
 
-	h5 {
-		color: #fff;
+	.components-heading {
+		color: $white;
 	}
 }
 
@@ -22,6 +17,7 @@ $library-color: #e0e0e0;
 	// Small top padding required to avoid cutting off the visible outline
 	// when hovering items.
 	padding-top: $border-width-focus-fallback;
+	margin-bottom: $grid-unit-40;
 
 	.edit-site-library__pattern {
 		break-inside: avoid-column;
@@ -31,7 +27,7 @@ $library-color: #e0e0e0;
 
 		// Temp styles for testing - delete asap
 		.edit-site-library__preview {
-			border-radius: $radius-block-ui * 4;
+			border-radius: $radius-block-ui;
 			cursor: pointer;
 			overflow: hidden;
 
@@ -42,14 +38,14 @@ $library-color: #e0e0e0;
 
 		.edit-site-library__footer,
 		.edit-site-library__button {
-			color: $library-color;
+			color: $gray-600;
 		}
 		// END: temp styles for testing.
 	}
 
 	.edit-site-library__preview {
 		flex: 1;
-		margin-bottom: $grid-unit-30;
+		margin-bottom: $grid-unit-20;
 	}
 }
 
@@ -58,30 +54,30 @@ $library-color: #e0e0e0;
 .edit-site-library__search {
 	&#{&} input[type="search"] {
 		background: $gray-800;
-		color: $library-color;
+		color: $gray-600;
 
 		&:focus {
-			background: $gray-800;
+			background: $gray-600;
 		}
 	}
 
 	svg {
-		fill: $library-color;
+		fill: $gray-600;
 	}
 }
 
 .edit-site-library__pattern-title {
-	color: $library-color;
+	color: $gray-600;
 
 	svg {
 		border-radius: $grid-unit-05;
 		background: var(--wp-block-synced-color);
-		fill: $library-color;
+		fill: $gray-600;
 	}
 }
 
 .edit-site-library__no-results {
-	color: $library-color;
+	color: $gray-600;
 	// height: 100%,
 	// display: flex,
 	// alignItems: center,
diff --git a/packages/edit-site/src/components/sidebar-navigation-item/index.js b/packages/edit-site/src/components/sidebar-navigation-item/index.js
index 44a41f12d7d691..fad9f634217146 100644
--- a/packages/edit-site/src/components/sidebar-navigation-item/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-item/index.js
@@ -26,6 +26,7 @@ export default function SidebarNavigationItem( {
 		<Item
 			className={ classnames(
 				'edit-site-sidebar-navigation-item',
+				{ 'with-suffix': ! withChevron && suffix },
 				className
 			) }
 			{ ...props }
diff --git a/packages/edit-site/src/components/sidebar-navigation-item/style.scss b/packages/edit-site/src/components/sidebar-navigation-item/style.scss
index ce5b278daaebe2..054ecdac1b5b1c 100644
--- a/packages/edit-site/src/components/sidebar-navigation-item/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-item/style.scss
@@ -31,6 +31,10 @@
 			outline: none;
 		}
 	}
+
+	&.with-suffix {
+		padding-right: $grid-unit-20;
+	}
 }
 
 .edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
index f02eedffb5b3c7..b582639ebab6c1 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
@@ -10,6 +10,7 @@ import { useSelect } from '@wordpress/data';
 import { getTemplatePartIcon } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { getQueryArgs } from '@wordpress/url';
+import { file } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -63,6 +64,19 @@ export default function SidebarNavigationScreenLibrary() {
 					} }
 				/>
 			}
+			footer={
+				<ItemGroup>
+					{ ! isMobileViewport && (
+						<SidebarNavigationItem
+							as="a"
+							href="edit.php?post_type=wp_block"
+							withChevron
+						>
+							{ __( 'Manage all reusable blocks' ) }
+						</SidebarNavigationItem>
+					) }
+				</ItemGroup>
+			}
 			content={
 				<>
 					{ isLoading && __( 'Loading library' ) }
@@ -111,6 +125,7 @@ export default function SidebarNavigationScreenLibrary() {
 											key={ category.name }
 											count={ category.count }
 											label={ category.name }
+											icon={ file }
 											id={ category.id }
 											type="pattern"
 											isActive={
@@ -122,17 +137,6 @@ export default function SidebarNavigationScreenLibrary() {
 									) ) }
 								</ItemGroup>
 							) }
-							<ItemGroup>
-								{ ! isMobileViewport && (
-									<SidebarNavigationItem
-										as="a"
-										href="edit.php?post_type=wp_block"
-										withChevron
-									>
-										{ __( 'Manage all reusable blocks' ) }
-									</SidebarNavigationItem>
-								) }
-							</ItemGroup>
 						</>
 					) }
 				</>
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-library/style.scss
index 2f30d25e0c649a..302faa17bc7381 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/style.scss
@@ -1,7 +1,5 @@
 .edit-site-sidebar-navigation-screen-library__group {
-	padding-bottom: $grid-unit-20;
-	border-bottom: 1px solid $gray-800;
-	margin-bottom: $grid-unit-20;
+	margin-bottom: $grid-unit-30;
 }
 
 .edit-site-sidebar-navigation-item.is-active-category {

From cc5ee0669c89c5aaaa22221f4c97bab451d600d0 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Wed, 14 Jun 2023 13:38:20 +1000
Subject: [PATCH 39/73] copy change

---
 .../edit-site/src/components/page-library/patterns-list.js    | 4 ++--
 packages/edit-site/src/components/page-library/style.scss     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/page-library/patterns-list.js b/packages/edit-site/src/components/page-library/patterns-list.js
index 68e67e25a006ca..f64352c60d31af 100644
--- a/packages/edit-site/src/components/page-library/patterns-list.js
+++ b/packages/edit-site/src/components/page-library/patterns-list.js
@@ -43,7 +43,7 @@ export default function PatternsList( { categoryId, label, type } ) {
 						<Heading level={ 4 }>{ __( 'Synced' ) }</Heading>
 						<Text variant="muted" as="p">
 							{ __(
-								'Make a change to one of these patterns and have it reflected across your entire site.'
+								'Patterns that are kept in sync across your site'
 							) }
 						</Text>
 					</VStack>
@@ -61,7 +61,7 @@ export default function PatternsList( { categoryId, label, type } ) {
 						<Heading level={ 4 }>{ __( 'Standard' ) }</Heading>
 						<Text variant="muted" as="p">
 							{ __(
-								'Insert and customize without stating in sync'
+								'Patterns that can be changed freely without affecting your site'
 							) }
 						</Text>
 					</VStack>
diff --git a/packages/edit-site/src/components/page-library/style.scss b/packages/edit-site/src/components/page-library/style.scss
index 44374b1e69c631..deaa3db2db8ad0 100644
--- a/packages/edit-site/src/components/page-library/style.scss
+++ b/packages/edit-site/src/components/page-library/style.scss
@@ -62,7 +62,7 @@
 	}
 
 	svg {
-		fill: $gray-600;
+		fill: $white;
 	}
 }
 

From 9da0092d6be217c2cd5cd613c0dfbfb12e5c7069 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Wed, 14 Jun 2023 13:39:05 +1000
Subject: [PATCH 40/73] svg colour

---
 packages/edit-site/src/components/page-library/style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/page-library/style.scss b/packages/edit-site/src/components/page-library/style.scss
index deaa3db2db8ad0..e8f7e3c5cac4f0 100644
--- a/packages/edit-site/src/components/page-library/style.scss
+++ b/packages/edit-site/src/components/page-library/style.scss
@@ -62,7 +62,7 @@
 	}
 
 	svg {
-		fill: $white;
+		fill: $gray-600;
 	}
 }
 
@@ -72,7 +72,7 @@
 	svg {
 		border-radius: $grid-unit-05;
 		background: var(--wp-block-synced-color);
-		fill: $gray-600;
+		fill: $white;
 	}
 }
 

From a5cc78d7acd2f60aeff629ee80ac28a94e70eead Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Wed, 14 Jun 2023 17:44:10 +1000
Subject: [PATCH 41/73] add template part and pattern dialog

---
 .../src/components/add-new-pattern/index.js   | 130 ++++++++----------
 .../src/components/add-new-template/index.js  |   3 -
 .../add-new-template/new-template-part.js     | 109 ---------------
 .../components/create-pattern-modal/index.js  |  61 +++++++-
 .../create-template-part-modal/index.js       |  64 ++++++++-
 .../index.js                                  |  10 +-
 6 files changed, 181 insertions(+), 196 deletions(-)
 delete mode 100644 packages/edit-site/src/components/add-new-template/new-template-part.js

diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js
index faf80833c4bd02..e368037ae8213c 100644
--- a/packages/edit-site/src/components/add-new-pattern/index.js
+++ b/packages/edit-site/src/components/add-new-pattern/index.js
@@ -1,99 +1,91 @@
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
-import { useDispatch } from '@wordpress/data';
+import { DropdownMenu } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { plus } from '@wordpress/icons';
-import { store as noticesStore } from '@wordpress/notices';
+import { plus, header, file } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import CreatePatternModal from '../create-pattern-modal';
+import CreateTemplatePartModal from '../create-template-part-modal';
 import { unlock } from '../../lock-unlock';
+import SidebarButton from '../sidebar-button';
 
 const { useHistory } = unlock( routerPrivateApis );
 
-export default function AddNewPattern( { toggleProps } ) {
+export default function AddNewPattern() {
 	const history = useHistory();
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const { createErrorNotice } = useDispatch( noticesStore );
-	const { saveEntityRecord, invalidateResolution } = useDispatch( coreStore );
+	const [ showPatternModal, setShowPatternModal ] = useState( false );
+	const [ showTemplatePartModal, setShowTemplatePartModal ] =
+		useState( false );
 
-	async function createPattern( { name, categoryId, syncType } ) {
-		if ( ! name ) {
-			createErrorNotice( __( 'Name is not defined.' ), {
-				type: 'snackbar',
-			} );
-			return;
-		}
+	function handleCreatePattern( { pattern, categoryId } ) {
+		setShowPatternModal( false );
 
-		const categories = categoryId ? [ categoryId ] : undefined;
-
-		try {
-			// TODO: Enforce unique pattern names?
-
-			const pattern = await saveEntityRecord(
-				'postType',
-				'wp_block',
-				{
-					title: name || __( 'Untitled Pattern' ),
-					content: '',
-					status: 'publish',
-					meta: { wp_block: { sync_status: syncType } },
-					wp_pattern: categories,
-				},
-				{ throwOnError: true }
-			);
-
-			// Invalidate pattern category taxonomy so nav screen can reflect
-			// up-to-date counts.
-			invalidateResolution( 'getEntityRecords', [
-				'taxonomy',
-				'wp_pattern',
-				{ per_page: -1, hide_empty: false, context: 'view' },
-			] );
-
-			setIsModalOpen( false );
+		history.push( {
+			postId: pattern.id,
+			postType: 'wp_block',
+			categoryType: 'wp_block',
+			categoryId,
+			canvas: 'edit',
+		} );
+	}
 
-			history.push( {
-				postId: pattern.id,
-				postType: 'wp_block',
-				categoryType: 'wp_block',
-				categoryId,
-				canvas: 'edit',
-			} );
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'An error occurred while creating the pattern.' );
+	function handleCreateTemplatePart( templatePart ) {
+		setShowTemplatePartModal( false );
 
-			createErrorNotice( errorMessage, { type: 'snackbar' } );
-			setIsModalOpen( false );
-		}
+		// Navigate to the created template part editor.
+		history.push( {
+			postId: templatePart.id,
+			postType: 'wp_template_part',
+			canvas: 'edit',
+		} );
 	}
 
-	const { as: Toggle = Button, ...restToggleProps } = toggleProps ?? {};
+	function handleError() {
+		setShowPatternModal( false );
+		setShowTemplatePartModal( false );
+	}
 
 	return (
 		<>
-			<Toggle
-				{ ...restToggleProps }
-				onClick={ () => {
-					setIsModalOpen( true );
-				} }
-				icon={ plus }
-				label={ __( 'Create pattern' ) }
+			<DropdownMenu
+				controls={ [
+					{
+						icon: header,
+						onClick: () => setShowTemplatePartModal( true ),
+						title: 'Create a template part',
+					},
+					{
+						icon: file,
+						onClick: () => setShowPatternModal( true ),
+						title: 'Create a pattern',
+					},
+				] }
+				icon={
+					<SidebarButton
+						icon={ plus }
+						label={ __( 'Create a pattern' ) }
+					/>
+				}
+				label="Create a pattern."
 			/>
-			{ isModalOpen && (
+			{ showPatternModal && (
 				<CreatePatternModal
-					closeModal={ () => setIsModalOpen( false ) }
-					onCreate={ createPattern }
+					closeModal={ () => setShowPatternModal( false ) }
+					onCreate={ handleCreatePattern }
+					onError={ handleError }
+				/>
+			) }
+			{ showTemplatePartModal && (
+				<CreateTemplatePartModal
+					closeModal={ () => setShowPatternModal( false ) }
+					onCreate={ handleCreateTemplatePart }
+					onError={ handleError }
 				/>
 			) }
 		</>
diff --git a/packages/edit-site/src/components/add-new-template/index.js b/packages/edit-site/src/components/add-new-template/index.js
index c3ba06f065bb99..ffdf1b89376903 100644
--- a/packages/edit-site/src/components/add-new-template/index.js
+++ b/packages/edit-site/src/components/add-new-template/index.js
@@ -8,7 +8,6 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import NewTemplate from './new-template';
-import NewTemplatePart from './new-template-part';
 
 export default function AddNewTemplate( {
 	templateType = 'wp_template',
@@ -25,8 +24,6 @@ export default function AddNewTemplate( {
 
 	if ( templateType === 'wp_template' ) {
 		return <NewTemplate { ...props } postType={ postType } />;
-	} else if ( templateType === 'wp_template_part' ) {
-		return <NewTemplatePart { ...props } postType={ postType } />;
 	}
 
 	return null;
diff --git a/packages/edit-site/src/components/add-new-template/new-template-part.js b/packages/edit-site/src/components/add-new-template/new-template-part.js
deleted file mode 100644
index b43cfd3150f2ae..00000000000000
--- a/packages/edit-site/src/components/add-new-template/new-template-part.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
-import { Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { store as noticesStore } from '@wordpress/notices';
-import { store as coreStore } from '@wordpress/core-data';
-import { plus } from '@wordpress/icons';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
-import CreateTemplatePartModal from '../create-template-part-modal';
-import {
-	useExistingTemplateParts,
-	getUniqueTemplatePartTitle,
-	getCleanTemplatePartSlug,
-} from '../../utils/template-part-create';
-import { unlock } from '../../lock-unlock';
-
-const { useHistory } = unlock( routerPrivateApis );
-
-export default function NewTemplatePart( {
-	postType,
-	showIcon = true,
-	toggleProps,
-} ) {
-	const history = useHistory();
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const { createErrorNotice } = useDispatch( noticesStore );
-	const { saveEntityRecord } = useDispatch( coreStore );
-	const existingTemplateParts = useExistingTemplateParts();
-
-	async function createTemplatePart( { title, area } ) {
-		if ( ! title ) {
-			createErrorNotice( __( 'Title is not defined.' ), {
-				type: 'snackbar',
-			} );
-			return;
-		}
-
-		try {
-			const uniqueTitle = getUniqueTemplatePartTitle(
-				title,
-				existingTemplateParts
-			);
-			const cleanSlug = getCleanTemplatePartSlug( uniqueTitle );
-
-			const templatePart = await saveEntityRecord(
-				'postType',
-				'wp_template_part',
-				{
-					slug: cleanSlug,
-					title: uniqueTitle,
-					content: '',
-					area,
-				},
-				{ throwOnError: true }
-			);
-
-			setIsModalOpen( false );
-
-			// Navigate to the created template part editor.
-			history.push( {
-				postId: templatePart.id,
-				postType: 'wp_template_part',
-				canvas: 'edit',
-			} );
-
-			// TODO: Add a success notice?
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __(
-							'An error occurred while creating the template part.'
-					  );
-
-			createErrorNotice( errorMessage, { type: 'snackbar' } );
-
-			setIsModalOpen( false );
-		}
-	}
-	const { as: Toggle = Button, ...restToggleProps } = toggleProps ?? {};
-
-	return (
-		<>
-			<Toggle
-				{ ...restToggleProps }
-				onClick={ () => {
-					setIsModalOpen( true );
-				} }
-				icon={ showIcon ? plus : null }
-				label={ postType.labels.add_new }
-			>
-				{ showIcon ? null : postType.labels.add_new }
-			</Toggle>
-			{ isModalOpen && (
-				<CreateTemplatePartModal
-					closeModal={ () => setIsModalOpen( false ) }
-					onCreate={ createTemplatePart }
-				/>
-			) }
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/create-pattern-modal/index.js b/packages/edit-site/src/components/create-pattern-modal/index.js
index a56d3d2144ae5f..dc35b426d8eb20 100644
--- a/packages/edit-site/src/components/create-pattern-modal/index.js
+++ b/packages/edit-site/src/components/create-pattern-modal/index.js
@@ -10,16 +10,22 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { useEntityRecords } from '@wordpress/core-data';
+import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { useDispatch } from '@wordpress/data';
 
 const SYNC_TYPES = {
 	full: 'fully',
 	unsynced: 'unsynced',
 };
 
-export default function CreatePatternModal( { closeModal, onCreate } ) {
+export default function CreatePatternModal( {
+	closeModal,
+	onCreate,
+	onError,
+} ) {
 	const [ name, setName ] = useState( '' );
 	const [ categoryId, setCategoryId ] = useState( '' );
 	const [ syncType, setSyncType ] = useState( SYNC_TYPES.full );
@@ -46,6 +52,55 @@ export default function CreatePatternModal( { closeModal, onCreate } ) {
 		);
 	};
 
+	const { createErrorNotice } = useDispatch( noticesStore );
+	const { saveEntityRecord, invalidateResolution } = useDispatch( coreStore );
+
+	async function createPattern() {
+		if ( ! name ) {
+			createErrorNotice( __( 'Name is not defined.' ), {
+				type: 'snackbar',
+			} );
+			return;
+		}
+
+		const selectedCategories = categoryId ? [ categoryId ] : undefined;
+
+		try {
+			// TODO: Enforce unique pattern names?
+
+			const pattern = await saveEntityRecord(
+				'postType',
+				'wp_block',
+				{
+					title: name || __( 'Untitled Pattern' ),
+					content: '',
+					status: 'publish',
+					meta: { wp_block: { sync_status: syncType } },
+					wp_pattern: selectedCategories,
+				},
+				{ throwOnError: true }
+			);
+
+			// Invalidate pattern category taxonomy so nav screen can reflect
+			// up-to-date counts.
+			invalidateResolution( 'getEntityRecords', [
+				'taxonomy',
+				'wp_pattern',
+				{ per_page: -1, hide_empty: false, context: 'view' },
+			] );
+
+			onCreate( { pattern, categoryId } );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while creating the pattern.' );
+
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+			onError();
+		}
+	}
+
 	return (
 		<Modal
 			title={ __( 'Create a pattern' ) }
@@ -65,7 +120,7 @@ export default function CreatePatternModal( { closeModal, onCreate } ) {
 						return;
 					}
 					setIsSubmitting( true );
-					await onCreate( { name, categoryId, syncType } );
+					await createPattern();
 				} }
 			>
 				<VStack spacing="4">
diff --git a/packages/edit-site/src/components/create-template-part-modal/index.js b/packages/edit-site/src/components/create-template-part-modal/index.js
index f91ec2c8c8b2de..f0c74786c67cb4 100644
--- a/packages/edit-site/src/components/create-template-part-modal/index.js
+++ b/packages/edit-site/src/components/create-template-part-modal/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Icon,
 	BaseControl,
@@ -20,14 +20,29 @@ import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 import { store as editorStore } from '@wordpress/editor';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
 import { check } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { TEMPLATE_PART_AREA_GENERAL } from '../../store/constants';
+import {
+	useExistingTemplateParts,
+	getUniqueTemplatePartTitle,
+	getCleanTemplatePartSlug,
+} from '../../utils/template-part-create';
+
+export default function CreateTemplatePartModal( {
+	closeModal,
+	onCreate,
+	onError,
+} ) {
+	const { createErrorNotice } = useDispatch( noticesStore );
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const existingTemplateParts = useExistingTemplateParts();
 
-export default function CreateTemplatePartModal( { closeModal, onCreate } ) {
 	const [ title, setTitle ] = useState( '' );
 	const [ area, setArea ] = useState( TEMPLATE_PART_AREA_GENERAL );
 	const [ isSubmitting, setIsSubmitting ] = useState( false );
@@ -39,6 +54,49 @@ export default function CreateTemplatePartModal( { closeModal, onCreate } ) {
 		[]
 	);
 
+	async function createTemplatePart() {
+		if ( ! title ) {
+			createErrorNotice( __( 'Title is not defined.' ), {
+				type: 'snackbar',
+			} );
+			return;
+		}
+
+		try {
+			const uniqueTitle = getUniqueTemplatePartTitle(
+				title,
+				existingTemplateParts
+			);
+			const cleanSlug = getCleanTemplatePartSlug( uniqueTitle );
+
+			const templatePart = await saveEntityRecord(
+				'postType',
+				'wp_template_part',
+				{
+					slug: cleanSlug,
+					title: uniqueTitle,
+					content: '',
+					area,
+				},
+				{ throwOnError: true }
+			);
+			onCreate( templatePart );
+
+			// TODO: Add a success notice?
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __(
+							'An error occurred while creating the template part.'
+					  );
+
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+
+			onError();
+		}
+	}
+
 	return (
 		<Modal
 			title={ __( 'Create a template part' ) }
@@ -52,7 +110,7 @@ export default function CreateTemplatePartModal( { closeModal, onCreate } ) {
 						return;
 					}
 					setIsSubmitting( true );
-					await onCreate( { title, area } );
+					await createTemplatePart();
 				} }
 			>
 				<VStack spacing="4">
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
index b582639ebab6c1..ac312dfc36f7c5 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
@@ -19,7 +19,6 @@ import AddNewPattern from '../add-new-pattern';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import CategoryItem from './category-item';
-import SidebarButton from '../sidebar-button';
 import { store as editSiteStore } from '../../store';
 import usePatternCategories from './use-pattern-categories';
 import useTemplatePartAreas from './use-template-part-areas';
@@ -56,14 +55,7 @@ export default function SidebarNavigationScreenLibrary() {
 			description={ __(
 				'Manage what patterns are available when editing your site.'
 			) }
-			actions={
-				<AddNewPattern
-					patternType={ categoryType }
-					toggleProps={ {
-						as: SidebarButton,
-					} }
-				/>
-			}
+			actions={ <AddNewPattern /> }
 			footer={
 				<ItemGroup>
 					{ ! isMobileViewport && (

From 5ffe5e314aca4becaeee887fe778478d1e35c0a8 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Thu, 15 Jun 2023 11:23:54 +1000
Subject: [PATCH 42/73] fix template part modal close

---
 packages/edit-site/src/components/add-new-pattern/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js
index e368037ae8213c..46cb03583e6e39 100644
--- a/packages/edit-site/src/components/add-new-pattern/index.js
+++ b/packages/edit-site/src/components/add-new-pattern/index.js
@@ -83,7 +83,7 @@ export default function AddNewPattern() {
 			) }
 			{ showTemplatePartModal && (
 				<CreateTemplatePartModal
-					closeModal={ () => setShowPatternModal( false ) }
+					closeModal={ () => setShowTemplatePartModal( false ) }
 					onCreate={ handleCreateTemplatePart }
 					onError={ handleError }
 				/>

From c55ad6f034ac18b8eca9299c124b432ea8be8bda Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 15 Jun 2023 15:21:49 +1000
Subject: [PATCH 43/73] Try filtering of patterns in library

---
 packages/edit-site/package.json               |   4 +-
 .../components/page-library/patterns-list.js  |  19 +-
 .../components/page-library/search-items.js   | 174 ++++++++++++++++++
 .../components/page-library/use-patterns.js   | 140 ++++++++------
 .../src/utils/use-debounced-input.js          |  17 ++
 5 files changed, 286 insertions(+), 68 deletions(-)
 create mode 100644 packages/edit-site/src/components/page-library/search-items.js
 create mode 100644 packages/edit-site/src/utils/use-debounced-input.js

diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
index 381f29a82e95f4..ab9b8229634ba0 100644
--- a/packages/edit-site/package.json
+++ b/packages/edit-site/package.json
@@ -64,6 +64,7 @@
 		"@wordpress/viewport": "file:../viewport",
 		"@wordpress/widgets": "file:../widgets",
 		"@wordpress/wordcount": "file:../wordcount",
+		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
 		"deepmerge": "^4.3.0",
@@ -73,7 +74,8 @@
 		"lodash": "^4.17.21",
 		"memize": "^2.1.0",
 		"react-autosize-textarea": "^7.1.0",
-		"rememo": "^4.0.2"
+		"rememo": "^4.0.2",
+		"remove-accents": "^0.4.2"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
diff --git a/packages/edit-site/src/components/page-library/patterns-list.js b/packages/edit-site/src/components/page-library/patterns-list.js
index f64352c60d31af..29d8bedf2b652c 100644
--- a/packages/edit-site/src/components/page-library/patterns-list.js
+++ b/packages/edit-site/src/components/page-library/patterns-list.js
@@ -8,7 +8,6 @@ import {
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { symbol } from '@wordpress/icons';
 
@@ -18,10 +17,18 @@ import { symbol } from '@wordpress/icons';
 import Grid from './grid';
 import NoPatterns from './no-patterns';
 import usePatterns from './use-patterns';
+import useDebouncedInput from '../../utils/use-debounced-input';
 
 export default function PatternsList( { categoryId, label, type } ) {
-	const [ query, setQuery ] = useState( '' );
-	const [ patterns, isResolving ] = usePatterns( type, categoryId );
+	const [ filterValue, setFilterValue, delayedFilterValue ] =
+		useDebouncedInput( '' );
+
+	const [ patterns, isResolving ] = usePatterns(
+		type,
+		categoryId,
+		delayedFilterValue
+	);
+
 	const { syncedPatterns, unsyncedPatterns } = patterns;
 	const hasPatterns = !! syncedPatterns.length || !! unsyncedPatterns.length;
 
@@ -29,11 +36,9 @@ export default function PatternsList( { categoryId, label, type } ) {
 		<VStack spacing={ 6 }>
 			<SearchControl
 				className="edit-site-library__search"
-				onChange={ ( value ) => {
-					setQuery( value );
-				} }
+				onChange={ ( value ) => setFilterValue( value ) }
 				placeholder={ __( 'Search patterns' ) }
-				value={ query }
+				value={ filterValue }
 				__nextHasNoMarginBottom
 			/>
 			{ isResolving && __( 'Loading' ) }
diff --git a/packages/edit-site/src/components/page-library/search-items.js b/packages/edit-site/src/components/page-library/search-items.js
new file mode 100644
index 00000000000000..751b02e3741ab2
--- /dev/null
+++ b/packages/edit-site/src/components/page-library/search-items.js
@@ -0,0 +1,174 @@
+/**
+ * External dependencies
+ */
+import removeAccents from 'remove-accents';
+import { noCase } from 'change-case';
+
+// TODO: Replace or remove the removeAccents and noCase deps to avoid needing
+// to add them to side editor.
+
+// Default search helpers.
+const defaultGetName = ( item ) => item.name || '';
+const defaultGetTitle = ( item ) => item.title;
+const defaultGetDescription = ( item ) => item.description || '';
+const defaultGetKeywords = ( item ) => item.keywords || [];
+const defaultHasCategory = () => false;
+
+/**
+ * Extracts words from an input string.
+ *
+ * @param {string} input The input string.
+ *
+ * @return {Array} Words, extracted from the input string.
+ */
+function extractWords( input = '' ) {
+	return noCase( input, {
+		splitRegexp: [
+			/([\p{Ll}\p{Lo}\p{N}])([\p{Lu}\p{Lt}])/gu, // One lowercase or digit, followed by one uppercase.
+			/([\p{Lu}\p{Lt}])([\p{Lu}\p{Lt}][\p{Ll}\p{Lo}])/gu, // One uppercase followed by one uppercase and one lowercase.
+		],
+		stripRegexp: /(\p{C}|\p{P}|\p{S})+/giu, // Anything that's not a punctuation, symbol or control/format character.
+	} )
+		.split( ' ' )
+		.filter( Boolean );
+}
+
+/**
+ * Sanitizes the search input string.
+ *
+ * @param {string} input The search input to normalize.
+ *
+ * @return {string} The normalized search input.
+ */
+function normalizeSearchInput( input = '' ) {
+	// Disregard diacritics.
+	//  Input: "média"
+	input = removeAccents( input );
+
+	// Accommodate leading slash, matching autocomplete expectations.
+	//  Input: "/media"
+	input = input.replace( /^\//, '' );
+
+	// Lowercase.
+	//  Input: "MEDIA"
+	input = input.toLowerCase();
+
+	return input;
+}
+
+/**
+ * Converts the search term into a list of normalized terms.
+ *
+ * @param {string} input The search term to normalize.
+ *
+ * @return {string[]} The normalized list of search terms.
+ */
+export const getNormalizedSearchTerms = ( input = '' ) => {
+	return extractWords( normalizeSearchInput( input ) );
+};
+
+const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
+	return unmatchedTerms.filter(
+		( term ) =>
+			! getNormalizedSearchTerms( unprocessedTerms ).some(
+				( unprocessedTerm ) => unprocessedTerm.includes( term )
+			)
+	);
+};
+
+/**
+ * Filters an item list given a search term.
+ *
+ * @param {Array}  items       Item list
+ * @param {string} searchInput Search input.
+ * @param {Object} config      Search Config.
+ *
+ * @return {Array} Filtered item list.
+ */
+export const searchItems = ( items = [], searchInput = '', config = {} ) => {
+	const normalizedSearchTerms = getNormalizedSearchTerms( searchInput );
+	const onlyFilterByCategory = ! normalizedSearchTerms.length;
+	const searchRankConfig = { ...config, onlyFilterByCategory };
+
+	// If we aren't filtering on search terms, matching on category is satisfactory.
+	// If we are, then we need more than a category match.
+	const threshold = onlyFilterByCategory ? 0 : 1;
+
+	const rankedItems = items
+		.map( ( item ) => {
+			return [
+				item,
+				getItemSearchRank( item, searchInput, searchRankConfig ),
+			];
+		} )
+		.filter( ( [ , rank ] ) => rank > threshold );
+
+	// If we didn't have terms to search on, there's no point sorting.
+	if ( normalizedSearchTerms.length === 0 ) {
+		return rankedItems.map( ( [ item ] ) => item );
+	}
+
+	rankedItems.sort( ( [ , rank1 ], [ , rank2 ] ) => rank2 - rank1 );
+	return rankedItems.map( ( [ item ] ) => item );
+};
+
+/**
+ * Get the search rank for a given item and a specific search term.
+ * The better the match, the higher the rank.
+ * If the rank equals 0, it should be excluded from the results.
+ *
+ * @param {Object} item       Item to filter.
+ * @param {string} searchTerm Search term.
+ * @param {Object} config     Search Config.
+ *
+ * @return {number} Search Rank.
+ */
+function getItemSearchRank( item, searchTerm, config ) {
+	const {
+		categoryId,
+		getName = defaultGetName,
+		getTitle = defaultGetTitle,
+		getDescription = defaultGetDescription,
+		getKeywords = defaultGetKeywords,
+		hasCategory = defaultHasCategory,
+		onlyFilterByCategory,
+	} = config;
+
+	let rank = hasCategory( item, categoryId ) ? 1 : 0;
+
+	// If an item doesn't belong to the current category or we don't have
+	// search terms to filter by, return the initial rank value.
+	if ( ! rank || onlyFilterByCategory ) {
+		return rank;
+	}
+
+	const name = getName( item );
+	const title = getTitle( item );
+	const description = getDescription( item );
+	const keywords = getKeywords( item );
+
+	const normalizedSearchInput = normalizeSearchInput( searchTerm );
+	const normalizedTitle = normalizeSearchInput( title );
+
+	// Prefers exact matches
+	// Then prefers if the beginning of the title matches the search term
+	// name, keywords, description matches come later.
+	if ( normalizedSearchInput === normalizedTitle ) {
+		rank += 30;
+	} else if ( normalizedTitle.startsWith( normalizedSearchInput ) ) {
+		rank += 20;
+	} else {
+		const terms = [ name, title, description, ...keywords ].join( ' ' );
+		const normalizedSearchTerms = extractWords( normalizedSearchInput );
+		const unmatchedTerms = removeMatchingTerms(
+			normalizedSearchTerms,
+			terms
+		);
+
+		if ( unmatchedTerms.length === 0 ) {
+			rank += 10;
+		}
+	}
+
+	return rank;
+}
diff --git a/packages/edit-site/src/components/page-library/use-patterns.js b/packages/edit-site/src/components/page-library/use-patterns.js
index 1b6862005075d7..fe16bc96b8f89d 100644
--- a/packages/edit-site/src/components/page-library/use-patterns.js
+++ b/packages/edit-site/src/components/page-library/use-patterns.js
@@ -10,6 +10,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+import { searchItems } from './search-items';
 import { store as editSiteStore } from '../../store';
 
 const EMPTY_PATTERN_LIST = [];
@@ -25,14 +26,21 @@ const createTemplatePartId = ( theme, slug ) =>
 	theme && slug ? theme + '//' + slug : null;
 
 const templatePartToPattern = ( templatePart ) => ( {
+	blocks: parse( templatePart.content.raw ),
+	categories: [ templatePart.area ],
+	description: templatePart.description || '',
+	keywords: templatePart.keywords || [],
 	name: createTemplatePartId( templatePart.theme, templatePart.slug ),
 	title: templatePart.title.rendered,
-	blocks: parse( templatePart.content.raw ),
 	type: templatePart.type,
 	templatePart,
 } );
 
-const useTemplatePartsAsPatterns = ( area, postType = TEMPLATE_PARTS ) => {
+const useTemplatePartsAsPatterns = (
+	categoryId,
+	postType = TEMPLATE_PARTS,
+	filterValue = ''
+) => {
 	const { templateParts, isResolving } = useSelect(
 		( select ) => {
 			if ( postType !== TEMPLATE_PARTS ) {
@@ -45,9 +53,17 @@ const useTemplatePartsAsPatterns = ( area, postType = TEMPLATE_PARTS ) => {
 			const { getEntityRecords, isResolving: _isResolving } =
 				select( coreStore );
 			const query = { per_page: -1 };
+			const rawTemplateParts = getEntityRecords(
+				'postType',
+				postType,
+				query
+			);
+			const partsAsPatterns = rawTemplateParts?.map( ( templatePart ) =>
+				templatePartToPattern( templatePart )
+			);
 
 			return {
-				templateParts: getEntityRecords( 'postType', postType, query ),
+				templateParts: partsAsPatterns,
 				isResolving: _isResolving( 'getEntityRecords', [
 					'postType',
 					'wp_template_part',
@@ -63,21 +79,20 @@ const useTemplatePartsAsPatterns = ( area, postType = TEMPLATE_PARTS ) => {
 			return EMPTY_PATTERN_LIST;
 		}
 
-		const partsAsPatterns = [];
-
-		templateParts?.forEach( ( templatePart ) => {
-			if ( ! area || templatePart.area === area ) {
-				partsAsPatterns.push( templatePartToPattern( templatePart ) );
-			}
+		return searchItems( templateParts, filterValue, {
+			categoryId,
+			hasCategory: ( item, area ) => item.templatePart.area === area,
 		} );
-
-		return partsAsPatterns;
-	}, [ templateParts, area ] );
+	}, [ templateParts, filterValue, categoryId ] );
 
 	return { templateParts: filteredTemplateParts, isResolving };
 };
 
-const useBlockPatternsByCategory = ( categoryId, postType = PATTERNS ) => {
+const useBlockPatternsByCategory = (
+	categoryId,
+	postType = PATTERNS,
+	filterValue = ''
+) => {
 	const blockPatterns = useSelect( ( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
 		const settings = getSettings();
@@ -101,6 +116,7 @@ const useBlockPatternsByCategory = ( categoryId, postType = PATTERNS ) => {
 				)
 				.map( ( pattern ) => ( {
 					...pattern,
+					keywords: pattern.keywords || [],
 					type: 'pattern',
 					blocks: parse( pattern.content ),
 				} ) ),
@@ -116,13 +132,18 @@ const useBlockPatternsByCategory = ( categoryId, postType = PATTERNS ) => {
 		categoryId
 	);
 
-	if ( postType !== PATTERNS || ! category ) {
-		return EMPTY_PATTERN_LIST;
-	}
+	const filteredPatterns = useMemo( () => {
+		if ( postType !== PATTERNS || ! category ) {
+			return EMPTY_PATTERN_LIST;
+		}
 
-	return patterns.filter( ( pattern ) =>
-		pattern.categories?.includes( category.slug )
-	);
+		return searchItems( patterns, filterValue, {
+			// Rely on closure to check the category slug, rather than id, is in item categories.
+			hasCategory: ( item ) => item.categories?.includes( category.slug ),
+		} );
+	}, [ patterns, filterValue, category, postType ] );
+
+	return filteredPatterns;
 };
 
 const reusableBlockToPattern = ( reusableBlock ) => ( {
@@ -130,17 +151,22 @@ const reusableBlockToPattern = ( reusableBlock ) => ( {
 	categories: reusableBlock.wp_pattern,
 	id: reusableBlock.id,
 	name: reusableBlock.slug,
+	syncStatus: reusableBlock.meta?.wp_block?.sync_status,
 	title: reusableBlock.title.raw,
 	type: reusableBlock.type,
 	reusableBlock,
 } );
 
-const useUserPatterns = ( categoryId, categoryType = PATTERNS ) => {
+const useUserPatterns = (
+	categoryId,
+	categoryType = PATTERNS,
+	filterValue = ''
+) => {
 	const postType = categoryType === PATTERNS ? USER_PATTERNS : categoryType;
 	const unfilteredPatterns = useSelect(
 		( select ) => {
 			if ( postType !== USER_PATTERNS ) {
-				return {};
+				return EMPTY_PATTERN_LIST;
 			}
 
 			const { getEntityRecords } = select( coreStore );
@@ -149,61 +175,55 @@ const useUserPatterns = ( categoryId, categoryType = PATTERNS ) => {
 			} );
 
 			if ( ! records ) {
-				return {};
+				return EMPTY_PATTERN_LIST;
 			}
 
-			const patterns = { synced: [], unsynced: [] };
-
-			records.forEach( ( record ) => {
-				const pattern = reusableBlockToPattern( record );
-
-				if ( record.meta?.wp_block?.sync_status === SYNC_TYPES.full ) {
-					patterns.synced.push( pattern );
-				} else {
-					patterns.unsynced.push( pattern );
-				}
-			} );
-
-			return patterns;
+			return records.map( ( record ) =>
+				reusableBlockToPattern( record )
+			);
 		},
 		[ postType ]
 	);
 
-	if ( categoryId === 'uncategorized' ) {
-		return {
-			syncedPatterns: unfilteredPatterns.synced?.filter(
-				( pattern ) => ! pattern.categories?.length
-			),
-			unsyncedPatterns: unfilteredPatterns.unsynced?.filter(
-				( pattern ) => ! pattern.categories?.length
-			),
-		};
-	}
-
-	const currentId = parseInt( categoryId );
-
-	return {
-		syncedPatterns: unfilteredPatterns.synced?.filter( ( pattern ) =>
-			pattern.categories?.includes( currentId )
-		),
-		unsyncedPatterns: unfilteredPatterns.unsynced?.filter( ( pattern ) =>
-			pattern.categories?.includes( currentId )
-		),
-	};
+	const filteredPatterns = useMemo( () => {
+		return searchItems( unfilteredPatterns, filterValue, {
+			categoryId,
+			hasCategory: ( item, currentCategory ) => {
+				return currentCategory === 'uncategorized'
+					? ! item.categories?.length
+					: item.categories?.includes( parseInt( currentCategory ) );
+			},
+		} );
+	}, [ unfilteredPatterns, categoryId, filterValue ] );
+
+	const patterns = { syncedPatterns: [], unsyncedPatterns: [] };
+
+	filteredPatterns.forEach( ( pattern ) => {
+		if ( pattern.syncStatus === SYNC_TYPES.full ) {
+			patterns.syncedPatterns.push( pattern );
+		} else {
+			patterns.unsyncedPatterns.push( pattern );
+		}
+	} );
+
+	return patterns;
 };
 
-export const usePatterns = ( categoryType, categoryId ) => {
+export const usePatterns = ( categoryType, categoryId, filterValue ) => {
 	const blockPatterns = useBlockPatternsByCategory(
 		categoryId,
-		categoryType
+		categoryType,
+		filterValue
 	);
 	const { syncedPatterns = [], unsyncedPatterns = [] } = useUserPatterns(
 		categoryId,
-		categoryType
+		categoryType,
+		filterValue
 	);
 	const { templateParts, isResolving } = useTemplatePartsAsPatterns(
 		categoryId,
-		categoryType
+		categoryType,
+		filterValue
 	);
 
 	const patterns = {
diff --git a/packages/edit-site/src/utils/use-debounced-input.js b/packages/edit-site/src/utils/use-debounced-input.js
new file mode 100644
index 00000000000000..55d0ce989293e5
--- /dev/null
+++ b/packages/edit-site/src/utils/use-debounced-input.js
@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { useDebounce } from '@wordpress/compose';
+
+export default function useDebouncedInput( defaultValue = '' ) {
+	const [ input, setInput ] = useState( defaultValue );
+	const [ debounced, setter ] = useState( defaultValue );
+	const setDebounced = useDebounce( setter, 250 );
+	useEffect( () => {
+		if ( debounced !== input ) {
+			setDebounced( input );
+		}
+	}, [ debounced, input ] );
+	return [ input, setInput, debounced ];
+}

From c90f2c346eb51a18966c8c32d808b57c9e794561 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Thu, 15 Jun 2023 15:32:43 +1000
Subject: [PATCH 44/73] search input patterns style

---
 packages/edit-site/src/components/page-library/style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/page-library/style.scss b/packages/edit-site/src/components/page-library/style.scss
index e8f7e3c5cac4f0..2c9e5c9145a907 100644
--- a/packages/edit-site/src/components/page-library/style.scss
+++ b/packages/edit-site/src/components/page-library/style.scss
@@ -54,10 +54,10 @@
 .edit-site-library__search {
 	&#{&} input[type="search"] {
 		background: $gray-800;
-		color: $gray-600;
+		color: $gray-100;
 
 		&:focus {
-			background: $gray-600;
+			background: $gray-800;
 		}
 	}
 

From c404b3f236eef75c940b3dba5b73b4f689b989ed Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Thu, 15 Jun 2023 15:46:38 +1000
Subject: [PATCH 45/73] responsive pattern grid

---
 packages/edit-site/src/components/page-library/style.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/page-library/style.scss b/packages/edit-site/src/components/page-library/style.scss
index 2c9e5c9145a907..a34af8066451df 100644
--- a/packages/edit-site/src/components/page-library/style.scss
+++ b/packages/edit-site/src/components/page-library/style.scss
@@ -11,8 +11,10 @@
 }
 
 .edit-site-library__grid {
-	column-count: 2;
 	column-gap: $grid-unit-30;
+	@include break-large() {
+		column-count: 2;
+	}
 
 	// Small top padding required to avoid cutting off the visible outline
 	// when hovering items.

From bf13603977137a62b7d2f32417ea673693a8629e Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 15 Jun 2023 18:57:16 +1000
Subject: [PATCH 46/73] Use only default block pattern categories

The removal of the pattern category taxonomy changes will be done once that related PR has been updated.
---
 .../components/create-pattern-modal/index.js  | 43 ++----------
 .../src/components/page-library/grid-item.js  |  7 --
 .../components/page-library/use-patterns.js   | 50 +++++++-------
 .../index.js                                  |  6 +-
 .../use-default-pattern-categories.js         | 32 +++++++++
 .../use-pattern-categories.js                 | 67 +++++++------------
 6 files changed, 89 insertions(+), 116 deletions(-)
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-library/use-default-pattern-categories.js

diff --git a/packages/edit-site/src/components/create-pattern-modal/index.js b/packages/edit-site/src/components/create-pattern-modal/index.js
index dc35b426d8eb20..dcf21d29ba5681 100644
--- a/packages/edit-site/src/components/create-pattern-modal/index.js
+++ b/packages/edit-site/src/components/create-pattern-modal/index.js
@@ -5,12 +5,11 @@ import {
 	TextControl,
 	Button,
 	Modal,
-	SelectControl,
 	ToggleControl,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
+import { store as coreStore } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
@@ -21,31 +20,17 @@ const SYNC_TYPES = {
 	unsynced: 'unsynced',
 };
 
+const USER_PATTERN_CATEGORY = 'your-patterns';
+
 export default function CreatePatternModal( {
 	closeModal,
 	onCreate,
 	onError,
 } ) {
 	const [ name, setName ] = useState( '' );
-	const [ categoryId, setCategoryId ] = useState( '' );
 	const [ syncType, setSyncType ] = useState( SYNC_TYPES.full );
 	const [ isSubmitting, setIsSubmitting ] = useState( false );
 
-	const { records: categories } = useEntityRecords(
-		'taxonomy',
-		'wp_pattern',
-		{ per_page: -1, hide_empty: false, context: 'view' }
-	);
-
-	const options = ( categories || [] )
-		.map( ( category ) => ( {
-			label: category.name,
-			value: category.id,
-		} ) )
-		.concat( [
-			{ value: '', label: __( 'Select a category' ), disabled: true },
-		] );
-
 	const onSyncChange = () => {
 		setSyncType(
 			syncType === SYNC_TYPES.full ? SYNC_TYPES.unsynced : SYNC_TYPES.full
@@ -53,7 +38,7 @@ export default function CreatePatternModal( {
 	};
 
 	const { createErrorNotice } = useDispatch( noticesStore );
-	const { saveEntityRecord, invalidateResolution } = useDispatch( coreStore );
+	const { saveEntityRecord } = useDispatch( coreStore );
 
 	async function createPattern() {
 		if ( ! name ) {
@@ -63,8 +48,6 @@ export default function CreatePatternModal( {
 			return;
 		}
 
-		const selectedCategories = categoryId ? [ categoryId ] : undefined;
-
 		try {
 			// TODO: Enforce unique pattern names?
 
@@ -76,20 +59,11 @@ export default function CreatePatternModal( {
 					content: '',
 					status: 'publish',
 					meta: { wp_block: { sync_status: syncType } },
-					wp_pattern: selectedCategories,
 				},
 				{ throwOnError: true }
 			);
 
-			// Invalidate pattern category taxonomy so nav screen can reflect
-			// up-to-date counts.
-			invalidateResolution( 'getEntityRecords', [
-				'taxonomy',
-				'wp_pattern',
-				{ per_page: -1, hide_empty: false, context: 'view' },
-			] );
-
-			onCreate( { pattern, categoryId } );
+			onCreate( { pattern, categoryId: USER_PATTERN_CATEGORY } );
 		} catch ( error ) {
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
@@ -133,13 +107,6 @@ export default function CreatePatternModal( {
 						value={ name }
 						__nextHasNoMarginBottom
 					/>
-					<SelectControl
-						label={ __( 'Category' ) }
-						onChange={ setCategoryId }
-						options={ options }
-						size="__unstable-large"
-						value={ categoryId }
-					/>
 					<ToggleControl
 						label={ __( 'Synced' ) }
 						onChange={ onSyncChange }
diff --git a/packages/edit-site/src/components/page-library/grid-item.js b/packages/edit-site/src/components/page-library/grid-item.js
index a363f1fc977105..7ab597ebcec8be 100644
--- a/packages/edit-site/src/components/page-library/grid-item.js
+++ b/packages/edit-site/src/components/page-library/grid-item.js
@@ -17,7 +17,6 @@ import {
 	__unstableCompositeItem as CompositeItem,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
-import { store as coreStore } from '@wordpress/core-data';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { Icon, moreHorizontal } from '@wordpress/icons';
@@ -31,7 +30,6 @@ import { useLink } from '../routes/link';
 import { PATTERNS, USER_PATTERNS } from './use-patterns';
 
 const DeleteMenuItem = ( { item, onClose } ) => {
-	const { invalidateResolution } = useDispatch( coreStore );
 	const { __experimentalDeleteReusableBlock } =
 		useDispatch( reusableBlocksStore );
 	const { createErrorNotice, createSuccessNotice } =
@@ -44,11 +42,6 @@ const DeleteMenuItem = ( { item, onClose } ) => {
 	const deleteReusableBlock = async () => {
 		try {
 			await __experimentalDeleteReusableBlock( item.id );
-			invalidateResolution( 'getEntityRecords', [
-				'taxonomy',
-				'wp_pattern',
-				{ per_page: -1, hide_empty: false, context: 'view' },
-			] );
 			createSuccessNotice( __( 'Pattern successfully deleted.' ), {
 				type: 'snackbar',
 			} );
diff --git a/packages/edit-site/src/components/page-library/use-patterns.js b/packages/edit-site/src/components/page-library/use-patterns.js
index fe16bc96b8f89d..a68dbd9e6c0204 100644
--- a/packages/edit-site/src/components/page-library/use-patterns.js
+++ b/packages/edit-site/src/components/page-library/use-patterns.js
@@ -3,7 +3,7 @@
  */
 import { parse } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
-import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
+import { store as coreStore } from '@wordpress/core-data';
 import { useMemo } from '@wordpress/element';
 
 /**
@@ -17,6 +17,7 @@ const EMPTY_PATTERN_LIST = [];
 export const TEMPLATE_PARTS = 'wp_template_part';
 export const PATTERNS = 'pattern';
 export const USER_PATTERNS = 'wp_block';
+const USER_PATTERN_CATEGORY = 'your-patterns';
 const SYNC_TYPES = {
 	full: 'fully',
 	unsynced: 'unsynced',
@@ -88,7 +89,7 @@ const useTemplatePartsAsPatterns = (
 	return { templateParts: filteredTemplateParts, isResolving };
 };
 
-const useBlockPatternsByCategory = (
+const useThemePatterns = (
 	categoryId,
 	postType = PATTERNS,
 	filterValue = ''
@@ -123,25 +124,17 @@ const useBlockPatternsByCategory = (
 		[ blockPatterns, restBlockPatterns ]
 	);
 
-	// Non-user-created patterns (e.g. theme patterns ) will have string
-	// category names in their assigned categories array. We'll need to
-	// to retrieve the current category's name to match them.
-	const { record: category } = useEntityRecord(
-		'taxonomy',
-		'wp_pattern',
-		categoryId
-	);
-
 	const filteredPatterns = useMemo( () => {
-		if ( postType !== PATTERNS || ! category ) {
+		if ( postType !== PATTERNS ) {
 			return EMPTY_PATTERN_LIST;
 		}
 
 		return searchItems( patterns, filterValue, {
-			// Rely on closure to check the category slug, rather than id, is in item categories.
-			hasCategory: ( item ) => item.categories?.includes( category.slug ),
+			categoryId,
+			hasCategory: ( item, currentCategory ) =>
+				item.categories?.includes( currentCategory ),
 		} );
-	}, [ patterns, filterValue, category, postType ] );
+	}, [ patterns, filterValue, categoryId, postType ] );
 
 	return filteredPatterns;
 };
@@ -165,7 +158,10 @@ const useUserPatterns = (
 	const postType = categoryType === PATTERNS ? USER_PATTERNS : categoryType;
 	const unfilteredPatterns = useSelect(
 		( select ) => {
-			if ( postType !== USER_PATTERNS ) {
+			if (
+				postType !== USER_PATTERNS ||
+				categoryId !== USER_PATTERN_CATEGORY
+			) {
 				return EMPTY_PATTERN_LIST;
 			}
 
@@ -182,19 +178,21 @@ const useUserPatterns = (
 				reusableBlockToPattern( record )
 			);
 		},
-		[ postType ]
+		[ postType, categoryId ]
 	);
 
 	const filteredPatterns = useMemo( () => {
+		if ( ! unfilteredPatterns.length ) {
+			return EMPTY_PATTERN_LIST;
+		}
+
 		return searchItems( unfilteredPatterns, filterValue, {
-			categoryId,
-			hasCategory: ( item, currentCategory ) => {
-				return currentCategory === 'uncategorized'
-					? ! item.categories?.length
-					: item.categories?.includes( parseInt( currentCategory ) );
-			},
+			// We exit user pattern retrieval early if we aren't in the
+			// catch-all category for user created patterns, so it has
+			// to be in the category.
+			hasCategory: () => true,
 		} );
-	}, [ unfilteredPatterns, categoryId, filterValue ] );
+	}, [ unfilteredPatterns, filterValue ] );
 
 	const patterns = { syncedPatterns: [], unsyncedPatterns: [] };
 
@@ -210,16 +208,18 @@ const useUserPatterns = (
 };
 
 export const usePatterns = ( categoryType, categoryId, filterValue ) => {
-	const blockPatterns = useBlockPatternsByCategory(
+	const blockPatterns = useThemePatterns(
 		categoryId,
 		categoryType,
 		filterValue
 	);
+
 	const { syncedPatterns = [], unsyncedPatterns = [] } = useUserPatterns(
 		categoryId,
 		categoryType,
 		filterValue
 	);
+
 	const { templateParts, isResolving } = useTemplatePartsAsPatterns(
 		categoryId,
 		categoryType,
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
index ac312dfc36f7c5..80c51e1bc8f40a 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
@@ -116,13 +116,13 @@ export default function SidebarNavigationScreenLibrary() {
 										<CategoryItem
 											key={ category.name }
 											count={ category.count }
-											label={ category.name }
+											label={ category.label }
 											icon={ file }
-											id={ category.id }
+											id={ category.name }
 											type="pattern"
 											isActive={
 												currentCategory ===
-													`${ category.id }` &&
+													`${ category.name }` &&
 												currentType === 'pattern'
 											}
 										/>
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-default-pattern-categories.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-default-pattern-categories.js
new file mode 100644
index 00000000000000..014d0e2e65b0ce
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-default-pattern-categories.js
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+
+export default function useDefaultPatternCategories() {
+	const blockPatternCategories = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+		const settings = getSettings();
+
+		return (
+			settings.__experimentalAdditionalBlockPatternCategories ??
+			settings.__experimentalBlockPatternCategories
+		);
+	} );
+
+	const restBlockPatternCategories = useSelect( ( select ) =>
+		select( coreStore ).getBlockPatternCategories()
+	);
+
+	return [
+		...( blockPatternCategories || [] ),
+		...( restBlockPatternCategories || [] ),
+	];
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
index c2f8a98cc0ad3d..ca5de051f2ca6d 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
+import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -9,75 +9,56 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import useDefaultPatternCategories from './use-default-pattern-categories';
 import useThemePatterns from './use-theme-patterns';
 
 export default function usePatternCategories() {
-	const { records: categories } = useEntityRecords(
-		'taxonomy',
-		'wp_pattern',
-		{ per_page: -1, hide_empty: false, context: 'view' }
-	);
-
+	const defaultCategories = useDefaultPatternCategories();
+	const themePatterns = useThemePatterns();
 	const userPatterns = useSelect( ( select ) =>
 		select( coreStore ).getEntityRecords( 'postType', 'wp_block', {
 			per_page: -1,
 		} )
 	);
 
-	const uncategorized = useMemo( () => {
-		const category = {
-			count: 0,
-			id: 'uncategorized',
-			slug: 'uncategorized',
-			name: __( 'Uncategorized' ),
-		};
-
-		( userPatterns || [] ).forEach( ( pattern ) => {
-			if ( ! pattern.wp_pattern?.length ) {
-				category.count += 1;
-			}
-		} );
-
-		return category;
-	}, [ userPatterns ] );
-
-	const themePatterns = useThemePatterns();
 	const patternCategories = useMemo( () => {
-		if ( ! categories ) {
-			return [];
-		}
-
 		const categoryMap = {};
 		const categoriesWithCounts = [];
 
-		// Create a map that we can easily update category counts
-		// for theme patterns that match.
-		categories.forEach( ( patternCategory ) => {
-			if ( ! categoryMap[ patternCategory.slug ] ) {
-				categoryMap[ patternCategory.slug ] = { ...patternCategory };
+		// Create a map for easier counting of patterns in categories.
+		defaultCategories.forEach( ( category ) => {
+			if ( ! categoryMap[ category.name ] ) {
+				categoryMap[ category.name ] = { ...category, count: 0 };
 			}
 		} );
 
+		// Update the category counts to reflect theme registered patterns.
 		themePatterns.forEach( ( pattern ) => {
-			pattern.categories?.forEach( ( patternCategory ) => {
-				if ( categoryMap[ patternCategory ] ) {
-					categoryMap[ patternCategory ].count += 1;
+			pattern.categories?.forEach( ( category ) => {
+				if ( categoryMap[ category ] ) {
+					categoryMap[ category ].count += 1;
 				}
 			} );
 		} );
 
-		categories.forEach( ( category ) => {
-			if ( categoryMap[ category.slug ].count ) {
-				categoriesWithCounts.push( categoryMap[ category.slug ] );
+		// Filter categories so we only have those containing patterns.
+		defaultCategories.forEach( ( category ) => {
+			if ( categoryMap[ category.name ].count ) {
+				categoriesWithCounts.push( categoryMap[ category.name ] );
 			}
 		} );
 
-		if ( uncategorized.count ) {
-			categoriesWithCounts.push( uncategorized );
+		// Add "Your Patterns" category for user patterns if there are any.
+		if ( userPatterns?.length ) {
+			categoriesWithCounts.push( {
+				count: userPatterns.length || 0,
+				name: 'your-patterns',
+				label: __( 'Your Patterns' ),
+			} );
 		}
 
 		return categoriesWithCounts;
-	}, [ categories, themePatterns, uncategorized ] );
+	}, [ defaultCategories, themePatterns, userPatterns ] );
 
 	return { patternCategories, hasPatterns: !! patternCategories.length };
 }

From d5c8b5880e3c33f7cfffd772189a79e7c6a14fd2 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Fri, 16 Jun 2023 12:21:15 +0800
Subject: [PATCH 47/73] Fix Library routing in mobile (#51558)

---
 .../edit-site/src/components/layout/index.js  | 27 +++++++----
 .../components/page-library/patterns-list.js  | 48 +++++++++++++++----
 .../src/components/page-library/style.scss    |  6 ++-
 .../category-item.js                          | 18 +++++--
 .../edit-site/src/utils/get-is-list-page.js   | 20 ++++++--
 5 files changed, 92 insertions(+), 27 deletions(-)

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index 29b4605e67d259..d85b571d3d7fd2 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -65,7 +65,8 @@ export default function Layout() {
 
 	const hubRef = useRef();
 	const { params } = useLocation();
-	const isListPage = getIsListPage( params );
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const isListPage = getIsListPage( params, isMobileViewport );
 	const isEditorPage = ! isListPage;
 	const { hasFixedToolbar, canvasMode, previousShortcut, nextShortcut } =
 		useSelect( ( select ) => {
@@ -91,7 +92,6 @@ export default function Layout() {
 		next: nextShortcut,
 	} );
 	const disableMotion = useReducedMotion();
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const showSidebar =
 		( isMobileViewport && ! isListPage ) ||
 		( ! isMobileViewport && ( canvasMode === 'view' || ! isEditorPage ) );
@@ -171,20 +171,31 @@ export default function Layout() {
 
 				<div className="edit-site-layout__content">
 					<AnimatePresence initial={ false }>
-						{ showSidebar && (
+						{
 							<motion.div
 								initial={ {
 									opacity: 0,
 								} }
-								animate={ {
-									opacity: 1,
-								} }
+								animate={
+									showSidebar
+										? { opacity: 1, display: 'block' }
+										: {
+												opacity: 0,
+												transitionEnd: {
+													display: 'none',
+												},
+										  }
+								}
 								exit={ {
 									opacity: 0,
 								} }
 								transition={ {
 									type: 'tween',
-									duration: ANIMATION_DURATION,
+									duration:
+										// Disable transition in mobile to emulate a full page transition.
+										disableMotion || isMobileViewport
+											? 0
+											: ANIMATION_DURATION,
 									ease: 'easeOut',
 								} }
 								className="edit-site-layout__sidebar"
@@ -195,7 +206,7 @@ export default function Layout() {
 									<Sidebar />
 								</NavigableRegion>
 							</motion.div>
-						) }
+						}
 					</AnimatePresence>
 
 					<SavePanel />
diff --git a/packages/edit-site/src/components/page-library/patterns-list.js b/packages/edit-site/src/components/page-library/patterns-list.js
index 29d8bedf2b652c..ae6543473c9677 100644
--- a/packages/edit-site/src/components/page-library/patterns-list.js
+++ b/packages/edit-site/src/components/page-library/patterns-list.js
@@ -7,9 +7,13 @@ import {
 	__experimentalHeading as Heading,
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
+	Flex,
+	FlexBlock,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { symbol } from '@wordpress/icons';
+import { __, isRTL } from '@wordpress/i18n';
+import { symbol, chevronLeft, chevronRight } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -17,9 +21,16 @@ import { symbol } from '@wordpress/icons';
 import Grid from './grid';
 import NoPatterns from './no-patterns';
 import usePatterns from './use-patterns';
+import SidebarButton from '../sidebar-button';
 import useDebouncedInput from '../../utils/use-debounced-input';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 export default function PatternsList( { categoryId, label, type } ) {
+	const location = useLocation();
+	const history = useHistory();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const [ filterValue, setFilterValue, delayedFilterValue ] =
 		useDebouncedInput( '' );
 
@@ -34,13 +45,32 @@ export default function PatternsList( { categoryId, label, type } ) {
 
 	return (
 		<VStack spacing={ 6 }>
-			<SearchControl
-				className="edit-site-library__search"
-				onChange={ ( value ) => setFilterValue( value ) }
-				placeholder={ __( 'Search patterns' ) }
-				value={ filterValue }
-				__nextHasNoMarginBottom
-			/>
+			<Flex>
+				{ isMobileViewport && (
+					<SidebarButton
+						icon={ isRTL() ? chevronRight : chevronLeft }
+						label={ __( 'Back' ) }
+						onClick={ () => {
+							// Go back in history if we came from the library page.
+							// Otherwise push a stack onto the history.
+							if ( location.state?.backPath === '/library' ) {
+								history.back();
+							} else {
+								history.push( { path: '/library' } );
+							}
+						} }
+					/>
+				) }
+				<FlexBlock>
+					<SearchControl
+						className="edit-site-library__search"
+						onChange={ ( value ) => setFilterValue( value ) }
+						placeholder={ __( 'Search patterns' ) }
+						value={ filterValue }
+						__nextHasNoMarginBottom
+					/>
+				</FlexBlock>
+			</Flex>
 			{ isResolving && __( 'Loading' ) }
 			{ ! isResolving && !! syncedPatterns.length && (
 				<>
diff --git a/packages/edit-site/src/components/page-library/style.scss b/packages/edit-site/src/components/page-library/style.scss
index a34af8066451df..ad016c629b020e 100644
--- a/packages/edit-site/src/components/page-library/style.scss
+++ b/packages/edit-site/src/components/page-library/style.scss
@@ -1,6 +1,6 @@
 .edit-site-library {
 	background: rgba(0, 0, 0, 0.05);
-	margin: 0;
+	margin: $header-height 0 0;
 	.components-text {
 		color: $gray-600;
 	}
@@ -8,6 +8,10 @@
 	.components-heading {
 		color: $white;
 	}
+
+	@include break-medium {
+		margin: 0;
+	}
 }
 
 .edit-site-library__grid {
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
index 7bd207b21bc5f6..dace89fa137837 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
@@ -12,11 +12,19 @@ export default function CategoryItem( {
 	label,
 	type,
 } ) {
-	const linkInfo = useLink( {
-		path: '/library',
-		categoryType: type,
-		categoryId: id,
-	} );
+	const linkInfo = useLink(
+		{
+			path: '/library',
+			categoryType: type,
+			categoryId: id,
+		},
+		{
+			// Keep record for where we came from in a state so we can
+			// use browser's back button to go back to the library.
+			// See the implementation of the back button in patterns-list.
+			backPath: '/library',
+		}
+	);
 
 	if ( ! count ) {
 		return;
diff --git a/packages/edit-site/src/utils/get-is-list-page.js b/packages/edit-site/src/utils/get-is-list-page.js
index 890a0c7b0c8dc8..963287308ac9a3 100644
--- a/packages/edit-site/src/utils/get-is-list-page.js
+++ b/packages/edit-site/src/utils/get-is-list-page.js
@@ -1,11 +1,23 @@
 /**
  * Returns if the params match the list page route.
  *
- * @param {Object} params      The url params.
- * @param {string} params.path The current path.
+ * @param {Object}  params                The url params.
+ * @param {string}  params.path           The current path.
+ * @param {string}  [params.categoryType] The current category type.
+ * @param {string}  [params.categoryId]   The current category id.
+ * @param {boolean} isMobileViewport      Is mobile viewport.
  *
  * @return {boolean} Is list page or not.
  */
-export default function getIsListPage( { path } ) {
-	return path === '/wp_template/all' || path === '/library';
+export default function getIsListPage(
+	{ path, categoryType, categoryId },
+	isMobileViewport
+) {
+	return (
+		path === '/wp_template/all' ||
+		( path === '/library' &&
+			// Don't treat "/library" without categoryType and categoryId as a list page
+			// in mobile because the sidebar covers the whole page.
+			( ! isMobileViewport || ( !! categoryType && !! categoryId ) ) )
+	);
 }

From 425759b5639ec71c75bd3062bd7a905654e6bf46 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 16 Jun 2023 15:56:03 +1000
Subject: [PATCH 48/73] Remove obselete TODO comments

---
 .../edit-site/src/components/create-pattern-modal/index.js     | 2 --
 packages/edit-site/src/components/page-library/search-items.js | 3 ---
 .../src/components/sidebar-navigation-screen-library/index.js  | 2 +-
 3 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/edit-site/src/components/create-pattern-modal/index.js b/packages/edit-site/src/components/create-pattern-modal/index.js
index dcf21d29ba5681..8914263fe831d6 100644
--- a/packages/edit-site/src/components/create-pattern-modal/index.js
+++ b/packages/edit-site/src/components/create-pattern-modal/index.js
@@ -49,8 +49,6 @@ export default function CreatePatternModal( {
 		}
 
 		try {
-			// TODO: Enforce unique pattern names?
-
 			const pattern = await saveEntityRecord(
 				'postType',
 				'wp_block',
diff --git a/packages/edit-site/src/components/page-library/search-items.js b/packages/edit-site/src/components/page-library/search-items.js
index 751b02e3741ab2..9026e7f39f4bf9 100644
--- a/packages/edit-site/src/components/page-library/search-items.js
+++ b/packages/edit-site/src/components/page-library/search-items.js
@@ -4,9 +4,6 @@
 import removeAccents from 'remove-accents';
 import { noCase } from 'change-case';
 
-// TODO: Replace or remove the removeAccents and noCase deps to avoid needing
-// to add them to side editor.
-
 // Default search helpers.
 const defaultGetName = ( item ) => item.name || '';
 const defaultGetTitle = ( item ) => item.title;
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
index 80c51e1bc8f40a..6f122e7e5ac4bb 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
@@ -30,7 +30,7 @@ const templatePartAreaLabels = {
 	header: __( 'Headers' ),
 	footer: __( 'Footers' ),
 	sidebar: __( 'Sidebar' ),
-	uncategorized: __( 'Uncategorized' ), // TODO: Find correct label for this.
+	uncategorized: __( 'Uncategorized' ),
 };
 
 export default function SidebarNavigationScreenLibrary() {

From e54aa4b939f53a575bba3d5f364e2985ed6f8369 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 16 Jun 2023 16:18:33 +1000
Subject: [PATCH 49/73] Use extracted useDebouncedInput hook

---
 .../add-custom-template-modal-content.js           | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
index 5636ec16e1ac1d..80a20939dec251 100644
--- a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
+++ b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
@@ -15,13 +15,13 @@ import {
 	__unstableUseCompositeState as useCompositeState,
 	__unstableCompositeItem as CompositeItem,
 } from '@wordpress/components';
-import { useDebounce } from '@wordpress/compose';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
  */
+import useDebouncedInput from '../../utils/use-debounced-input';
 import { mapToIHasNameAndId } from './utils';
 
 const EMPTY_ARRAY = [];
@@ -73,18 +73,6 @@ function SuggestionListItem( {
 	);
 }
 
-function useDebouncedInput() {
-	const [ input, setInput ] = useState( '' );
-	const [ debounced, setter ] = useState( '' );
-	const setDebounced = useDebounce( setter, 250 );
-	useEffect( () => {
-		if ( debounced !== input ) {
-			setDebounced( input );
-		}
-	}, [ debounced, input ] );
-	return [ input, setInput, debounced ];
-}
-
 function useSearchSuggestions( entityForSuggestions, search ) {
 	const { config } = entityForSuggestions;
 	const query = useMemo(

From 051b7495f0a7e4ae463e2c0c5a41d01a26357b7d Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Sun, 18 Jun 2023 15:12:53 +0800
Subject: [PATCH 50/73] Fix clicking browser's back button in edit mode from
 the Library (#51566)

---
 packages/edit-site/src/components/page-library/grid-item.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/edit-site/src/components/page-library/grid-item.js b/packages/edit-site/src/components/page-library/grid-item.js
index 7ab597ebcec8be..62f6d93efe7d1f 100644
--- a/packages/edit-site/src/components/page-library/grid-item.js
+++ b/packages/edit-site/src/components/page-library/grid-item.js
@@ -66,7 +66,6 @@ const GridItem = ( { categoryId, composite, icon, item } ) => {
 	const descriptionId = `edit-site-library__pattern-description-${ instanceId }`;
 
 	const { onClick } = useLink( {
-		path: '/library',
 		postType: item.type,
 		postId: item.type === USER_PATTERNS ? item.id : item.name,
 		categoryId,

From e4c997b017ab7caee0353d280936987cdc3dbe51 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 20 Jun 2023 14:06:49 +1000
Subject: [PATCH 51/73] Rename Your Patterns to Custom patterns

---
 .../edit-site/src/components/create-pattern-modal/index.js    | 2 +-
 .../edit-site/src/components/page-library/use-patterns.js     | 2 +-
 .../use-pattern-categories.js                                 | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/create-pattern-modal/index.js b/packages/edit-site/src/components/create-pattern-modal/index.js
index 8914263fe831d6..4542c796b4bfec 100644
--- a/packages/edit-site/src/components/create-pattern-modal/index.js
+++ b/packages/edit-site/src/components/create-pattern-modal/index.js
@@ -20,7 +20,7 @@ const SYNC_TYPES = {
 	unsynced: 'unsynced',
 };
 
-const USER_PATTERN_CATEGORY = 'your-patterns';
+const USER_PATTERN_CATEGORY = 'custom-patterns';
 
 export default function CreatePatternModal( {
 	closeModal,
diff --git a/packages/edit-site/src/components/page-library/use-patterns.js b/packages/edit-site/src/components/page-library/use-patterns.js
index a68dbd9e6c0204..7e4c8ba3ed49c0 100644
--- a/packages/edit-site/src/components/page-library/use-patterns.js
+++ b/packages/edit-site/src/components/page-library/use-patterns.js
@@ -17,7 +17,7 @@ const EMPTY_PATTERN_LIST = [];
 export const TEMPLATE_PARTS = 'wp_template_part';
 export const PATTERNS = 'pattern';
 export const USER_PATTERNS = 'wp_block';
-const USER_PATTERN_CATEGORY = 'your-patterns';
+const USER_PATTERN_CATEGORY = 'custom-patterns';
 const SYNC_TYPES = {
 	full: 'fully',
 	unsynced: 'unsynced',
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
index ca5de051f2ca6d..a787f8c04c6390 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-pattern-categories.js
@@ -52,8 +52,8 @@ export default function usePatternCategories() {
 		if ( userPatterns?.length ) {
 			categoriesWithCounts.push( {
 				count: userPatterns.length || 0,
-				name: 'your-patterns',
-				label: __( 'Your Patterns' ),
+				name: 'custom-patterns',
+				label: __( 'Custom patterns' ),
 			} );
 		}
 

From c227bb5d44702a95bb6b15b0adb5170180073da1 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 20 Jun 2023 14:34:11 +1000
Subject: [PATCH 52/73] Remove arrow functions for internal Grid components

---
 .../edit-site/src/components/page-library/grid-item.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/edit-site/src/components/page-library/grid-item.js b/packages/edit-site/src/components/page-library/grid-item.js
index 62f6d93efe7d1f..15317c993e4c78 100644
--- a/packages/edit-site/src/components/page-library/grid-item.js
+++ b/packages/edit-site/src/components/page-library/grid-item.js
@@ -29,7 +29,7 @@ import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
 import { useLink } from '../routes/link';
 import { PATTERNS, USER_PATTERNS } from './use-patterns';
 
-const DeleteMenuItem = ( { item, onClose } ) => {
+function DeleteMenuItem( { item, onClose } ) {
 	const { __experimentalDeleteReusableBlock } =
 		useDispatch( reusableBlocksStore );
 	const { createErrorNotice, createSuccessNotice } =
@@ -59,9 +59,9 @@ const DeleteMenuItem = ( { item, onClose } ) => {
 	return (
 		<MenuItem onClick={ deleteReusableBlock }>{ __( 'Delete' ) }</MenuItem>
 	);
-};
+}
 
-const GridItem = ( { categoryId, composite, icon, item } ) => {
+export default function GridItem( { categoryId, composite, icon, item } ) {
 	const instanceId = useInstanceId( GridItem );
 	const descriptionId = `edit-site-library__pattern-description-${ instanceId }`;
 
@@ -134,6 +134,4 @@ const GridItem = ( { categoryId, composite, icon, item } ) => {
 			</HStack>
 		</div>
 	);
-};
-
-export default GridItem;
+}

From c1c087c2122b82bfd9bae5e72a3ac32851b82ec3 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 20 Jun 2023 14:37:40 +1000
Subject: [PATCH 53/73] Fix linting error

---
 .../use-init-edited-entity-from-url.js                   | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
index c3e71d9b3a5622..fb80e4570272ee 100644
--- a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
+++ b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
@@ -31,8 +31,13 @@ export default function useInitEditedEntityFromURL() {
 		};
 	}, [] );
 
-	const { setReusableBlock, setTemplate, setTemplatePart, setPage, setNavigationMenu } =
-		useDispatch( editSiteStore );
+	const {
+		setReusableBlock,
+		setTemplate,
+		setTemplatePart,
+		setPage,
+		setNavigationMenu,
+	} = useDispatch( editSiteStore );
 
 	useEffect( () => {
 		if ( postType && postId ) {

From df6177a1c80395dd5be1b35bcefe54eec1693895 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 20 Jun 2023 15:06:43 +1000
Subject: [PATCH 54/73] Add dependencies to package-lock.json

---
 package-lock.json | 32 +++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index dde0ee8a669677..52fb775cbe3f28 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17808,6 +17808,7 @@
 				"@wordpress/viewport": "file:packages/viewport",
 				"@wordpress/widgets": "file:packages/widgets",
 				"@wordpress/wordcount": "file:packages/wordcount",
+				"change-case": "^4.1.2",
 				"classnames": "^2.3.1",
 				"colord": "^2.9.2",
 				"deepmerge": "^4.3.0",
@@ -17817,7 +17818,8 @@
 				"lodash": "^4.17.21",
 				"memize": "^2.1.0",
 				"react-autosize-textarea": "^7.1.0",
-				"rememo": "^4.0.2"
+				"rememo": "^4.0.2",
+				"remove-accents": "^0.4.2"
 			}
 		},
 		"@wordpress/edit-widgets": {
@@ -25902,7 +25904,7 @@
 		"array-ify": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/array-ify/-/array-ify-1.0.0.tgz",
-			"integrity": "sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==",
+			"integrity": "sha1-nlKHYrSpBmrRY6aWKjZEGOlibs4=",
 			"dev": true
 		},
 		"array-includes": {
@@ -30865,7 +30867,7 @@
 		"css.escape": {
 			"version": "1.5.1",
 			"resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
-			"integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=",
+			"integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
 			"dev": true
 		},
 		"cssesc": {
@@ -31111,7 +31113,7 @@
 		"debuglog": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/debuglog/-/debuglog-1.0.1.tgz",
-			"integrity": "sha512-syBZ+rnAK3EgMsH2aYEOLUW7mZSY9Gb+0wUMCFsZvcmiz+HigA0LOcq/HoQqVuGG+EKykunc7QG2bzrponfaSw==",
+			"integrity": "sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=",
 			"dev": true
 		},
 		"decache": {
@@ -35952,7 +35954,7 @@
 		"git-remote-origin-url": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/git-remote-origin-url/-/git-remote-origin-url-2.0.0.tgz",
-			"integrity": "sha512-eU+GGrZgccNJcsDH5LkXR3PB9M958hxc7sbA8DFJjrv9j4L2P/eZfKhM+QD6wyzpiv+b1BpK0XrYCxkovtjSLw==",
+			"integrity": "sha1-UoJlna4hBxRaERJhEq0yFuxfpl8=",
 			"dev": true,
 			"requires": {
 				"gitconfiglocal": "^1.0.0",
@@ -35999,7 +36001,7 @@
 		"gitconfiglocal": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/gitconfiglocal/-/gitconfiglocal-1.0.0.tgz",
-			"integrity": "sha512-spLUXeTAVHxDtKsJc8FkFVgFtMdEN9qPGpL23VfSHx4fP4+Ds097IXLvymbnDH8FnmxX5Nr9bPw3A+AQ6mWEaQ==",
+			"integrity": "sha1-QdBF84UaXqiPA/JMocYXgRRGS5s=",
 			"dev": true,
 			"requires": {
 				"ini": "^1.3.2"
@@ -37247,7 +37249,7 @@
 		"humanize-ms": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
-			"integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==",
+			"integrity": "sha1-xG4xWaKT9riW2ikxbYtv6Lt5u+0=",
 			"dev": true,
 			"requires": {
 				"ms": "^2.0.0"
@@ -38263,7 +38265,7 @@
 		"is-text-path": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/is-text-path/-/is-text-path-1.0.1.tgz",
-			"integrity": "sha512-xFuJpne9oFz5qDaodwmmG08e3CawH/2ZV8Qqza1Ko7Sk8POWbkRdwIoAWVhqvq0XeUzANEhKo2n0IXUGBm7A/w==",
+			"integrity": "sha1-Thqg+1G/vLPpJogAE5cgLBd1tm4=",
 			"dev": true,
 			"requires": {
 				"text-extensions": "^1.0.0"
@@ -40036,7 +40038,7 @@
 		"jsonparse": {
 			"version": "1.3.1",
 			"resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz",
-			"integrity": "sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==",
+			"integrity": "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=",
 			"dev": true
 		},
 		"jsprim": {
@@ -41142,7 +41144,7 @@
 		"lodash.ismatch": {
 			"version": "4.4.0",
 			"resolved": "https://registry.npmjs.org/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz",
-			"integrity": "sha512-fPMfXjGQEV9Xsq/8MTSgUf255gawYRbjwMyDbcvDhXgV7enSZA0hynz6vMPnpAb5iONEzBHBPsT+0zes5Z301g==",
+			"integrity": "sha1-dWy1FQyjum8RCFp4hJZF8Yj4Xzc=",
 			"dev": true
 		},
 		"lodash.isplainobject": {
@@ -41422,7 +41424,7 @@
 		"lz-string": {
 			"version": "1.4.4",
 			"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
-			"integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=",
+			"integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==",
 			"dev": true
 		},
 		"macos-release": {
@@ -48645,7 +48647,7 @@
 		"promzard": {
 			"version": "0.3.0",
 			"resolved": "https://registry.npmjs.org/promzard/-/promzard-0.3.0.tgz",
-			"integrity": "sha512-JZeYqd7UAcHCwI+sTOeUDYkvEU+1bQ7iE0UT1MgB/tERkAPkesW46MrpIySzODi+owTjZtiF8Ay5j9m60KmMBw==",
+			"integrity": "sha1-JqXW7ox97kyxIggwWs+5O6OCqe4=",
 			"dev": true,
 			"requires": {
 				"read": "1"
@@ -48679,7 +48681,7 @@
 		"proto-list": {
 			"version": "1.2.4",
 			"resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
-			"integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
+			"integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=",
 			"dev": true
 		},
 		"protocols": {
@@ -50296,7 +50298,7 @@
 		"read": {
 			"version": "1.0.7",
 			"resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
-			"integrity": "sha512-rSOKNYUmaxy0om1BNjMN4ezNT6VKK+2xF4GBhc81mkH7L60i6dp8qPYrkndNLT3QPphoII3maL9PVC9XmhHwVQ==",
+			"integrity": "sha1-s9oZvQUkMal2cdRKQmNK33ELQMQ=",
 			"dev": true,
 			"requires": {
 				"mute-stream": "~0.0.4"
@@ -55686,7 +55688,7 @@
 		"temp-dir": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz",
-			"integrity": "sha512-xZFXEGbG7SNC3itwBzI3RYjq/cEhBkx2hJuKGIUOcEULmkQExXiHat2z/qkISYsuR+IKumhEfKKbV5qXmhICFQ==",
+			"integrity": "sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=",
 			"dev": true
 		},
 		"terminal-link": {

From 8fd05d0c6a7a47aa844fec313104cddc09808260 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 20 Jun 2023 16:59:45 +1000
Subject: [PATCH 55/73] Update core pattern filtering

---
 .../src/components/page-library/use-patterns.js      | 11 ++++++++++-
 .../use-theme-patterns.js                            | 12 +++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/page-library/use-patterns.js b/packages/edit-site/src/components/page-library/use-patterns.js
index 7e4c8ba3ed49c0..b6748449ae2ef3 100644
--- a/packages/edit-site/src/components/page-library/use-patterns.js
+++ b/packages/edit-site/src/components/page-library/use-patterns.js
@@ -18,6 +18,12 @@ export const TEMPLATE_PARTS = 'wp_template_part';
 export const PATTERNS = 'pattern';
 export const USER_PATTERNS = 'wp_block';
 const USER_PATTERN_CATEGORY = 'custom-patterns';
+const CORE_PATTERN_SOURCES = [
+	'core',
+	'pattern-directory/core',
+	'pattern-directory/featured',
+	'pattern-directory/theme',
+];
 const SYNC_TYPES = {
 	full: 'fully',
 	unsynced: 'unsynced',
@@ -110,7 +116,10 @@ const useThemePatterns = (
 	const patterns = useMemo(
 		() =>
 			[ ...( blockPatterns || [] ), ...( restBlockPatterns || [] ) ]
-				.filter( ( pattern ) => pattern.source !== 'core' )
+				.filter(
+					( pattern ) =>
+						! CORE_PATTERN_SOURCES.includes( pattern.source )
+				)
 				.filter(
 					( x, index, arr ) =>
 						index === arr.findIndex( ( y ) => x.name === y.name )
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-theme-patterns.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-theme-patterns.js
index f3f54767d88725..da9abfdb8ead6d 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-theme-patterns.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-theme-patterns.js
@@ -11,6 +11,13 @@ import { useMemo } from '@wordpress/element';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
+const CORE_PATTERN_SOURCES = [
+	'core',
+	'pattern-directory/core',
+	'pattern-directory/featured',
+	'pattern-directory/theme',
+];
+
 export default function useThemePatterns() {
 	const blockPatterns = useSelect( ( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
@@ -28,7 +35,10 @@ export default function useThemePatterns() {
 	const patterns = useMemo(
 		() =>
 			[ ...( blockPatterns || [] ), ...( restBlockPatterns || [] ) ]
-				.filter( ( pattern ) => pattern.source !== 'core' )
+				.filter(
+					( pattern ) =>
+						! CORE_PATTERN_SOURCES.includes( pattern.source )
+				)
 				.filter(
 					( x, index, arr ) =>
 						index === arr.findIndex( ( y ) => x.name === y.name )

From eab0181794c831db5874b3b2306d018a3a885202 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 20 Jun 2023 17:18:49 +1000
Subject: [PATCH 56/73] Consolidate and reuse constants

---
 .../components/create-pattern-modal/index.js  | 10 ++++-----
 .../src/components/page-library/constants.js  | 18 +++++++++++++++
 .../src/components/page-library/grid-item.js  |  2 +-
 .../src/components/page-library/index.js      |  4 +---
 .../components/page-library/use-patterns.js   | 22 +++++++------------
 .../index.js                                  |  4 +---
 .../use-theme-patterns.js                     |  8 +------
 7 files changed, 34 insertions(+), 34 deletions(-)
 create mode 100644 packages/edit-site/src/components/page-library/constants.js

diff --git a/packages/edit-site/src/components/create-pattern-modal/index.js b/packages/edit-site/src/components/create-pattern-modal/index.js
index 4542c796b4bfec..abc14a7ccd8f69 100644
--- a/packages/edit-site/src/components/create-pattern-modal/index.js
+++ b/packages/edit-site/src/components/create-pattern-modal/index.js
@@ -15,12 +15,10 @@ import { useState } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
 
-const SYNC_TYPES = {
-	full: 'fully',
-	unsynced: 'unsynced',
-};
-
-const USER_PATTERN_CATEGORY = 'custom-patterns';
+/**
+ * Internal dependencies
+ */
+import { SYNC_TYPES, USER_PATTERN_CATEGORY } from '../page-library/constants';
 
 export default function CreatePatternModal( {
 	closeModal,
diff --git a/packages/edit-site/src/components/page-library/constants.js b/packages/edit-site/src/components/page-library/constants.js
new file mode 100644
index 00000000000000..1d4a5489f50446
--- /dev/null
+++ b/packages/edit-site/src/components/page-library/constants.js
@@ -0,0 +1,18 @@
+export const DEFAULT_CATEGORY = 'header';
+export const DEFAULT_TYPE = 'wp_template_part';
+export const PATTERNS = 'pattern';
+export const TEMPLATE_PARTS = 'wp_template_part';
+export const USER_PATTERNS = 'wp_block';
+export const USER_PATTERN_CATEGORY = 'custom-patterns';
+
+export const CORE_PATTERN_SOURCES = [
+	'core',
+	'pattern-directory/core',
+	'pattern-directory/featured',
+	'pattern-directory/theme',
+];
+
+export const SYNC_TYPES = {
+	full: 'fully',
+	unsynced: 'unsynced',
+};
diff --git a/packages/edit-site/src/components/page-library/grid-item.js b/packages/edit-site/src/components/page-library/grid-item.js
index 15317c993e4c78..4d63f0c3b61d41 100644
--- a/packages/edit-site/src/components/page-library/grid-item.js
+++ b/packages/edit-site/src/components/page-library/grid-item.js
@@ -26,8 +26,8 @@ import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
 /**
  * Internal dependencies
  */
+import { PATTERNS, USER_PATTERNS } from './constants';
 import { useLink } from '../routes/link';
-import { PATTERNS, USER_PATTERNS } from './use-patterns';
 
 function DeleteMenuItem( { item, onClose } ) {
 	const { __experimentalDeleteReusableBlock } =
diff --git a/packages/edit-site/src/components/page-library/index.js b/packages/edit-site/src/components/page-library/index.js
index 33766d1089670e..426cd9204204fd 100644
--- a/packages/edit-site/src/components/page-library/index.js
+++ b/packages/edit-site/src/components/page-library/index.js
@@ -8,6 +8,7 @@ import { getQueryArgs } from '@wordpress/url';
 /**
  * Internal dependencies
  */
+import { DEFAULT_CATEGORY, DEFAULT_TYPE } from './constants';
 import Page from '../page';
 import PatternsList from './patterns-list';
 import useLibrarySettings from './use-library-settings';
@@ -15,9 +16,6 @@ import { unlock } from '../../lock-unlock';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 
-const DEFAULT_TYPE = 'wp_template_part';
-const DEFAULT_CATEGORY = 'header';
-
 export default function PageLibrary() {
 	const { categoryType, categoryId } = getQueryArgs( window.location.href );
 	const type = categoryType || DEFAULT_TYPE;
diff --git a/packages/edit-site/src/components/page-library/use-patterns.js b/packages/edit-site/src/components/page-library/use-patterns.js
index b6748449ae2ef3..59fcc8ea96aaaf 100644
--- a/packages/edit-site/src/components/page-library/use-patterns.js
+++ b/packages/edit-site/src/components/page-library/use-patterns.js
@@ -9,25 +9,19 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import {
+	CORE_PATTERN_SOURCES,
+	PATTERNS,
+	SYNC_TYPES,
+	TEMPLATE_PARTS,
+	USER_PATTERNS,
+	USER_PATTERN_CATEGORY,
+} from './constants';
 import { unlock } from '../../lock-unlock';
 import { searchItems } from './search-items';
 import { store as editSiteStore } from '../../store';
 
 const EMPTY_PATTERN_LIST = [];
-export const TEMPLATE_PARTS = 'wp_template_part';
-export const PATTERNS = 'pattern';
-export const USER_PATTERNS = 'wp_block';
-const USER_PATTERN_CATEGORY = 'custom-patterns';
-const CORE_PATTERN_SOURCES = [
-	'core',
-	'pattern-directory/core',
-	'pattern-directory/featured',
-	'pattern-directory/theme',
-];
-const SYNC_TYPES = {
-	full: 'fully',
-	unsynced: 'unsynced',
-};
 
 const createTemplatePartId = ( theme, slug ) =>
 	theme && slug ? theme + '//' + slug : null;
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
index 6f122e7e5ac4bb..638b33e38793e1 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
@@ -19,13 +19,11 @@ 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/constants';
 import { store as editSiteStore } from '../../store';
 import usePatternCategories from './use-pattern-categories';
 import useTemplatePartAreas from './use-template-part-areas';
 
-const DEFAULT_CATEGORY = 'header';
-const DEFAULT_TYPE = 'wp_template_part';
-
 const templatePartAreaLabels = {
 	header: __( 'Headers' ),
 	footer: __( 'Footers' ),
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-theme-patterns.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-theme-patterns.js
index da9abfdb8ead6d..79a72814e75195 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-theme-patterns.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-theme-patterns.js
@@ -8,16 +8,10 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import { CORE_PATTERN_SOURCES } from '../page-library/constants';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
-const CORE_PATTERN_SOURCES = [
-	'core',
-	'pattern-directory/core',
-	'pattern-directory/featured',
-	'pattern-directory/theme',
-];
-
 export default function useThemePatterns() {
 	const blockPatterns = useSelect( ( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );

From b7b98810c5a38c39cea37a48dd832b1957522cda Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 21 Jun 2023 11:43:47 +1000
Subject: [PATCH 57/73] Clean up comments and unused styles

---
 packages/edit-site/src/components/page-library/style.scss   | 6 ------
 .../sidebar-navigation-screen-library/category-item.js      | 4 ++--
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/edit-site/src/components/page-library/style.scss b/packages/edit-site/src/components/page-library/style.scss
index ad016c629b020e..488193d64f7be4 100644
--- a/packages/edit-site/src/components/page-library/style.scss
+++ b/packages/edit-site/src/components/page-library/style.scss
@@ -31,7 +31,6 @@
 		flex-direction: column;
 		margin-bottom: $grid-unit-60;
 
-		// Temp styles for testing - delete asap
 		.edit-site-library__preview {
 			border-radius: $radius-block-ui;
 			cursor: pointer;
@@ -46,7 +45,6 @@
 		.edit-site-library__button {
 			color: $gray-600;
 		}
-		// END: temp styles for testing.
 	}
 
 	.edit-site-library__preview {
@@ -84,8 +82,4 @@
 
 .edit-site-library__no-results {
 	color: $gray-600;
-	// height: 100%,
-	// display: flex,
-	// alignItems: center,
-	// justifyContent: center,
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
index dace89fa137837..288f92d8ef5dd4 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
@@ -19,8 +19,8 @@ export default function CategoryItem( {
 			categoryId: id,
 		},
 		{
-			// Keep record for where we came from in a state so we can
-			// use browser's back button to go back to the library.
+			// 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.
 			// See the implementation of the back button in patterns-list.
 			backPath: '/library',
 		}

From 00f1623726e1315be0f69e9114f39726c8ea8491 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 21 Jun 2023 11:44:29 +1000
Subject: [PATCH 58/73] Rename manage all link for custom patterns

---
 .../src/components/sidebar-navigation-screen-library/index.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
index 638b33e38793e1..a21843e47258de 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
@@ -62,7 +62,7 @@ export default function SidebarNavigationScreenLibrary() {
 							href="edit.php?post_type=wp_block"
 							withChevron
 						>
-							{ __( 'Manage all reusable blocks' ) }
+							{ __( 'Manage all custom patterns' ) }
 						</SidebarNavigationItem>
 					) }
 				</ItemGroup>

From 01377776ec95a3ef59484ece2baa4a93380b85a8 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 21 Jun 2023 11:34:26 +0800
Subject: [PATCH 59/73] Remove `wp_block` property from post meta for patterns

---
 packages/edit-site/src/components/create-pattern-modal/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/create-pattern-modal/index.js b/packages/edit-site/src/components/create-pattern-modal/index.js
index abc14a7ccd8f69..aed0564eb4bb25 100644
--- a/packages/edit-site/src/components/create-pattern-modal/index.js
+++ b/packages/edit-site/src/components/create-pattern-modal/index.js
@@ -54,7 +54,7 @@ export default function CreatePatternModal( {
 					title: name || __( 'Untitled Pattern' ),
 					content: '',
 					status: 'publish',
-					meta: { wp_block: { sync_status: syncType } },
+					meta: { sync_status: syncType },
 				},
 				{ throwOnError: true }
 			);

From 59b4b0ce91991bce5246806b26f2e3e64ad72b1f Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 21 Jun 2023 14:46:44 +1000
Subject: [PATCH 60/73] Update conversion of reusable block to pattern after
 sync_status moved

---
 packages/edit-site/src/components/page-library/use-patterns.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/page-library/use-patterns.js b/packages/edit-site/src/components/page-library/use-patterns.js
index 59fcc8ea96aaaf..1956cc37e9c94b 100644
--- a/packages/edit-site/src/components/page-library/use-patterns.js
+++ b/packages/edit-site/src/components/page-library/use-patterns.js
@@ -147,7 +147,7 @@ const reusableBlockToPattern = ( reusableBlock ) => ( {
 	categories: reusableBlock.wp_pattern,
 	id: reusableBlock.id,
 	name: reusableBlock.slug,
-	syncStatus: reusableBlock.meta?.wp_block?.sync_status,
+	syncStatus: reusableBlock.meta?.sync_status,
 	title: reusableBlock.title.raw,
 	type: reusableBlock.type,
 	reusableBlock,

From 17ec9971a3997afeb7630abbce03d69f512825f4 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 21 Jun 2023 15:08:59 +1000
Subject: [PATCH 61/73] Rename setReusableBlock to setEditedEntity

---
 .../data/data-core-edit-site.md               | 25 ++++++++++---------
 .../use-init-edited-entity-from-url.js        |  5 ++--
 packages/edit-site/src/store/actions.js       | 11 ++++----
 3 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/docs/reference-guides/data/data-core-edit-site.md b/docs/reference-guides/data/data-core-edit-site.md
index 9c77919fad9cbb..83e9b09dfd7d89 100644
--- a/docs/reference-guides/data/data-core-edit-site.md
+++ b/docs/reference-guides/data/data-core-edit-site.md
@@ -268,6 +268,19 @@ _Parameters_
 -   _options_ `[Object]`:
 -   _options.allowUndo_ `[boolean]`: Whether to allow the user to undo reverting the template. Default true.
 
+### setEditedEntity
+
+Action that sets an edited entity.
+
+_Parameters_
+
+-   _postType_ `string`: The entity's post type.
+-   _postId_ `string`: The entity's ID.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### setEditedPostContext
 
 Set's the current block editor context.
@@ -366,18 +379,6 @@ _Returns_
 
 -   `number`: The resolved template ID for the page route.
 
-### setReusableBlock
-
-Action that sets a reusable block.
-
-_Parameters_
-
--   _reusableBlockId_ `string`: The reusable block ID.
-
-_Returns_
-
--   `Object`: Action object.
-
 ### setTemplate
 
 Action that sets a template, optionally fetching it from REST API.
diff --git a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
index fb80e4570272ee..19518f650c0be3 100644
--- a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
+++ b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
@@ -32,7 +32,7 @@ export default function useInitEditedEntityFromURL() {
 	}, [] );
 
 	const {
-		setReusableBlock,
+		setEditedEntity,
 		setTemplate,
 		setTemplatePart,
 		setPage,
@@ -52,7 +52,7 @@ export default function useInitEditedEntityFromURL() {
 					setNavigationMenu( postId );
 					break;
 				case 'wp_block':
-					setReusableBlock( postId );
+					setEditedEntity( postType, postId );
 					break;
 				default:
 					setPage( {
@@ -79,6 +79,7 @@ export default function useInitEditedEntityFromURL() {
 		postType,
 		homepageId,
 		isRequestingSite,
+		setEditedEntity,
 		setPage,
 		setTemplate,
 		setTemplatePart,
diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js
index 53f88f9bee4265..8da362ca01f17d 100644
--- a/packages/edit-site/src/store/actions.js
+++ b/packages/edit-site/src/store/actions.js
@@ -192,17 +192,18 @@ export function setNavigationMenu( navigationMenuId ) {
 }
 
 /**
- * Action that sets a reusable block.
+ * Action that sets an edited entity.
  *
- * @param {string} reusableBlockId The reusable block ID.
+ * @param {string} postType The entity's post type.
+ * @param {string} postId   The entity's ID.
  *
  * @return {Object} Action object.
  */
-export function setReusableBlock( reusableBlockId ) {
+export function setEditedEntity( postType, postId ) {
 	return {
 		type: 'SET_EDITED_POST',
-		postType: 'wp_block',
-		id: reusableBlockId,
+		postType,
+		id: postId,
 	};
 }
 

From 51c9d7e9fd1f7de3ac5600102f23f01c2101d4e6 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 21 Jun 2023 15:12:30 +1000
Subject: [PATCH 62/73] Improve wording

---
 .../src/components/create-pattern-modal/index.js          | 8 ++------
 .../src/components/create-template-part-modal/index.js    | 2 +-
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/edit-site/src/components/create-pattern-modal/index.js b/packages/edit-site/src/components/create-pattern-modal/index.js
index aed0564eb4bb25..b98a18dc44df80 100644
--- a/packages/edit-site/src/components/create-pattern-modal/index.js
+++ b/packages/edit-site/src/components/create-pattern-modal/index.js
@@ -40,7 +40,7 @@ export default function CreatePatternModal( {
 
 	async function createPattern() {
 		if ( ! name ) {
-			createErrorNotice( __( 'Name is not defined.' ), {
+			createErrorNotice( __( 'Please enter a pattern name.' ), {
 				type: 'snackbar',
 			} );
 			return;
@@ -77,11 +77,7 @@ export default function CreatePatternModal( {
 			onRequestClose={ closeModal }
 			overlayClassName="edit-site-create-pattern-modal"
 		>
-			<p>
-				{ __(
-					'Turn this block into a pattern for you to reuse later'
-				) }
-			</p>
+			<p>{ __( 'Turn this block into a pattern to reuse later' ) }</p>
 
 			<form
 				onSubmit={ async ( event ) => {
diff --git a/packages/edit-site/src/components/create-template-part-modal/index.js b/packages/edit-site/src/components/create-template-part-modal/index.js
index f0c74786c67cb4..4e02f9426ae743 100644
--- a/packages/edit-site/src/components/create-template-part-modal/index.js
+++ b/packages/edit-site/src/components/create-template-part-modal/index.js
@@ -56,7 +56,7 @@ export default function CreateTemplatePartModal( {
 
 	async function createTemplatePart() {
 		if ( ! title ) {
-			createErrorNotice( __( 'Title is not defined.' ), {
+			createErrorNotice( __( 'Please enter a title.' ), {
 				type: 'snackbar',
 			} );
 			return;

From e2f672a674f0f577bac9f5f5cc323e24b7fcb5ac Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 21 Jun 2023 13:40:05 +0800
Subject: [PATCH 63/73] Add aria description for pattern action menu

---
 .../edit-site/src/components/page-library/grid-item.js     | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/page-library/grid-item.js b/packages/edit-site/src/components/page-library/grid-item.js
index 4d63f0c3b61d41..09d4ce3118ecf9 100644
--- a/packages/edit-site/src/components/page-library/grid-item.js
+++ b/packages/edit-site/src/components/page-library/grid-item.js
@@ -18,7 +18,7 @@ import {
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { Icon, moreHorizontal } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
@@ -119,6 +119,11 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 						toggleProps={ {
 							className: 'edit-site-library__button',
 							isSmall: true,
+							describedBy: sprintf(
+								/* translators: %s: pattern name */
+								__( 'Action menu for %s pattern' ),
+								item.title
+							),
 						} }
 					>
 						{ ( { onClose } ) => (

From a263e16a1b566a45bd83fc74a5a3c12a1112b550 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 21 Jun 2023 15:48:21 +1000
Subject: [PATCH 64/73] Refactor filtering out duplicate patterns by name

---
 .../src/components/create-pattern-modal/index.js       |  2 +-
 .../edit-site/src/components/page-library/grid-item.js |  2 +-
 .../edit-site/src/components/page-library/index.js     |  2 +-
 .../components/page-library/use-library-settings.js    |  6 ++----
 .../src/components/page-library/use-patterns.js        |  8 +++-----
 .../components/page-library/{constants.js => utils.js} |  3 +++
 .../sidebar-navigation-screen-library/index.js         |  2 +-
 .../use-theme-patterns.js                              | 10 +++++-----
 8 files changed, 17 insertions(+), 18 deletions(-)
 rename packages/edit-site/src/components/page-library/{constants.js => utils.js} (76%)

diff --git a/packages/edit-site/src/components/create-pattern-modal/index.js b/packages/edit-site/src/components/create-pattern-modal/index.js
index b98a18dc44df80..d57e424ef73186 100644
--- a/packages/edit-site/src/components/create-pattern-modal/index.js
+++ b/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/constants';
+import { SYNC_TYPES, USER_PATTERN_CATEGORY } from '../page-library/utils';
 
 export default function CreatePatternModal( {
 	closeModal,
diff --git a/packages/edit-site/src/components/page-library/grid-item.js b/packages/edit-site/src/components/page-library/grid-item.js
index 09d4ce3118ecf9..c559267950be43 100644
--- a/packages/edit-site/src/components/page-library/grid-item.js
+++ b/packages/edit-site/src/components/page-library/grid-item.js
@@ -26,7 +26,7 @@ import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
 /**
  * Internal dependencies
  */
-import { PATTERNS, USER_PATTERNS } from './constants';
+import { PATTERNS, USER_PATTERNS } from './utils';
 import { useLink } from '../routes/link';
 
 function DeleteMenuItem( { item, onClose } ) {
diff --git a/packages/edit-site/src/components/page-library/index.js b/packages/edit-site/src/components/page-library/index.js
index 426cd9204204fd..ad77c25db27184 100644
--- a/packages/edit-site/src/components/page-library/index.js
+++ b/packages/edit-site/src/components/page-library/index.js
@@ -8,7 +8,7 @@ import { getQueryArgs } from '@wordpress/url';
 /**
  * Internal dependencies
  */
-import { DEFAULT_CATEGORY, DEFAULT_TYPE } from './constants';
+import { DEFAULT_CATEGORY, DEFAULT_TYPE } from './utils';
 import Page from '../page';
 import PatternsList from './patterns-list';
 import useLibrarySettings from './use-library-settings';
diff --git a/packages/edit-site/src/components/page-library/use-library-settings.js b/packages/edit-site/src/components/page-library/use-library-settings.js
index 07811997b371d1..a0f1bfcdae3930 100644
--- a/packages/edit-site/src/components/page-library/use-library-settings.js
+++ b/packages/edit-site/src/components/page-library/use-library-settings.js
@@ -10,6 +10,7 @@ import { useMemo } from '@wordpress/element';
  */
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
+import { filterOutDuplicatesByName } from './utils';
 
 export default function useLibrarySettings() {
 	const storedSettings = useSelect( ( select ) => {
@@ -31,10 +32,7 @@ export default function useLibrarySettings() {
 			[
 				...( settingsBlockPatterns || [] ),
 				...( restBlockPatterns || [] ),
-			].filter(
-				( x, index, arr ) =>
-					index === arr.findIndex( ( y ) => x.name === y.name )
-			),
+			].filter( filterOutDuplicatesByName ),
 		[ settingsBlockPatterns, restBlockPatterns ]
 	);
 
diff --git a/packages/edit-site/src/components/page-library/use-patterns.js b/packages/edit-site/src/components/page-library/use-patterns.js
index 1956cc37e9c94b..9034dc43421fc0 100644
--- a/packages/edit-site/src/components/page-library/use-patterns.js
+++ b/packages/edit-site/src/components/page-library/use-patterns.js
@@ -16,7 +16,8 @@ import {
 	TEMPLATE_PARTS,
 	USER_PATTERNS,
 	USER_PATTERN_CATEGORY,
-} from './constants';
+	filterOutDuplicatesByName,
+} from './utils';
 import { unlock } from '../../lock-unlock';
 import { searchItems } from './search-items';
 import { store as editSiteStore } from '../../store';
@@ -114,10 +115,7 @@ const useThemePatterns = (
 					( pattern ) =>
 						! CORE_PATTERN_SOURCES.includes( pattern.source )
 				)
-				.filter(
-					( x, index, arr ) =>
-						index === arr.findIndex( ( y ) => x.name === y.name )
-				)
+				.filter( filterOutDuplicatesByName )
 				.map( ( pattern ) => ( {
 					...pattern,
 					keywords: pattern.keywords || [],
diff --git a/packages/edit-site/src/components/page-library/constants.js b/packages/edit-site/src/components/page-library/utils.js
similarity index 76%
rename from packages/edit-site/src/components/page-library/constants.js
rename to packages/edit-site/src/components/page-library/utils.js
index 1d4a5489f50446..a9f1d7a658483e 100644
--- a/packages/edit-site/src/components/page-library/constants.js
+++ b/packages/edit-site/src/components/page-library/utils.js
@@ -16,3 +16,6 @@ export const SYNC_TYPES = {
 	full: 'fully',
 	unsynced: 'unsynced',
 };
+
+export const filterOutDuplicatesByName = ( currentItem, index, items ) =>
+	index === items.findIndex( ( item ) => currentItem.name === item.name );
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
index a21843e47258de..d3cfcbece6be0e 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/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/constants';
+import { DEFAULT_CATEGORY, DEFAULT_TYPE } from '../page-library/utils';
 import { store as editSiteStore } from '../../store';
 import usePatternCategories from './use-pattern-categories';
 import useTemplatePartAreas from './use-template-part-areas';
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-theme-patterns.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-theme-patterns.js
index 79a72814e75195..d0534eca2846e1 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/use-theme-patterns.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/use-theme-patterns.js
@@ -8,7 +8,10 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { CORE_PATTERN_SOURCES } from '../page-library/constants';
+import {
+	CORE_PATTERN_SOURCES,
+	filterOutDuplicatesByName,
+} from '../page-library/utils';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
@@ -33,10 +36,7 @@ export default function useThemePatterns() {
 					( pattern ) =>
 						! CORE_PATTERN_SOURCES.includes( pattern.source )
 				)
-				.filter(
-					( x, index, arr ) =>
-						index === arr.findIndex( ( y ) => x.name === y.name )
-				),
+				.filter( filterOutDuplicatesByName ),
 		[ blockPatterns, restBlockPatterns ]
 	);
 

From df1c567a28102e032c42626a6c68b3bbfa723603 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 21 Jun 2023 14:29:39 +0800
Subject: [PATCH 65/73] Add focus style for patterns

---
 packages/edit-site/src/components/page-library/style.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/edit-site/src/components/page-library/style.scss b/packages/edit-site/src/components/page-library/style.scss
index 488193d64f7be4..e4fe2b8de0a48a 100644
--- a/packages/edit-site/src/components/page-library/style.scss
+++ b/packages/edit-site/src/components/page-library/style.scss
@@ -36,6 +36,13 @@
 			cursor: pointer;
 			overflow: hidden;
 
+			&:focus {
+				box-shadow: inset 0 0 0 2px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+				// Windows High Contrast mode will show this outline, but not the box-shadow.
+				outline: 2px solid transparent;
+			}
+
 			&.is-inactive {
 				cursor: default;
 			}

From 5d94265e291f4053a6461e7c33a6d58539299a35 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 21 Jun 2023 16:32:16 +1000
Subject: [PATCH 66/73] Add empty pattern placeholder

---
 .../edit-site/src/components/page-library/grid-item.js   | 9 +++++++--
 .../edit-site/src/components/page-library/style.scss     | 9 +++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/page-library/grid-item.js b/packages/edit-site/src/components/page-library/grid-item.js
index c559267950be43..8cc86a8611adca 100644
--- a/packages/edit-site/src/components/page-library/grid-item.js
+++ b/packages/edit-site/src/components/page-library/grid-item.js
@@ -73,13 +73,17 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 		canvas: 'edit',
 	} );
 
+	const isEmpty = ! item.blocks?.length;
+	const patternClassNames = classnames( 'edit-site-library__pattern', {
+		'is-placeholder': isEmpty,
+	} );
 	const previewClassNames = classnames( 'edit-site-library__preview', {
 		'is-inactive': item.type === PATTERNS,
 	} );
 
 	return (
 		<div
-			className="edit-site-library__pattern"
+			className={ patternClassNames }
 			aria-label={ item.title }
 			aria-describedby={ item.description ? descriptionId : undefined }
 		>
@@ -90,7 +94,8 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 				{ ...composite }
 				onClick={ item.type !== PATTERNS ? onClick : undefined }
 			>
-				<BlockPreview blocks={ item.blocks } />
+				{ isEmpty && __( 'Empty pattern' ) }
+				{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }
 				{ !! item.description && (
 					<VisuallyHidden id={ descriptionId }>
 						{ item.description }
diff --git a/packages/edit-site/src/components/page-library/style.scss b/packages/edit-site/src/components/page-library/style.scss
index e4fe2b8de0a48a..d2dde29fe01279 100644
--- a/packages/edit-site/src/components/page-library/style.scss
+++ b/packages/edit-site/src/components/page-library/style.scss
@@ -52,6 +52,15 @@
 		.edit-site-library__button {
 			color: $gray-600;
 		}
+
+		&.is-placeholder .edit-site-library__preview {
+			min-height: $grid-unit-80;
+			color: $gray-600;
+			border: 1px dashed $gray-800;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
 	}
 
 	.edit-site-library__preview {

From c4961341cf918d8281997e4cfbbe7ae1b1b48c80 Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Wed, 21 Jun 2023 14:41:16 +0800
Subject: [PATCH 67/73] Fix tests and converter flow

---
 .../src/components/add-new-pattern/index.js   |  1 +
 .../create-template-part-modal/index.js       |  8 +--
 .../convert-to-template-part.js               | 29 ++---------
 .../site-editor-url-navigation.spec.js        |  6 ++-
 .../site-editor/template-parts-mode.spec.js   | 51 -------------------
 5 files changed, 14 insertions(+), 81 deletions(-)
 delete mode 100644 test/e2e/specs/site-editor/template-parts-mode.spec.js

diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js
index 46cb03583e6e39..54b6f48488aebc 100644
--- a/packages/edit-site/src/components/add-new-pattern/index.js
+++ b/packages/edit-site/src/components/add-new-pattern/index.js
@@ -84,6 +84,7 @@ export default function AddNewPattern() {
 			{ showTemplatePartModal && (
 				<CreateTemplatePartModal
 					closeModal={ () => setShowTemplatePartModal( false ) }
+					blocks={ [] }
 					onCreate={ handleCreateTemplatePart }
 					onError={ handleError }
 				/>
diff --git a/packages/edit-site/src/components/create-template-part-modal/index.js b/packages/edit-site/src/components/create-template-part-modal/index.js
index 4e02f9426ae743..7deeeae23ab56e 100644
--- a/packages/edit-site/src/components/create-template-part-modal/index.js
+++ b/packages/edit-site/src/components/create-template-part-modal/index.js
@@ -23,6 +23,7 @@ import { store as editorStore } from '@wordpress/editor';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
 import { check } from '@wordpress/icons';
+import { serialize } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -36,6 +37,7 @@ import {
 
 export default function CreateTemplatePartModal( {
 	closeModal,
+	blocks = [],
 	onCreate,
 	onError,
 } ) {
@@ -75,12 +77,12 @@ export default function CreateTemplatePartModal( {
 				{
 					slug: cleanSlug,
 					title: uniqueTitle,
-					content: '',
+					content: serialize( blocks ),
 					area,
 				},
 				{ throwOnError: true }
 			);
-			onCreate( templatePart );
+			await onCreate( templatePart );
 
 			// TODO: Add a success notice?
 		} catch ( error ) {
@@ -93,7 +95,7 @@ export default function CreateTemplatePartModal( {
 
 			createErrorNotice( errorMessage, { type: 'snackbar' } );
 
-			onError();
+			onError?.();
 		}
 	}
 
diff --git a/packages/edit-site/src/components/template-part-converter/convert-to-template-part.js b/packages/edit-site/src/components/template-part-converter/convert-to-template-part.js
index a671faf756cd40..d7571a0dcd6285 100644
--- a/packages/edit-site/src/components/template-part-converter/convert-to-template-part.js
+++ b/packages/edit-site/src/components/template-part-converter/convert-to-template-part.js
@@ -4,10 +4,9 @@
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { MenuItem } from '@wordpress/components';
-import { createBlock, serialize } from '@wordpress/blocks';
+import { createBlock } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
 import { symbolFilled } from '@wordpress/icons';
 
@@ -16,18 +15,11 @@ import { symbolFilled } from '@wordpress/icons';
  */
 import CreateTemplatePartModal from '../create-template-part-modal';
 import { store as editSiteStore } from '../../store';
-import {
-	useExistingTemplateParts,
-	getUniqueTemplatePartTitle,
-	getCleanTemplatePartSlug,
-} from '../../utils/template-part-create';
 
 export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
-	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
-	const existingTemplateParts = useExistingTemplateParts();
 
 	const { canCreate } = useSelect( ( select ) => {
 		const { supportsTemplatePartsMode } =
@@ -41,23 +33,7 @@ export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 		return null;
 	}
 
-	const onConvert = async ( { title, area } ) => {
-		const uniqueTitle = getUniqueTemplatePartTitle(
-			title,
-			existingTemplateParts
-		);
-		const cleanSlug = getCleanTemplatePartSlug( uniqueTitle );
-
-		const templatePart = await saveEntityRecord(
-			'postType',
-			'wp_template_part',
-			{
-				slug: cleanSlug,
-				title: uniqueTitle,
-				content: serialize( blocks ),
-				area,
-			}
-		);
+	const onConvert = async ( templatePart ) => {
 		replaceBlocks(
 			clientIds,
 			createBlock( 'core/template-part', {
@@ -88,6 +64,7 @@ export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 					closeModal={ () => {
 						setIsModalOpen( false );
 					} }
+					blocks={ blocks }
 					onCreate={ onConvert }
 				/>
 			) }
diff --git a/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js b/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js
index 5bd1fbd29d52b7..ee9a0dd99eb488 100644
--- a/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js
+++ b/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js
@@ -63,7 +63,11 @@ test.describe( 'Site editor url navigation', () => {
 		} ) => {
 			await admin.visitSiteEditor();
 			await page.click( 'role=button[name="Library"i]' );
-			await page.click( 'role=button[name="Add New"i]' );
+			await page.click( 'role=button[name="Create a pattern"i]' );
+			await page
+				.getByRole( 'menu', { name: 'Create a pattern' } )
+				.getByRole( 'menuitem', { name: 'Create a template part' } )
+				.click();
 			// Fill in a name in the dialog that pops up.
 			await page.type(
 				'role=dialog >> role=textbox[name="Name"i]',
diff --git a/test/e2e/specs/site-editor/template-parts-mode.spec.js b/test/e2e/specs/site-editor/template-parts-mode.spec.js
deleted file mode 100644
index a8945794ae6a8d..00000000000000
--- a/test/e2e/specs/site-editor/template-parts-mode.spec.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * WordPress dependencies
- */
-const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
-
-test.describe( 'Template Parts for Classic themes', () => {
-	test.beforeAll( async ( { requestUtils } ) => {
-		await requestUtils.activateTheme( 'emptyhybrid' );
-	} );
-
-	test.afterAll( async ( { requestUtils } ) => {
-		await requestUtils.activateTheme( 'twentytwentyone' );
-	} );
-
-	test( 'can access template parts list page', async ( { admin, page } ) => {
-		await admin.visitAdminPage(
-			'site-editor.php',
-			'postType=wp_template_part&path=/wp_template_part/all'
-		);
-
-		await expect(
-			page.getByRole( 'table' ).getByRole( 'link', { name: 'header' } )
-		).toBeVisible();
-	} );
-
-	test( 'can view a template part', async ( { admin, editor, page } ) => {
-		await admin.visitAdminPage(
-			'site-editor.php',
-			'postType=wp_template_part&path=/wp_template_part/all'
-		);
-
-		const templatePart = page
-			.getByRole( 'table' )
-			.getByRole( 'link', { name: 'header' } );
-
-		await expect( templatePart ).toBeVisible();
-		await templatePart.click();
-
-		await expect(
-			page.getByRole( 'region', { name: 'Editor content' } )
-		).toBeVisible();
-
-		await editor.canvas.click( 'body' );
-
-		await expect(
-			editor.canvas.getByRole( 'document', {
-				name: 'Block: Site Title',
-			} )
-		).toBeVisible();
-	} );
-} );

From 5bdd1144dc84a684afe781ef258e6dec31fa43c7 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 21 Jun 2023 16:52:06 +1000
Subject: [PATCH 68/73] Tweak focused placeholder styles

---
 packages/edit-site/src/components/page-library/style.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/edit-site/src/components/page-library/style.scss b/packages/edit-site/src/components/page-library/style.scss
index d2dde29fe01279..e663fcdc248414 100644
--- a/packages/edit-site/src/components/page-library/style.scss
+++ b/packages/edit-site/src/components/page-library/style.scss
@@ -60,6 +60,10 @@
 			display: flex;
 			align-items: center;
 			justify-content: center;
+
+			&:focus {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			}
 		}
 	}
 

From 6d7b0d6111d78cf0af39f384c47999b6c32819d5 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 21 Jun 2023 15:13:46 +0800
Subject: [PATCH 69/73] Make the action menu unfocusable and use a keyboard
 shortcut for deletion

---
 .../src/components/page-library/grid-item.js  | 75 ++++++++++---------
 1 file changed, 40 insertions(+), 35 deletions(-)

diff --git a/packages/edit-site/src/components/page-library/grid-item.js b/packages/edit-site/src/components/page-library/grid-item.js
index 8cc86a8611adca..6379f6e3ff005b 100644
--- a/packages/edit-site/src/components/page-library/grid-item.js
+++ b/packages/edit-site/src/components/page-library/grid-item.js
@@ -22,6 +22,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { Icon, moreHorizontal } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
+import { DELETE, BACKSPACE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -29,42 +30,15 @@ import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
 import { PATTERNS, USER_PATTERNS } from './utils';
 import { useLink } from '../routes/link';
 
-function DeleteMenuItem( { item, onClose } ) {
+export default function GridItem( { categoryId, composite, icon, item } ) {
+	const instanceId = useInstanceId( GridItem );
+	const descriptionId = `edit-site-library__pattern-description-${ instanceId }`;
+
 	const { __experimentalDeleteReusableBlock } =
 		useDispatch( reusableBlocksStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
 
-	if ( item.type !== USER_PATTERNS ) {
-		return;
-	}
-
-	const deleteReusableBlock = async () => {
-		try {
-			await __experimentalDeleteReusableBlock( item.id );
-			createSuccessNotice( __( 'Pattern successfully deleted.' ), {
-				type: 'snackbar',
-			} );
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'An error occurred while deleting the pattern.' );
-			createErrorNotice( errorMessage, { type: 'snackbar' } );
-		} finally {
-			onClose();
-		}
-	};
-
-	return (
-		<MenuItem onClick={ deleteReusableBlock }>{ __( 'Delete' ) }</MenuItem>
-	);
-}
-
-export default function GridItem( { categoryId, composite, icon, item } ) {
-	const instanceId = useInstanceId( GridItem );
-	const descriptionId = `edit-site-library__pattern-description-${ instanceId }`;
-
 	const { onClick } = useLink( {
 		postType: item.type,
 		postId: item.type === USER_PATTERNS ? item.id : item.name,
@@ -81,6 +55,21 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 		'is-inactive': item.type === PATTERNS,
 	} );
 
+	const deletePattern = async () => {
+		try {
+			await __experimentalDeleteReusableBlock( item.id );
+			createSuccessNotice( __( 'Pattern successfully deleted.' ), {
+				type: 'snackbar',
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while deleting the pattern.' );
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+		}
+	};
+
 	return (
 		<div
 			className={ patternClassNames }
@@ -93,6 +82,14 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 				as="div"
 				{ ...composite }
 				onClick={ item.type !== PATTERNS ? onClick : undefined }
+				onKeyDown={ ( event ) => {
+					if (
+						DELETE === event.keyCode ||
+						BACKSPACE === event.keyCode
+					) {
+						deletePattern( item );
+					}
+				} }
 			>
 				{ isEmpty && __( 'Empty pattern' ) }
 				{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }
@@ -129,14 +126,22 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 								__( 'Action menu for %s pattern' ),
 								item.title
 							),
+							// The dropdown menu is not focusable using the
+							// keyboard as this would interfere with the grid's
+							// roving tab index system. Instead, keyboard users
+							// use keyboard shortcuts to trigger actions.
+							tabIndex: -1,
 						} }
 					>
 						{ ( { onClose } ) => (
 							<MenuGroup>
-								<DeleteMenuItem
-									item={ item }
-									onClose={ onClose }
-								/>
+								<MenuItem
+									onClick={ () =>
+										deletePattern.then( onClose )
+									}
+								>
+									{ __( 'Delete' ) }
+								</MenuItem>
 							</MenuGroup>
 						) }
 					</DropdownMenu>

From 4aa656a1660e9d8c2b825c4712ffc7b472116fb9 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 21 Jun 2023 15:30:33 +0800
Subject: [PATCH 70/73] Add confirm step for deleting

---
 .../src/components/page-library/grid-item.js  | 161 ++++++++++--------
 1 file changed, 88 insertions(+), 73 deletions(-)

diff --git a/packages/edit-site/src/components/page-library/grid-item.js b/packages/edit-site/src/components/page-library/grid-item.js
index 6379f6e3ff005b..cc5eb01d7f1163 100644
--- a/packages/edit-site/src/components/page-library/grid-item.js
+++ b/packages/edit-site/src/components/page-library/grid-item.js
@@ -8,6 +8,7 @@ import classnames from 'classnames';
  */
 import { BlockPreview } from '@wordpress/block-editor';
 import {
+	__experimentalConfirmDialog as ConfirmDialog,
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
@@ -18,6 +19,7 @@ import {
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, moreHorizontal } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
@@ -33,6 +35,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 [ isDeleteDialogOpen, setIsDeleteDialogOpen ] = useState( false );
 
 	const { __experimentalDeleteReusableBlock } =
 		useDispatch( reusableBlocksStore );
@@ -71,82 +74,94 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 	};
 
 	return (
-		<div
-			className={ patternClassNames }
-			aria-label={ item.title }
-			aria-describedby={ item.description ? descriptionId : undefined }
-		>
-			<CompositeItem
-				className={ previewClassNames }
-				role="option"
-				as="div"
-				{ ...composite }
-				onClick={ item.type !== PATTERNS ? onClick : undefined }
-				onKeyDown={ ( event ) => {
-					if (
-						DELETE === event.keyCode ||
-						BACKSPACE === event.keyCode
-					) {
-						deletePattern( item );
-					}
-				} }
-			>
-				{ isEmpty && __( 'Empty pattern' ) }
-				{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }
-				{ !! item.description && (
-					<VisuallyHidden id={ descriptionId }>
-						{ item.description }
-					</VisuallyHidden>
-				) }
-			</CompositeItem>
-			<HStack
-				className="edit-site-library__footer"
-				justify="space-between"
+		<>
+			<div
+				className={ patternClassNames }
+				aria-label={ item.title }
+				aria-describedby={
+					item.description ? descriptionId : undefined
+				}
 			>
+				<CompositeItem
+					className={ previewClassNames }
+					role="option"
+					as="div"
+					{ ...composite }
+					onClick={ item.type !== PATTERNS ? onClick : undefined }
+					onKeyDown={ ( event ) => {
+						if (
+							DELETE === event.keyCode ||
+							BACKSPACE === event.keyCode
+						) {
+							setIsDeleteDialogOpen( true );
+						}
+					} }
+				>
+					{ isEmpty && __( 'Empty pattern' ) }
+					{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }
+					{ !! item.description && (
+						<VisuallyHidden id={ descriptionId }>
+							{ item.description }
+						</VisuallyHidden>
+					) }
+				</CompositeItem>
 				<HStack
-					alignment="center"
-					justify="left"
-					spacing={ 3 }
-					className="edit-site-library__pattern-title"
+					className="edit-site-library__footer"
+					justify="space-between"
 				>
-					{ icon && <Icon icon={ icon } /> }
-					<Heading level={ 5 }>{ item.title }</Heading>
-				</HStack>
-				{ item.type === USER_PATTERNS && (
-					<DropdownMenu
-						icon={ moreHorizontal }
-						label={ __( 'Actions' ) }
-						className="edit-site-library__dropdown"
-						popoverProps={ { placement: 'bottom-end' } }
-						toggleProps={ {
-							className: 'edit-site-library__button',
-							isSmall: true,
-							describedBy: sprintf(
-								/* translators: %s: pattern name */
-								__( 'Action menu for %s pattern' ),
-								item.title
-							),
-							// The dropdown menu is not focusable using the
-							// keyboard as this would interfere with the grid's
-							// roving tab index system. Instead, keyboard users
-							// use keyboard shortcuts to trigger actions.
-							tabIndex: -1,
-						} }
+					<HStack
+						alignment="center"
+						justify="left"
+						spacing={ 3 }
+						className="edit-site-library__pattern-title"
 					>
-						{ ( { onClose } ) => (
-							<MenuGroup>
-								<MenuItem
-									onClick={ () =>
-										deletePattern.then( onClose )
-									}
-								>
-									{ __( 'Delete' ) }
-								</MenuItem>
-							</MenuGroup>
-						) }
-					</DropdownMenu>
-				) }
-			</HStack>
-		</div>
+						{ icon && <Icon icon={ icon } /> }
+						<Heading level={ 5 }>{ item.title }</Heading>
+					</HStack>
+					{ item.type === USER_PATTERNS && (
+						<DropdownMenu
+							icon={ moreHorizontal }
+							label={ __( 'Actions' ) }
+							className="edit-site-library__dropdown"
+							popoverProps={ { placement: 'bottom-end' } }
+							toggleProps={ {
+								className: 'edit-site-library__button',
+								isSmall: true,
+								describedBy: sprintf(
+									/* translators: %s: pattern name */
+									__( 'Action menu for %s pattern' ),
+									item.title
+								),
+								// The dropdown menu is not focusable using the
+								// keyboard as this would interfere with the grid's
+								// roving tab index system. Instead, keyboard users
+								// use keyboard shortcuts to trigger actions.
+								tabIndex: -1,
+							} }
+						>
+							{ () => (
+								<MenuGroup>
+									<MenuItem
+										onClick={ () =>
+											setIsDeleteDialogOpen( true )
+										}
+									>
+										{ __( 'Delete' ) }
+									</MenuItem>
+								</MenuGroup>
+							) }
+						</DropdownMenu>
+					) }
+				</HStack>
+			</div>
+			{ isDeleteDialogOpen && (
+				<ConfirmDialog
+					onConfirm={ deletePattern }
+					onCancel={ () => setIsDeleteDialogOpen( false ) }
+				>
+					{ __( 'Are you sure you want to delete this pattern?' ) }
+				</ConfirmDialog>
+			) }
+		</>
 	);
 }

From fa179de28c9621535abfcd107c6b061954403108 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 21 Jun 2023 15:56:54 +0800
Subject: [PATCH 71/73] Add a more descriptive aria-description

---
 .../src/components/page-library/grid-item.js  | 32 ++++++++++++-------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/packages/edit-site/src/components/page-library/grid-item.js b/packages/edit-site/src/components/page-library/grid-item.js
index cc5eb01d7f1163..a51e95fb7843e7 100644
--- a/packages/edit-site/src/components/page-library/grid-item.js
+++ b/packages/edit-site/src/components/page-library/grid-item.js
@@ -73,21 +73,29 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 		}
 	};
 
+	let ariaDescription;
+	if ( item.type === USER_PATTERNS ) {
+		// User patterns don't have descriptions, but can be edited and deleted, so include some help text.
+		ariaDescription = __(
+			'Press Enter to edit, or Delete to delete the pattern.'
+		);
+	} else if ( item.description ) {
+		ariaDescription = item.description;
+	}
+
 	return (
 		<>
-			<div
-				className={ patternClassNames }
-				aria-label={ item.title }
-				aria-describedby={
-					item.description ? descriptionId : undefined
-				}
-			>
+			<div className={ patternClassNames }>
 				<CompositeItem
 					className={ previewClassNames }
 					role="option"
 					as="div"
 					{ ...composite }
 					onClick={ item.type !== PATTERNS ? onClick : undefined }
+					aria-label={ item.title }
+					aria-describedby={
+						ariaDescription ? descriptionId : undefined
+					}
 					onKeyDown={ ( event ) => {
 						if (
 							DELETE === event.keyCode ||
@@ -99,12 +107,12 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 				>
 					{ isEmpty && __( 'Empty pattern' ) }
 					{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }
-					{ !! item.description && (
-						<VisuallyHidden id={ descriptionId }>
-							{ item.description }
-						</VisuallyHidden>
-					) }
 				</CompositeItem>
+				{ ariaDescription && (
+					<VisuallyHidden id={ descriptionId }>
+						{ ariaDescription }
+					</VisuallyHidden>
+				) }
 				<HStack
 					className="edit-site-library__footer"
 					justify="space-between"

From 50a1383b6ba383ef1451068b338a4b37eb5fe5bb Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 21 Jun 2023 16:15:47 +0800
Subject: [PATCH 72/73] Ensure pattern lists are announced with the correct
 number of items

---
 .../edit-site/src/components/page-library/grid-item.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/page-library/grid-item.js b/packages/edit-site/src/components/page-library/grid-item.js
index a51e95fb7843e7..673057a12f43b5 100644
--- a/packages/edit-site/src/components/page-library/grid-item.js
+++ b/packages/edit-site/src/components/page-library/grid-item.js
@@ -12,7 +12,6 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
-	VisuallyHidden,
 	__experimentalHeading as Heading,
 	__experimentalHStack as HStack,
 	__unstableCompositeItem as CompositeItem,
@@ -109,11 +108,16 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 					{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }
 				</CompositeItem>
 				{ ariaDescription && (
-					<VisuallyHidden id={ descriptionId }>
+					<div
+						aria-hidden="true"
+						style={ { display: 'none' } }
+						id={ descriptionId }
+					>
 						{ ariaDescription }
-					</VisuallyHidden>
+					</div>
 				) }
 				<HStack
+					aria-hidden="true"
 					className="edit-site-library__footer"
 					justify="space-between"
 				>

From ea08bb0400a6d30a2e5ac6ae65a72d767a549ee8 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 21 Jun 2023 16:17:20 +0800
Subject: [PATCH 73/73] Improve labelling of pattern lists

---
 packages/edit-site/src/components/page-library/index.js    | 7 +------
 .../edit-site/src/components/page-library/patterns-list.js | 6 +++---
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/edit-site/src/components/page-library/index.js b/packages/edit-site/src/components/page-library/index.js
index ad77c25db27184..2bc8e1ce9354cb 100644
--- a/packages/edit-site/src/components/page-library/index.js
+++ b/packages/edit-site/src/components/page-library/index.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
 import { getQueryArgs } from '@wordpress/url';
 
 /**
@@ -28,11 +27,7 @@ export default function PageLibrary() {
 	return (
 		<ExperimentalBlockEditorProvider settings={ settings }>
 			<Page className="edit-site-library">
-				<PatternsList
-					type={ type }
-					categoryId={ category }
-					label={ __( 'Patterns list' ) }
-				/>
+				<PatternsList type={ type } categoryId={ category } />
 			</Page>
 		</ExperimentalBlockEditorProvider>
 	);
diff --git a/packages/edit-site/src/components/page-library/patterns-list.js b/packages/edit-site/src/components/page-library/patterns-list.js
index ae6543473c9677..dfbcd1ca2a966d 100644
--- a/packages/edit-site/src/components/page-library/patterns-list.js
+++ b/packages/edit-site/src/components/page-library/patterns-list.js
@@ -27,7 +27,7 @@ import { unlock } from '../../lock-unlock';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
-export default function PatternsList( { categoryId, label, type } ) {
+export default function PatternsList( { categoryId, type } ) {
 	const location = useLocation();
 	const history = useHistory();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
@@ -85,7 +85,7 @@ export default function PatternsList( { categoryId, label, type } ) {
 					<Grid
 						icon={ symbol }
 						categoryId={ categoryId }
-						label={ label }
+						label={ __( 'Synced patterns' ) }
 						items={ syncedPatterns }
 					/>
 				</>
@@ -102,7 +102,7 @@ export default function PatternsList( { categoryId, label, type } ) {
 					</VStack>
 					<Grid
 						categoryId={ categoryId }
-						label={ label }
+						label={ __( 'Standard patterns' ) }
 						items={ unsyncedPatterns }
 					/>
 				</>