From 1ea71c09a617dea1ca4650c572515d31b6f685ac Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Mon, 31 Aug 2026 20:14:11 -0400
Subject: [PATCH 1/2] Refine Blueprint discovery and creation details

---
 .../blueprint-gallery/index.test.tsx          |  47 +++-
 .../components/blueprint-gallery/index.tsx    | 162 +++++++------
 .../blueprint-gallery/style.module.css        | 168 +++++++------
 .../blueprint-gallery/upload-tile.tsx         |  54 -----
 .../src/components/create-site-form/index.tsx |   6 +-
 .../create-site-form/style.module.css         |  87 +++----
 .../use-wordpress-org-package-name.test.ts    |  37 +++
 .../queries/use-wordpress-org-package-name.ts |  48 ++++
 apps/ui/src/lib/blueprint-selection.ts        |   2 +
 .../route-onboarding-create/index.test.tsx    |  74 +++++-
 .../router/route-onboarding-create/index.tsx  | 222 +++++++++++++++++-
 .../route-onboarding-create/style.module.css  | 151 ++++++++++++
 .../route-onboarding-home/style.module.css    |  40 ++--
 13 files changed, 819 insertions(+), 279 deletions(-)
 delete mode 100644 apps/ui/src/components/blueprint-gallery/upload-tile.tsx
 create mode 100644 apps/ui/src/data/queries/use-wordpress-org-package-name.test.ts
 create mode 100644 apps/ui/src/data/queries/use-wordpress-org-package-name.ts

diff --git a/apps/ui/src/components/blueprint-gallery/index.test.tsx b/apps/ui/src/components/blueprint-gallery/index.test.tsx
index d07aab6c99..662becb792 100644
--- a/apps/ui/src/components/blueprint-gallery/index.test.tsx
+++ b/apps/ui/src/components/blueprint-gallery/index.test.tsx
@@ -32,6 +32,7 @@ function apiBlueprint( slug: string, title: string, excerpt = '' ): Blueprint {
 }
 
 const QUICK_START = apiBlueprint( 'quick-start', 'Quick Start' );
