diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
index 527cb37ceddaf7..3ff934ac100a88 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
@@ -4,6 +4,7 @@
import {
__experimentalItemGroup as ItemGroup,
__experimentalItem as Item,
+ __experimentalVStack as VStack,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useEntityRecords } from '@wordpress/core-data';
@@ -30,20 +31,11 @@ const TemplateItem = ( { postType, postId, ...props } ) => {
export default function SidebarNavigationScreenTemplates() {
const isMobileViewport = useViewportMatch( 'medium', '<' );
-
const { records: templates, isResolving: isLoading } = useEntityRecords(
'postType',
TEMPLATE_POST_TYPE,
- {
- per_page: -1,
- }
- );
-
- const sortedTemplates = templates ? [ ...templates ] : [];
- sortedTemplates.sort( ( a, b ) =>
- a.title.rendered.localeCompare( b.title.rendered )
+ { per_page: -1 }
);
-
const browseAllLink = useLink( { path: '/wp_template/all' } );
const canCreate = ! isMobileViewport;
return (
@@ -66,24 +58,7 @@ export default function SidebarNavigationScreenTemplates() {
<>
{ isLoading && __( 'Loading templates…' ) }
{ ! isLoading && (
-
- { ! templates?.length && (
- - { __( 'No templates found' ) }
- ) }
- { sortedTemplates.map( ( template ) => (
-
- { decodeEntities(
- template.title?.rendered ||
- template.slug
- ) }
-
- ) ) }
-
+
) }
>
}
@@ -97,3 +72,85 @@ export default function SidebarNavigationScreenTemplates() {
/>
);
}
+
+function TemplatesGroup( { title, templates } ) {
+ return (
+
+ { !! title && (
+ -
+ { title }
+
+ ) }
+ { templates.map( ( template ) => (
+
+ { decodeEntities(
+ template.title?.rendered || template.slug
+ ) }
+
+ ) ) }
+
+ );
+}
+function SidebarTemplatesList( { templates } ) {
+ if ( ! templates?.length ) {
+ return (
+
+ - { __( 'No templates found' ) }
+
+ );
+ }
+ const sortedTemplates = templates ? [ ...templates ] : [];
+ sortedTemplates.sort( ( a, b ) =>
+ a.title.rendered.localeCompare( b.title.rendered )
+ );
+ const { hierarchyTemplates, customTemplates, ...plugins } =
+ sortedTemplates.reduce(
+ ( accumulator, template ) => {
+ const {
+ original_source: originalSource,
+ author_text: authorText,
+ } = template;
+ if ( originalSource === 'plugin' ) {
+ if ( ! accumulator[ authorText ] ) {
+ accumulator[ authorText ] = [];
+ }
+ accumulator[ authorText ].push( template );
+ } else if ( template.is_custom ) {
+ accumulator.customTemplates.push( template );
+ } else {
+ accumulator.hierarchyTemplates.push( template );
+ }
+ return accumulator;
+ },
+ { hierarchyTemplates: [], customTemplates: [] }
+ );
+ return (
+
+ { !! hierarchyTemplates.length && (
+
+ ) }
+ { !! customTemplates.length && (
+
+ ) }
+ { Object.entries( plugins ).map(
+ ( [ plugin, pluginTemplates ] ) => {
+ return (
+
+ );
+ }
+ ) }
+
+ );
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-templates/style.scss
new file mode 100644
index 00000000000000..ec2b7744d4e233
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates/style.scss
@@ -0,0 +1,9 @@
+.edit-site-sidebar-navigation-screen-templates__templates-group-title.components-item {
+ text-transform: uppercase;
+ color: $gray-200;
+ // 6px right padding to align with + button
+ padding: $grid-unit-30 6px $grid-unit-20 $grid-unit-20;
+ border-top: 1px solid $gray-800;
+ font-size: 11px;
+ font-weight: 500;
+}
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index c7d0609b4e771c..164a8523b19628 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -34,6 +34,7 @@
@import "./components/sidebar-navigation-screen-details-footer/style.scss";
@import "./components/sidebar-navigation-screen-navigation-menu/style.scss";
@import "./components/sidebar-navigation-screen-page/style.scss";
+@import "./components/sidebar-navigation-screen-templates/style.scss";
@import "components/sidebar-navigation-screen-details-panel/style.scss";
@import "./components/sidebar-navigation-screen-pattern/style.scss";
@import "./components/sidebar-navigation-screen-patterns/style.scss";