Automattic · katinthehatsite · Apr 16, 2026 · Apr 16, 2026 · Apr 16, 2026 · Apr 16, 2026
diff --git a/apps/cli/commands/site/create.ts b/apps/cli/commands/site/create.ts
@@ -815,8 +815,13 @@ export const registerCommand = ( yargs: StudioArgv ) => {
 
 					// When invoked by the desktop app, the blueprint contents come from a temp file
 					// but resources should be resolved relative to the original file location.
+					// For gallery blueprints the path is a URL; use it directly.
 					if ( argv.originalBlueprintPath ) {
-						config.blueprint.uri = path.resolve( argv.originalBlueprintPath );
+						const originalPath = argv.originalBlueprintPath;
+						config.blueprint.uri =
+							originalPath.startsWith( 'http://' ) || originalPath.startsWith( 'https://' )
+								? originalPath
+								: path.resolve( originalPath );
 					}
 				}
 			}

diff --git a/apps/studio/index.html b/apps/studio/index.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval'; worker-src 'self' blob:; style-src 'self' 'unsafe-inline'; connect-src 'self' https://public-api.wordpress.com https://api.wordpress.org https://*.gravatar.com https://*.wp.com https://blueprintlibrary.wordpress.com https://unpkg.com https://cdn.jsdelivr.net https://wordpress.github.io https://raw.githubusercontent.com ws://localhost:*; img-src 'self' https://*.gravatar.com https://*.wp.com https://blueprintlibrary.wordpress.com https://wordpress.github.io data:;">
+		<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval'; worker-src 'self' blob:; style-src 'self' 'unsafe-inline'; connect-src 'self' https://public-api.wordpress.com https://api.wordpress.org https://*.gravatar.com https://*.wp.com https://blueprintlibrary.wordpress.com https://unpkg.com https://cdn.jsdelivr.net https://wordpress.github.io https://raw.githubusercontent.com ws://localhost:*; img-src 'self' https://*.gravatar.com https://*.wp.com https://blueprintlibrary.wordpress.com https://wordpress.github.io https://raw.githubusercontent.com data:;">
 		<title>WordPress Studio</title>
 	</head>
 	<body class="a8c-body">