+const WOO_COMMERCE = apiBlueprint( 'woo-shop', 'Commerce' );
 const COOKBOOK = apiBlueprint( 'cookbook', 'Cookbook', 'Recipes and menus' );
 
 describe( 'BlueprintGallery', () => {
@@ -55,11 +56,30 @@ describe( 'BlueprintGallery', () => {
 		fireEvent.click( screen.getByRole( 'button', { name: /WordPress\.com/ } ) );
 
 		expect( onSelect ).toHaveBeenCalledWith(
-			expect.objectContaining( { title: 'WordPress.com', excerpt: expect.any( String ) } )
+			expect.objectContaining( {
+				slug: 'quick-start',
+				title: 'WordPress.com',
+				excerpt: expect.any( String ),
+			} )
 		);
 	} );
 
-	it( 'filters Explore by excerpt while leaving Featured in place', () => {
+	it( 'filters the complete gallery by excerpt', () => {
+		mocks.blueprints = {
+			data: [
+				WOO_COMMERCE,
+				QUICK_START,
+				...Array.from( { length: 21 }, ( _, index ) =>
+					apiBlueprint(
+						`explore-${ index }`,
+						index === 0 ? 'Cookbook' : `Blueprint ${ index }`,
+						index === 0 ? 'Recipes and menus' : 'A sample Blueprint'
+					)
+				),
+			],
+			isLoading: false,
+			isError: false,
+		};
 		render( <BlueprintGallery onSelect={ vi.fn() } /> );
 		const search = screen.getByRole( 'searchbox', { name: 'Search Blueprints' } );
 
@@ -68,7 +88,28 @@ describe( 'BlueprintGallery', () => {
 
 		fireEvent.change( search, { target: { value: 'nothing here' } } );
 		expect( screen.getByText( 'No Blueprints found.' ) ).toBeInTheDocument();
-		expect( screen.getByRole( 'button', { name: /WordPress\.com/ } ) ).toBeInTheDocument();
+		expect( screen.queryByRole( 'button', { name: /WooCommerce/ } ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'hides Search for a small Blueprint collection', () => {
+		render( <BlueprintGallery onSelect={ vi.fn() } /> );
+
+		expect(
+			screen.queryByRole( 'searchbox', { name: 'Search Blueprints' } )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'pins development, WordPress.com, and WooCommerce ahead of the API order', () => {
+		mocks.blueprints = {
+			data: [ COOKBOOK, WOO_COMMERCE, apiBlueprint( 'development', 'Development' ), QUICK_START ],
+			isLoading: false,
+			isError: false,
+		};
+		render( <BlueprintGallery onSelect={ vi.fn() } /> );
+
+		expect(
+			screen.getAllByRole( 'heading', { level: 3 } ).map( ( heading ) => heading.textContent )
+		).toEqual( [ 'Theme & plugin development', 'WordPress.com', 'WooCommerce', 'Cookbook' ] );
 	} );
 
 	it( 'hands an uploaded Blueprint upward like a curated pick', async () => {
diff --git a/apps/ui/src/components/blueprint-gallery/index.tsx b/apps/ui/src/components/blueprint-gallery/index.tsx
index 18e0e58113..3e1358639d 100644
--- a/apps/ui/src/components/blueprint-gallery/index.tsx
+++ b/apps/ui/src/components/blueprint-gallery/index.tsx
@@ -1,21 +1,24 @@
 import { __ } from '@wordpress/i18n';
+import { upload } from '@wordpress/icons';
+import { Button, Icon } from '@wordpress/ui';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { useConnector } from '@/data/core';
 import { useBlueprints } from '@/data/queries/use-blueprints';
 import { useOffline } from '@/hooks/use-offline';
 import { BLUEPRINT_FILE_ACCEPT, loadBlueprintFile } from '@/lib/load-blueprint-file';
 import styles from './style.module.css';
-import { UploadTile } from './upload-tile';
 import type { SelectedBlueprint } from '@/lib/blueprint-selection';
 import type { Blueprint } from '@studio/common/lib/studio-blueprints-api';
 import type { BlueprintV1Declaration } from '@wp-playground/blueprints';
 
-const FEATURED_BLUEPRINT_SLUGS = new Set( [ 'woo-shop', 'development', 'quick-start' ] );
+const BLUEPRINT_ARTWORK_SLUGS = new Set( [ 'woo-shop', 'development', 'quick-start' ] );
+const SEARCH_THRESHOLD = 20;
 
 const BLUEPRINT_DISPLAY_NAMES: Record< string, string > = {
 	'Quick Start': 'WordPress.com',
-	Development: 'WordPress Dev',
+	Development: 'Theme & plugin development',
 	Commerce: 'WooCommerce',
+	'Stylish Press': 'WooCommerce starter store',
 };
 
 function getBlueprintExcerptOverrides(): Record< string, string > {
@@ -26,20 +29,28 @@ function getBlueprintExcerptOverrides(): Record< string, string > {
 		Commerce: __(
 			'Create your next online store with WooCommerce and its companion plugins pre-installed.'
 		),
-		Development: __( 'A streamlined environment for building and testing themes or plugins.' ),
+		Development: __(
+			'Query Monitor, Plugin Check, Theme Check, and Create Block Theme pre-installed.'
+		),
+		'Stylish Press': __(
+			'A ready-made WooCommerce store with a custom theme, sample content, and products.'
+		),
 	};
 }
 
-const BLUEPRINT_ORDER: Record< string, number > = {
-	'Quick Start': 1,
-	Commerce: 2,
-	Development: 3,
-};
+const PINNED_BLUEPRINT_SLUGS = [ 'development', 'quick-start', 'woo-shop' ];
+const PINNED_BLUEPRINT_ORDER = new Map(
+	PINNED_BLUEPRINT_SLUGS.map( ( slug, index ) => [ slug, index ] )
+);
 
 function renameBlueprintsForDisplay( blueprints: Blueprint[] ): Blueprint[] {
 	const excerptOverrides = getBlueprintExcerptOverrides();
 	return [ ...blueprints ]
-		.sort( ( a, b ) => ( BLUEPRINT_ORDER[ a.title ] ?? 99 ) - ( BLUEPRINT_ORDER[ b.title ] ?? 99 ) )
+		.sort(
+			( a, b ) =>
+				( PINNED_BLUEPRINT_ORDER.get( a.slug ) ?? Number.MAX_SAFE_INTEGER ) -
+				( PINNED_BLUEPRINT_ORDER.get( b.slug ) ?? Number.MAX_SAFE_INTEGER )
+		)
 		.map( ( item ) => ( {
 			...item,
 			excerpt: excerptOverrides[ item.title ] || item.excerpt,
@@ -49,8 +60,10 @@ function renameBlueprintsForDisplay( blueprints: Blueprint[] ): Blueprint[] {
 
 function apiToSelectedBlueprint( bp: Blueprint ): SelectedBlueprint {
 	return {
+		slug: bp.slug,
 		title: bp.title,
 		excerpt: bp.excerpt,
+		image: bp.image,
 		blueprint: bp.blueprint as BlueprintV1Declaration,
 		file: { name: bp.title, size: 0 },
 		filePath: bp.filePath,
@@ -58,11 +71,28 @@ function apiToSelectedBlueprint( bp: Blueprint ): SelectedBlueprint {
 	};
 }
 
-function BlueprintCard( { blueprint, onClick }: { blueprint: Blueprint; onClick: () => void } ) {
+function BlueprintCard( {
+	blueprint,
+	onClick,
+	cropAdminBar = false,
+}: {
+	blueprint: Blueprint;
+	onClick: () => void;
+	cropAdminBar?: boolean;
+} ) {
 	return (
 		<button type="button" className={ styles.card } onClick={ onClick }>
 			{ blueprint.image ? (
-				<img src={ blueprint.image } alt="" className={ styles.cardImage } loading="lazy" />
+				<div className={ styles.cardImageViewport }>
+					<img
+						src={ blueprint.image }
+						alt=""
+						className={ `${ styles.cardImage } ${
+							cropAdminBar ? styles.cardImageWithoutAdminBar : ''
+						}` }
+						loading="lazy"
+					/>
+				</div>
 			) : (
 				<div className={ styles.cardImageFallback }>{ blueprint.title }</div>
 			) }
@@ -74,10 +104,7 @@ function BlueprintCard( { blueprint, onClick }: { blueprint: Blueprint; onClick:
 	);
 }
 
-// Sits alongside the curated Blueprints so "bring your own" is one of the
-// choices rather than a separate step. Drag handling is scoped to this card,
-// not the window, so it can't intercept a backup dropped on the Import card.
-function UploadBlueprintCard( { onSelect }: { onSelect: ( bp: SelectedBlueprint ) => void } ) {
+function UploadBlueprintButton( { onSelect }: { onSelect: ( bp: SelectedBlueprint ) => void } ) {
 	const connector = useConnector();
 	const inputRef = useRef< HTMLInputElement >( null );
 	const [ isDragging, setIsDragging ] = useState( false );
@@ -116,9 +143,12 @@ function UploadBlueprintCard( { onSelect }: { onSelect: ( bp: SelectedBlueprint
 					event.target.value = '';
 				} }
 			/>
-			<button
+			<Button
 				type="button"
-				className={ `${ styles.card } ${ isDragging ? styles.uploadCardDragging : '' }` }
+				variant="outline"
+				tone="neutral"
+				size="small"
+				className={ isDragging ? styles.uploadButtonDragging : undefined }
 				onClick={ () => inputRef.current?.click() }
 				onDragOver={ ( event ) => {
 					event.preventDefault();
@@ -136,21 +166,14 @@ function UploadBlueprintCard( { onSelect }: { onSelect: ( bp: SelectedBlueprint
 					void handleFile( event.dataTransfer.files[ 0 ] );
 				} }
 			>
-				<UploadTile />
-				<div className={ styles.cardBody }>
-					<h3 className={ styles.cardTitle }>{ __( 'Upload a Blueprint' ) }</h3>
-					<p className={ styles.cardExcerpt }>
-						{ isReading
-							? __( 'Reading Blueprint…' )
-							: __( 'Use your own Blueprint JSON file or ZIP bundle.' ) }
-					</p>
-					{ error && (
-						<span role="alert" className={ styles.uploadError }>
-							{ error }
-						</span>
-					) }
-				</div>
-			</button>
+				<Icon icon={ upload } size={ 16 } />
+				<span>{ isReading ? __( 'Reading Blueprint…' ) : __( 'Upload a Blueprint' ) }</span>
+			</Button>
+			{ error && (
+				<span role="alert" className={ styles.uploadError }>
+					{ error }
+				</span>
+			) }
 		</>
 	);
 }
@@ -163,26 +186,17 @@ export function BlueprintGallery( { onSelect }: BlueprintGalleryProps ) {
 	const isOffline = useOffline();
 	const { data: blueprints, isLoading, isError } = useBlueprints();
 	const [ searchQuery, setSearchQuery ] = useState( '' );
-
-	const featured = useMemo(
-		() =>
-			renameBlueprintsForDisplay(
-				( blueprints ?? [] ).filter( ( bp ) => FEATURED_BLUEPRINT_SLUGS.has( bp.slug ) )
-			),
+	const displayBlueprints = useMemo(
+		() => renameBlueprintsForDisplay( blueprints ?? [] ),
 		[ blueprints ]
 	);
 
-	const explore = useMemo(
-		() => ( blueprints ?? [] ).filter( ( bp ) => ! FEATURED_BLUEPRINT_SLUGS.has( bp.slug ) ),
-		[ blueprints ]
-	);
-
-	const filteredExplore = useMemo( () => {
+	const filteredBlueprints = useMemo( () => {
 		const query = searchQuery.toLowerCase().trim();
 		if ( ! query ) {
-			return explore;
+			return displayBlueprints;
 		}
-		return explore.filter( ( bp ) => {
+		return displayBlueprints.filter( ( bp ) => {
 			const titleMatch = bp.title.toLowerCase().includes( query );
 			const excerptMatch = bp.excerpt.toLowerCase().includes( query );
 			const meta = ( bp.blueprint as Record< string, unknown > )?.meta as
@@ -192,21 +206,37 @@ export function BlueprintGallery( { onSelect }: BlueprintGalleryProps ) {
 			const categoryMatch = categoryList.some( ( cat ) => cat.toLowerCase().includes( query ) );
 			return titleMatch || excerptMatch || categoryMatch;
 		} );
-	}, [ explore, searchQuery ] );
+	}, [ displayBlueprints, searchQuery ] );
 
 	const renderCard = ( bp: Blueprint ) => (
 		<BlueprintCard
 			key={ bp.slug }
 			blueprint={ bp }
+			cropAdminBar={ ! BLUEPRINT_ARTWORK_SLUGS.has( bp.slug ) }
 			onClick={ () => onSelect( apiToSelectedBlueprint( bp ) ) }
 		/>
 	);
 
 	return (
 		<section className={ styles.root } aria-labelledby="blueprint-gallery-heading">
-			<h2 id="blueprint-gallery-heading" className={ styles.heading }>
-				{ __( 'Or start from a Blueprint' ) }
-			</h2>
+			<div className={ styles.sectionHeader }>
+				<h2 id="blueprint-gallery-heading" className={ styles.heading }>
+					{ __( 'Start from a Blueprint' ) }
+				</h2>
+				<div className={ styles.sectionActions }>
+					{ displayBlueprints.length > SEARCH_THRESHOLD && (
+						<input
+							type="search"
+							className={ styles.searchInput }
+							placeholder={ __( 'Search Blueprints' ) }
+							aria-label={ __( 'Search Blueprints' ) }
+							value={ searchQuery }
+							onChange={ ( event ) => setSearchQuery( event.target.value ) }
+						/>
+					) }
+					<UploadBlueprintButton onSelect={ onSelect } />
+				</div>
+			</div>
 
 			{ isLoading ? (
 				<p className={ styles.notice }>{ __( 'Loading Blueprints…' ) }</p>
@@ -214,34 +244,10 @@ export function BlueprintGallery( { onSelect }: BlueprintGalleryProps ) {
 				<p className={ styles.notice }>
 					{ __( 'Blueprints could not be loaded. Check your internet connection and try again.' ) }
 				</p>
+			) : filteredBlueprints.length === 0 ? (
+				<p className={ styles.notice }>{ __( 'No Blueprints found.' ) }</p>
 			) : (
-				<>
-					<div className={ styles.grid }>
-						{ featured.map( renderCard ) }
-						<UploadBlueprintCard onSelect={ onSelect } />
-					</div>
-
-					{ explore.length > 0 && (
-						<>
-							<div className={ styles.exploreHeader }>
-								<h3 className={ styles.exploreTitle }>{ __( 'Explore more Blueprints' ) }</h3>
-								<input
-									type="search"
-									className={ styles.searchInput }
-									placeholder={ __( 'Search Blueprints' ) }
-									aria-label={ __( 'Search Blueprints' ) }
-									value={ searchQuery }
-									onChange={ ( event ) => setSearchQuery( event.target.value ) }
-								/>
-							</div>
-							{ filteredExplore.length === 0 ? (
-								<p className={ styles.notice }>{ __( 'No Blueprints found.' ) }</p>
-							) : (
-								<div className={ styles.grid }>{ filteredExplore.map( renderCard ) }</div>
-							) }
-						</>
-					) }
-				</>
+				<div className={ styles.grid }>{ filteredBlueprints.map( renderCard ) }</div>
 			) }
 		</section>
 	);
diff --git a/apps/ui/src/components/blueprint-gallery/style.module.css b/apps/ui/src/components/blueprint-gallery/style.module.css
index b682776fdc..34164fb87a 100644
--- a/apps/ui/src/components/blueprint-gallery/style.module.css
+++ b/apps/ui/src/components/blueprint-gallery/style.module.css
@@ -1,21 +1,33 @@
 .root {
-	margin-top: 40px;
-	padding-top: 32px;
-	border-top: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral);
+	margin-top: 112px;
 	text-align: center;
 }
 
 .heading {
-	margin: 0 0 20px;
-	font-size: var(--wpds-typography-font-size-lg);
+	margin: 0;
+	font-size: var( --wpds-typography-font-size-lg );
 	font-weight: 600;
-	color: var(--wpds-color-fg-content-neutral);
+	color: var( --wpds-color-fg-content-neutral );
+}
+
+.sectionHeader {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16px;
+	margin-bottom: 20px;
 }
 
+.sectionActions {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
 
 .grid {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
 	gap: 16px;
 	text-align: left;
 }
@@ -24,9 +36,10 @@
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
-	border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral);
+	border: var( --wpds-border-width-xs ) solid var( --wpds-color-stroke-surface-neutral );
 	border-radius: 10px;
-	background: color-mix(in srgb, var(--wpds-color-bg-surface-neutral-strong) 50%, transparent);
+	background: color-mix( in srgb, var( --wpds-color-bg-surface-neutral-strong ) 50%, transparent );
+	backdrop-filter: blur( 12px );
 	cursor: pointer;
 	transition: border-color 0.15s ease;
 	text-align: left;
@@ -37,22 +50,44 @@
 }
 
 .card:hover {
-	border-color: var(--wpds-color-stroke-interactive-brand);
-	box-shadow: 0 0 0 1px var(--wpds-color-stroke-interactive-brand);
+	border-color: var( --wpds-color-stroke-interactive-brand );
+	box-shadow: 0 0 0 1px var( --wpds-color-stroke-interactive-brand );
 }
 
 .card:focus-visible {
-	outline: 2px solid var(--wpds-color-stroke-focus-brand);
+	outline: 2px solid var( --wpds-color-stroke-focus-brand );
 	outline-offset: 2px;
-	border-color: var(--wpds-color-stroke-interactive-brand);
+	border-color: var( --wpds-color-stroke-interactive-brand );
 }
 
-.cardImage {
+.cardImageViewport {
+	position: relative;
 	display: block;
 	width: 100%;
 	aspect-ratio: 16 / 9;
+	overflow: hidden;
+	background: var( --wpds-color-bg-surface-neutral );
+}
+
+.cardImage {
+	display: block;
+	width: 100%;
+	height: 100%;
 	object-fit: cover;
-	background: var(--wpds-color-bg-surface-neutral);
+	transition: transform 8s cubic-bezier( 0.2, 0.65, 0.3, 1 );
+}
+
+.card:hover .cardImage,
+.card:focus-visible .cardImage {
+	transform: scale( 1.05 );
+}
+
+.cardImageWithoutAdminBar {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	height: 103%;
+	object-position: bottom;
 }
 
 .cardImageFallback {
@@ -61,9 +96,9 @@
 	justify-content: center;
 	width: 100%;
 	aspect-ratio: 16 / 9;
-	background: var(--wpds-color-bg-surface-neutral);
-	color: var(--wpds-color-fg-content-neutral-weak);
-	font-size: var(--wpds-typography-font-size-sm);
+	background: var( --wpds-color-bg-surface-neutral );
+	color: var( --wpds-color-fg-content-neutral-weak );
+	font-size: var( --wpds-typography-font-size-sm );
 }
 
 .cardBody {
@@ -75,97 +110,84 @@
 
 .cardTitle {
 	margin: 0;
-	font-size: var(--wpds-typography-font-size-md);
+	font-size: var( --wpds-typography-font-size-md );
 	font-weight: 500;
-	color: var(--wpds-color-fg-content-neutral);
+	color: var( --wpds-color-fg-content-neutral );
 	transition: color 0.15s ease;
 }
 
 .card:hover .cardTitle {
-	color: var(--wpds-color-fg-interactive-brand);
+	color: var( --wpds-color-fg-interactive-brand );
 }
 
 .cardExcerpt {
 	margin: 0;
-	color: var(--wpds-color-fg-content-neutral-weak);
-	font-size: var(--wpds-typography-font-size-sm);
+	color: var( --wpds-color-fg-content-neutral-weak );
+	font-size: var( --wpds-typography-font-size-sm );
 	line-height: 1.4;
 	display: -webkit-box;
-	-webkit-line-clamp: 2;
+	-webkit-line-clamp: 3;
 	-webkit-box-orient: vertical;
 	overflow: hidden;
 }
 
-.exploreHeader {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 16px;
-	margin-top: 32px;
-	margin-bottom: 16px;
-}
-
-.exploreTitle {
-	margin: 0;
-	font-size: var(--wpds-typography-font-size-md);
-	font-weight: 600;
-	color: var(--wpds-color-fg-content-neutral);
-}
-
 .searchInput {
 	max-width: 200px;
 	padding: 6px 10px;
-	border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral);
+	border: var( --wpds-border-width-xs ) solid var( --wpds-color-stroke-surface-neutral );
 	border-radius: 4px;
-	background: var(--wpds-color-bg-surface-neutral-strong);
-	color: var(--wpds-color-fg-content-neutral);
+	background: var( --wpds-color-bg-surface-neutral-strong );
+	color: var( --wpds-color-fg-content-neutral );
 	font: inherit;
-	font-size: var(--wpds-typography-font-size-sm);
+	font-size: var( --wpds-typography-font-size-sm );
 }
 
 .searchInput:focus-visible {
-	outline: 2px solid var(--wpds-color-stroke-focus-brand);
+	outline: 2px solid var( --wpds-color-stroke-focus-brand );
 	outline-offset: -1px;
-	border-color: var(--wpds-color-stroke-interactive-brand);
+	border-color: var( --wpds-color-stroke-interactive-brand );
 }
 
 .notice {
 	margin: 0;
 	padding: 24px;
-	color: var(--wpds-color-fg-content-neutral-weak);
-	font-size: var(--wpds-typography-font-size-sm);
+	color: var( --wpds-color-fg-content-neutral-weak );
+	font-size: var( --wpds-typography-font-size-sm );
 }
 
 .hiddenInput {
 	display: none;
 }
 
-/* Matches .cardImage so the upload tile crops and sits exactly like the
-   curated artwork beside it. */
-.uploadTile {
-	display: block;
-	width: 100%;
-	aspect-ratio: 16 / 9;
-	overflow: hidden;
-}
-
-/* The artwork is 1160x808, so at full width it is taller than this 16:9 frame
-   and overflows. Block layout would clip all of that off the bottom, but the
-   curated PNGs use object-fit: cover, which crops top and bottom equally — so
-   pull the svg up by half the overflow to match. Percentage margins resolve
-   against the containing block's width, which is what the overflow scales with:
-   w * (808/1160 - 9/16) / 2 = w * 6.7026%. */
-.uploadTile svg {
-	margin-top: -6.7026%;
-}
-
-.uploadCardDragging,
-.uploadCardDragging:hover {
-	border-color: var(--wpds-color-stroke-interactive-brand);
-	box-shadow: 0 0 0 2px var(--wpds-color-stroke-interactive-brand);
+.uploadButtonDragging {
+	outline: 2px solid var( --wpds-color-stroke-interactive-brand );
+	outline-offset: 2px;
 }
 
 .uploadError {
-	color: var(--wpds-color-fg-content-error);
-	font-size: var(--wpds-typography-font-size-sm);
+	position: absolute;
+	top: 100%;
+	right: 0;
+	max-width: 320px;
+	margin-top: 4px;
+	color: var( --wpds-color-fg-content-error );
+	font-size: var( --wpds-typography-font-size-sm );
+	text-align: right;
+}
+
+@media ( max-width: 520px ) {
+	.sectionHeader {
+		align-items: flex-start;
+		flex-direction: column;
+	}
+
+	.sectionActions {
+		flex-wrap: wrap;
+	}
+}
+
+@media ( prefers-reduced-motion: reduce ) {
+	.cardImage {
+		transition: none;
+	}
 }
diff --git a/apps/ui/src/components/blueprint-gallery/upload-tile.tsx b/apps/ui/src/components/blueprint-gallery/upload-tile.tsx
deleted file mode 100644
index 246417ab3a..0000000000
--- a/apps/ui/src/components/blueprint-gallery/upload-tile.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import styles from './style.module.css';
-
-/**
- * Stands in for the artwork the curated Blueprints carry, so the upload choice
- * reads as a peer of theirs rather than a bare icon.
- *
- * Deliberately fixed-color like those tiles (they are flat PNGs that don't
- * follow the theme), and it reuses their construction-guide motif — centre
- * cross, outer square, inner square — on blueprint navy. The outer square is
- * dashed here to mark this as the empty slot you fill.
- *
- * The viewBox and `slice` match the 1160x808 artwork so the crop lines up.
- */
-export function UploadTile() {
-	return (
-		<div className={ styles.uploadTile }>
-			{ /* data-keep-size opts out of the compact-density rule in index.css
-			     that shrinks every svg to 16px; the frame above sets the size. */ }
-			<svg
-				width="100%"
-				height="100%"
-				viewBox="0 0 1160 808"
-				preserveAspectRatio="xMidYMid slice"
-				data-keep-size
-				aria-hidden="true"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<defs>
-					<linearGradient id="blueprint-upload-field" x1="0" y1="0" x2="1" y2="1">
-						<stop offset="0%" stopColor="#26346E" />
-						<stop offset="100%" stopColor="#161F49" />
-					</linearGradient>
-				</defs>
-				<rect width="1160" height="808" fill="url(#blueprint-upload-field)" />
-				{ /* Construction guides measured off the curated tiles so the four line
-				     up: centre cross at 591.5/403.5, 548px outer square, 291.5px inner. */ }
-				<g stroke="#FFF" strokeOpacity="0.22" strokeWidth="2" fill="none">
-					<path d="M591.5 0V808M0 403.5H1160" />
-					<rect x="445.75" y="257.75" width="291.5" height="291.5" />
-					<circle cx="591.5" cy="403.5" r="145.75" />
-					<rect x="317.5" y="129.5" width="548" height="548" strokeDasharray="14 12" />
-				</g>
-				{ /* Arrow out of an open tray, matched to the curated glyphs: stroke
-				     22, and butt caps with mitre joins (the svg defaults, left
-				     unset) so the ends and corners stay square like theirs rather
-				     than rounded. */ }
-				<g stroke="#FFF" strokeWidth="22" fill="none">
-					<path d="M468.5 426.5V496.5H714.5V426.5" />
-					<path d="M591.5 466V310.5M533.5 368.5L591.5 310.5L649.5 368.5" />
-				</g>
-			</svg>
-		</div>
-	);
-}
diff --git a/apps/ui/src/components/create-site-form/index.tsx b/apps/ui/src/components/create-site-form/index.tsx
index 57e49087cb..36cc8daa82 100644
--- a/apps/ui/src/components/create-site-form/index.tsx
+++ b/apps/ui/src/components/create-site-form/index.tsx
@@ -35,7 +35,7 @@ import type {
 	FormField,
 	FormValidity,
 } from '@wordpress/dataviews';
-import type { FormEvent } from 'react';
+import type { FormEvent, ReactNode } from 'react';
 
 export interface CreateSiteFormValues {
 	name: string;
@@ -66,6 +66,7 @@ interface CreateSiteFormProps {
 	submitLabel?: string;
 	cancelLabel?: string;
 	loadingAnnouncement?: string;
+	panelFooter?: ReactNode;
 }
 
 interface FormData {
@@ -402,6 +403,7 @@ export function CreateSiteForm( {
 	submitLabel,
 	cancelLabel,
 	loadingAnnouncement,
+	panelFooter,
 }: CreateSiteFormProps ) {
 	const formRef = useRef< HTMLFormElement >( null );
 	const initialSuggestedFields = getSuggestedFields( initialValues ?? {} );
@@ -713,6 +715,8 @@ export function CreateSiteForm( {
 						) }
 					</div>
 				) }
+
+				{ panelFooter && <div className={ styles.panelFooter }>{ panelFooter }</div> }
 			</div>
 
 			<OnboardingFooter>{ actions }</OnboardingFooter>
diff --git a/apps/ui/src/components/create-site-form/style.module.css b/apps/ui/src/components/create-site-form/style.module.css
index b8584d7854..d17b339ef0 100644
--- a/apps/ui/src/components/create-site-form/style.module.css
+++ b/apps/ui/src/components/create-site-form/style.module.css
@@ -7,14 +7,14 @@
 	flex-direction: column;
 	gap: 24px;
 	padding: 32px;
-	border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral);
+	border: var( --wpds-border-width-xs ) solid var( --wpds-color-stroke-surface-neutral );
 	border-radius: 12px;
 	background: color-mix(
 		in srgb,
-		var(--wpds-color-bg-surface-neutral-strong) var(--surface-alpha, 50%),
+		var( --wpds-color-bg-surface-neutral-strong ) var( --surface-alpha, 50% ),
 		transparent
 	);
-	backdrop-filter: blur(12px);
+	backdrop-filter: blur( 12px );
 }
 
 /* The path trigger is a <button>, but we style it to sit within the
@@ -29,33 +29,35 @@
 	gap: 8px;
 	width: 100%;
 	height: 40px;
-	padding: 0 4px 0 var(--wpds-dimension-padding-md);
-	border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-interactive-neutral);
+	padding: 0 4px 0 var( --wpds-dimension-padding-md );
+	border: var( --wpds-border-width-xs ) solid var( --wpds-color-stroke-interactive-neutral );
 	border-radius: 2px;
-	background-color: var(--wpds-color-bg-interactive-neutral-weak);
-	color: var(--wpds-color-fg-interactive-neutral);
-	font-family: var(--wpds-typography-font-family-body);
-	font-size: var(--wpds-typography-font-size-md);
+	background-color: var( --wpds-color-bg-interactive-neutral-weak );
+	color: var( --wpds-color-fg-interactive-neutral );
+	font-family: var( --wpds-typography-font-family-body );
+	font-size: var( --wpds-typography-font-size-md );
 	line-height: 1;
 	text-align: left;
 	cursor: pointer;
-	transition: border-color 0.15s, box-shadow 0.15s;
+	transition:
+		border-color 0.15s,
+		box-shadow 0.15s;
 }
 
 .pathTrigger:hover {
-	border-color: var(--wpds-color-stroke-interactive-neutral-active);
+	border-color: var( --wpds-color-stroke-interactive-neutral-active );
 }
 
 .pathTrigger:focus-visible {
-	border-color: var(--wpds-color-stroke-interactive-neutral-active);
-	box-shadow: 0 0 0 0.5px var(--wpds-color-stroke-interactive-neutral-active);
+	border-color: var( --wpds-color-stroke-interactive-neutral-active );
+	box-shadow: 0 0 0 0.5px var( --wpds-color-stroke-interactive-neutral-active );
 	outline: none;
 }
 
 .pathTrigger.pathTriggerError,
 .pathTrigger.pathTriggerError:focus {
-	border-color: var(--wpds-color-stroke-surface-error-strong);
-	box-shadow: 0 0 0 0.5px var(--wpds-color-stroke-surface-error-strong);
+	border-color: var( --wpds-color-stroke-surface-error-strong );
+	box-shadow: 0 0 0 0.5px var( --wpds-color-stroke-surface-error-strong );
 }
 
 .pathValue {
@@ -67,45 +69,42 @@
 }
 
 .pathValuePlaceholder {
-	color: var(--wpds-color-fg-content-neutral-weak);
+	color: var( --wpds-color-fg-content-neutral-weak );
 }
 
 .pathTriggerAction {
 	flex: 0 0 auto;
 	padding: 6px 12px;
-	font-size: var(--wpds-typography-font-size-sm);
+	font-size: var( --wpds-typography-font-size-sm );
 	font-weight: 500;
-	color: var(--wpds-color-fg-interactive-neutral);
+	color: var( --wpds-color-fg-interactive-neutral );
 }
 
-.pathControlError :global(.components-input-control__backdrop) {
-	border-color: var(--wpds-color-stroke-surface-error-strong);
-	box-shadow: 0 0 0 0.5px var(--wpds-color-stroke-surface-error-strong);
+.pathControlError :global( .components-input-control__backdrop ) {
+	border-color: var( --wpds-color-stroke-surface-error-strong );
+	box-shadow: 0 0 0 0.5px var( --wpds-color-stroke-surface-error-strong );
 }
 
-.form :global(.components-validated-control__indicator.is-invalid) {
-	color: var(--wpds-color-fg-content-error-weak);
+.form :global( .components-validated-control__indicator.is-invalid ) {
+	color: var( --wpds-color-fg-content-error-weak );
 }
 
 .form
 	:global(
-		.components-validated-control:has(
-				:is(input, select):invalid[data-validity-visible]
-			)
+		.components-validated-control:has( :is( input, select ):invalid[data-validity-visible] )
 			.components-input-control__backdrop
 	) {
-	--wp-components-color-accent: var(--wpds-color-stroke-surface-error-strong);
-	border-color: var(--wpds-color-stroke-surface-error-strong);
+	--wp-components-color-accent: var( --wpds-color-stroke-surface-error-strong );
+	border-color: var( --wpds-color-stroke-surface-error-strong );
 }
 
 .form
 	:global(
-		.components-validated-control
-			:is(textarea, input[type='text']):invalid[data-validity-visible]
+		.components-validated-control :is( textarea, input[type='text'] ):invalid[data-validity-visible]
 	) {
-	--wp-admin-theme-color: var(--wpds-color-stroke-surface-error-strong);
-	--wp-components-color-accent: var(--wpds-color-stroke-surface-error-strong);
-	border-color: var(--wpds-color-stroke-surface-error-strong);
+	--wp-admin-theme-color: var( --wpds-color-stroke-surface-error-strong );
+	--wp-components-color-accent: var( --wpds-color-stroke-surface-error-strong );
+	border-color: var( --wpds-color-stroke-surface-error-strong );
 }
 
 .advancedToggle {
@@ -113,7 +112,7 @@
 	align-items: center;
 	gap: 4px;
 	align-self: flex-start;
-	color: var(--wpds-color-fg-content-neutral);
+	color: var( --wpds-color-fg-content-neutral );
 }
 
 .advancedCollapse {
@@ -121,7 +120,10 @@
 	grid-template-rows: 0fr;
 	opacity: 0;
 	margin-top: -24px;
-	transition: grid-template-rows 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease;
+	transition:
+		grid-template-rows 0.25s ease,
+		opacity 0.2s ease,
+		margin-top 0.25s ease;
 }
 
 .advancedCollapseOpen {
@@ -137,7 +139,7 @@
 	margin: -4px;
 }
 
-@media (prefers-reduced-motion: reduce) {
+@media ( prefers-reduced-motion: reduce ) {
 	.advancedCollapse {
 		transition: none;
 	}
@@ -147,7 +149,7 @@
 	margin-left: 8px;
 	font-size: 12px;
 	font-weight: 500;
-	color: var(--wpds-color-fg-content-error);
+	color: var( --wpds-color-fg-content-error );
 }
 
 .submitError {
@@ -156,8 +158,8 @@
 	gap: 6px;
 	padding: 10px 12px;
 	border-radius: 4px;
-	background: var(--wpds-color-bg-surface-error-weak);
-	color: var(--wpds-color-fg-content-error);
+	background: var( --wpds-color-bg-surface-error-weak );
+	color: var( --wpds-color-fg-content-error );
 	font-size: 13px;
 	line-height: 1.5;
 }
@@ -188,7 +190,12 @@
 		Menlo,
 		monospace
 	);
-	font-size: var(--wpds-typography-font-size-xs);
+	font-size: var( --wpds-typography-font-size-xs );
 	white-space: pre-wrap;
 	overflow-wrap: anywhere;
 }
+
+.panelFooter {
+	padding-top: 24px;
+	border-top: var( --wpds-border-width-xs ) solid var( --wpds-color-stroke-surface-neutral );
+}
diff --git a/apps/ui/src/data/queries/use-wordpress-org-package-name.test.ts b/apps/ui/src/data/queries/use-wordpress-org-package-name.test.ts
new file mode 100644
index 0000000000..b38f56fb37
--- /dev/null
+++ b/apps/ui/src/data/queries/use-wordpress-org-package-name.test.ts
@@ -0,0 +1,37 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { fetchWordPressOrgPackageName } from './use-wordpress-org-package-name';
+
+describe( 'fetchWordPressOrgPackageName', () => {
+	afterEach( () => {
+		vi.unstubAllGlobals();
+	} );
+
+	it( 'returns the canonical package name from WordPress.org', async () => {
+		const fetchMock = vi.fn().mockResolvedValue( {
+			ok: true,
+			json: async () => ( { name: 'Query Monitor' } ),
+		} );
+		vi.stubGlobal( 'fetch', fetchMock );
+
+		await expect( fetchWordPressOrgPackageName( 'plugin', 'query-monitor' ) ).resolves.toBe(
+			'Query Monitor'
+		);
+		expect( fetchMock ).toHaveBeenCalledWith(
+			'https://api.wordpress.org/plugins/info/1.2/?action=plugin_information&request%5Bslug%5D=query-monitor'
+		);
+	} );
+
+	it( 'decodes HTML entities in package names', async () => {
+		vi.stubGlobal(
+			'fetch',
+			vi.fn().mockResolvedValue( {
+				ok: true,
+				json: async () => ( { name: 'Jetpack &#8211; Security &amp; Backup' } ),
+			} )
+		);
+
+		await expect( fetchWordPressOrgPackageName( 'plugin', 'jetpack' ) ).resolves.toBe(
+			'Jetpack – Security & Backup'
+		);
+	} );
+} );
diff --git a/apps/ui/src/data/queries/use-wordpress-org-package-name.ts b/apps/ui/src/data/queries/use-wordpress-org-package-name.ts
new file mode 100644
index 0000000000..3b6b5bf3eb
--- /dev/null
+++ b/apps/ui/src/data/queries/use-wordpress-org-package-name.ts
@@ -0,0 +1,48 @@
+import { useQuery } from '@tanstack/react-query';
+
+type WordPressOrgPackageKind = 'plugin' | 'theme';
+
+function decodeHtmlEntities( value: string ): string {
+	const document = new DOMParser().parseFromString( value, 'text/html' );
+	return document.documentElement.textContent ?? value;
+}
+
+export async function fetchWordPressOrgPackageName(
+	kind: WordPressOrgPackageKind,
+	slug: string
+): Promise< string | null > {
+	const endpoint = kind === 'plugin' ? 'plugins' : 'themes';
+	const action = kind === 'plugin' ? 'plugin_information' : 'theme_information';
+	const request = new URLSearchParams( {
+		action,
+		'request[slug]': slug,
+	} );
+	const response = await fetch( `https://api.wordpress.org/${ endpoint }/info/1.2/?${ request }` );
+	if ( ! response.ok ) {
+		throw new Error( `WordPress.org package request failed with ${ response.status }` );
+	}
+	const data: unknown = await response.json();
+	if ( ! data || typeof data !== 'object' || ! ( 'name' in data ) ) {
+		return null;
+	}
+	return typeof data.name === 'string' && data.name ? decodeHtmlEntities( data.name ) : null;
+}
+
+export function useWordPressOrgPackageName(
+	kind: WordPressOrgPackageKind | undefined,
+	slug: string | undefined
+) {
+	return useQuery( {
+		queryKey: [ 'wordpress-org-package-name', 'decoded-v1', kind, slug ],
+		queryFn: () => {
+			if ( ! kind || ! slug ) {
+				return null;
+			}
+			return fetchWordPressOrgPackageName( kind, slug );
+		},
+		enabled: Boolean( kind && slug ),
+		select: ( name ) => ( name ? decodeHtmlEntities( name ) : null ),
+		staleTime: Infinity,
+		retry: 1,
+	} );
+}
diff --git a/apps/ui/src/lib/blueprint-selection.ts b/apps/ui/src/lib/blueprint-selection.ts
index fcc4b3f877..ed726e218b 100644
--- a/apps/ui/src/lib/blueprint-selection.ts
+++ b/apps/ui/src/lib/blueprint-selection.ts
@@ -2,8 +2,10 @@ import { prepareBlueprint } from '@studio/common/lib/blueprint-selection';
 import type { BlueprintV1Declaration } from '@wp-playground/blueprints';
 
 export interface SelectedBlueprint {
+	slug?: string;
 	title: string;
 	excerpt: string;
+	image?: string;
 	blueprint: BlueprintV1Declaration;
 	file: Pick< File, 'name' | 'size' >;
 	filePath?: string;
diff --git a/apps/ui/src/ui-classic/router/route-onboarding-create/index.test.tsx b/apps/ui/src/ui-classic/router/route-onboarding-create/index.test.tsx
index 75babbf586..61a35ec668 100644
--- a/apps/ui/src/ui-classic/router/route-onboarding-create/index.test.tsx
+++ b/apps/ui/src/ui-classic/router/route-onboarding-create/index.test.tsx
@@ -3,12 +3,14 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { CreateSitePage } from './index';
 import type { SelectedBlueprint } from '@/components/blueprint-upload';
 import type { CreateSiteFormValues } from '@/components/create-site-form';
+import type { ReactNode } from 'react';
 
 const mocks = vi.hoisted( () => ( {
 	navigate: vi.fn( async () => undefined ),
 	setProgress: vi.fn(),
 	mutateAsync: vi.fn(),
 	cleanup: vi.fn( async () => undefined ),
+	openExternalUrl: vi.fn( async () => undefined ),
 	proposedName: 'My Studio Site',
 	formProps: null as Record< string, unknown > | null,
 	uploadProps: null as Record< string, unknown > | null,
@@ -36,6 +38,7 @@ vi.mock( '@/components/create-site-form', () => ( {
 		mocks.formProps = props;
 		return (
 			<>
+				{ props.panelFooter as ReactNode }
 				<button
 					type="button"
 					onClick={ () =>
@@ -54,7 +57,10 @@ vi.mock( '@/data/core', async ( importOriginal ) => {
 	const actual = await importOriginal< typeof import('@/data/core') >();
 	return {
 		...actual,
-		useConnector: () => ( { cleanupBlueprintTempDir: mocks.cleanup } ),
+		useConnector: () => ( {
+			cleanupBlueprintTempDir: mocks.cleanup,
+			openExternalUrl: mocks.openExternalUrl,
+		} ),
 	};
 } );
 
@@ -68,6 +74,17 @@ vi.mock( '@/data/queries/use-sites', () => ( {
 	useCreateSite: () => ( { mutateAsync: mocks.mutateAsync, isPending: false } ),
 } ) );
 
+vi.mock( '@/data/queries/use-wordpress-org-package-name', () => ( {
+	useWordPressOrgPackageName: ( kind?: 'plugin' | 'theme', slug?: string ) => ( {
+		data:
+			kind === 'plugin' && slug === 'query-monitor'
+				? 'Query Monitor'
+				: kind === 'theme' && slug === 'twentytwentyfour'
+				? 'Twenty Twenty-Four'
+				: null,
+	} ),
+} ) );
+
 const formValues: CreateSiteFormValues = {
 	name: 'My Site',
 	path: '/sites/my-site',
@@ -145,6 +162,61 @@ describe( 'CreateSitePage', () => {
 		expect( mocks.formProps?.submitLabel ).toBeUndefined();
 	} );
 
+	it( 'shows what the selected Blueprint will create', () => {
+		const { container } = render( <CreateSitePage /> );
+		const selected: SelectedBlueprint = {
+			slug: 'development',
+			title: 'Theme & plugin development',
+			excerpt: 'Development tools pre-installed.',
+			image: 'https://example.com/development.png',
+			blueprint: {
+				preferredVersions: { php: '8.3', wp: 'latest' },
+				steps: [
+					{
+						step: 'installPlugin',
+						pluginData: { resource: 'wordpress.org/plugins', slug: 'query-monitor' },
+					},
+					{
+						step: 'installTheme',
+						themeData: { resource: 'bundled', path: './twentytwentyfour.zip' },
+					},
+				],
+			},
+			file: { name: 'Development', size: 0 },
+		};
+
+		act( () =>
+			( mocks.uploadProps?.onSelect as ( value: SelectedBlueprint ) => void )( selected )
+		);
+
+		expect(
+			screen.getByRole( 'heading', { name: 'Theme & plugin development' } )
+		).toBeInTheDocument();
+		expect( screen.getByRole( 'heading', { name: 'Blueprint' } ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Development tools pre-installed.' ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'heading', { name: '1 plugin' } ) ).toBeInTheDocument();
+		const pluginLink = screen.getByRole( 'link', { name: 'Query Monitor' } );
+		expect( pluginLink ).toHaveAttribute( 'href', 'https://wordpress.org/plugins/query-monitor/' );
+		expect( pluginLink ).toHaveAttribute( 'title', 'Open on WordPress.org' );
+		expect( screen.getByRole( 'heading', { name: '1 theme' } ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Twenty Twenty-Four' ) ).toBeInTheDocument();
+		expect( screen.queryByRole( 'link', { name: 'Twenty Twenty-Four' } ) ).not.toBeInTheDocument();
+		expect( container.querySelector( 'img' ) ).toHaveAttribute(
+			'src',
+			'https://example.com/development.png'
+		);
+		fireEvent.click( pluginLink );
+		expect( mocks.openExternalUrl ).toHaveBeenCalledWith(
+			'https://wordpress.org/plugins/query-monitor/'
+		);
+
+		fireEvent.click( screen.getByRole( 'button', { name: 'Remove' } ) );
+		expect(
+			screen.queryByRole( 'heading', { name: 'Theme & plugin development' } )
+		).not.toBeInTheDocument();
+		expect( screen.getByTestId( 'blueprint-upload' ) ).toBeInTheDocument();
+	} );
+
 	it( 'blocks submission while the Blueprint upload is invalid', () => {
 		render( <CreateSitePage /> );
 
diff --git a/apps/ui/src/ui-classic/router/route-onboarding-create/index.tsx b/apps/ui/src/ui-classic/router/route-onboarding-create/index.tsx
index 274e707039..300fb29e9d 100644
--- a/apps/ui/src/ui-classic/router/route-onboarding-create/index.tsx
+++ b/apps/ui/src/ui-classic/router/route-onboarding-create/index.tsx
@@ -3,7 +3,7 @@ import {
 	updateBlueprintWithFormValues,
 } from '@studio/common/lib/blueprint-settings';
 import { createRoute, useNavigate } from '@tanstack/react-router';
-import { __ } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { BlueprintUpload, type SelectedBlueprint } from '@/components/blueprint-upload';
 import { CreateSiteForm } from '@/components/create-site-form';
@@ -13,12 +13,15 @@ import {
 	useProposedSiteName,
 } from '@/data/queries/use-create-site-helpers';
 import { useCreateSite, useSites } from '@/data/queries/use-sites';
+import { useWordPressOrgPackageName } from '@/data/queries/use-wordpress-org-package-name';
 import { pendingBlueprintSlot } from '@/lib/pending-blueprint';
 import { onboardingLayoutRoute, useOnboardingProgress } from '../layout-onboarding';
 import styles from '../layout-onboarding/style.module.css';
 import localStyles from './style.module.css';
 import type { CreateSiteFormValues } from '@/components/create-site-form';
 
+const BLUEPRINT_ARTWORK_SLUGS = new Set( [ 'woo-shop', 'development', 'quick-start' ] );
+
 function mapBlueprintSettingsToFormValues(
 	blueprint: SelectedBlueprint
 ): Partial< CreateSiteFormValues > {
@@ -34,6 +37,194 @@ function mapBlueprintSettingsToFormValues(
 	};
 }
 
+function getSourceIdentifier( source: string ): string {
+	const normalized = source.split( /[?#]/, 1 )[ 0 ].replace( /\/$/, '' );
+	const filename = normalized.split( '/' ).pop() || normalized;
+	try {
+		return decodeURIComponent( filename ).replace( /\.(git|zip)$/i, '' );
+	} catch {
+		return filename.replace( /\.(git|zip)$/i, '' );
+	}
+}
+
+interface BlueprintPackage {
+	name: string;
+	url?: string;
+	wordpressOrg?: {
+		kind: 'plugin' | 'theme';
+		slug: string;
+	};
+}
+
+function BlueprintPackageName( { package: blueprintPackage }: { package: BlueprintPackage } ) {
+	const connector = useConnector();
+	const { name, url, wordpressOrg } = blueprintPackage;
+	const { data: wordpressOrgName } = useWordPressOrgPackageName(
+		wordpressOrg?.kind,
+		wordpressOrg?.slug
+	);
+	const displayName = wordpressOrgName ?? name;
+
+	if ( ! url ) {
+		return displayName;
+	}
+	const linkLabel = url.startsWith( 'https://wordpress.org/' )
+		? __( 'Open on WordPress.org' )
+		: __( 'Open source page' );
+
+	return (
+		<a
+			href={ url }
+			title={ linkLabel }
+			target="_blank"
+			rel="noreferrer noopener"
+			onClick={ ( event ) => {
+				event.preventDefault();
+				void connector.openExternalUrl( url );
+			} }
+		>
+			{ displayName }
+		</a>
+	);
+}
+
+function getResourceDetails(
+	resource: unknown,
+	kind: 'plugin' | 'theme'
+): BlueprintPackage | null {
+	if ( typeof resource === 'string' ) {
+		return { name: getSourceIdentifier( resource ) };
+	}
+	if ( ! resource || typeof resource !== 'object' ) {
+		return null;
+	}
+	const details = resource as Record< string, unknown >;
+	if ( typeof details.slug === 'string' && details.slug ) {
+		return {
+			name: details.slug,
+			url: `https://wordpress.org/${ kind === 'plugin' ? 'plugins' : 'themes' }/${ details.slug }/`,
+			wordpressOrg: { kind, slug: details.slug },
+		};
+	}
+	if ( typeof details.url === 'string' && details.url ) {
+		return { name: getSourceIdentifier( details.url ), url: details.url };
+	}
+	if ( typeof details.path === 'string' && details.path ) {
+		const name = getSourceIdentifier( details.path );
+		return {
+			name,
+			wordpressOrg: { kind, slug: name },
+		};
+	}
+	return null;
+}
+
+function getBlueprintPackages( blueprint: SelectedBlueprint[ 'blueprint' ] ) {
+	const plugins: BlueprintPackage[] = [];
+	const themes: BlueprintPackage[] = [];
+	for ( const rawStep of blueprint.steps ?? [] ) {
+		if ( ! rawStep || typeof rawStep !== 'object' ) continue;
+		const step = rawStep as unknown as Record< string, unknown >;
+		if ( step.step === 'installPlugin' ) {
+			const details = getResourceDetails( step.pluginData ?? step.pluginZipFile, 'plugin' );
+			if ( details ) plugins.push( details );
+		}
+		if ( step.step === 'installTheme' ) {
+			const details = getResourceDetails( step.themeData ?? step.themeZipFile, 'theme' );
+			if ( details ) themes.push( details );
+		}
+	}
+	return {
+		plugins: [ ...new Map( plugins.map( ( item ) => [ item.name, item ] ) ).values() ],
+		themes: [ ...new Map( themes.map( ( item ) => [ item.name, item ] ) ).values() ],
+	};
+}
+
+function SelectedBlueprintSummary( {
+	selected,
+	onRemove,
+}: {
+	selected: SelectedBlueprint;
+	onRemove: () => void;
+} ) {
+	const packages = getBlueprintPackages( selected.blueprint );
+	const cropAdminBar = selected.slug && ! BLUEPRINT_ARTWORK_SLUGS.has( selected.slug );
+
+	return (
+		<section className={ localStyles.summary } aria-labelledby="selected-blueprint-title">
+			<div className={ localStyles.summaryHeader }>
+				<h2>{ __( 'Blueprint' ) }</h2>
+				<button type="button" className={ localStyles.summaryRemove } onClick={ onRemove }>
+					{ __( 'Remove' ) }
+				</button>
+			</div>
+			<div
+				className={ `${ localStyles.summaryOverview } ${
+					selected.image ? '' : localStyles.summaryOverviewWithoutImage
+				}` }
+			>
+				{ selected.image && (
+					<div className={ localStyles.summaryImageViewport }>
+						<img
+							src={ selected.image }
+							alt=""
+							className={ `${ localStyles.summaryImage } ${
+								cropAdminBar ? localStyles.summaryImageWithoutAdminBar : ''
+							}` }
+						/>
+					</div>
+				) }
+				<div className={ localStyles.summaryContent }>
+					<h3 id="selected-blueprint-title" className={ localStyles.summaryTitle }>
+						{ selected.title }
+					</h3>
+					{ selected.excerpt && (
+						<p className={ localStyles.summaryExcerpt }>{ selected.excerpt }</p>
+					) }
+				</div>
+			</div>
+			{ ( packages.plugins.length > 0 || packages.themes.length > 0 ) && (
+				<div className={ localStyles.summaryPackages }>
+					{ packages.plugins.length > 0 && (
+						<div className={ localStyles.summaryPackageGroup }>
+							<h3>
+								{ sprintf(
+									_n( '%d plugin', '%d plugins', packages.plugins.length ),
+									packages.plugins.length
+								) }
+							</h3>
+							<ul>
+								{ packages.plugins.map( ( plugin ) => (
+									<li key={ plugin.name }>
+										<BlueprintPackageName package={ plugin } />
+									</li>
+								) ) }
+							</ul>
+						</div>
+					) }
+					{ packages.themes.length > 0 && (
+						<div className={ localStyles.summaryPackageGroup }>
+							<h3>
+								{ sprintf(
+									_n( '%d theme', '%d themes', packages.themes.length ),
+									packages.themes.length
+								) }
+							</h3>
+							<ul>
+								{ packages.themes.map( ( theme ) => (
+									<li key={ theme.name }>
+										<BlueprintPackageName package={ theme } />
+									</li>
+								) ) }
+							</ul>
+						</div>
+					) }
+				</div>
+			) }
+		</section>
+	);
+}
+
 export function CreateSitePage() {
 	const connector = useConnector();
 	const navigate = useNavigate();
@@ -167,15 +358,28 @@ export function CreateSitePage() {
 				isSubmitDisabled={ ! isBlueprintValid }
 				submitError={ submitError }
 				submitLabel={ selectedBlueprint ? __( 'Create site from Blueprint' ) : undefined }
+				panelFooter={
+					selectedBlueprint ? (
+						<SelectedBlueprintSummary
+							selected={ selectedBlueprint }
+							onRemove={ () => {
+								setIsBlueprintValid( true );
+								replaceBlueprint( null );
+							} }
+						/>
+					) : undefined
+				}
 			/>
-			<div className={ localStyles.blueprint }>
-				<BlueprintUpload
-					selected={ selectedBlueprint }
-					onSelect={ replaceBlueprint }
-					onRemove={ () => replaceBlueprint( null ) }
-					onValidityChange={ setIsBlueprintValid }
-				/>
-			</div>
+			{ ! selectedBlueprint && (
+				<div className={ localStyles.blueprint }>
+					<BlueprintUpload
+						selected={ null }
+						onSelect={ replaceBlueprint }
+						onRemove={ () => replaceBlueprint( null ) }
+						onValidityChange={ setIsBlueprintValid }
+					/>
+				</div>
+			) }
 		</div>
 	);
 }
diff --git a/apps/ui/src/ui-classic/router/route-onboarding-create/style.module.css b/apps/ui/src/ui-classic/router/route-onboarding-create/style.module.css
index c61f00950f..ea734a4112 100644
--- a/apps/ui/src/ui-classic/router/route-onboarding-create/style.module.css
+++ b/apps/ui/src/ui-classic/router/route-onboarding-create/style.module.css
@@ -1,3 +1,154 @@
 .blueprint {
 	margin-top: 32px;
 }
+
+.summary {
+	width: 100%;
+	margin: 0;
+	text-align: left;
+}
+
+.summaryHeader {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16px;
+	margin-bottom: 12px;
+}
+
+.summaryHeader h2 {
+	margin: 0;
+	color: var( --wpds-color-fg-content-neutral );
+	font-size: var( --wpds-typography-font-size-md );
+	font-weight: 600;
+}
+
+.summaryRemove {
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: var( --wpds-color-fg-interactive-brand );
+	font: inherit;
+	font-size: var( --wpds-typography-font-size-sm );
+	cursor: pointer;
+}
+
+.summaryRemove:hover {
+	text-decoration: underline;
+}
+
+.summaryRemove:focus-visible {
+	border-radius: 2px;
+	outline: 2px solid var( --wpds-color-stroke-focus-brand );
+	outline-offset: 2px;
+}
+
+.summaryOverview {
+	display: grid;
+	grid-template-columns: 112px minmax( 0, 1fr );
+	align-items: start;
+	gap: 16px;
+}
+
+.summaryOverviewWithoutImage {
+	grid-template-columns: 1fr;
+}
+
+.summaryImageViewport {
+	position: relative;
+	width: 112px;
+	aspect-ratio: 16 / 10;
+	overflow: hidden;
+	border-radius: 6px;
+	background: var( --wpds-color-bg-surface-neutral );
+}
+
+.summaryImage {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.summaryImageWithoutAdminBar {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	height: 103%;
+	object-position: bottom;
+}
+
+.summaryContent {
+	min-width: 0;
+}
+
+.summaryTitle {
+	margin: 0;
+	color: var( --wpds-color-fg-content-neutral );
+	font-size: var( --wpds-typography-font-size-md );
+	font-weight: 600;
+}
+
+.summaryExcerpt {
+	margin: 4px 0 0;
+	color: var( --wpds-color-fg-content-neutral-weak );
+	font-size: var( --wpds-typography-font-size-sm );
+	line-height: 1.4;
+}
+
+.summaryPackages {
+	display: grid;
+	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
+	gap: 24px;
+	margin-top: 24px;
+}
+
+.summaryPackageGroup h3 {
+	margin: 0 0 6px;
+	color: var( --wpds-color-fg-content-neutral );
+	font-size: var( --wpds-typography-font-size-sm );
+	font-weight: 600;
+}
+
+.summaryPackageGroup:only-child {
+	grid-column: 1 / -1;
+}
+
+.summaryPackageGroup ul {
+	margin: 0;
+	padding-left: 18px;
+}
+
+.summaryPackageGroup li {
+	margin-top: 3px;
+	color: var( --wpds-color-fg-content-neutral-weak );
+	font-size: var( --wpds-typography-font-size-sm );
+}
+
+.summaryPackageGroup a {
+	color: var( --wpds-color-fg-interactive-brand );
+	overflow-wrap: anywhere;
+	text-decoration: none;
+}
+
+.summaryPackageGroup a:hover {
+	text-decoration: underline;
+}
+
+.summaryPackageGroup a:focus-visible {
+	border-radius: 2px;
+	outline: 2px solid var( --wpds-color-stroke-focus-brand );
+	outline-offset: 2px;
+}
+
+@media ( max-width: 520px ) {
+	.summaryOverview,
+	.summaryPackages {
+		grid-template-columns: 1fr;
+	}
+
+	.summaryImageViewport {
+		width: 100%;
+		aspect-ratio: 16 / 9;
+	}
+}
diff --git a/apps/ui/src/ui-classic/router/route-onboarding-home/style.module.css b/apps/ui/src/ui-classic/router/route-onboarding-home/style.module.css
index b4434afaa3..53d9ccd96c 100644
--- a/apps/ui/src/ui-classic/router/route-onboarding-home/style.module.css
+++ b/apps/ui/src/ui-classic/router/route-onboarding-home/style.module.css
@@ -1,14 +1,14 @@
 .page {
 	width: 100%;
 	text-align: center;
+	padding-top: 48px;
 	padding-bottom: 72px;
 }
 
 .cards {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
+	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
 	gap: 20px;
-	justify-content: center;
 }
 
 .card {
@@ -17,14 +17,14 @@
 	align-items: center;
 	gap: 16px;
 	padding: 24px;
-	border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral);
+	border: var( --wpds-border-width-xs ) solid var( --wpds-color-stroke-surface-neutral );
 	border-radius: 12px;
 	background: color-mix(
 		in srgb,
-		var(--wpds-color-bg-surface-neutral-strong) var(--surface-alpha, 50%),
+		var( --wpds-color-bg-surface-neutral-strong ) var( --surface-alpha, 50% ),
 		transparent
 	);
-	backdrop-filter: blur(12px);
+	backdrop-filter: blur( 12px );
 	appearance: none;
 	font: inherit;
 	text-align: center;
@@ -36,20 +36,20 @@
 
 .card:hover,
 .cardDragging {
-	border-color: var(--wpds-color-stroke-interactive-brand);
-	box-shadow: 0 0 0 1px var(--wpds-color-stroke-interactive-brand);
+	border-color: var( --wpds-color-stroke-interactive-brand );
+	box-shadow: 0 0 0 1px var( --wpds-color-stroke-interactive-brand );
 }
 
 .card:focus-visible {
-	outline: 2px solid var(--wpds-color-stroke-focus-brand);
+	outline: 2px solid var( --wpds-color-stroke-focus-brand );
 	outline-offset: 2px;
-	border-color: var(--wpds-color-stroke-interactive-brand);
+	border-color: var( --wpds-color-stroke-interactive-brand );
 }
 
 .cardDisabled,
 .cardDisabled:hover {
 	opacity: 0.55;
-	border-color: var(--wpds-color-stroke-surface-neutral);
+	border-color: var( --wpds-color-stroke-surface-neutral );
 	box-shadow: none;
 	cursor: not-allowed;
 }
@@ -61,41 +61,41 @@
 }
 
 .cardTitle {
-	font-size: var(--wpds-typography-font-size-lg);
+	font-size: var( --wpds-typography-font-size-lg );
 	font-weight: 500;
 	transition: color 0.15s ease;
 }
 
 .card:hover .cardTitle,
 .card:focus-visible .cardTitle {
-	color: var(--wpds-color-fg-interactive-brand);
+	color: var( --wpds-color-fg-interactive-brand );
 }
 
 .cardBody {
 	margin: 0;
-	color: var(--wpds-color-fg-content-neutral-weak);
-	font-size: var(--wpds-typography-font-size-md);
+	color: var( --wpds-color-fg-content-neutral-weak );
+	font-size: var( --wpds-typography-font-size-md );
 	line-height: 1.4;
 }
 
 .cardHint {
-	color: var(--wpds-color-fg-content-neutral-weak);
-	font-size: var(--wpds-typography-font-size-sm);
+	color: var( --wpds-color-fg-content-neutral-weak );
+	font-size: var( --wpds-typography-font-size-sm );
 }
 
 .cardError {
 	margin-top: 4px;
-	color: var(--wpds-color-fg-content-error);
-	font-size: var(--wpds-typography-font-size-sm);
+	color: var( --wpds-color-fg-content-error );
+	font-size: var( --wpds-typography-font-size-sm );
 }
 
 .hiddenInput {
 	display: none;
 }
 
-@media (max-width: 720px) {
+@media ( max-width: 720px ) {
 	.cards {
-		grid-template-columns: minmax(0, 1fr);
+		grid-template-columns: minmax( 0, 1fr );
 	}
 
 	.card {

From 2474ac3f297d8dd764d67dde302126c151735b23 Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Mon, 31 Aug 2026 20:22:26 -0400
Subject: [PATCH 2/2] Remove Blueprint preview cropping

---
 .../components/blueprint-gallery/index.tsx    | 21 ++-----------------
 .../blueprint-gallery/style.module.css        |  8 -------
 .../router/route-onboarding-create/index.tsx  | 11 +---------
 .../route-onboarding-create/style.module.css  |  8 -------
 4 files changed, 3 insertions(+), 45 deletions(-)

diff --git a/apps/ui/src/components/blueprint-gallery/index.tsx b/apps/ui/src/components/blueprint-gallery/index.tsx
index 3e1358639d..4d811d0e44 100644
--- a/apps/ui/src/components/blueprint-gallery/index.tsx
+++ b/apps/ui/src/components/blueprint-gallery/index.tsx
@@ -11,7 +11,6 @@ import type { SelectedBlueprint } from '@/lib/blueprint-selection';
 import type { Blueprint } from '@studio/common/lib/studio-blueprints-api';
 import type { BlueprintV1Declaration } from '@wp-playground/blueprints';
 
-const BLUEPRINT_ARTWORK_SLUGS = new Set( [ 'woo-shop', 'development', 'quick-start' ] );
 const SEARCH_THRESHOLD = 20;
 
 const BLUEPRINT_DISPLAY_NAMES: Record< string, string > = {
@@ -71,27 +70,12 @@ function apiToSelectedBlueprint( bp: Blueprint ): SelectedBlueprint {
 	};
 }
 
-function BlueprintCard( {
-	blueprint,
-	onClick,
-	cropAdminBar = false,
-}: {
-	blueprint: Blueprint;
-	onClick: () => void;
-	cropAdminBar?: boolean;
-} ) {
+function BlueprintCard( { blueprint, onClick }: { blueprint: Blueprint; onClick: () => void } ) {
 	return (
 		<button type="button" className={ styles.card } onClick={ onClick }>
 			{ blueprint.image ? (
 				<div className={ styles.cardImageViewport }>
-					<img
-						src={ blueprint.image }
-						alt=""
-						className={ `${ styles.cardImage } ${
-							cropAdminBar ? styles.cardImageWithoutAdminBar : ''
-						}` }
-						loading="lazy"
-					/>
+					<img src={ blueprint.image } alt="" className={ styles.cardImage } loading="lazy" />
 				</div>
 			) : (
 				<div className={ styles.cardImageFallback }>{ blueprint.title }</div>
@@ -212,7 +196,6 @@ export function BlueprintGallery( { onSelect }: BlueprintGalleryProps ) {
 		<BlueprintCard
 			key={ bp.slug }
 			blueprint={ bp }
-			cropAdminBar={ ! BLUEPRINT_ARTWORK_SLUGS.has( bp.slug ) }
 			onClick={ () => onSelect( apiToSelectedBlueprint( bp ) ) }
 		/>
 	);
diff --git a/apps/ui/src/components/blueprint-gallery/style.module.css b/apps/ui/src/components/blueprint-gallery/style.module.css
index 34164fb87a..50e5d8ec0a 100644
--- a/apps/ui/src/components/blueprint-gallery/style.module.css
+++ b/apps/ui/src/components/blueprint-gallery/style.module.css
@@ -82,14 +82,6 @@
 	transform: scale( 1.05 );
 }
 
-.cardImageWithoutAdminBar {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	height: 103%;
-	object-position: bottom;
-}
-
 .cardImageFallback {
 	display: flex;
 	align-items: center;
diff --git a/apps/ui/src/ui-classic/router/route-onboarding-create/index.tsx b/apps/ui/src/ui-classic/router/route-onboarding-create/index.tsx
index 300fb29e9d..f71c86b7bf 100644
--- a/apps/ui/src/ui-classic/router/route-onboarding-create/index.tsx
+++ b/apps/ui/src/ui-classic/router/route-onboarding-create/index.tsx
@@ -20,8 +20,6 @@ import styles from '../layout-onboarding/style.module.css';
 import localStyles from './style.module.css';
 import type { CreateSiteFormValues } from '@/components/create-site-form';
 
-const BLUEPRINT_ARTWORK_SLUGS = new Set( [ 'woo-shop', 'development', 'quick-start' ] );
-
 function mapBlueprintSettingsToFormValues(
 	blueprint: SelectedBlueprint
 ): Partial< CreateSiteFormValues > {
@@ -148,7 +146,6 @@ function SelectedBlueprintSummary( {
 	onRemove: () => void;
 } ) {
 	const packages = getBlueprintPackages( selected.blueprint );
-	const cropAdminBar = selected.slug && ! BLUEPRINT_ARTWORK_SLUGS.has( selected.slug );
 
 	return (
 		<section className={ localStyles.summary } aria-labelledby="selected-blueprint-title">
@@ -165,13 +162,7 @@ function SelectedBlueprintSummary( {
 			>
 				{ selected.image && (
 					<div className={ localStyles.summaryImageViewport }>
-						<img
-							src={ selected.image }
-							alt=""
-							className={ `${ localStyles.summaryImage } ${
-								cropAdminBar ? localStyles.summaryImageWithoutAdminBar : ''
-							}` }
-						/>
+						<img src={ selected.image } alt="" className={ localStyles.summaryImage } />
 					</div>
 				) }
 				<div className={ localStyles.summaryContent }>
diff --git a/apps/ui/src/ui-classic/router/route-onboarding-create/style.module.css b/apps/ui/src/ui-classic/router/route-onboarding-create/style.module.css
index ea734a4112..5cd962f14f 100644
--- a/apps/ui/src/ui-classic/router/route-onboarding-create/style.module.css
+++ b/apps/ui/src/ui-classic/router/route-onboarding-create/style.module.css
@@ -70,14 +70,6 @@
 	object-fit: cover;
 }
 
-.summaryImageWithoutAdminBar {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	height: 103%;
-	object-position: bottom;
-}
-
 .summaryContent {
 	min-width: 0;
 }