Skip to content

Commit 6605479

Browse files
kaeizenkaeizen
committed
add desc and tooltips
1 parent c55a6fc commit 6605479

File tree

3 files changed

+92
-15
lines changed

3 files changed

+92
-15
lines changed

‎src/plugins/global-settings/buttons-and-icons/index.js‎

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,10 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-buttons-and-
9999
text={ __( 'Reset All', i18n ) }
100100
/>
101101

102-
<LayoutSettings title={ __( 'Buttons', i18n ) }>
102+
<LayoutSettings
103+
title={ __( 'Buttons', i18n ) }
104+
description={ __( 'These styles are applied to Button Blocks.', i18n ) }
105+
>
103106
<AdvancedRangeControl
104107
label={ __( 'Min. Button Height', i18n ) }
105108
responsive="all"
@@ -131,6 +134,11 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-buttons-and-
131134
placeholderRight="16"
132135
hasTabletValue={ getHasDeviceValue( '--stk-button-padding', 'tablet' ) }
133136
hasMobileValue={ getHasDeviceValue( '--stk-button-padding', 'mobile' ) }
137+
helpTooltip={ {
138+
// TODO: Add a working video
139+
title: __( 'Button padding', i18n ),
140+
description: __( 'Adjusts the space between the button text and button borders', i18n ),
141+
} }
134142
/>
135143
<AdvancedToolbarControl
136144
label={ __( 'Borders', i18n ) }
@@ -194,6 +202,10 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-buttons-and-
194202
left={ getValue( '--stk-button-border-radius', STATES.RESPONSIVE )?.left }
195203
hasTabletValue={ getHasDeviceValue( '--stk-button-border-radius', 'tablet' ) }
196204
hasMobileValue={ getHasDeviceValue( '--stk-button-border-radius', 'mobile' ) }
205+
helpTooltip={ {
206+
video: 'general-border-radius',
207+
description: __( 'Adjusts the radius of block corners to make them more rounded', i18n ),
208+
} }
197209
/>
198210
<ShadowControl
199211
label={ __( 'Shadow / Outline', i18n ) }
@@ -254,10 +266,10 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-buttons-and-
254266
/>
255267
</LayoutSettings>
256268

257-
<LayoutSettings title={ __( 'Icon Buttons', i18n ) }>
258-
<p>
259-
{ __( 'These are additional settings that apply to Icon Button Blocks.', i18n ) }
260-
</p>
269+
<LayoutSettings
270+
title={ __( 'Icon Buttons', i18n ) }
271+
description={ __( 'These are additional settings that apply to Icon Button Blocks.', i18n ) }
272+
>
261273
<FourRangeControl
262274
label={ __( ' Button Padding', i18n ) }
263275
placeholderTop="12"
@@ -278,10 +290,17 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-buttons-and-
278290
onChange={ value => onChange( '--stk-icon-button-padding', value, STATES.RESPONSIVE ) }
279291
hasTabletValue={ getHasDeviceValue( '--stk-icon-button-padding', 'tablet' ) }
280292
hasMobileValue={ getHasDeviceValue( '--stk-icon-button-padding', 'mobile' ) }
281-
293+
helpTooltip={ {
294+
// TODO: Add a working video
295+
title: __( 'Button padding', i18n ),
296+
description: __( 'Adjusts the space between the button text and button borders', i18n ),
297+
} }
282298
/>
283299
</LayoutSettings>
284-
<LayoutSettings title={ __( 'Icon List', i18n ) }>
300+
<LayoutSettings
301+
title={ __( 'Icon List', i18n ) }
302+
description={ __( 'These styles are applied to Icon List Blocks.', i18n ) }
303+
>
285304
<AdvancedRangeControl
286305
label={ __( 'Icon Size', i18n ) }
287306
min={ 0 }
@@ -329,7 +348,10 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-buttons-and-
329348
/>
330349
</LayoutSettings>
331350

332-
<LayoutSettings title={ __( 'Icons', i18n ) }>
351+
<LayoutSettings
352+
title={ __( 'Icons', i18n ) }
353+
description={ __( 'These styles are applied to Icon Blocks.', i18n ) }
354+
>
333355
<AdvancedRangeControl
334356
label={ __( 'Icon Size', i18n ) }
335357
responsive="all"

‎src/plugins/global-settings/spacing-and-borders/index.js‎

Lines changed: 61 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,10 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-spacing-and-
100100
text={ __( 'Reset All', i18n ) }
101101
/>
102102

