diff --git a/client/my-sites/patterns/components/get-started/index.tsx b/client/my-sites/patterns/components/get-started/index.tsx
index 4a620274f371ed..afff7f153009d1 100644
--- a/client/my-sites/patterns/components/get-started/index.tsx
+++ b/client/my-sites/patterns/components/get-started/index.tsx
@@ -11,7 +11,7 @@ import { isUserLoggedIn } from 'calypso/state/current-user/selectors';
import './style.scss';
-export function PatternsGetStarted() {
+export function PatternsGetStarted( { theme }: { theme?: 'dark' } ) {
const translate = useTranslate();
const isLoggedIn = useSelector( isUserLoggedIn );
const localizeUrl = useLocalizeUrl();
@@ -22,7 +22,7 @@ export function PatternsGetStarted() {
}
-
+
>
);
};
diff --git a/client/my-sites/patterns/components/readymade-templates/details.tsx b/client/my-sites/patterns/components/readymade-templates/details.tsx
new file mode 100644
index 00000000000000..88fc12752e3530
--- /dev/null
+++ b/client/my-sites/patterns/components/readymade-templates/details.tsx
@@ -0,0 +1,25 @@
+import { PatternsGetStarted } from 'calypso/my-sites/patterns/components/get-started';
+import { useReadymadeTemplates } from 'calypso/my-sites/patterns/hooks/use-readymade-templates';
+import { ReadymadeTemplateDetailsFC } from 'calypso/my-sites/patterns/types';
+
+export const ReadymadeTemplateDetails: ReadymadeTemplateDetailsFC = ( { id } ) => {
+ const { data: readymadeTemplates = [] } = useReadymadeTemplates();
+ if ( ! readymadeTemplates.length ) {
+ return null;
+ }
+
+ const readymadeTemplate = readymadeTemplates.find( ( rt ) => rt.template_id === id );
+ if ( ! readymadeTemplate ) {
+ return null;
+ }
+
+ return (
+ <>
+
+
+
{ readymadeTemplate.title }
+
+
+ >
+ );
+};
diff --git a/client/my-sites/patterns/index.node.tsx b/client/my-sites/patterns/index.node.tsx
index f2fbfcb693f80f..5bfb92ae6e8fad 100644
--- a/client/my-sites/patterns/index.node.tsx
+++ b/client/my-sites/patterns/index.node.tsx
@@ -8,6 +8,7 @@ import {
import { CategoryGalleryServer } from 'calypso/my-sites/patterns/components/category-gallery/server';
import { PatternGalleryServer } from 'calypso/my-sites/patterns/components/pattern-gallery/server';
import { PatternLibrary } from 'calypso/my-sites/patterns/components/pattern-library';
+import { ReadymadeTemplateDetails } from 'calypso/my-sites/patterns/components/readymade-templates/details';
import { ReadymadeTemplatesServer } from 'calypso/my-sites/patterns/components/readymade-templates/server';
import { PatternsContext } from 'calypso/my-sites/patterns/context';
import { getPatternCategoriesQueryOptions } from 'calypso/my-sites/patterns/hooks/use-pattern-categories';
@@ -97,6 +98,18 @@ function fetchCategoriesAndPatterns( context: RouterContext, next: RouterNext )
} );
}
+function renderReadymadeTemplateDetails( context: RouterContext, next: RouterNext ) {
+ performanceMark( context, 'renderReadymadeTemplateDetails' );
+
+ context.primary = (
+
+
+
+ );
+
+ next();
+}
+
export default function ( router: ReturnType< typeof serverRouter > ) {
const langParam = getLanguageRouteParam();
@@ -115,4 +128,14 @@ export default function ( router: ReturnType< typeof serverRouter > ) {
renderPatterns,
makeLayout
);
+
+ router(
+ [ '/patterns/:type(site-layouts)/:id' ],
+ ssrSetupLocale,
+ excludeSearchFromCanonicalUrlAndHrefLangLinks,
+ setHrefLangLinks,
+ setLocalizedCanonicalUrl,
+ renderReadymadeTemplateDetails,
+ makeLayout
+ );
}
diff --git a/client/my-sites/patterns/index.web.tsx b/client/my-sites/patterns/index.web.tsx
index cbb44782bd972b..1b5fe16895f009 100644
--- a/client/my-sites/patterns/index.web.tsx
+++ b/client/my-sites/patterns/index.web.tsx
@@ -10,6 +10,7 @@ import { PatternsCategoryNotFound } from 'calypso/my-sites/patterns/components/c
import { PatternGalleryClient } from 'calypso/my-sites/patterns/components/pattern-gallery/client';
import { PatternLibrary } from 'calypso/my-sites/patterns/components/pattern-library';
import { ReadymadeTemplatesClient } from 'calypso/my-sites/patterns/components/readymade-templates/client';
+import { ReadymadeTemplateDetails } from 'calypso/my-sites/patterns/components/readymade-templates/details';
import { PatternsContext } from 'calypso/my-sites/patterns/context';
import { getPatternCategoriesQueryOptions } from 'calypso/my-sites/patterns/hooks/use-pattern-categories';
import { extractPatternIdFromHash } from 'calypso/my-sites/patterns/lib/extract-pattern-id-from-hash';
@@ -84,6 +85,18 @@ function checkCategorySlug( context: RouterContext, next: RouterNext ) {
} );
}
+function renderReadymadeTemplateDetails( context: RouterContext, next: RouterNext ) {
+ if ( ! context.primary ) {
+ context.primary = (
+
+
+
+ );
+ }
+
+ next();
+}
+
export default function ( router: typeof clientRouter ) {
const langParam = getLanguageRouteParam();
const middleware = [ checkCategorySlug, renderPatterns, makeLayout, clientRender ];
@@ -102,4 +115,11 @@ export default function ( router: typeof clientRouter ) {
router( `/patterns/:category?`, ...middleware );
router( `/patterns/:type(layouts)/:category?`, ...middleware );
+
+ router(
+ '/patterns/:type(site-layouts)/:id',
+ renderReadymadeTemplateDetails,
+ makeLayout,
+ clientRender
+ );
}
diff --git a/client/my-sites/patterns/types.ts b/client/my-sites/patterns/types.ts
index 6c7db07a7b62fe..76db6e12e5ee7a 100644
--- a/client/my-sites/patterns/types.ts
+++ b/client/my-sites/patterns/types.ts
@@ -64,6 +64,11 @@ export type ReadymadeTemplatesProps = {
};
export type ReadymadeTemplatesFC = React.FC< ReadymadeTemplatesProps >;
+export type ReadymadeTemplateDetailsProps = {
+ id: number;
+};
+export type ReadymadeTemplateDetailsFC = React.FC< ReadymadeTemplateDetailsProps >;
+
export type PatternType = 'pattern' | 'page-layout';
export type PatternView = 'grid' | 'list';