Blueprints: Update Blueprint deeplink step design by ivan-ottinger · Pull Request #2397 · Automattic/studio

ivan-ottinger · 2026-01-15T11:17:16Z

Related issues

Resolves STU-1151

Proposed Changes

update Blueprint deeplink step design

Before	After

ℹ️ Please note there are several differences compared to the design proposed in Figma (RToz6tIuQ7nlZrikBte4GU-fi-10353_7411), for example the check icon is blue in this PR to match existing design of checkmarks we already have in Studio.

Testing Instructions

Check out the PR branch and build the app with npm install && npm start.
Try using different Blueprint deeplinks, for example the ones in: https://output.jsbin.com/kulaqijega or use https://developer.wordpress.com/docs/developer-tools/studio/blueprints/open-in-wordpress-studio-button/.
The design should look good in both LTR and RTL; there should be no regressions.

Pre-merge Checklist

Have you checked for TypeScript, React or other console errors?

wojtekn · 2026-01-15T15:28:45Z

I tested Blueprints from the JS Bin, and it worked for the ideal case. For my Blueprint, it was a bit empty:

If Blueprint doesn't have a meta title and description, shouldn't we display some details about the Blueprint content, such as "Blueprint installs X plugins, Y themes, and runs Z blocks of PHP code"?

As regards layout, should we add "Blueprint loaded from URL", footer too? See p9Jlb4-gnb-p2

It doesn't seem to be part of this PR, but invalid Blueprints could benefit from a better UX. For now, I've got this:

1	2

ivan-ottinger · 2026-01-15T15:46:50Z

Thanks for the review, Wojtek.

If Blueprint doesn't have a meta title and description, shouldn't we display some details about the Blueprint content, such as "Blueprint installs X plugins, Y themes, and runs Z blocks of PHP code"?

Do you mean to parse the contents of the Blueprint JSON and use it to generate a message like the above? I think that could work nicely until we have a dedicated way to output and let the user manage the contents of the Blueprint we discussed earlier.

As regards layout, should we add "Blueprint loaded from URL", footer too? See p9Jlb4-gnb-p2

This is something that feels redundant to me - as all Blueprints there are loaded from a deeplink URL (whether the JSON is included in the deeplink or referred from a different source). I have asked Marina earlier today about it in Figma: RToz6tIuQ7nlZrikBte4GU-fi-10352_72525#1587850255.

I am happy to add the footer there. If we implement the "Blueprint installs X plugins, Y themes, and runs Z blocks of PHP code" part for Blueprints that don't have any title/description, it may not feel that redundant.

It doesn't seem to be part of this PR, but invalid Blueprints could benefit from a better UX. For now, I've got this:

Good idea. I have created a separate task to look into that: https://linear.app/a8c/issue/STU-1209/improve-the-display-of-blueprint-deeplink-errors

katinthehatsite · 2026-01-15T15:49:04Z

-							{ blueprintDescription }
+			<VStack className="max-w-[400px] min-w-[250px] max-h-[172px] mx-auto p-6 border rounded-lg border-gray-200 mt-16">
+				<HStack className="h-full" alignment="top" spacing={ 4 }>
+					<Icon className="fill-a8c-blue-50 shrink-0" icon={ check } size={ 29 } />


I think it is a good idea to keep the consistency here with what we have in Studio even if it might be a bit different from design 👍

katinthehatsite

I did not mind that there was not a lot of information about the blueprint but to me, the spacing was slightly off when it was a shorter version:

I am wondering if maybe moving the title closer to the icon would bring a better visual balance for this case.

Alternatively, it wouldbe solved if it showed more content.

wojtekn · 2026-01-16T11:38:09Z

Do you mean to parse the contents of the Blueprint JSON and use it to generate a message like the above? I think that could work nicely until we have a dedicated way to output and let the user manage the contents of the Blueprint we discussed earlier.

