Skip to content

Improve new onboarding authentication screen #2157

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sejas merged 9 commits into from
Dec 1, 2025
Merged

Improve new onboarding authentication screen #2157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f18cb3b
Update onboarding login screen to explain why is a great decision
sejas Nov 30, 2025
3ddc7d1
Update heading in tests
sejas Nov 30, 2025
2399a9a
fix tests
sejas Dec 1, 2025
d1668b9
Merge branch 'trunk' of github.com:Automattic/studio into update/stu-…
sejas Dec 1, 2025
79bb694
Update texts
sejas Dec 1, 2025
acf8bb6
Make the text in the screen the same color
sejas Dec 1, 2025
ac258b9
Adapt onboarding e2e selector to support trunk and this branch
sejas Dec 1, 2025
d2e6d52
Merge branch 'trunk' of github.com:Automattic/studio into update/stu-…
sejas Dec 1, 2025
73c1308
Merge branch 'trunk' of github.com:Automattic/studio into update/stu-…
sejas Dec 1, 2025
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion e2e/page-objects/onboarding.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ export default class Onboarding {
}

get heading() {
return this.locator.getByRole( 'heading', { name: 'Connect to your WordPress.com account' } );
return this.locator.getByRole( 'heading', {
name: /Connect to your WordPress.com account|Connect your WordPress.com account/,
} );
}

async completeOnboarding( options?: { customSiteName?: string; customFolderName?: string } ) {
Expand Down
6 changes: 3 additions & 3 deletions src/components/tests/onboarding.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ describe( 'Onboarding Component', () => {

it( 'renders onboarding screen correctly', () => {
const { getByText } = renderWithProvider( <Onboarding /> );
expect( getByText( 'Connect to your WordPress.com account' ) ).toBeVisible();
expect( getByText( 'Connect your WordPress.com account' ) ).toBeVisible();
expect( getByText( 'Skip →' ) ).toBeVisible();
} );

Expand All @@ -80,7 +80,7 @@ describe( 'Onboarding Component', () => {
renderWithProvider( <Onboarding /> );
const user = userEvent.setup();

const logIn = screen.getByRole( 'button', { name: 'Log in ↗' } );
const logIn = screen.getByRole( 'button', { name: 'Log in to WordPress.com ↗' } );
await user.hover( logIn );

expect( screen.getByText( "You're currently offline." ) ).toBeInTheDocument();
Expand All @@ -92,7 +92,7 @@ describe( 'Onboarding Component', () => {
renderWithProvider( <Onboarding /> );
const user = userEvent.setup();

const logIn = screen.getByRole( 'button', { name: 'Log in ↗' } );
const logIn = screen.getByRole( 'button', { name: 'Log in to WordPress.com ↗' } );
await user.hover( logIn );

expect( screen.queryByText( "You're currently offline." ) ).not.toBeInTheDocument();
Expand Down
34 changes: 27 additions & 7 deletions src/modules/onboarding/components/connect-to-wpcom.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { __experimentalHeading as Heading } from '@wordpress/components';
import { __experimentalHeading as Heading, Icon } from '@wordpress/components';
import { check } from '@wordpress/icons';
import { useI18n } from '@wordpress/react-i18n';
import { ArrowIcon } from 'src/components/arrow-icon';
import Button from 'src/components/button';
Expand All @@ -16,11 +17,30 @@ export function OnboardingConnectToWpcom( { onSkip }: { onSkip: () => void } ) {

return (
<div className="h-full flex flex-col">
<div className="flex flex-col items-center gap-6 my-auto">
<Heading className="text-[32px] text-gray-900 text-center px-10" weight={ 500 }>
{ __( 'Connect to your WordPress.com account' ) }
<div className="flex flex-col gap-4 my-auto text-pretty">
<Heading className="a8c-subtitle text-xl">
{ __( 'Connect your WordPress.com account' ) }
</Heading>

<div className="text-a8c-gray-70 a8c-body">
{ __(
'Log in with WordPress.com to unlock the full power of WordPress Studio. By signing in, you get access to features that help you build faster, test safely, and work seamlessly across environments:'
) }
</div>

<div>
{ [
__( 'Share preview sites with clients and team members.' ),
__( 'Seamlessly sync with WordPress.com and Pressable sites.' ),
__( 'Get help from Studio Assistant.' ),
].map( ( text ) => (
<div key={ text } className="text-a8c-gray-70 a8c-body flex items-center">
<Icon className="fill-a8c-blue-50 me-2 shrink-0" icon={ check } />
{ text }
</div>
) ) }
</div>

<Tooltip disabled={ ! isOffline } icon={ offlineIcon } text={ offlineMessage }>
<Button
aria-description={ isOffline ? offlineMessage : '' }
Expand All @@ -33,7 +53,7 @@ export function OnboardingConnectToWpcom( { onSkip }: { onSkip: () => void } ) {
authenticate();
} }
>
{ __( 'Log in' ) }
{ __( 'Log in to WordPress.com' ) }
<ArrowIcon />
</Button>
</Tooltip>
Expand All @@ -44,7 +64,7 @@ export function OnboardingConnectToWpcom( { onSkip }: { onSkip: () => void } ) {
text={ offlineMessage }
placement="bottom-start"
>
<span>
<div className="text-a8c-gray-70 a8c-body">
{ __( 'New to WordPress.com?' ) }{ ' ' }
<Button
aria-description={ isOffline ? offlineMessage : '' }
Expand All @@ -60,7 +80,7 @@ export function OnboardingConnectToWpcom( { onSkip }: { onSkip: () => void } ) {
{ __( 'Create a free account' ) }
<ArrowIcon />
</Button>
</span>
</div>
</Tooltip>
</div>

Expand Down