Skip to content

Commit 56c1bc9

Browse files
GambitGambit
Gambit
authored and
Gambit
committed
change block components placeholder
1 parent f2703e0 commit 56c1bc9

File tree

21 files changed

+348
-136
lines changed

21 files changed

+348
-136
lines changed

‎src/block-components/block-div/edit.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
} from '~stackable/components'
1919
import {
2020
useBlockAttributesContext,
21+
useBlockLayoutDefaults,
2122
useBlockSetAttributesContext,
2223
} from '~stackable/hooks'
2324

@@ -35,6 +36,7 @@ export const Edit = memo( props => {
3536
} = props
3637
const hasBackground = useBlockAttributesContext( attributes => attributes.hasBackground )
3738
const setAttributes = useBlockSetAttributesContext()
39+
const { getPlaceholder } = useBlockLayoutDefaults()
3840

3941
return (
4042
<>
@@ -55,6 +57,7 @@ export const Edit = memo( props => {
5557
/>
5658
<SizeControls.Spacing
5759
attrNameTemplate="block%s"
60+
paddingPlaceholder={ hasBackground ? getPlaceholder( '--stk-block-background-padding' ) : '' }
5861
visualGuide={ {
5962
highlight: 'padding',
6063
} }
@@ -84,6 +87,9 @@ export const Edit = memo( props => {
8487
>
8588
<BorderControls
8689
attrNameTemplate="block%s"
90+
placeholderTemplate="--stk-block-background"
91+
borderTypeValue={ getPlaceholder( '--stk-block-background-border-style' ) }
92+
borderRadiusPlaceholder={ getPlaceholder( '--stk-block-background-border-radius' ) }
8793
/>
8894
</PanelAdvancedSettings>
8995
</InspectorStyleControls>

‎src/block-components/button/edit.js‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
AdvancedSelectControl,
1313
} from '~stackable/components'
1414
import { i18n } from 'stackable'
15-
import { useBlockAttributesContext } from '~stackable/hooks'
15+
import { useBlockAttributesContext, useBlockLayoutDefaults } from '~stackable/hooks'
1616

1717
/**
1818
* WordPress dependencies
@@ -39,6 +39,8 @@ export const Icon = props => (
3939
hasIconGap={ props.hasIconGap }
4040
hasIconPosition={ props.hasIconPosition }
4141
defaultValue={ props.defaultValue }
42+
iconSizePlaceholderName="--stk-button-icon-size"
43+
iconGapPlaceholderName={ props.iconGapPlaceholderName }
4244
/>
4345
)
4446

@@ -176,10 +178,13 @@ Colors.defaultProps = {
176178
const SizeControls = props => {
177179
const {
178180
attrNameTemplate = 'button%s',
181+
paddingPlaceholderName = '--stk-button-padding',
179182
} = props
180183

181184
const getAttrName = getAttributeNameFunc( attrNameTemplate )
185+
const { getPlaceholder } = useBlockLayoutDefaults()
182186

187+
const buttonPaddingPlaceholder = getPlaceholder( paddingPlaceholderName, { single: false } )
183188
return ( <>
184189
{ props.hasFullWidth && (
185190
<AdvancedToggleControl
@@ -193,6 +198,7 @@ const SizeControls = props => {
193198
attribute={ getAttrName( 'minHeight' ) }
194199
min={ 0 }
195200
max={ 100 }
201+
placeholder={ getPlaceholder( '--stk-button-min-height' ) }
196202
/>
197203
{ props.hasWidth && ! props.hasFullWidth && (
198204
<AdvancedRangeControl
@@ -213,6 +219,10 @@ const SizeControls = props => {
213219
sliderMin={ [ 0, 0 ] }
214220
sliderMax={ [ 40, 100 ] }
215221
vhMode={ true }
222+
placeholderTop={ buttonPaddingPlaceholder?.top || '' }
223+
placeholderRight={ buttonPaddingPlaceholder?.right || '' }
224+
placeholderBottom={ buttonPaddingPlaceholder?.bottom || '' }
225+
placeholderLeft={ buttonPaddingPlaceholder?.left || '' }
216226
helpTooltip={ {
217227
// TODO: Add a working video
218228
title: __( 'Button padding', i18n ),
@@ -240,11 +250,21 @@ Size.defaultProps = {
240250
}
241251

242252
const BorderControls = props => {
253+
const className = useBlockAttributesContext( attributes => {
254+
return attributes.className
255+
} )
256+
const { getPlaceholder } = useBlockLayoutDefaults()
257+
258+
const borderWidthPlaceholder = className === 'is-style-ghost' ? getPlaceholder( '--stk-button-ghost-border-width' ) : getPlaceholder( '--stk-button-border-width' )
259+
243260
return (
244261
<_BorderControls
245262
hasBorderRadiusHover={ false }
246263
borderSelector={ props.borderSelector }
247264
borderRadiusPlaceholder={ props.placeholder }
265+
borderTypeValue={ getPlaceholder( '--stk-button-border-style' ) }
266+
borderWidthPlaceholder={ borderWidthPlaceholder }
267+
placeholderTemplate="--stk-button"
248268
{ ...props }
249269
/>
250270
)
@@ -281,6 +301,7 @@ export const Edit = props => {
281301
hasIconPosition,
282302
borderRadiusPlaceholder,
283303
hasFullWidth,
304+
iconGapPlaceholderName,
284305
...propsToPass
285306
} = props
286307

@@ -312,6 +333,7 @@ export const Edit = props => {
312333
<Icon
313334
hasIconGap={ hasIconGap }
314335
hasIconPosition={ hasIconPosition }
336+
iconGapPlaceholderName={ iconGapPlaceholderName }
315337
/>
316338
) }
317339
</>
@@ -326,6 +348,7 @@ Edit.defaultProps = {
326348
hasIconGap: true,
327349
hasIconPosition: true,
328350
hasFullWidth: false,
351+
iconGapPlaceholderName: undefined,
329352
}
330353

331354
Edit.Link = Link

‎src/block-components/columns/edit.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
useBlockAttributesContext,
2323
useBlockSetAttributesContext,
2424
useDeviceType,
25+
useBlockLayoutDefaults,
2526
} from '~stackable/hooks'
2627
import { range } from 'lodash'
2728

@@ -39,6 +40,7 @@ export const Controls = props => {
3940
// TODO: Get global default value for placeholder
4041
const [ , setColumnsUpdate ] = useState( 0 )
4142
const deviceType = useDeviceType()
43+
const { getPlaceholder } = useBlockLayoutDefaults()
4244
const { clientId } = useBlockEditContext()
4345
const {
4446
numInnerBlocks, innerBlocks,
@@ -254,7 +256,7 @@ export const Controls = props => {
254256
defaultLocked={ true }
255257
min={ [ 0, 0 ] }
256258
sliderMax={ [ 200, 30 ] }
257-
placeholder={ numInnerBlocks === 1 ? '0' : '12' }
259+
placeholder={ numInnerBlocks === 1 ? '0' : getPlaceholder( '--stk-column-margin' ) }
258260
visualGuide={ {
259261
selector: '.stk-%s-column > * > * > [data-type="stackable/column"] > * > .stk-column > .stk-inner-blocks',
260262
highlight: 'column-spacing',
@@ -272,7 +274,7 @@ export const Controls = props => {
272274
responsive="all"
273275
min={ 0 }
274276
sliderMax={ 100 }
275-
placeholder="0"
277+
placeholder={ getPlaceholder( '--stk-columns-column-gap' ) }
276278
visualGuide={ {
277279
selector: '.stk-%s-column > * > *',
278280
highlight: 'columns:column-gap',
@@ -289,7 +291,7 @@ export const Controls = props => {
289291
responsive="all"
290292
min={ 0 }
291293
sliderMax={ 100 }
292-
placeholder="0"
294+
placeholder={ getPlaceholder( '--stk-columns-row-gap' ) }
293295
helpTooltip={ {
294296
// TODO: Add a working video
295297
description: __( 'Sets the distance between two or more columns', i18n ),

‎src/block-components/container-div/edit.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
} from '~stackable/components'
2020
import {
2121
useBlockAttributesContext,
22+
useBlockLayoutDefaults,
2223
useBlockSetAttributesContext,
2324
} from '~stackable/hooks'
2425

@@ -34,6 +35,7 @@ export const Edit = props => {
3435

3536
const hasContainer = useBlockAttributesContext( attributes => attributes.hasContainer )
3637
const setAttributes = useBlockSetAttributesContext()
38+
const { getPlaceholder } = useBlockLayoutDefaults()
3739

3840
return (
3941
<>
@@ -64,7 +66,7 @@ export const Edit = props => {
6466
<SizeControls.Spacing
6567
attrNameTemplate="container%s"
6668
enableMargin={ false }
67-
paddingPlaceholder="32"
69+
paddingPlaceholder={ getPlaceholder( '--stk-container-padding' ) }
6870
visualGuide={ {
6971
selector: '.stk-%s-container',
7072
} }
@@ -91,6 +93,9 @@ export const Edit = props => {
9193
>
9294
<BorderControls
9395
attrNameTemplate="container%s"
96+
placeholderTemplate="--stk-container"
97+
borderTypeValue={ getPlaceholder( '--stk-container-border-style' ) }
98+
borderRadiusPlaceholder={ getPlaceholder( '--stk-container-border-radius' ) }
9499
/>
95100
</PanelAdvancedSettings>
96101
</InspectorStyleControls>

‎src/block-components/helpers/borders/edit.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
*/
1515
import { Fragment } from '@wordpress/element'
1616
import { __ } from '@wordpress/i18n'
17-
import { useAttributeEditHandlers } from '~stackable/hooks'
17+
import { useAttributeEditHandlers, useBlockLayoutDefaults } from '~stackable/hooks'
1818
import { applyFilters } from '@wordpress/hooks'
1919

2020
export const BORDER_CONTROLS = [
@@ -43,6 +43,8 @@ export const BorderControls = props => {
4343
updateAttributes,
4444
} = useAttributeEditHandlers( props.attrNameTemplate )
4545

46+
const { getPlaceholder } = useBlockLayoutDefaults()
47+
4648
const borderTypeValue = getAttribute( 'borderType' ) || props.borderTypeValue
4749

4850
applyFilters( 'stackable.block-component.helpers.borders', null, getAttribute, updateAttributes )
@@ -57,6 +59,7 @@ export const BorderControls = props => {
5759
attribute={ getAttrName( 'borderType' ) }
5860
fullwidth={ true }
5961
isSmall={ true }
62+
placeholder={ getPlaceholder( `${ props.placeholderTemplate }-border-style` ) }
6063
/>
6164
}
6265

@@ -71,6 +74,7 @@ export const BorderControls = props => {
7174
step={ 1 }
7275
sliderMax={ 5 }
7376
defaultLocked={ true }
77+
placeholder={ props.borderWidthPlaceholder || getPlaceholder( `${ props.placeholderTemplate }-border-width` ) }
7478
/>
7579
}
7680

@@ -101,6 +105,7 @@ export const BorderControls = props => {
101105
label={ __( 'Shadow / Outline', i18n ) }
102106
attribute={ getAttrName( 'shadow' ) }
103107
hover="all"
108+
placeholder={ getPlaceholder( `${ props.placeholderTemplate }-box-shadow` ) }
104109
/>
105110
</Fragment>
106111
)

‎src/block-components/helpers/flex-gap/edit.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,17 @@
33
*/
44
import { i18n } from 'stackable'
55
import { AdvancedRangeControl } from '~stackable/components'
6+
import { useBlockLayoutDefaults } from '~stackable/hooks'
67

78
/**
89
* WordPress dependencies
910
*/
1011
import { __ } from '@wordpress/i18n'
1112

12-
export const FlexGapControls = () => {
13+
export const FlexGapControls = props => {
14+
const { placeholderTemplate = undefined } = props
15+
const { getPlaceholder } = useBlockLayoutDefaults()
16+
1317
return (
1418
<>
1519
<AdvancedRangeControl
@@ -18,15 +22,15 @@ export const FlexGapControls = () => {
1822
responsive="all"
1923
min="0"
2024
sliderMax="50"
21-
placeholder=""
25+
placeholder={ placeholderTemplate ? getPlaceholder( `${ placeholderTemplate }-column-gap` ) : '' }
2226
/>
2327
<AdvancedRangeControl
2428
label={ __( 'Row Gap', i18n ) }
2529
attribute="rowGap"
2630
responsive="all"
2731
min="0"
2832
sliderMax="50"
29-
placeholder=""
33+
placeholder={ placeholderTemplate ? getPlaceholder( `${ placeholderTemplate }-row-gap` ) : '' }
3034
/>
3135
</>
3236
)

‎src/block-components/icon/edit.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@ import {
2121
ProControl,
2222
} from '~stackable/components'
2323
import { getAttrNameFunction } from '~stackable/util'
24-
import { useBlockAttributesContext, useBlockSetAttributesContext } from '~stackable/hooks'
24+
import {
25+
useBlockAttributesContext, useBlockSetAttributesContext, useBlockLayoutDefaults,
26+
} from '~stackable/hooks'
2527

2628
/**
2729
* WordPress dependencies
@@ -47,6 +49,7 @@ export const Edit = props => {
4749
defaultValue,
4850
onChangeIcon,
4951
iconGapPlaceholder = '0',
52+
iconSizePlaceholderName = '--stk-icon-size',
5053
attrNameTemplate,
5154
} = props
5255

@@ -64,6 +67,7 @@ export const Edit = props => {
6467
}
6568
} )
6669
const setAttributes = useBlockSetAttributesContext()
70+
const { getPlaceholder } = useBlockLayoutDefaults()
6771

6872
const showIconControl = hideControlsIfIconIsNotSet ? !! attributes.icon : true
6973

@@ -134,7 +138,7 @@ export const Edit = props => {
134138
sliderMax={ 100 }
135139
step={ 1 }
136140
allowReset={ true }
137-
placeholder=""
141+
placeholder={ getPlaceholder( iconSizePlaceholderName ) || '' }
138142
responsive={ responsive }
139143
{ ...iconSizeProps }
140144
/> }
@@ -178,7 +182,7 @@ export const Edit = props => {
178182
min={ 0 }
179183
sliderMax={ 50 }
180184
allowReset={ true }
181-
placeholder={ iconGapPlaceholder }
185+
placeholder={ props.iconGapPlaceholderName ? getPlaceholder( props.iconGapPlaceholderName ) : iconGapPlaceholder }
182186
/>
183187
) }
184188
</>

‎src/block-components/image/edit.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {
2626
useBlockAttributesContext,
2727
useBlockSetAttributesContext,
2828
useDeviceType,
29+
useBlockLayoutDefaults,
2930
} from '~stackable/hooks'
3031
import { getAttributeName } from '~stackable/util'
3132

@@ -79,7 +80,7 @@ const Controls = props => {
7980
} )
8081
const setAttributes = useBlockSetAttributesContext()
8182
const deviceType = useDeviceType()
82-
83+
const { getPlaceholder } = useBlockLayoutDefaults()
8384
// Get the width of the image block, this is needed for resizing the image
8485
// when replacing, and for resetting the width.
8586
const { getEditorDom } = useSelect( 'stackable/editor-dom' )
@@ -392,6 +393,7 @@ const Controls = props => {
392393
attribute="imageShadow"
393394
hover="all"
394395
isFilter={ true }
396+
placeholder={ getPlaceholder( '--stk-image-drop-shadow' ) }
395397
helpTooltip={ {
396398
video: 'image-shadow',
397399
title: __( 'Image Shadow', i18n ),
@@ -429,7 +431,7 @@ const Controls = props => {
429431
attribute="imageBorderRadius"
430432
min="0"
431433
sliderMax={ borderRadiusSliderMax }
432-
placeholder="0"
434+
placeholder={ getPlaceholder( '--stk-image-border-radius' ) || '0' }
433435
defaultValue={ 0 }
434436
allowReset={ true }
435437
helpTooltip={ {

‎src/block/button-group/edit.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,7 @@ const InspectorControls = memo( props => {
229229
attribute="buttonFullWidth"
230230
defaultValue={ false }
231231
/>
232-
<FlexGapControls />
232+
<FlexGapControls placeholderTemplate="--stk-button" />
233233
<AdvancedSelectControl
234234
label={ __( 'Flex Wrap', i18n ) }
235235
attribute="flexWrap"

0 commit comments

Comments
 (0)