Skip to content

Commit 3c320c6

Browse files
author
[email protected]
committed
tweaked and rearranged settings. added correct docs. updated text
1 parent daf2636 commit 3c320c6

File tree

3 files changed

+88
-87
lines changed

3 files changed

+88
-87
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,10 +76,10 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-buttons-and-
7676
</span>
7777
}
7878
<p className="components-base-control__help">
79-
{ __( 'Manage how Stackable blocks look when they\'re inserted.', i18n ) }
79+
{ __( 'Globally style buttons and icons across all our blocks.', i18n ) }
8080
&nbsp;
81-
<a href="https://docs.wpstackable.com/article/480-how-to-use-block-defaults?utm_source=wp-global-settings&utm_campaign=learnmore&utm_medium=gutenberg" target="_docs">
82-
{ __( 'Learn more about Block Defaults', i18n ) }
81+
<a href="https://docs.wpstackable.com/article/648-how-to-use-global-styles?utm_source=wp-global-settings&utm_campaign=learnmore&utm_medium=gutenberg" target="_docs">
82+
{ __( 'Learn more about Global Styles', i18n ) }
8383
</a>
8484
</p>
8585
<Button
@@ -268,7 +268,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-buttons-and-
268268

269269
<LayoutSettings
270270
title={ __( 'Icon Buttons', i18n ) }
271-
description={ __( 'These are additional settings that apply to Icon Button Blocks.', i18n ) }
271+
description={ __( 'Additional settings that apply to Icon Button Blocks.', i18n ) }
272272
>
273273
<FourRangeControl
274274
label={ __( ' Button Padding', i18n ) }

‎src/plugins/global-settings/editor.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
}
66

