From fca8f9d8a23331531d5e8c4ec3ab5c0a41c48827 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] 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 a477ae6957c15..29b4605e67d25 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 4e87f4a09cc95..0000000000000
--- 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 87eeb74ee6741..f3aed978d513b 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 b2bd1a0e932f8..33766d1089670 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 3fc024688a442..e7193ae3f53d8 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 58913437bcbc9..07811997b371d 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 c9a74f66dc400..1b6862005075d 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 03fd0072cc367..ebcf35dfb0c1f 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 6836456c8eb9b..c0c48ff65b056 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 0fca87f26760a..d032e31080438 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 c978deb26a44f..0000000000000
--- 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 3e7049985cc92..890a0c7b0c8dc 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';
 }