Yes, but we can add that as a follow-up.

This is something that feels redundant to me - as all Blueprints there are loaded from a deeplink URL (whether the JSON is included in the deeplink or referred from a different source).

As this step will also allow the selection of a file from the user's computer (as in the import step), the footer will differentiate between the two cases: a file loaded from a URL and a file selected from the local system.

Also, I'm unsure if we need "Blueprint selected" text - shouldn't this text be the Blueprint title? Then we could have:

Title (from Blueprint meta field, or just "Blueprint" if it's not set)
Description (from Blueprint meta field, or generated one as mentioned above. Can be empty for now)
Footer: "Blueprint loaded from URL" if it was

Possible variations:

Car service site
Blueprint installs the car service theme and a few plugins that help with scheduling visits.
[Blueprint loaded from URL]

Car service site
Blueprint installs X plugins, Y themes, and runs Z blocks of PHP code.
[Blueprint loaded from URL]

Blueprint
Blueprint installs X plugins, Y themes, and runs Z blocks of PHP code.
[Blueprint loaded from URL]

Car service site
Blueprint installs the car service theme and a few plugins that help with scheduling visits.

wpmobilebot · 2026-01-16T16:37:10Z

📊 Performance Test Results

Comparing f35b54f vs trunk

site-editor

Metric	trunk	`f35b54f`	Diff	Change
load	2900.00 ms	2920.00 ms	+20.00 ms	🔴 0.7%

site-startup

Metric	trunk	`f35b54f`	Diff	Change
siteCreation	7095.00 ms	7089.00 ms	-6.00 ms	🟢 -0.1%
siteStartup	3939.00 ms	3945.00 ms	+6.00 ms	🔴 0.2%

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change

ivan-ottinger · 2026-01-16T17:16:46Z

Thank you for your review and suggestions, Kat & Wojtek! I have made some of the changes and will continue next week. I have set the PR back to draft and will let you know when it will be ready for review agian.

ivan-ottinger · 2026-01-20T11:13:27Z

I have updated the UI and also included the Blueprint loaded from URL message:

Car service site
Blueprint installs X plugins, Y themes, and runs Z blocks of PHP code.
[Blueprint loaded from URL]

For this case where the description isn't available I have created a dedicated task for this change: STU-1224.

wojtekn

Looks good.

Do we need a "Blueprint selected" header for anything? Or could we replace this header content with blueprintTitle value?

Also, could we update jsbin with content that allows us to easily test all possible cases?

wojtekn · 2026-01-20T13:19:54Z

-					<Icon icon={ check } size={ 24 } className="text-green-600" />
-					<Text className="text-xl font-medium text-gray-900">{ __( 'Blueprint selected' ) }</Text>
-					<Text className="text-base font-medium text-gray-900 max-w-md px-4" weight={ 400 }>
-						{ blueprintTitle }


I'm unsure if this came up before, but should we filter/sanitize that data?

I would say that in this case a clamp on the length should be enough. I have added it in 2b244d3.

The Blueprint JSON also gets validated before we get title and description out of it.

Yep, React escapes any tags included in those, but we could consider some sanitization, too.

ivan-ottinger · 2026-01-20T15:29:13Z

Do we need a "Blueprint selected" header for anything? Or could we replace this header content with blueprintTitle value?

I like it there - in relation to the checkmark icon on the side. It is based on the Figma design. I am also open to replacing it with Blueprint title. @Marinatsu what do you think? Here's how it can look like:

Also, could we update jsbin with content that allows us to easily test all possible cases?

Yes, we can update that to have more possibilities for testing in one place.

wojtekn · 2026-01-20T16:00:28Z

@ivan-ottinger I think it's much better without that static title. It's cleaner, closer to the import UI, and thanks to "Start from Blueprint" screen header it's still clear where user lands:

ivan-ottinger · 2026-01-20T16:07:53Z

@ivan-ottinger I think it's much better without that static title. It's cleaner, closer to the import UI, and thanks to "Start from Blueprint" screen header it's still clear where user lands:

Sounds good. 👍🏼 I have removed the extra text in e22f508.

ivan-ottinger · 2026-01-20T17:22:16Z

Yes, we can update that to have more possibilities for testing in one place.

I have added more testing deeplinks in https://output.jsbin.com/kulaqijega to test this PR more easily. We can extend that later for the PR where we add parsing for JSON contents and could also consider a different place than jsbin for those test deeplinks. 🙂

wojtekn · 2026-01-21T10:56:56Z

All cases look great. Thanks for updating jsbin - let's use this one for subsequent PRs that target this feature.

ivan-ottinger self-assigned this Jan 15, 2026

ivan-ottinger requested a review from a team January 15, 2026 11:40

ivan-ottinger marked this pull request as ready for review January 15, 2026 11:40

katinthehatsite reviewed Jan 15, 2026

View reviewed changes

ivan-ottinger force-pushed the update/blueprint-deeplink-step-design branch from 28d2fd5 to 24f60a9 Compare January 16, 2026 16:23

ivan-ottinger marked this pull request as draft January 16, 2026 17:15

ivan-ottinger force-pushed the update/blueprint-deeplink-step-design branch from 22d06ef to 2bc8be5 Compare January 20, 2026 09:36

ivan-ottinger marked this pull request as ready for review January 20, 2026 11:07

wojtekn reviewed Jan 20, 2026

View reviewed changes

ivan-ottinger added 10 commits January 21, 2026 10:47

Remove Blueprint meta default values

a810aef

Update Blueprint deeplink step design

238766f

Update Blueprint deeplink title fallback logic

e63b155

Update Blueprint deeplink title fallback text

3aa26c8

Add "Blueprint loaded from URL" footer

f2cc069

Update footer padding and alignment

bece5c6

Update Blueprint footer text color

4befcc8

Update Blueprint description text alignment

8b40a99

Update minimum width and alignment

56e4c99

Update container alignment

0b50df8

ivan-ottinger added 2 commits January 21, 2026 10:47

Remove Blueprint selected text

066dad2

Update Blueprint deeplink title text alignment and clamping

f35b54f

ivan-ottinger force-pushed the update/blueprint-deeplink-step-design branch from 2b244d3 to f35b54f Compare January 21, 2026 09:47

wojtekn approved these changes Jan 21, 2026

View reviewed changes

wojtekn merged commit a3ab522 into trunk Jan 21, 2026
10 checks passed

wojtekn deleted the update/blueprint-deeplink-step-design branch January 21, 2026 11:41

Conversation

ivan-ottinger commented Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related issues

Proposed Changes

Testing Instructions

Pre-merge Checklist

Uh oh!

wojtekn commented Jan 15, 2026

Uh oh!

ivan-ottinger commented Jan 15, 2026

Uh oh!

katinthehatsite Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

katinthehatsite left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wojtekn commented Jan 16, 2026

Uh oh!

wpmobilebot commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Performance Test Results

site-editor

site-startup

Uh oh!

ivan-ottinger commented Jan 16, 2026

Uh oh!

ivan-ottinger commented Jan 20, 2026

Uh oh!

wojtekn left a comment

Choose a reason for hiding this comment

Uh oh!

wojtekn Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

ivan-ottinger Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

wojtekn Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

ivan-ottinger commented Jan 20, 2026

Uh oh!

wojtekn commented Jan 20, 2026

Uh oh!

ivan-ottinger commented Jan 20, 2026

Uh oh!

ivan-ottinger commented Jan 20, 2026

Uh oh!

wojtekn commented Jan 21, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ivan-ottinger commented Jan 15, 2026 •

edited

Loading

katinthehatsite left a comment •

edited

Loading

wpmobilebot commented Jan 16, 2026 •

edited

Loading