diff --git a/apps/studio/src/index.ts b/apps/studio/src/index.ts
@@ -332,7 +332,7 @@ async function appBoot() {
 			const basePolicies = [
 				"default-src 'self'", // Allow resources from these domains
 				"script-src-attr 'none'",
-				"img-src 'self' https://*.gravatar.com https://*.wp.com https://blueprintlibrary.wordpress.com https://wordpress.github.io data:",
+				"img-src 'self' https://*.gravatar.com https://*.wp.com https://blueprintlibrary.wordpress.com https://wordpress.github.io https://raw.githubusercontent.com data:",
 				"style-src 'self' 'unsafe-inline'", // unsafe-inline used by tailwindcss in development, and also in production after the app rename
 				"script-src 'self' 'wasm-unsafe-eval'", // allow WebAssembly to compile and instantiate
 			];

diff --git a/apps/studio/src/modules/add-site/components/explore-blueprints.tsx b/apps/studio/src/modules/add-site/components/explore-blueprints.tsx
@@ -0,0 +1,122 @@
+import {
+	__experimentalVStack as VStack,
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+	Spinner,
+} from '@wordpress/components';
+import { useI18n } from '@wordpress/react-i18n';
+import { cx } from 'src/lib/cx';
+import { GalleryBlueprint } from 'src/stores/gallery-blueprints-api';
+
+interface ExploreBlueprintsProps {
+	blueprints: GalleryBlueprint[];
+	isLoading: boolean;
+	errorMessage?: string;
+	onBlueprintSelect: ( blueprint: GalleryBlueprint ) => void;
+	isSelectingBlueprint: boolean;
+	selectionError?: string;
+}
+
+function GalleryBlueprintCard( {
+	blueprint,
+	onClick,
+	disabled,
+}: {
+	blueprint: GalleryBlueprint;
+	onClick: () => void;
+	disabled: boolean;
+} ) {
+	return (
+		<button
+			onClick={ onClick }
+			disabled={ disabled }
+			className={ cx(
+				'flex flex-col h-full rounded-lg border overflow-hidden text-left transition-colors',
+				disabled
+					? 'opacity-50 cursor-not-allowed border-frame-border'
+					: 'border-frame-border hover:border-frame-text-secondary'
+			) }
+		>
+			<div className="relative w-full h-24 [@media(min-height:680px)]:h-36 bg-frame-surface overflow-hidden">
+				{ blueprint.screenshotUrl ? (
+					<img
+						src={ blueprint.screenshotUrl }
+						alt={ blueprint.title }
+						className="w-full h-full object-cover object-center"
+					/>
+				) : (
+					<div className="w-full h-full flex items-center justify-center text-frame-text-tertiary">
+						{ blueprint.title }
+					</div>
+				) }
+			</div>
+			<div className="px-3 pt-3 pb-3">
+				<Heading level={ 3 } className="text-[13px] text-frame-text mb-1" weight={ 500 }>
+					{ blueprint.title }
+				</Heading>
+				<Text
+					className="text-[12px] text-frame-text-secondary leading-[18px] text-pretty"
+					weight={ 400 }
+					title={ blueprint.description }
+				>
+					{ blueprint.description }
+				</Text>
+			</div>
+		</button>
+	);
+}
+
+export function ExploreBlueprints( {
+	blueprints,
+	isLoading,
+	errorMessage,
+	onBlueprintSelect,
+	isSelectingBlueprint,
+	selectionError,
+}: ExploreBlueprintsProps ) {
+	const { __ } = useI18n();
+
+	return (
+		<VStack className="w-full max-w-4xl mx-auto" spacing={ 0 }>
+			<Heading className="text-center text-[32px] text-frame-text mb-2" weight={ 500 }>
+				{ __( 'Explore blueprints' ) }
+			</Heading>
+			<Text className="text-center text-[15px] font-light text-frame-text-secondary block mb-6">
+				{ __( 'Community blueprints from the WordPress Blueprints library.' ) }
+			</Text>
+
+			{ selectionError && (
+				<div className="bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200 text-sm rounded-lg px-4 py-3 mb-4 max-w-3xl mx-auto w-full">
+					{ selectionError }
+				</div>
+			) }
+
+			{ isLoading ? (
+				<div className="flex items-center justify-center py-8">
+					<Spinner />
+				</div>
+			) : errorMessage ? (
+				<div className="flex items-center justify-center text-sm text-frame-text-secondary py-8">
+					{ __( 'Could not load blueprints.' ) }
+				</div>
+			) : (
+				<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 w-full max-w-3xl mx-auto pb-1">
+					{ blueprints.map( ( bp ) => (
+						<GalleryBlueprintCard
+							key={ bp.slug }
+							blueprint={ bp }
+							onClick={ () => onBlueprintSelect( bp ) }
+							disabled={ isSelectingBlueprint }
+						/>
+					) ) }
+				</div>
+			) }
+
+			{ isSelectingBlueprint && (
+				<div className="flex items-center justify-center py-4">
+					<Spinner />
+				</div>
+			) }
+		</VStack>
+	);
+}
diff --git a/apps/studio/src/modules/add-site/components/new-site-options.tsx b/apps/studio/src/modules/add-site/components/new-site-options.tsx
@@ -8,6 +8,8 @@ import { __ } from '@wordpress/i18n';
 import { useI18n } from '@wordpress/react-i18n';
 import { useCallback } from 'react';
 import { cx } from 'src/lib/cx';
+import { GalleryBlueprint } from 'src/stores/gallery-blueprints-api';
+
 interface Blueprint {
 	slug: string;
 	title: string;
@@ -29,6 +31,13 @@ interface NewSiteOptionsProps {
 	selectedBlueprint: string | null;
 	onBlueprintChange: ( blueprintId: string ) => void;
 	blueprintFileError?: string;
+	uploadButton?: React.ReactNode;
+	galleryBlueprints?: GalleryBlueprint[];
+	isLoadingGallery?: boolean;
+	galleryErrorMessage?: string;
+	onGalleryBlueprintSelect?: ( blueprint: GalleryBlueprint ) => void;
+	isSelectingGalleryBlueprint?: boolean;
+	gallerySelectionError?: string;
 }
 
 function EmptySiteCard( { isSelected, onClick }: { isSelected: boolean; onClick: () => void } ) {
@@ -177,6 +186,55 @@ function renameBlueprintsForDisplay( blueprints: Blueprint[] ): Blueprint[] {
 		} ) );
 }
 
