Skip to content

Commit 7d61922

Browse files
kaeizenkaeizen
committed
layout adjustment
1 parent cfefc88 commit 7d61922

File tree

2 files changed

+73
-124
lines changed

2 files changed

+73
-124
lines changed

‎src/welcome/getting-started.js‎

Lines changed: 58 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -112,141 +112,89 @@ const EssentialsCard = ( {
112112
</div>
113113
}
114114

115+
const QUICK_BUTTONS = [ {
116+
id: 'design-library',
117+
icon: addTemplateIcon,
118+
title: __( 'Build Pages in Seconds', i18n ),
119+
description: __( 'Jump straight into our Design Library and insert polished, pre-built sections; no more blank-page overwhelm.', i18n ),
120+
link: `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=design-library`,
121+
cta: __( 'Build Now', i18n ),
122+
}, {
123+
id: 'blocks',
124+
icon: blockDefaultIcon,
125+
title: __( 'Stackable Block Settings', i18n ),
126+
description: __( 'Learn how to use Stackable blocks and get more out of them.', i18n ),
127+
link: `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=blocks`,
128+
cta: __( 'Use Blocks', i18n ),
129+
}, {
130+
id: 'design-system',
131+
icon: stylesIcon,
132+
title: __( 'Apply Global Styles Instantly', i18n ),
133+
description: __( 'Set your brand\'s colors, fonts, and spacing once in the Design System; every Stackable block updates automatically.', i18n ),
134+
link: `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=design-system`,
135+
cta: __( 'Try Now', i18n ),
136+
}, {
137+
id: 'site-kit',
138+
icon: scheduledIcon,
139+
title: __( 'Start with a Complete Site Kit', i18n ),
140+
description: __( 'Pick a ready-made website template to kickstart your project — fully built layouts and styles, just swap in your content.', i18n ),
141+
link: '/wp-admin/post-new.php?post_type=page',
142+
cta: __( 'Select Kit', i18n ),
143+
style: { display: 'none' },
144+
}, {
145+
id: 'design-system-picker',
146+
icon: brushIcon,
147+
title: __( 'Pre-set Design Systems', i18n ),
148+
description: __( 'Browse curated Design System presets — apply a professional look instantly without building from scratch.', i18n ),
149+
link: '/wp-admin/post-new.php?post_type=page',
150+
cta: __( 'Pick A System', i18n ),
151+
style: { display: 'none' },
152+
} ]
153+
115154
export const GettingStarted = () => {
116155
return <>
117156

118157
<div className="s-body">
119158
<div className="s-getting-started__centered">
120159
<div className="tag">{ __( 'Welcome to Stackable', i18n ) }</div>
121-
{ /* <h2 className="title">{ __( 'Let\'s build something amazing!', i18n ) }</h2> */ }
122160
<h2 className="title">{ __( 'Welcome to Your New Block Editor Workflow!', i18n ) }</h2>
123161
</div>
124162
<div className="s-getting-started__quick-start-wrapper">
125-
126-
<div className="s-quick-buttons-wrapper">
127-
<div className="s-quick-buttons-arrow">
128-
<SVGQuickButtonsArrow />
129-
<span>{ __( 'Quick Start', i18n ) }</span>
130-
</div>
131-
<div className="s-card">
132-
<div className="s-quick-button-icon">
133-
<Icon icon={ addTemplateIcon } />
134-
</div>
135-
<div className="s-quick-button-description">
136-
<h3>{ __( 'Build Pages in Seconds', i18n ) }</h3>
137-
<p>{ __( 'Jump straight into our Design Library and insert polished, pre-built sections; no more blank-page overwhelm.', i18n ) }</p>
138-
</div>
139-
<div className="s-quick-button-button">
140-
<a
141-
href={ `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=design-library` }
142-
className={ classNames( 's-button s-secondary-button uppercase', {
143-
's-button--checked': guidedTourStates?.includes( 'design-library' ),
144-
} ) }
145-
>
146-
<span className="s-quick-button-toggle-indicator">
147-
<SVGCheck />
148-
</span>
149-
{ __( 'Build Now', i18n ) }
150-
</a>
151-
</div>
152-
</div>
153-
154-
<div className="s-card">
155-
<div className="s-quick-button-icon">
156-
<Icon icon={ blockDefaultIcon } />
157-
</div>
158-
<div className="s-quick-button-description">
159-
<h3>{ __( 'Stackable Block Settings', i18n ) }</h3>
160-
<p>{ __( 'Learn how to use Stackable blocks and get more out of them.', i18n ) }</p>
161-
</div>
162-
<div className="s-quick-button-button">
163-
<a
164-
href={ `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=blocks` }
165-
className={ classNames( 's-button s-secondary-button uppercase', {
166-
's-button--checked': guidedTourStates?.includes( 'blocks' ),
167-
} ) }
168-
>
169-
<span className="s-quick-button-toggle-indicator">
170-
<SVGCheck />
171-
</span>
172-
{ __( 'Use Blocks', i18n ) }
173-
</a>
174-
</div>
163+
<div className="s-getting-started-video s-card">
164+
<div className="s-video-wrapper s-card-top">
165+
<iframe className="s-video" src="https://www.youtube.com/embed/WP2LHxGulps" title={ __( 'Getting Started', i18n ) } allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;" allowFullScreen></iframe>
175166
</div>
176-
177-
<div className="s-card">
167+
<h3>{ __( 'Getting Started with Stackable', i18n ) }</h3>
168+
<p>{ __( 'Watch this video to get started with Stackable in within 5 minutes.', i18n ) }</p>
169+
</div>
170+
{ QUICK_BUTTONS.map( ( item, i ) => {
171+
return <div className="s-card" key={ i } style={ item.style ?? {} }>
172+
{ i === 0 && <div className="s-quick-buttons-arrow">
173+
<SVGQuickButtonsArrow />
174+
<span>{ __( 'Quick Start', i18n ) }</span>
175+
</div> }
178176
<div className="s-quick-button-icon">
179-
<Icon icon={ stylesIcon } />
177+
<Icon icon={ item.icon } />
180178
</div>
181179
<div className="s-quick-button-description">
182-
<h3>{ __( 'Apply Global Styles Instantly', i18n ) }</h3>
183-
<p>{ __( 'Set your brand\'s colors, fonts, and spacing once in the Design System; every Stackable block updates automatically.', i18n ) }</p>
180+
<h3>{ item.title }</h3>
181+
<p>{ item.description }</p>
184182
</div>
185183
<div className="s-quick-button-button">
186184
<a
187-
href={ `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=design-system` }
185+
href={ item.link }
188186
className={ classNames( 's-button s-secondary-button uppercase', {
189-
's-button--checked': guidedTourStates?.includes( 'design-system' ),
187+
's-button--checked': guidedTourStates?.includes( item.id ),
190188
} ) }
191189
>
192190
<span className="s-quick-button-toggle-indicator">
193191
<SVGCheck />
194192
</span>
195-
{ __( 'Try Now', i18n ) }
193+
{ item.cta }
196194
</a>
197195
</div>
198196
</div>
199-
200-
{ /* TODO: Hide this for now */ }
201-
<div className="s-card" style={ { display: 'none' } }>
202-
<div className="s-quick-button-icon">
203-
<Icon icon={ scheduledIcon } />
204-
</div>
205-
<div className="s-quick-button-description">
206-
<h3>{ __( 'Start with a Complete Site Kit', i18n ) }</h3>
207-
<p>{ __( 'Pick a ready-made website template to kickstart your project — fully built layouts and styles, just swap in your content.', i18n ) }</p>
208-
</div>
209-
<div className="s-quick-button-button">
210-
<a
211-
href="/wp-admin/post-new.php?post_type=page"
212-
className={ classNames( 's-button s-secondary-button uppercase', {
213-
's-button--checked': guidedTourStates?.includes( 'site-kit' ),
214-
} ) }
215-
>
216-
{ __( 'Select Kit', i18n ) }
217-
</a>
218-
</div>
219-
</div>
220-
221-
{ /* TODO: Hide this for now */ }
222-
<div className="s-card" style={ { display: 'none' } }>
223-
<div className="s-quick-button-icon">
224-
<Icon icon={ brushIcon } />
225-
</div>
226-
<div className="s-quick-button-description">
227-
<h3>{ __( 'Pre-set Design Systems', i18n ) }</h3>
228-
<p>{ __( 'Browse curated Design System presets — apply a professional look instantly without building from scratch.', i18n ) }</p>
229-
</div>
230-
<div className="s-quick-button-button">
231-
<a
232-
href="/wp-admin/post-new.php?post_type=page"
233-
className={ classNames( 's-button s-secondary-button uppercase', {
234-
's-button--checked': guidedTourStates?.includes( 'design-system-picker' ),
235-
} ) }
236-
>
237-
{ __( 'Pick A System', i18n ) }
238-
</a>
239-
</div>
240-
</div>
241-
</div>
242-
243-
<div className="s-getting-started-video s-card">
244-
<div className="s-video-wrapper s-card-top">
245-
<iframe className="s-video" src="https://www.youtube.com/embed/WP2LHxGulps" title={ __( 'Getting Started', i18n ) } allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;" allowFullScreen></iframe>
246-
</div>
247-
<h3>{ __( 'Getting Started with Stackable', i18n ) }</h3>
248-
<p>{ __( 'Watch this video to get started with Stackable in within 5 minutes.', i18n ) }</p>
249-
</div>
197+
} ) }
250198
</div>
251199

252200
<SVGDivider className="s-divider" />

‎src/welcome/getting-started.scss‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@
194194
justify-content: flex-end;
195195
}
196196

197-
svg {
197+
:not(.s-quick-buttons-arrow) svg {
198198
height: 24px;
199199
width: 24px;
200200
}
@@ -236,7 +236,7 @@ body.settings_page_stackable-getting-started .s-body-container > .s-getting-star
236236
.s-getting-started__quick-start-wrapper {
237237
display: grid;
238238
grid-template-columns: 1fr 1fr;
239-
gap: 40px;
239+
gap: 24px;
240240
margin: 1em 0 64px;
241241
align-items: flex-start;
242242

@@ -245,24 +245,25 @@ body.settings_page_stackable-getting-started .s-body-container > .s-getting-star
245245
border-radius: 16px;
246246
@include s-shadow;
247247
overflow: hidden;
248+
grid-row: 1/4;
249+
grid-column: 2/3;
248250
}
249251

250-
.s-quick-buttons-wrapper {
252+
.s-card:not(.s-getting-started-video) {
251253
position: relative;
252254
display: flex;
253-
flex-direction: column;
255+
flex-direction: row;
256+
justify-content: center;
257+
align-items: center;
254258
gap: 24px;
255-
.s-card {
256-
display: flex;
257-
flex-direction: row;
258-
justify-content: center;
259-
align-items: center;
260-
gap: 24px;
261259

262-
@media screen and (max-width: 1200px) {
263-
flex-direction: column;
264-
align-items: flex-start;
265-
}
260+
@media screen and (max-width: 1200px) {
261+
flex-direction: column;
262+
align-items: flex-start;
263+
}
264+
265+
&:nth-child(2) {
266+
overflow: visible;
266267
}
267268
}
268269
.s-quick-button-icon {

0 commit comments

Comments
 (0)