Skip to content

Commit 639fe8b

Browse files
ArukuenArukuen
authored
fix (preset values): add none preset to all spacing presets (#3511)
* fix: add none preset to all spacing presets * fix: use 0px instead of 0rem for consistency
1 parent c9335cc commit 639fe8b

File tree

10 files changed

+40
-43
lines changed

10 files changed

+40
-43
lines changed

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,8 +87,10 @@ export const Edit = memo( props => {
8787
enableContentAlign = true,
8888
} = props
8989

90-
const blockHeightMarks = usePresetControls( 'blockHeights' )?.getPresetMarks() || null
91-
const spacingSizeMarks = usePresetControls( 'spacingSizes' )?.getPresetMarks() || null
90+
const blockHeightMarks = usePresetControls( 'blockHeights' )
91+
?.getPresetMarks( { addNonePreset: true } ) || null
92+
const spacingSizeMarks = usePresetControls( 'spacingSizes' )
93+
?.getPresetMarks( { addNonePreset: true } ) || null
9294

9395
const containerSize = props.hasContainerSize && <>
9496
<ControlSeparator />

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,8 @@ const SizeControls = props => {
188188

189189
const buttonPaddingPlaceholder = getPlaceholder( paddingPlaceholderName, { single: false } )
190190

191-
const presetMarks = usePresetControls( 'spacingSizes' )?.getPresetMarks() || null
191+
const presetMarks = usePresetControls( 'spacingSizes' )
192+
?.getPresetMarks( { addNonePreset: true } ) || null
192193

193194
return ( <>
194195
{ props.hasFullWidth && (

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -125,8 +125,8 @@ export const Controls = props => {
125125
: deviceType === 'Tablet' ? ( attributes.columnArrangementTablet || defaultArrangement )
126126
: ( attributes.columnArrangementMobile || defaultArrangement )
127127

128-
const presetMarks = usePresetControls( 'spacingSizes' )?.getPresetMarks() || null
129-
128+
const presetMarks = usePresetControls( 'spacingSizes' )
129+
?.getPresetMarks( { addNonePreset: true } ) || null
130130
return (
131131
<>
132132
{ props.hasColumnsControl && <ColumnsControl /> }

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,8 @@ export const BorderControls = props => {
7171

7272
applyFilters( 'stackable.block-component.helpers.borders', null, getAttribute, updateAttributes )
7373

74-
const presetMarks = usePresetControls( 'borderRadius' )?.getPresetMarks() || null
74+
const presetMarks = usePresetControls( 'borderRadius' )
75+
?.getPresetMarks( { addNonePreset: true } ) || null
7576

7677
return (
7778
<Fragment>

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

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@ const Layout = props => {
3232
labelVerticalAlign = __( 'Content Vertical Align', i18n ),
3333
} = props.labels
3434

35-
const presetMarks = usePresetControls( 'blockHeights' )?.getPresetMarks() || null
35+
const presetMarks = usePresetControls( 'blockHeights' )
36+
?.getPresetMarks( { addNonePreset: true } ) || null
3637

3738
return (
3839
<>
@@ -139,13 +140,8 @@ const Spacing = props => {
139140
}
140141

141142
// Add additional presets for setting margins and paddings to None
142-
const nonePreset = {
143-
name: __( 'None', i18n ),
144-
size: '0rem',
145-
slug: 'none',
146-
}
147143
const presetMarks = usePresetControls( 'spacingSizes' )
148-
?.getPresetMarks( { additionalPresets: [ nonePreset ] } ) || null
144+
?.getPresetMarks( { addNonePreset: true } ) || null
149145

150146
return (
151147
<>

‎src/block/column/edit.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,8 @@ const Edit = props => {
164164
// props used by controls to prevent rerenders of all the inspector controls.
165165
const InspectorControls = memo( props => {
166166
const { getPlaceholder } = useBlockLayoutDefaults()
167-
const presets = usePresetControls( 'spacingSizes' )?.getPresetMarks() || null
167+
const presets = usePresetControls( 'spacingSizes' )
168+
?.getPresetMarks( { addNonePreset: true } ) || null
168169

169170
return (
170171
<>

‎src/hooks/use-preset-controls.js‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
import { i18n } from 'stackable'
2+
import DEFAULT_PRESETS from '~stackable/plugins/global-settings/preset-controls/presets.json'
13
import { useSettings } from '@wordpress/block-editor'
24
import { useSelect } from '@wordpress/data'
3-
import DEFAULT_PRESETS from '~stackable/plugins/global-settings/preset-controls/presets.json'
5+
import { __ } from '@wordpress/i18n'
46

57
const PRESET_MAPPING = {
68
fontSizes: {
@@ -21,6 +23,12 @@ const PRESET_MAPPING = {
2123
},
2224
}
2325

26+
const nonePreset = {
27+
name: __( 'None', i18n ),
28+
size: '0px',
29+
slug: 'none',
30+
}
31+
2432
export const usePresetControls = property => {
2533
// Get the theme presets for the property
2634
const [ themePresets ] = useSettings( PRESET_MAPPING[ property ].settings.join( '.' ) )
@@ -56,10 +64,12 @@ export const usePresetControls = property => {
5664

5765
// Get the merge preset marks with the CSS Variable value
5866
// Setting customOnly to true returns the preset marks for custom presets only
59-
const getPresetMarks = ( { customOnly = false, additionalPresets = [] } = {} ) => {
67+
// Setting addNonePreset to true adds a none preset with a value of 0
68+
const getPresetMarks = ( { customOnly = false, addNonePreset = false } = {} ) => {
6069
const prefix = PRESET_MAPPING[ property ].prefix
6170
let presets = customOnly ? allCustomPresets[ property ] ?? [] : getMergedPresets()
62-
presets = [ ...additionalPresets, ...presets ]
71+
// Add the none preset
72+
presets = [ ...( addNonePreset ? [ nonePreset ] : [] ), ...presets ]
6373

6474
return presets
6575
.filter( preset => ! ( preset?.isDiscarded ) )

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

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -55,16 +55,10 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-buttons-and-
5555
saveTimeout
5656
)
5757

58-
// Add additional presets for setting margins and paddings to None
59-
const nonePreset = {
60-
name: 'None',
61-
size: '0rem',
62-
slug: 'none',
63-
}
6458
const sizePresetMarks = usePresetControls( 'spacingSizes' )
65-
?.getPresetMarks( { additionalPresets: [ nonePreset ] } ) || null
66-
const gapPresetMarks = usePresetControls( 'spacingSizes' )?.getPresetMarks() || null
67-
const borderRadiusPresetMarks = usePresetControls( 'borderRadius' )?.getPresetMarks() || null
59+
?.getPresetMarks( { addNonePreset: true } ) || null
60+
const borderRadiusPresetMarks = usePresetControls( 'borderRadius' )
61+
?.getPresetMarks( { addNonePreset: true } ) || null
6862

6963
return (
7064
<>
@@ -266,7 +260,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-buttons-and-
266260
onChange={ value => onChange( 'button-column-gap', value, STATES.RESPONSIVE ) }
267261
hasTabletValue={ getHasDeviceValue( 'button-column-gap', 'tablet' ) }
268262
hasMobileValue={ getHasDeviceValue( 'button-column-gap', 'mobile' ) }
269-
marks={ gapPresetMarks }
263+
marks={ sizePresetMarks }
270264
/>
271265
<AdvancedRangeControl
272266
label={ __( 'Row Gap', i18n ) }
@@ -278,7 +272,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-buttons-and-
278272
onChange={ value => onChange( 'button-row-gap', value, STATES.RESPONSIVE ) }
279273
hasTabletValue={ getHasDeviceValue( 'button-row-gap', 'tablet' ) }
280274
hasMobileValue={ getHasDeviceValue( 'button-row-gap', 'mobile' ) }
281-
marks={ gapPresetMarks }
275+
marks={ sizePresetMarks }
282276
/>
283277
</SectionSettings>
284278

@@ -340,7 +334,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-buttons-and-
340334
onChange={ value => onChange( 'icon-list-row-gap', value, STATES.RESPONSIVE ) }
341335
hasTabletValue={ getHasDeviceValue( 'icon-list-row-gap', 'tablet' ) }
342336
hasMobileValue={ getHasDeviceValue( 'icon-list-row-gap', 'mobile' ) }
343-
marks={ gapPresetMarks }
337+
marks={ sizePresetMarks }
344338
/>
345339
<AdvancedRangeControl
346340
label={ __( 'Icon Gap', i18n ) }

‎src/plugins/global-settings/preset-controls/presets.json‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -136,11 +136,6 @@
136136
}
137137
],
138138
"borderRadius": [
139-
{
140-
"name": "None",
141-
"size": "0px",
142-
"slug": "none"
143-
},
144139
{
145140
"name": "XS",
146141
"size": "2px",

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

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -56,16 +56,13 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-spacing-and-
5656
setDisplayHoverNotice,
5757
saveTimeout
5858
)
59-
// Add additional presets for setting margins and paddings to None
60-
const nonePreset = {
61-
name: 'None',
62-
size: '0rem',
63-
slug: 'none',
64-
}
59+
6560
const sizePresetMarks = usePresetControls( 'spacingSizes' )
66-
?.getPresetMarks( { additionalPresets: [ nonePreset ] } ) || null
67-
const gapPresetMarks = usePresetControls( 'spacingSizes' )?.getPresetMarks() || null
68-
const borderRadiusPresetMarks = usePresetControls( 'borderRadius' )?.getPresetMarks() || null
61+
?.getPresetMarks( { addNonePreset: true } ) || null
62+
const gapPresetMarks = usePresetControls( 'spacingSizes' )
63+
?.getPresetMarks( { addNonePreset: true } ) || null
64+
const borderRadiusPresetMarks = usePresetControls( 'borderRadius' )
65+
?.getPresetMarks( { addNonePreset: true } ) || null
6966

7067
return (
7168
<>

0 commit comments

Comments
 (0)