Add Learn more component and use it for blueprint and CLI by nightnei · Pull Request #2317 · Automattic/studio

nightnei · 2025-12-24T21:11:39Z

Related issues

Fixes STU-1171

Proposed Changes

With this PR, we are adding "Learn more" component, so that it will be used across Studio for consistency.
We are starting with Blueprints and CLI texts.

Testing Instructions

Click "Add site" -> "Start from a blueprint"
Assert that you see
Close popup and open Studio's Settings (top right corner of the window)
Assert that Learn more still looks good
Open "Import / Export" tab and assert that Learn more button looks good
Open "AI Assistant" tab and assert that Learn more button looks good
Open "Add site -> Create a site -> Advanced settings" and assert that Learn more button looks good
Open "Add site -> Import from a backup" and assert that Learn more button looks good
Open site settings and click "Edit site" button and assert that Learn more button looks good
Open "Help" -> "What's new" and assert that it looks good

github-actions · 2025-12-24T21:33:02Z

📊 Performance Test Results

Comparing 55977fa vs trunk

site-editor

Metric	trunk	`55977fa`	Diff	Change
load	5963.00 ms	6520.00 ms	+557.00 ms	🔴 9.3%

site-startup

Metric	trunk	`55977fa`	Diff	Change
siteCreation	9073.00 ms	16124.00 ms	+7051.00 ms	🔴 77.7%
siteStartup	3956.00 ms	3957.00 ms	+1.00 ms	🔴 0.0%

Results are median values from multiple test runs.

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

gavande1 · 2025-12-26T06:35:22Z

Thank you for working on the component, @nightnei. I have tested it, and it looks as described. I think we should wait for Marina's response regarding the button color and arrow icon. Ideally, we should update all "Learn More" buttons across the app to use the newly built component.

wojtekn · 2025-12-29T09:03:29Z

Looks good.

The only small thing I see is that now in the default window size there is not enough room for the boxes, so the scrollbar appears.

We could consider reducing spacing somewhere, e.g., in the footer container, from p-6 to p-5, or to p-6 pt-5 pb-5 if we are concerned about the change in side whitespace. Actually, p-5 could work fine, too, as that way, we would align the Continue button with all other elements.

katinthehatsite · 2025-12-29T09:34:06Z

Ideally, we should update all "Learn More" buttons across the app to use the newly built component.

+1 to this one. I think it makes sense to update this everywhere if we are introducing a new component.

sejas

@nightnei, great work! I like the new LearnMoreLink component. That will help standardize its look and feel and usage.

I suggest to keep the link inside the translation to keep the order of text and then learn more link, so RTL languages will display it in the right order too.

sejas · 2025-12-29T14:20:10Z

-								<Button variant="link" onClick={ () => getIpcApi().openURL( AI_GUIDELINES_URL ) } />
-							),
-						} ) }
+						{ __( 'Powered by experimental AI.' ) } <LearnMoreLink docsLinksKey="a8cAiGuidelines" />


@nightnei , let's keep the createInterpolateElement call. That way it will look better for RTL languages. Something like:

Suggested change

{ __( 'Powered by experimental AI.' ) } <LearnMoreLink docsLinksKey="a8cAiGuidelines" />

{ createInterpolateElement( __( 'Powered by experimental AI. <learn_more_link />' ), {

learn_more_link: <LearnMoreLink docsLinksKey="a8cAiGuidelines" />,

} ) }

Great thought, I will update it 👍

nightnei · 2025-12-29T15:15:43Z

 }