+function GalleryBlueprintCard( {
+	blueprint,
+	onClick,
+	disabled,
+}: {
+	blueprint: GalleryBlueprint;
+	onClick: () => void;
+	disabled: boolean;
+} ) {
+	return (
+		<button
+			onClick={ onClick }
+			disabled={ disabled }
+			className={ cx(
+				'flex flex-col h-full rounded-lg border overflow-hidden text-left transition-colors',
+				disabled
+					? 'opacity-50 cursor-not-allowed border-frame-border'
+					: 'border-frame-border hover:border-frame-text-secondary'
+			) }
+		>
+			<div className="relative w-full h-24 [@media(min-height:680px)]:h-36 bg-frame-surface overflow-hidden">
+				{ blueprint.screenshotUrl ? (
+					<img
+						src={ blueprint.screenshotUrl }
+						alt={ blueprint.title }
+						className="w-full h-full object-cover object-center"
+					/>
+				) : (
+					<div className="w-full h-full flex items-center justify-center text-frame-text-tertiary">
+						{ blueprint.title }
+					</div>
+				) }
+			</div>
+			<div className="px-3 pt-3 pb-3">
+				<Heading level={ 3 } className="text-[13px] text-frame-text mb-1" weight={ 500 }>
+					{ blueprint.title }
+				</Heading>
+				<Text
+					className="text-[12px] text-frame-text-secondary leading-[18px] text-pretty"
+					weight={ 400 }
+					title={ blueprint.description }
+				>
+					{ blueprint.description }
+				</Text>
+			</div>
+		</button>
+	);
+}
+
 export function NewSiteOptions( {
 	enableBlueprints,
 	blueprints,
@@ -185,6 +243,13 @@ export function NewSiteOptions( {
 	selectedBlueprint,
 	onBlueprintChange,
 	blueprintFileError,
+	uploadButton,
+	galleryBlueprints = [],
+	isLoadingGallery = false,
+	galleryErrorMessage,
+	onGalleryBlueprintSelect,
+	isSelectingGalleryBlueprint = false,
+	gallerySelectionError,
 }: NewSiteOptionsProps ) {
 	const { __ } = useI18n();
 
@@ -208,6 +273,10 @@ export function NewSiteOptions( {
 				{ __( 'Start with an empty site or choose a template.' ) }
 			</Text>
 
+			{ uploadButton && (
+				<div className="w-full max-w-2xl mx-auto mb-4 flex justify-end">{ uploadButton }</div>
+			) }
+
 			{ blueprintFileError && (
 				<div className="bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200 text-sm rounded-lg px-4 py-3 mb-4">
 					{ blueprintFileError }
@@ -236,6 +305,50 @@ export function NewSiteOptions( {
 					) )
 				) }
 			</div>
+
+			{ onGalleryBlueprintSelect && (
+				<>
+					<Heading
+						className="text-[18px] text-frame-text mt-8 mb-4 w-full max-w-2xl mx-auto"
+						weight={ 500 }
+					>
+						{ __( 'Explore more blueprints' ) }
+					</Heading>
+
+					{ gallerySelectionError && (
+						<div className="bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200 text-sm rounded-lg px-4 py-3 mb-4 max-w-2xl mx-auto w-full">
+							{ gallerySelectionError }
+						</div>
+					) }
+
+					{ isLoadingGallery ? (
+						<div className="flex items-center justify-center py-8">
+							<Spinner />
+						</div>
+					) : galleryErrorMessage ? (
+						<div className="flex items-center justify-center text-sm text-frame-text-secondary py-8">
+							{ galleryErrorMessage }
+						</div>
+					) : (
+						<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full max-w-2xl mx-auto pb-1">
+							{ galleryBlueprints.map( ( bp ) => (
+								<GalleryBlueprintCard
+									key={ bp.slug }
+									blueprint={ bp }
+									onClick={ () => onGalleryBlueprintSelect( bp ) }
+									disabled={ isSelectingGalleryBlueprint }
+								/>
+							) ) }
+						</div>
+					) }
+
+					{ isSelectingGalleryBlueprint && (
+						<div className="flex items-center justify-center py-4">
+							<Spinner />
+						</div>
+					) }
+				</>
+			) }
 		</VStack>
 	);
 }