77
.ugb-global-block-layouts__section-settings {
8+
background: linear-gradient(to bottom, #fbfbfb, transparent);
89
border-top: 1px solid #e0e0e0;
910
margin: 0px -16px;
1011
padding: 16px;

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

Lines changed: 83 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -77,10 +77,10 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-spacing-and-
7777
</span>
7878
}
7979
<p className="components-base-control__help">
80-
{ __( 'Manage how Stackable blocks look when they\'re inserted.', i18n ) }
80+
{ __( 'Globally style spacings and borders across all our blocks.', i18n ) }
8181
&nbsp;
82-
<a href="https://docs.wpstackable.com/article/480-how-to-use-block-defaults?utm_source=wp-global-settings&utm_campaign=learnmore&utm_medium=gutenberg" target="_docs">
83-
{ __( 'Learn more about Block Defaults', i18n ) }
82+
<a href="https://docs.wpstackable.com/article/648-how-to-use-global-styles?utm_source=wp-global-settings&utm_campaign=learnmore&utm_medium=gutenberg" target="_docs">
83+
{ __( 'Learn more about Global Styles', i18n ) }
8484
</a>
8585
</p>
8686
<Button
@@ -102,12 +102,12 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-spacing-and-
102102

103103
<LayoutSettings
104104
title={ __( 'Margins', i18n ) }
105-
description={ __( 'These styles are applied to all Stackable Blocks.', i18n ) }
105+
description={ __( 'These styles are applied to all our Blocks.', i18n ) }
106106
>
107107
<AdvancedRangeControl
108108
label={ __( 'Block Margin Bottom', i18n ) }
109109
responsive="all"
110-
sliderMin={ [ -50, -50 ] }
110+
sliderMin={ [ 0, 0 ] }
111111
sliderMax={ [ 200, 100 ] }
112112
placeholder="24"
113113
units={ [ 'px', '%' ] }
@@ -126,7 +126,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-spacing-and-
126126

127127
<LayoutSettings
128128
title={ __( 'Columns', i18n ) }
129-
description={ __( 'These styles are applied to blocks with Inner Columns.', i18n ) }
129+
description={ __( 'These styles are applied to Inner Column blocks.', i18n ) }
130130
>
131131
<AdvancedRangeControl
132132
label={ __( ' Inner Column Spacing', i18n ) }
@@ -179,61 +179,60 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-spacing-and-
179179
</LayoutSettings>
180180

181181
<LayoutSettings
182-
title={ __( 'Container', i18n ) }
183-
description={ __( 'These styles are applied to blocks with their Layout Tab > Container option turned on.', i18n ) }
182+
title={ __( 'Background', i18n ) }
183+
description={ __( 'These styles are applied to blocks that have the "Background" option enabled in the Style Tab.', i18n ) }
184184
>
185185
<FourRangeControl
186186
label={ __( 'Padding', i18n ) }
187+
placeholder="24"
187188
responsive="all"
188189
hover="all"
189190
forceUpdateHoverState={ true }
190191
min={ [ 0, 0, 0 ] }
191192
sliderMax={ [ 200, 30, 100 ] }
192193
units={ [ 'px', 'em', '%' ] }
193-
unit={ getValue( '--stk-container-padding', STATES.ALL_UNIT ) || 'px' }
194-
onChangeUnit={ value => onChange( '--stk-container-padding', value, STATES.ALL_UNIT ) }
195-
top={ getValue( '--stk-container-padding', STATES.ALL )?.top }
196-
right={ getValue( '--stk-container-padding', STATES.ALL )?.right }
197-
bottom={ getValue( '--stk-container-padding', STATES.ALL )?.bottom }
198-
left={ getValue( '--stk-container-padding', STATES.ALL )?.left }
199-
onChange={ value => onChange( '--stk-container-padding', value, STATES.ALL ) }
200-
hasHoverStateValue={ getHasHoverStateValues( '--stk-container-padding', true ) }
201-
hasTabletValue={ getHasDeviceValue( '--stk-container-padding', 'tablet' ) }
202-
hasMobileValue={ getHasDeviceValue( '--stk-container-padding', 'mobile' ) }
203-
placeholder="32"
194+
unit={ getValue( '--stk-block-background-padding', STATES.ALL_UNIT ) || 'px' }
195+
onChangeUnit={ value => onChange( '--stk-block-background-padding', value, STATES.ALL_UNIT ) }
196+
top={ getValue( '--stk-block-background-padding', STATES.ALL )?.top }
197+
right={ getValue( '--stk-block-background-padding', STATES.ALL )?.right }
198+
bottom={ getValue( '--stk-block-background-padding', STATES.ALL )?.bottom }
199+
left={ getValue( '--stk-block-background-padding', STATES.ALL )?.left }
200+
onChange={ value => onChange( '--stk-block-background-padding', value, STATES.ALL ) }
201+
hasHoverStateValue={ getHasHoverStateValues( '--stk-block-background-padding', true ) }
202+
hasTabletValue={ getHasDeviceValue( '--stk-block-background-padding', 'tablet' ) }
203+
hasMobileValue={ getHasDeviceValue( '--stk-block-background-padding', 'mobile' ) }
204204
helpTooltip={ {
205205
video: 'inner-block-padding',
206206
description: __( 'Sets the block paddings, i.e the space between the inner columns and the block border', i18n ),
207207
} }
208-
209208
/>
210209
<AdvancedToolbarControl
211210
label={ __( 'Borders', i18n ) }
212211
controls={ BORDER_CONTROLS }
213212
className="ugb-border-controls__border-type-toolbar"
214213
isSmall={ true }
215-
value={ getValue( '--stk-container-border-style' ) }
216-
onChange={ value => onChange( '--stk-container-border-style', value ) }
214+
value={ getValue( '--stk-block-background-border-style' ) }
215+
onChange={ value => onChange( '--stk-block-background-border-style', value ) }
217216
/>
218217
<FourRangeControl
219218
label={ __( 'Border Width', i18n ) }
220219
responsive="all"
221220
hover="all"
222-
forceUpdateHoverState={ true }
223221
min={ 0 }
224222
max={ 99 }
225223
step={ 1 }
224+
placeholder="1"
226225
sliderMax={ 5 }
227226
defaultLocked={ true }
228-
placeholder="1"
229-
top={ getValue( '--stk-container-border-width', STATES.ALL )?.top }
230-
right={ getValue( '--stk-container-border-width', STATES.ALL )?.right }
231-
bottom={ getValue( '--stk-container-border-width', STATES.ALL )?.bottom }
232-
left={ getValue( '--stk-container-border-width', STATES.ALL )?.left }
233-
onChange={ value => onChange( '--stk-container-border-width', value, STATES.ALL ) }
234-
hasHoverStateValue={ getHasHoverStateValues( '--stk-container-border-width', true ) }
235-
hasTabletValue={ getHasDeviceValue( '--stk-container-border-width', 'tablet' ) }
236-
hasMobileValue={ getHasDeviceValue( '--stk-container-border-width', 'mobile' ) }
227+
forceUpdateHoverState={ true }
228+
top={ getValue( '--stk-block-background-border-width', STATES.ALL )?.top }
229+
right={ getValue( '--stk-block-background-border-width', STATES.ALL )?.right }
230+
bottom={ getValue( '--stk-block-background-border-width', STATES.ALL )?.bottom }
231+
left={ getValue( '--stk-block-background-border-width', STATES.ALL )?.left }
232+
onChange={ value => onChange( '--stk-block-background-border-width', value, STATES.ALL ) }
233+
hasHoverStateValue={ getHasHoverStateValues( '--stk-block-background-border-width', true ) }
234+
hasTabletValue={ getHasDeviceValue( '--stk-block-background-border-width', 'tablet' ) }
235+
hasMobileValue={ getHasDeviceValue( '--stk-block-background-border-width', 'mobile' ) }
237236
/>
238237
<FourRangeControl
239238
label={ __( 'Border Radius', i18n ) }
@@ -242,13 +241,13 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-spacing-and-
242241
sliderMax={ 50 }
243242
responsive="all"
244243
placeholder="0"
245-
onChange={ value => onChange( '--stk-container-border-radius', value, STATES.RESPONSIVE ) }
246-
top={ getValue( '--stk-container-border-radius', STATES.RESPONSIVE )?.top }
247-
right={ getValue( '--stk-container-border-radius', STATES.RESPONSIVE )?.right }
248-
bottom={ getValue( '--stk-container-border-radius', STATES.RESPONSIVE )?.bottom }
249-
left={ getValue( '--stk-container-border-radius', STATES.RESPONSIVE )?.left }
250-
hasTabletValue={ getHasDeviceValue( '--stk-container-border-radius', 'tablet' ) }
251-
hasMobileValue={ getHasDeviceValue( '--stk-container-border-radius', 'mobile' ) }
244+
onChange={ value => onChange( '--stk-block-background-border-radius', value, STATES.RESPONSIVE ) }
245+
top={ getValue( '--stk-block-background-border-radius', STATES.RESPONSIVE )?.top }
246+
right={ getValue( '--stk-block-background-border-radius', STATES.RESPONSIVE )?.right }
247+
bottom={ getValue( '--stk-block-background-border-radius', STATES.RESPONSIVE )?.bottom }
248+
left={ getValue( '--stk-block-background-border-radius', STATES.RESPONSIVE )?.left }
249+
hasTabletValue={ getHasDeviceValue( '--stk-block-background-border-radius', 'tablet' ) }
250+
hasMobileValue={ getHasDeviceValue( '--stk-block-background-border-radius', 'mobile' ) }
252251
helpTooltip={ {
253252
video: 'general-border-radius',
254253
description: __( 'Adjusts the radius of block corners to make them more rounded', i18n ),
@@ -258,69 +257,70 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-spacing-and-
258257
label={ __( 'Shadow / Outline', i18n ) }
259258
hover="all"
260259
forceUpdateHoverState={ true }
261-
value={ valueCallback( getValue( '--stk-container-box-shadow', STATES.HOVER ) || '' ) }
262-
onChange={ value => onChange( '--stk-container-box-shadow', changeCallback( value ), STATES.HOVER ) }
263-
shadowFilterValue={ getValue( '--stk-container-box-shadow', STATES.HOVER ) || '' }
264-
shadowFilterOnChange={ value => onChange( '--stk-container-box-shadow', value, STATES.HOVER ) }
265-
hasHoverStateValue={ getHasHoverStateValues( '--stk-container-box-shadow' ) }
260+
value={ valueCallback( getValue( '--stk-block-background-box-shadow', STATES.HOVER ) || '' ) }
261+
onChange={ value => onChange( '--stk-block-background-box-shadow', changeCallback( value ), STATES.HOVER ) }
262+
shadowFilterValue={ getValue( '--stk-block-background-box-shadow', STATES.HOVER ) || '' }
263+
shadowFilterOnChange={ value => onChange( '--stk-block-background-box-shadow', value, STATES.HOVER ) }
264+
hasHoverStateValue={ getHasHoverStateValues( '--stk-block-background-box-shadow' ) }
266265
/>
267266
</LayoutSettings>
268267

269268
<LayoutSettings
270-
title={ __( 'Background', i18n ) }
271-
description={ __( 'These styles are applied to blocks with their Style Tab > Background option turned on.', i18n ) }
269+
title={ __( 'Containers', i18n ) }
270+
description={ __( 'These styles are applied to blocks that have the "Container" option enabled in the Layout Tab.', i18n ) }
272271
>
273272
<FourRangeControl
274273
label={ __( 'Padding', i18n ) }
275-
placeholder="24"
276274
responsive="all"
277275
hover="all"
278276
forceUpdateHoverState={ true }
279277
min={ [ 0, 0, 0 ] }
280278
sliderMax={ [ 200, 30, 100 ] }
281279
units={ [ 'px', 'em', '%' ] }
282-
unit={ getValue( '--stk-block-background-padding', STATES.ALL_UNIT ) || 'px' }
283-
onChangeUnit={ value => onChange( '--stk-block-background-padding', value, STATES.ALL_UNIT ) }
284-
top={ getValue( '--stk-block-background-padding', STATES.ALL )?.top }
285-
right={ getValue( '--stk-block-background-padding', STATES.ALL )?.right }
286-
bottom={ getValue( '--stk-block-background-padding', STATES.ALL )?.bottom }
287-
left={ getValue( '--stk-block-background-padding', STATES.ALL )?.left }
288-
onChange={ value => onChange( '--stk-block-background-padding', value, STATES.ALL ) }
289-
hasHoverStateValue={ getHasHoverStateValues( '--stk-block-background-padding', true ) }
290-
hasTabletValue={ getHasDeviceValue( '--stk-block-background-padding', 'tablet' ) }
291-
hasMobileValue={ getHasDeviceValue( '--stk-block-background-padding', 'mobile' ) }
280+
unit={ getValue( '--stk-container-padding', STATES.ALL_UNIT ) || 'px' }
281+
onChangeUnit={ value => onChange( '--stk-container-padding', value, STATES.ALL_UNIT ) }
282+
top={ getValue( '--stk-container-padding', STATES.ALL )?.top }
283+
right={ getValue( '--stk-container-padding', STATES.ALL )?.right }
284+
bottom={ getValue( '--stk-container-padding', STATES.ALL )?.bottom }
285+
left={ getValue( '--stk-container-padding', STATES.ALL )?.left }
286+
onChange={ value => onChange( '--stk-container-padding', value, STATES.ALL ) }
287+
hasHoverStateValue={ getHasHoverStateValues( '--stk-container-padding', true ) }
288+
hasTabletValue={ getHasDeviceValue( '--stk-container-padding', 'tablet' ) }
289+
hasMobileValue={ getHasDeviceValue( '--stk-container-padding', 'mobile' ) }
290+
placeholder="32"
292291
helpTooltip={ {
293292
video: 'inner-block-padding',
294293
description: __( 'Sets the block paddings, i.e the space between the inner columns and the block border', i18n ),
295294
} }
295+
296296
/>
297297
<AdvancedToolbarControl
298298
label={ __( 'Borders', i18n ) }
299299
controls={ BORDER_CONTROLS }
300300
className="ugb-border-controls__border-type-toolbar"
301301
isSmall={ true }
302-
value={ getValue( '--stk-block-background-border-style' ) }
303-
onChange={ value => onChange( '--stk-block-background-border-style', value ) }
302+
value={ getValue( '--stk-container-border-style' ) }
303+
onChange={ value => onChange( '--stk-container-border-style', value ) }
304304
/>
305305
<FourRangeControl
306306
label={ __( 'Border Width', i18n ) }
307307
responsive="all"
308308
hover="all"
309+
forceUpdateHoverState={ true }
309310
min={ 0 }
310311
max={ 99 }
311312
step={ 1 }
312-
placeholder="1"
313313
sliderMax={ 5 }
314314
defaultLocked={ true }
315-
forceUpdateHoverState={ true }
316-
top={ getValue( '--stk-block-background-border-width', STATES.ALL )?.top }
317-
right={ getValue( '--stk-block-background-border-width', STATES.ALL )?.right }
318-
bottom={ getValue( '--stk-block-background-border-width', STATES.ALL )?.bottom }
319-
left={ getValue( '--stk-block-background-border-width', STATES.ALL )?.left }
320-
onChange={ value => onChange( '--stk-block-background-border-width', value, STATES.ALL ) }
321-
hasHoverStateValue={ getHasHoverStateValues( '--stk-block-background-border-width', true ) }
322-
hasTabletValue={ getHasDeviceValue( '--stk-block-background-border-width', 'tablet' ) }
323-
hasMobileValue={ getHasDeviceValue( '--stk-block-background-border-width', 'mobile' ) }
315+
placeholder="1"
316+
top={ getValue( '--stk-container-border-width', STATES.ALL )?.top }
317+
right={ getValue( '--stk-container-border-width', STATES.ALL )?.right }
318+
bottom={ getValue( '--stk-container-border-width', STATES.ALL )?.bottom }
319+
left={ getValue( '--stk-container-border-width', STATES.ALL )?.left }
320+
onChange={ value => onChange( '--stk-container-border-width', value, STATES.ALL ) }
321+
hasHoverStateValue={ getHasHoverStateValues( '--stk-container-border-width', true ) }
322+
hasTabletValue={ getHasDeviceValue( '--stk-container-border-width', 'tablet' ) }
323+
hasMobileValue={ getHasDeviceValue( '--stk-container-border-width', 'mobile' ) }
324324
/>
325325
<FourRangeControl
326326
label={ __( 'Border Radius', i18n ) }
@@ -329,13 +329,13 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-spacing-and-
329329
sliderMax={ 50 }
330330
responsive="all"
331331
placeholder="0"
332-
onChange={ value => onChange( '--stk-block-background-border-radius', value, STATES.RESPONSIVE ) }
333-
top={ getValue( '--stk-block-background-border-radius', STATES.RESPONSIVE )?.top }
334-
right={ getValue( '--stk-block-background-border-radius', STATES.RESPONSIVE )?.right }
335-
bottom={ getValue( '--stk-block-background-border-radius', STATES.RESPONSIVE )?.bottom }
336-
left={ getValue( '--stk-block-background-border-radius', STATES.RESPONSIVE )?.left }
337-
hasTabletValue={ getHasDeviceValue( '--stk-block-background-border-radius', 'tablet' ) }
338-
hasMobileValue={ getHasDeviceValue( '--stk-block-background-border-radius', 'mobile' ) }
332+
onChange={ value => onChange( '--stk-container-border-radius', value, STATES.RESPONSIVE ) }
333+
top={ getValue( '--stk-container-border-radius', STATES.RESPONSIVE )?.top }
334+
right={ getValue( '--stk-container-border-radius', STATES.RESPONSIVE )?.right }
335+
bottom={ getValue( '--stk-container-border-radius', STATES.RESPONSIVE )?.bottom }
336+
left={ getValue( '--stk-container-border-radius', STATES.RESPONSIVE )?.left }
337+
hasTabletValue={ getHasDeviceValue( '--stk-container-border-radius', 'tablet' ) }
338+
hasMobileValue={ getHasDeviceValue( '--stk-container-border-radius', 'mobile' ) }
339339
helpTooltip={ {
340340
video: 'general-border-radius',
341341
description: __( 'Adjusts the radius of block corners to make them more rounded', i18n ),
@@ -345,17 +345,17 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-spacing-and-
345345
label={ __( 'Shadow / Outline', i18n ) }
346346
hover="all"
347347
forceUpdateHoverState={ true }
348-
value={ valueCallback( getValue( '--stk-block-background-box-shadow', STATES.HOVER ) || '' ) }
349-
onChange={ value => onChange( '--stk-block-background-box-shadow', changeCallback( value ), STATES.HOVER ) }
350-
shadowFilterValue={ getValue( '--stk-block-background-box-shadow', STATES.HOVER ) || '' }
351-
shadowFilterOnChange={ value => onChange( '--stk-block-background-box-shadow', value, STATES.HOVER ) }
352-
hasHoverStateValue={ getHasHoverStateValues( '--stk-block-background-box-shadow' ) }
348+
value={ valueCallback( getValue( '--stk-container-box-shadow', STATES.HOVER ) || '' ) }
349+
onChange={ value => onChange( '--stk-container-box-shadow', changeCallback( value ), STATES.HOVER ) }
350+
shadowFilterValue={ getValue( '--stk-container-box-shadow', STATES.HOVER ) || '' }
351+
shadowFilterOnChange={ value => onChange( '--stk-container-box-shadow', value, STATES.HOVER ) }
352+
hasHoverStateValue={ getHasHoverStateValues( '--stk-container-box-shadow' ) }
353353
/>
354354
</LayoutSettings>
355355

356356
<LayoutSettings
357-
title={ __( 'Image', i18n ) }
358-
description={ __( 'These styles are applied to all images in Stackable Blocks.', i18n ) }
357+
title={ __( 'Images', i18n ) }
358+
description={ __( 'These styles are applied to all Image Blocks.', i18n ) }
359359
>
360360
<FourRangeControl
361361
label={ __( 'Border Radius', i18n ) }

0 commit comments

Comments
 (0)