-interface SiteFormProps {
+interface CreateSiteFormProps {


@sejas, JFYI, you suggested to rename it previously in one of my PRs, but I merged it before noticing your suggestion. I had a personal note of your suggestion, to remember and address in some future PR where such change will suite, so addressing it here :)

wojtekn

@nightnei I've noticed that earlier I posted commet about arrow but not submitted that - I did that now.

wojtekn · 2025-12-29T08:51:59Z

+			variant="link"
+		>
+			{ __( 'Learn more' ) }
+			<ArrowIcon />


Let's remove ArrowIcon for consistency for now, and later we can add it everywhere holistically if we decide it's the way to go.

wojtekn

Looks good to merge. We can update screenshots to cover the latest changes, though.

wojtekn · 2025-12-30T11:16:09Z

 		const guideLines = getGuidelinesLink();
 		expect( guideLines ).toBeVisible();
-		expect( guideLines ).toHaveTextContent( 'Powered by experimental AI. Learn more' );
+		expect( guideLines ).toHaveTextContent( 'Powered by experimental AI. Learn more↗' );


Should we remove ↗ here?

sejas

Thanks for keeping the LearnMoreLink inside the translation. I left a comment for the What’s New modal “Learn more” link; I think we can use the new component there too.

sejas · 2025-12-30T11:19:38Z

+					{ learnMoreLabel || (
+						<>
+							{ __( 'Learn more' ) }
+							<ArrowIcon />


Should we use the <LearnMoreLink here? Should we remove the arrow too?

Should we remove the arrow too?

Removed

Should we use the <LearnMoreLink here?

I was thinking about it and even started to implement, but then reverted changes since:

We should use custom URL instead of DocsLinkKey

The text (learnMoreLabel ) can be also custom

I looked at the code and realized that teh custom url and label make the LearnMoreLink quite dificult and they override everythign inside the component, so I decided to keep this place as exception, to keep code simple. I don't have strong preference, but I whould keep it as is till we receive final decision from Marina about the design.

nightnei requested a review from a team December 24, 2025 21:11

nightnei self-assigned this Dec 24, 2025

Add Learn more component and use it for blueprint and CLI

5bbe864

nightnei force-pushed the addBlueprintLearnMoreButton branch from 8d40066 to 5bbe864 Compare December 29, 2025 10:57

nightnei added 5 commits December 29, 2025 11:47

Add a few more places

73f9813

Add a few more places

d9a5cb7

Add a few more places

ddd5428

Fix scroll

93e1664

Fix lint

54cd407

sejas reviewed Dec 29, 2025

View reviewed changes

nightnei commented Dec 29, 2025

View reviewed changes

nightnei added 2 commits December 29, 2025 15:45

Fix RTL

5e87574

Fix

616570a

wojtekn reviewed Dec 30, 2025

View reviewed changes

nightnei added 2 commits December 30, 2025 10:36

Remove arrow

45cf1d1

resolve conflicts

b2e1513

wojtekn approved these changes Dec 30, 2025

View reviewed changes

sejas approved these changes Dec 30, 2025

View reviewed changes

nightnei added 2 commits December 30, 2025 11:21

test: fix

1a88478

revert arrow

55977fa

nightnei merged commit 3d7f22f into trunk Dec 30, 2025
11 checks passed

nightnei deleted the addBlueprintLearnMoreButton branch December 30, 2025 12:07

nightnei mentioned this pull request Jan 5, 2026

Add LearnHow link #2353

Merged

-						{ __( 'Powered by experimental AI.' ) } <LearnMoreLink docsLinksKey="a8cAiGuidelines" />
+{ createInterpolateElement( __( 'Powered by experimental AI. <learn_more_link />' ), {
+	learn_more_link: <LearnMoreLink docsLinksKey="a8cAiGuidelines" />,
+} ) }

Conversation

nightnei commented Dec 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related issues

Proposed Changes

Testing Instructions

Uh oh!

github-actions Bot commented Dec 24, 2025 • edited by wpmobilebot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Performance Test Results

site-editor

site-startup

Uh oh!

gavande1 commented Dec 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wojtekn commented Dec 29, 2025

Uh oh!

katinthehatsite commented Dec 29, 2025

Uh oh!

sejas left a comment

Choose a reason for hiding this comment

Uh oh!

sejas Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

nightnei Dec 29, 2025 • 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!

nightnei Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

wojtekn left a comment

Choose a reason for hiding this comment

Uh oh!

wojtekn Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

wojtekn left a comment

Choose a reason for hiding this comment

Uh oh!

wojtekn Dec 30, 2025

Choose a reason for hiding this comment

Uh oh!

sejas left a comment

Choose a reason for hiding this comment

Uh oh!

sejas Dec 30, 2025

Choose a reason for hiding this comment

Uh oh!

nightnei Dec 30, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

nightnei commented Dec 24, 2025 •

edited

Loading

github-actions Bot commented Dec 24, 2025 •

edited by wpmobilebot

Loading

gavande1 commented Dec 26, 2025 •

edited

Loading

nightnei Dec 29, 2025 •

edited

Loading