RTS: Details page

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() {
 		<PatternsSection
 			bodyFullWidth
 			description={ translate( 'Take a look at our how-to guides to get started with patterns.' ) }
-			theme="dark"
+			theme={ theme }
 			title={ translate( 'All about patterns', {
 				comment: 'Heading text in a section with informative links about block patterns',
 				textOnly: true,

client/my-sites/patterns/components/pattern-library/index.tsx

@@ -385,7 +385,7 @@ export const PatternLibrary = ( {
 				{ isEnabled( 'readymade-templates/showcase' ) && isHomePage && <PatternsCopyPasteInfo /> }
 			</div>
 
-			<PatternsGetStarted />
+			<PatternsGetStarted theme="dark" />
 		</>
 	);
 };

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 (
+		<>
+			<div className="readymade-template-details">
+				<button>Back to patterns</button>
+				<h1>{ readymadeTemplate.title }</h1>
+			</div>
+			<PatternsGetStarted />
+		</>
+	);
+};

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 = (
+		<PatternsWrapper>
+			<ReadymadeTemplateDetails id={ parseInt( context.params.id ) } />
+		</PatternsWrapper>
+	);
+
+	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
+	);
 }

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 = (
+			<PatternsWrapper>
+				<ReadymadeTemplateDetails id={ parseInt( context.params.id ) } />
+			</PatternsWrapper>
+		);
+	}
+
+	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
+	);
 }

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';