103-
<LayoutSettings title={ __( 'Margins', i18n ) }>
103+
<LayoutSettings
104+
title={ __( 'Margins', i18n ) }
105+
description={ __( 'These styles are applied to all Stackable Blocks.', i18n ) }
106+
>
104107
<AdvancedRangeControl
105108
label={ __( 'Block Margin Bottom', i18n ) }
106109
responsive="all"
@@ -114,10 +117,17 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-spacing-and-
114117
onChange={ value => onChange( '--stk-block-margin-bottom', value, STATES.RESPONSIVE ) }
115118
hasTabletValue={ getHasDeviceValue( '--stk-block-margin-bottom', 'tablet' ) }
116119
hasMobileValue={ getHasDeviceValue( '--stk-block-margin-bottom', 'mobile' ) }
120+
helpTooltip={ {
121+
video: 'advanced-block-margin',
122+
description: __( 'Sets the block margin bottom, i.e. the space outside the block between the block border and the next block.', i18n ),
123+
} }
117124
/>
118125
</LayoutSettings>
119126

120-
<LayoutSettings title={ __( 'Columns', i18n ) }>
127+
<LayoutSettings
128+
title={ __( 'Columns', i18n ) }
129+
description={ __( 'These styles are applied to blocks with Inner Columns.', i18n ) }
130+
>
121131
<AdvancedRangeControl
122132
label={ __( ' Inner Column Spacing', i18n ) }
123133
responsive="all"
@@ -131,6 +141,10 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-spacing-and-
131141
onChange={ value => onChange( '--stk-column-margin', value, STATES.RESPONSIVE ) }
132142
hasTabletValue={ getHasDeviceValue( '--stk-column-margin', 'tablet' ) }
133143
hasMobileValue={ getHasDeviceValue( '--stk-column-margin', 'mobile' ) }
144+
helpTooltip={ {
145+
// Add a working video
146+
description: __( 'Sets column paddings, the space inside the block between the block elements and the column container border', i18n ),
147+
} }
134148
/>
135149
<AdvancedRangeControl
136150
label={ __( 'Column Gap', i18n ) }
@@ -142,6 +156,10 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-spacing-and-
142156
onChange={ value => onChange( '--stk-columns-column-gap', value, STATES.RESPONSIVE ) }
143157
hasTabletValue={ getHasDeviceValue( '--stk-columns-column-gap', 'tablet' ) }
144158
hasMobileValue={ getHasDeviceValue( '--stk-columns-column-gap', 'mobile' ) }
159+
helpTooltip={ {
160+
video: 'column-gap',
161+
description: __( 'Sets the distance between two or more columns', i18n ),
162+
} }
145163
/>
146164
<AdvancedRangeControl
147165
label={ __( 'Row Gap', i18n ) }
@@ -153,10 +171,17 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-spacing-and-
153171
onChange={ value => onChange( '--stk-columns-row-gap', value, STATES.RESPONSIVE ) }
154172
hasTabletValue={ getHasDeviceValue( '--stk-columns-row-gap', 'tablet' ) }
155173
hasMobileValue={ getHasDeviceValue( '--stk-columns-row-gap', 'mobile' ) }
174+
helpTooltip={ {
175+
// TODO: Add a working video
176+
description: __( 'Sets the distance between two or more columns', i18n ),
177+
} }
156178
/>
157179
</LayoutSettings>
158180

159-
<LayoutSettings title={ __( 'Container', i18n ) }>
181+
<LayoutSettings
182+
title={ __( 'Container', i18n ) }
183+
description={ __( 'These styles are applied to blocks with their Layout Tab > Container option turned on.', i18n ) }
184+
>
160185
<FourRangeControl
161186
label={ __( 'Padding', i18n ) }
162187
responsive="all"
@@ -176,6 +201,10 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-spacing-and-
176201
hasTabletValue={ getHasDeviceValue( '--stk-container-padding', 'tablet' ) }
177202
hasMobileValue={ getHasDeviceValue( '--stk-container-padding', 'mobile' ) }
178203
placeholder="32"
204+
helpTooltip={ {
205+
video: 'inner-block-padding',
206+
description: __( 'Sets the block paddings, i.e the space between the inner columns and the block border', i18n ),
207+
} }
179208

