Site Editor: Split the templates list

packages/edit-site/src/components/list/added-by.js

@@ -6,11 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalHStack as HStack,
-	Icon,
-	Tooltip,
-} from '@wordpress/components';
+import { __experimentalHStack as HStack, Icon } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
@@ -20,56 +16,31 @@ import {
 	plugins as pluginIcon,
 	globe as globeIcon,
 } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
 
 const TEMPLATE_POST_TYPE_NAMES = [ 'wp_template', 'wp_template_part' ];
 
-function CustomizedTooltip( { isCustomized, children } ) {
-	if ( ! isCustomized ) {
-		return children;
-	}
-
-	return (
-		<Tooltip text={ __( 'This template has been customized' ) }>
-			{ children }
-		</Tooltip>
-	);
-}
-
-function BaseAddedBy( { text, icon, imageUrl, isCustomized } ) {
+function BaseAddedBy( { text, icon, imageUrl } ) {
 	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
 
 	return (
 		<HStack alignment="left">
-			<CustomizedTooltip isCustomized={ isCustomized }>
-				{ imageUrl ? (
-					<div
-						className={ classnames(
-							'edit-site-list-added-by__avatar',
-							{
-								'is-loaded': isImageLoaded,
-							}
-						) }
-					>
-						<img
-							onLoad={ () => setIsImageLoaded( true ) }
-							alt=""
-							src={ imageUrl }
-						/>
-					</div>
-				) : (
-					<div
-						className={ classnames(
-							'edit-site-list-added-by__icon',
-							{
-								'is-customized': isCustomized,
-							}
-						) }
-					>
-						<Icon icon={ icon } />
-					</div>
-				) }
-			</CustomizedTooltip>
+			{ imageUrl ? (
+				<div
+					className={ classnames( 'edit-site-list-added-by__avatar', {
+						'is-loaded': isImageLoaded,
+					} ) }
+				>
+					<img
+						onLoad={ () => setIsImageLoaded( true ) }
+						alt=""
+						src={ imageUrl }
+					/>
+				</div>
+			) : (
+				<div className="edit-site-list-added-by__icon">
+					<Icon icon={ icon } />
+				</div>
+			) }
 			<span>{ text }</span>
 		</HStack>
 	);

packages/edit-site/src/components/list/index.js

@@ -1,12 +1,13 @@
 /**
  * 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 { InterfaceSkeleton } from '@wordpress/interface';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { EditorSnackbars } from '@wordpress/editor';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -60,13 +61,87 @@ export default function List() {
 		  }
 		: undefined;
 
+	const {
+		records: templates,
+		isResolving,
+		hasResolved,
+	} = useEntityRecords( 'postType', templateType, {
+		per_page: -1,
+	} );
+
+	const { customizedTemplates, nonCustomizedTemplates } = useMemo( () => {
+		let mappedTemplates = {
+			customizedTemplates: [],
+			nonCustomizedTemplates: [],
+		};
+
+		if ( ! hasResolved || ! templates ) {
+			return [];
+		}
+
+		if ( templates.length ) {
+			mappedTemplates = templates.reduce(
+				( accumulator, template ) => {
+					if ( template.source === 'custom' ) {
+						accumulator.customizedTemplates.push( template );
+					} else {
+						accumulator.nonCustomizedTemplates.push( template );
+					}
+					return accumulator;
+				},
+				{ customizedTemplates: [], nonCustomizedTemplates: [] }
+			);
+		}
+
+		return mappedTemplates;
+	}, [ hasResolved, templates ] );
+
+	const hasCustomizedTemplates = !! customizedTemplates?.length;
+
 	return (
 		<InterfaceSkeleton
 			className="edit-site-list"
 			labels={ detailedRegionLabels }
 			header={ <Header templateType={ templateType } /> }
 			notices={ <EditorSnackbars /> }
-			content={ <Table templateType={ templateType } /> }
+			content={
+				<>
+					{ hasCustomizedTemplates && (
+						<Table
+							templateType={ templateType }
+							postType={ postType }
+							templates={ customizedTemplates }
+							isLoading={ isResolving }
+							heading={
+								postType &&
+								sprintf(
+									// translators: %s: The template type name, either "templates" or "template parts".
+									__( 'Customized %s' ),
+									postType.labels?.name?.toLowerCase()
+								)
+							}
+							templateHeadingLevel={ 3 }
+							showActionsColumn
+						/>
+					) }
+					<Table
+						templateType={ templateType }
+						postType={ postType }
+						templates={ nonCustomizedTemplates }
+						isLoading={ isResolving }
+						heading={
+							hasCustomizedTemplates &&
+							postType &&
+							sprintf(
+								// translators: %s: The template type name, either "templates" or "template parts".
+								__( 'Default %s' ),
+								postType.labels?.name?.toLowerCase()
+							)
+						}
+						templateHeadingLevel={ hasCustomizedTemplates ? 3 : 2 }
+					/>
+				</>
+			}
 			shortcuts={ {
 				previous: previousShortcut,
 				next: nextShortcut,

packages/edit-site/src/components/list/style.scss

@@ -50,14 +50,19 @@
 				padding: $grid-unit * 9;
 			}
 		}
+
+		.edit-site-list__table-label {
+			align-self: flex-start;
+			margin-bottom: $grid-unit-20;
+		}
 	}
 }
 
 .edit-site-list-table {
 	min-width: 100%;
 	border: $border-width solid $gray-300;
 	border-radius: 2px;
-	margin: 0 auto;
+	margin: 0 auto $grid-unit-40;
 	overflow: hidden;
 	border-spacing: 0;
 	max-width: 960px;
@@ -152,18 +157,6 @@
 	svg {
 		fill: $white;
 	}
-
-	&.is-customized::after {
-		position: absolute;
-		content: "";
-		background: var(--wp-admin-theme-color);
-		height: $grid-unit-10;
-		width: $grid-unit-10;
-		outline: 2px solid $white;
-		border-radius: 100%;
-		top: -1px;
-		right: -1px;
-	}
 }
 
 .edit-site-list-added-by__avatar {