Skip to content

Commit 8d91031

Browse files
johnHackworthockham
johnHackworth
authored and
ockham
committed
Gutenboarding: Eyecandy for acquire intent (#37403)
1 parent 41be9dc commit 8d91031

File tree

5 files changed

+252
-87
lines changed

5 files changed

+252
-87
lines changed

‎client/landing/gutenboarding/onboarding-block/edit.tsx‎

Lines changed: 121 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { __ as NO__ } from '@wordpress/i18n';
55
import { Button } from '@wordpress/components';
66
import { isEmpty, map } from 'lodash';
77
import { useDispatch, useSelect } from '@wordpress/data';
8-
import React, { useCallback } from 'react';
9-
8+
import React, { useCallback, useState } from 'react';
9+
import classNames from 'classnames';
1010
/**
1111
* Internal dependencies
1212
*/
@@ -16,86 +16,150 @@ import VerticalSelect from './vertical-select';
1616
import './style.scss';
1717

1818
const siteTypeOptions: Record< SiteType, string > = {
19-
[ SiteType.BLOG ]: NO__( 'with a blog.' ),
20-
[ SiteType.STORE ]: NO__( 'for a store.' ),
21-
[ SiteType.STORY ]: NO__( 'to write a story.' ),
19+
[ SiteType.BLOG ]: NO__( 'with a blog' ),
20+
[ SiteType.BUSINESS ]: NO__( 'for a business' ),
21+
[ SiteType.PORTFOLIO ]: NO__( 'to share a portfolio' ),
22+
[ SiteType.STORE ]: NO__( 'for a store' ),
2223
};
2324

2425
export default function OnboardingEdit() {
26+
const [ lastSelectedQuestion, setLastSelectedQuestion ] = useState( null );
27+
2528
const { siteTitle, siteType, siteVertical } = useSelect( select =>
2629
select( STORE_KEY ).getState()
2730
);
2831

29-
const { resetSiteType, setSiteType, setSiteTitle } = useDispatch( STORE_KEY );
32+
const { setSiteType, setSiteTitle } = useDispatch( STORE_KEY );
3033

3134
const updateTitle = useCallback(
3235
( e: React.ChangeEvent< HTMLInputElement > ) => setSiteTitle( e.target.value ),
3336
[ setSiteTitle ]
3437
);
38+
3539
const updateSiteType = useCallback(
3640
( e: React.ChangeEvent< HTMLInputElement > ) => setSiteType( e.target.value as SiteType ),
3741
[ setSiteType ]
3842
);
3943

44+
const selectSiteType = e => {
45+
updateSiteType( e );
46+
setLastSelectedQuestion( null );
47+
};
48+
49+
const openSiteType = () => {
50+
setLastSelectedQuestion( 'siteType' );
51+
};
52+
53+
const selectSiteVertical = () => {
54+
setLastSelectedQuestion( 'siteVertical' );
55+
};
56+
57+
const selectSiteTitle = () => {
58+
setLastSelectedQuestion( 'siteTitle' );
59+
};
60+
61+
const isSelected = questionType => {
62+
if ( lastSelectedQuestion ) {
63+
return questionType === lastSelectedQuestion;
64+
} else if ( isEmpty( siteType ) ) {
65+
return questionType === 'siteType';
66+
} else if ( isEmpty( siteVertical ) ) {
67+
return questionType === 'siteVertical';
68+
} else if ( questionType === 'siteTitle' ) {
69+
return true;
70+
}
71+
return false;
72+
};
73+
4074
return (
41-
<div className="onboarding-block__questions">
42-
<h2 className="onboarding-block__questions-heading">
43-
{ NO__( "Let's set up your website – it takes only a moment." ) }
44-
</h2>
45-
46-
<div className="onboarding-block__question">
47-
<span>{ NO__( 'I want to create a website ' ) }</span>
48-
{ ! isFilledFormValue( siteType ) ? (
49-
<ul className="onboarding-block__multi-question">
50-
{ map( siteTypeOptions, ( label, value ) => (
51-
<li key={ value }>
52-
<label>
53-
<input
54-
name="onboarding_site_type"
55-
onChange={ updateSiteType }
56-
type="radio"
57-
value={ value }
58-
/>
59-
<span className="onboarding-block__multi-question-choice">{ label }</span>
60-
</label>
61-
</li>
62-
) ) }
63-
</ul>
64-
) : (
65-
<div className="onboarding-block__multi-question">
66-
<button className="onboarding-block__question-answered" onClick={ resetSiteType }>
67-
{ siteTypeOptions[ siteType ] }
68-
</button>
75+
<div className="onboarding-block__acquire-intent">
76+
<div className="onboarding-block__questions">
77+
<h2 className="onboarding-block__questions-heading">
78+
{ isEmpty( siteType ) && NO__( "Let's set up your website – it takes only a moment." ) }
79+
</h2>
80+
81+
<div
82+
className={ classNames( {
83+
'onboarding-block__question': true,
84+
selected: isSelected( 'siteType' ),
85+
} ) }
86+
>
87+
<span>
88+
{ isEmpty( siteType )
89+
? NO__( 'I want to create a website ' )
90+
: NO__( 'Setting up a website ' ) }
91+
</span>
92+
{ isSelected( 'siteType' ) ? (
93+
<ul className="onboarding-block__multi-question">
94+
{ map( siteTypeOptions, ( label, value ) => (
95+
<li key={ value } className={ value === siteType ? 'selected' : '' }>
96+
<label>
97+
<input
98+
name="onboarding_site_type"
99+
onChange={ selectSiteType }
100+
type="radio"
101+
value={ value }
102+
/>
103+
<span className="onboarding-block__multi-question-choice">{ label }</span>
104+
</label>
105+
</li>
106+
) ) }
107+
</ul>
108+
) : (
109+
<div className="onboarding-block__multi-question">
110+
<button className="onboarding-block__question-answered" onClick={ openSiteType }>
111+
{ siteTypeOptions[ siteType ] }
112+
</button>
113+
<span>.</span>
114+
</div>
115+
) }
116+
</div>
117+
118+
{ ( isFilledFormValue( siteType ) || ! isEmpty( siteVertical ) ) && (
119+
<div
120+
className={ classNames( {
121+
'onboarding-block__question': true,
122+
selected: isSelected( 'siteVertical' ),
123+
} ) }
124+
>
125+
<span>{ NO__( 'My site is about' ) }</span>
126+
<div className="onboarding-block__multi-question">
127+
<VerticalSelect
128+
onClick={ selectSiteVertical }
129+
forceHideSuggestions={ ! isSelected( 'siteVertical' ) }
130+
inputClass="onboarding-block__question-input"
131+
/>
132+
</div>
69133
</div>
70134
) }
71-
</div>
72135

73-
{ ( isFilledFormValue( siteType ) || ! isEmpty( siteVertical ) ) && (
74-
<div className="onboarding-block__question">
75-
<span>{ NO__( 'My site is about' ) }</span>
76-
<div className="onboarding-block__multi-question">
77-
<VerticalSelect inputClass="onboarding-block__question-input" />
136+
{ ( ! isEmpty( siteVertical ) || siteTitle ) && (
137+
<div
138+
className={ classNames( {
139+
'onboarding-block__question': true,
140+
selected: isSelected( 'siteTitle' ),
141+
} ) }
142+
>
143+
<label>
144+
<span>{ NO__( "It's called" ) }</span>
145+
<input
146+
className="onboarding-block__question-input bbb"
147+
onClick={ selectSiteTitle }
148+
onChange={ updateTitle }
149+
value={ siteTitle }
150+
/>
151+
</label>
78152
</div>
79-
</div>
80-
) }
81-
82-
{ ( ! isEmpty( siteVertical ) || siteTitle ) && (
83-
<>
84-
<label className="onboarding-block__question">
85-
<span>{ NO__( "It's called" ) }</span>
86-
<input
87-
className="onboarding-block__question-input"
88-
onChange={ updateTitle }
89-
value={ siteTitle }
90-
/>
91-
</label>
92-
{ ! siteTitle && (
153+
) }
154+
155+
{ ! isEmpty( siteVertical ) && (
156+
<div className="onboarding-block__footer">
93157
<Button className="onboarding-block__question-skip" isLink>
94158
{ NO__( "Don't know yet" ) } →
95159
</Button>
96-
) }
97-
</>
98-
) }
160+
</div>
161+
) }
162+
</div>
99163
</div>
100164
);
101165
}

‎client/landing/gutenboarding/onboarding-block/style.scss‎

Lines changed: 79 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,98 @@
66
display: none;
77
}
88
}
9+
.onboarding-block__acquire-intent {
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
margin-top: 40px;
14+
position: fixed;
15+
16+
top: 20%;
17+
left: 0%;
18+
width: 100%;
19+
}
20+
21+
.onboarding-block__questions {
22+
display: inline-block;
23+
min-width: 800px;
24+
}
925

1026
.onboarding-block__questions-heading {
11-
font-size: 1.5em;
12-
line-height: 2em;
1327
margin-bottom: 10px;
28+
text-align: left;
29+
font-size: 20px;
30+
}
31+
32+
.gutenboarding-block-list .components-form-token-field,
33+
.onboarding-block__question.selected {
34+
font-size: 40px;
35+
margin-top: 18px;
36+
margin-bottom: 28px;
37+
38+
&:first-of-type {
39+
margin-top: 0;
40+
}
41+
42+
&:last-of-type {
43+
margin-bottom: 0;
44+
}
1445
}
1546

1647
.gutenboarding-block-list .components-form-token-field,
1748
.onboarding-block__question {
1849
display: flex;
19-
font-size: 2em;
20-
line-height: 2.1em;
50+
font-size: 28px;
2151
margin-bottom: 10px;
52+
transition-property: 'font-size';
53+
transition-duration: 0.25s;
54+
transition-timing-function: 'linear';
55+
transition-delay: 0;
2256

23-
> * {
24-
margin: 0 0.5em 0 0;
25-
}
2657
}
2758

2859
.onboarding-block__multi-question {
2960
list-style: none;
3061
margin: 0;
3162
padding: 0;
3263

64+
label {
65+
margin-bottom: 36px;
66+
display: inline-block;
67+
}
68+
69+
label::after {
70+
content: '✓';
71+
margin-left: 8px;
72+
opacity: 0;
73+
font-size: 40px;
74+
transition-property: opacity, color;
75+
transition-duration: 0.3s;
76+
transition-timing-function: 'linear';
77+
transition-delay: 0;
78+
79+
}
80+
81+
li.selected label::after {
82+
opacity: 1;
83+
color: $light-gray-800;
84+
}
85+
86+
li.selected label:hover::after,
87+
label:hover::after {
88+
opacity: 1;
89+
color: var( --studio-jetpack-green-30 );
90+
}
91+
3392
.onboarding-block__question-answered,
3493
.onboarding-block__multi-question-choice {
35-
border-bottom: 3px solid $light-gray-500;
94+
border-bottom: 3px solid transparent;
3695
cursor: pointer;
96+
margin: 0 0 0 0.2em;
97+
transition-property: border-color;
98+
transition-duration: 0.3s;
99+
transition-timing-function: 'linear';
100+
transition-delay: 0;
37101

38102
&:hover {
39103
border-color: $blue-medium-highlight;
@@ -69,7 +133,7 @@
69133
display: inline-block;
70134
font-size: inherit;
71135
line-height: inherit;
72-
margin: 0;
136+
margin: 0 0 0 0.2em;
73137
padding: 0;
74138
color: $blue-medium-900;
75139

@@ -85,10 +149,15 @@
85149
}
86150
}
87151

152+
.onboarding-block__footer {
153+
text-align: right;
154+
}
155+
88156
.components-button.is-link.onboarding-block__question-skip {
89157
color: $dark-gray-500;
90-
font-size: 1.5em;
158+
font-size: 20px;
91159
line-height: 2em;
92160
margin: 10px 0;
93161
text-decoration: none;
162+
position: relative;
94163
}

0 commit comments

Comments
 (0)