180209
/>
181210
<AdvancedToolbarControl
@@ -220,7 +249,10 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-spacing-and-
220249
left={ getValue( '--stk-container-border-radius', STATES.RESPONSIVE )?.left }
221250
hasTabletValue={ getHasDeviceValue( '--stk-container-border-radius', 'tablet' ) }
222251
hasMobileValue={ getHasDeviceValue( '--stk-container-border-radius', 'mobile' ) }
223-
252+
helpTooltip={ {
253+
video: 'general-border-radius',
254+
description: __( 'Adjusts the radius of block corners to make them more rounded', i18n ),
255+
} }
224256
/>
225257
<ShadowControl
226258
label={ __( 'Shadow / Outline', i18n ) }
@@ -234,7 +266,10 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-spacing-and-
234266
/>
235267
</LayoutSettings>
236268

237-
<LayoutSettings title={ __( 'Background', i18n ) } >
269+
<LayoutSettings
270+
title={ __( 'Background', i18n ) }
271+
description={ __( 'These styles are applied to blocks with their Style Tab > Background option turned on.', i18n ) }
272+
>
238273
<FourRangeControl
239274
label={ __( 'Padding', i18n ) }
240275
placeholder="24"
@@ -254,7 +289,10 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-spacing-and-
254289
hasHoverStateValue={ getHasHoverStateValues( '--stk-block-background-padding', true ) }
255290
hasTabletValue={ getHasDeviceValue( '--stk-block-background-padding', 'tablet' ) }
256291
hasMobileValue={ getHasDeviceValue( '--stk-block-background-padding', 'mobile' ) }
257-
292+
helpTooltip={ {
293+
video: 'inner-block-padding',
294+
description: __( 'Sets the block paddings, i.e the space between the inner columns and the block border', i18n ),
295+
} }
258296
/>
259297
<AdvancedToolbarControl
260298
label={ __( 'Borders', i18n ) }
@@ -298,6 +336,10 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-spacing-and-
298336
left={ getValue( '--stk-block-background-border-radius', STATES.RESPONSIVE )?.left }
299337
hasTabletValue={ getHasDeviceValue( '--stk-block-background-border-radius', 'tablet' ) }
300338
hasMobileValue={ getHasDeviceValue( '--stk-block-background-border-radius', 'mobile' ) }
339+
helpTooltip={ {
340+
video: 'general-border-radius',
341+
description: __( 'Adjusts the radius of block corners to make them more rounded', i18n ),
342+
} }
301343
/>
302344
<ShadowControl
303345
label={ __( 'Shadow / Outline', i18n ) }
@@ -311,7 +353,10 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-spacing-and-
311353
/>
312354
</LayoutSettings>
313355

314-
<LayoutSettings title={ __( 'Image', i18n ) }>
356+
<LayoutSettings
357+
title={ __( 'Image', i18n ) }
358+
description={ __( 'These styles are applied to all images in Stackable Blocks.', i18n ) }
359+
>
315360
<FourRangeControl
316361
label={ __( 'Border Radius', i18n ) }
317362
min={ 0 }
@@ -326,6 +371,10 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-spacing-and-
326371
left={ getValue( '--stk-image-border-radius', STATES.RESPONSIVE )?.left }
327372
hasTabletValue={ getHasDeviceValue( '--stk-image-border-radius', 'tablet' ) }
328373
hasMobileValue={ getHasDeviceValue( '--stk-image-border-radius', 'mobile' ) }
374+
helpTooltip={ {
375+
video: 'image-border-radius',
376+
description: __( 'Adjusts the radius of image corners to make them more rounded', i18n ),
377+
} }
329378
/>
330379
<ShadowControl
331380
label={ __( 'Shadow / Outline', i18n ) }
@@ -338,6 +387,11 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-spacing-and-
338387
shadowFilterValue={ getValue( '--stk-image-drop-shadow', STATES.HOVER ) }
339388
shadowFilterOnChange={ value => onChange( '--stk-image-drop-shadow', value, STATES.HOVER ) }
340389
hasHoverStateValue={ getHasHoverStateValues( '--stk-image-drop-shadow' ) }
390+
helpTooltip={ {
391+
video: 'image-shadow',
392+
title: __( 'Image Shadow', i18n ),
393+
description: __( 'Adjusts the intensity of the image shadow', i18n ),
394+
} }
341395
/>
342396
</LayoutSettings>
343397

‎src/plugins/global-settings/utils/block-layout-utils.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export const LayoutSettings = props => {
3030
return <>
3131
<div className="ugb-global-block-layouts__section-settings">
3232
<p className="ugb-global-block-layouts__section-title">{ props.title }</p>
33+
<p>{ props.description }</p>
3334
{ props.children }
3435
</div>
3536
</>

0 commit comments

Comments
 (0)