Gutenboarding: Update Template Selector Styling

client/landing/gutenboarding/gutenboard.tsx

@@ -36,7 +36,6 @@ import { Steps } from './types';
 import './stores/domain-suggestions';
 import './stores/verticals-templates';
 import './style.scss';
-import '../../../apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss';
 
 const stepCompleted: Record< Steps, ( state: OnboardingState ) => boolean > = {
 	[ Steps.IntentGathering ]: ( { siteVertical } ) => !! siteVertical,
@@ -79,7 +78,7 @@ export function Gutenboard() {
 
 	/* eslint-disable wpcalypso/jsx-classname-namespace */
 	return (
-		<div className="block-editor__container">
+		<div className="gutenboarding block-editor__container">
 			<SlotFillProvider>
 				<DropZoneProvider>
 					<div

client/landing/gutenboarding/onboarding-block/design-selector/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { __ as NO__ } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
 import { useSelect } from '@wordpress/data';
 import React, { useState } from 'react';
 
@@ -11,6 +12,8 @@ import React, { useState } from 'react';
 import { SiteVertical } from '../../stores/onboard/types';
 import { TemplateSelectorControl } from '../../../../../apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector-control';
 
+import './style.scss';
+
 export default () => {
 	const siteVertical = useSelect(
 		select => select( 'automattic/onboard' ).getState().siteVertical as SiteVertical
@@ -21,22 +24,40 @@ export default () => {
 			select( 'automattic/verticals/templates' ).getTemplates( siteVertical.id )
 		) ?? [];
 
-	const homepageTemplates = templates.filter( template => template.category === 'home' );
+	// The templates' preview URLs come with a hard-wired size param (`?w=332`)
+	// that isn't high-res enough for our purposes. Thus, we override it here.
+	// TODO: Maybe add a `srcset` to `TemplateSelectorItem`.
+	const templatesWithResizedThumbnails = templates.map( template => ( {
+		...template,
+		preview: addQueryArgs( template.preview, { w: 960 / 2 } ),
+	} ) );
+
+	const homepageTemplates = templatesWithResizedThumbnails.filter(
+		template => template.category === 'home'
+	);
 
 	const [ previewedTemplate, setPreviewedTemplate ] = useState< string | null >( null );
 	return (
 		<div
-			className="page-template-modal__list" // eslint-disable-line wpcalypso/jsx-classname-namespace
+			className="onboarding-block__design-selector" // eslint-disable-line wpcalypso/jsx-classname-namespace
 		>
-			<TemplateSelectorControl
-				label={ NO__( 'Layout', 'full-site-editing' ) }
-				templates={ homepageTemplates }
-				blocksByTemplates={ {} /* Unneeded, since we're setting `useDynamicPreview` to `false` */ }
-				onTemplateSelect={ setPreviewedTemplate }
-				useDynamicPreview={ false }
-				siteInformation={ undefined }
-				selectedTemplate={ previewedTemplate }
-			/>
+			<h1>{ NO__( 'Choose a starting design for your site' ) }</h1>
+			<h2>{ NO__( "You'll be able to customize your new site in hundreds of ways." ) }</h2>
+			<div
+				className=" page-template-modal__list" // eslint-disable-line wpcalypso/jsx-classname-namespace
+			>
+				<TemplateSelectorControl
+					label={ NO__( 'Layout', 'full-site-editing' ) }
+					templates={ homepageTemplates }
+					blocksByTemplates={
+						{} /* Unneeded, since we're setting `useDynamicPreview` to `false` */
+					}
+					onTemplateSelect={ setPreviewedTemplate }
+					useDynamicPreview={ false }
+					siteInformation={ undefined }
+					selectedTemplate={ previewedTemplate }
+				/>
+			</div>
 		</div>
 	);
 };

client/landing/gutenboarding/onboarding-block/design-selector/style.scss

@@ -0,0 +1,34 @@
+// FIXME: Extract Template Selector component and styling into `@automattic/components` (see #38378)
+@import '../../../../../apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss';
+
+.onboarding-block__design-selector {
+	margin: 0 auto;
+	max-width: 960px;
+
+	h1 {
+		color: #23282d;
+		font-size: 2em;
+		font-weight: bold;
+		margin-bottom: 0.25em;
+		text-align: center;
+	}
+
+	h2,
+	h3 {
+		color: #23282d;
+		font-size: 1.3em;
+		margin-bottom: 3em;
+		text-align: center;
+	}
+
+	.template-selector-control__options {
+		grid-gap: 4.5em;
+
+		@media screen and ( min-width: 660px ) {
+			margin-top: 0;
+			// stylelint-disable unit-whitelist
+			grid-template-columns: repeat( 2, 1fr );
+			// stylelint-enable unit-whitelist
+		}
+	}
+}

client/landing/gutenboarding/style.scss

@@ -17,6 +17,12 @@ $admin-sidebar-width-collapsed: 0;
 	max-width: 1100px; // Overrides default $content-width
 }
 
+.gutenboarding {
+	.edit-post-layout__content {
+		overflow-y: scroll;
+	}
+}
+
 /**
  * Hide the block UI with CSS overrides
  *