Skip to content

Commit 8b0e8cf

Browse files
ArukuenArukuen
committed
Merge branch 'feat/size-control-steps' into develop
2 parents 8bbe710 + 6227528 commit 8b0e8cf

File tree

24 files changed

+956
-46
lines changed

24 files changed

+956
-46
lines changed

‎plugin.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,6 +234,7 @@ function is_frontend() {
234234
require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/spacing-and-borders/index.php' );
235235
require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/buttons-and-icons/index.php' );
236236
require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/color-schemes/index.php' );
237+
require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/preset-controls/index.php' );
237238
require_once( plugin_dir_path( __FILE__ ) . 'src/custom-block-styles.php' );
238239
require_once( plugin_dir_path( __FILE__ ) . 'src/css-optimize.php' );
239240
require_once( plugin_dir_path( __FILE__ ) . 'src/compatibility/index.php' );

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ export const addAttributes = attrObject => {
99
},
1010
columnGap: {
1111
stkResponsive: true,
12-
type: 'number',
12+
type: 'string',
1313
default: '',
1414
},
1515
rowGap: {
1616
stkResponsive: true,
17-
type: 'number',
17+
type: 'string',
1818
default: '',
1919
},
2020
columnWrapDesktop: { // Only applies to desktops

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
useBlockSetAttributesContext,
2424
useDeviceType,
2525
useBlockLayoutDefaults,
26+
usePresetControls,
2627
} from '~stackable/hooks'
2728
import { range } from 'lodash'
2829

@@ -124,6 +125,8 @@ export const Controls = props => {
124125
: deviceType === 'Tablet' ? ( attributes.columnArrangementTablet || defaultArrangement )
125126
: ( attributes.columnArrangementMobile || defaultArrangement )
126127

128+
const presetMarks = usePresetControls( 'spacingSizes' )?.getPresetMarks() || null
129+
127130
return (
128131
<>
129132
{ props.hasColumnsControl && <ColumnsControl /> }
@@ -284,6 +287,8 @@ export const Controls = props => {
284287
video: 'column-gap',
285288
description: __( 'Sets the distance between two or more columns', i18n ),
286289
} }
290+
marks={ presetMarks }
291+
hasCSSVariableValue={ true }
287292
/>
288293
<AdvancedRangeControl
289294
label={ __( 'Row Gap', i18n ) }
@@ -296,6 +301,8 @@ export const Controls = props => {
296301
// TODO: Add a working video
297302
description: __( 'Sets the distance between two or more columns', i18n ),
298303
} }
304+
marks={ presetMarks }
305+
hasCSSVariableValue={ true }
299306
/>
300307
</>
301308
) }

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

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,16 +30,27 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
3030
selector: '.%s-column',
3131
styleRule: '--stk-column-gap',
3232
attrName: 'columnGap',
33-
format: '%spx',
3433
responsive: 'all',
34+
valueCallback: value => {
35+
// Substitute with using format to work with preset controls
36+
if ( value.startsWith( 'var(--stk' ) ) {
37+
return value
38+
}
39+
return value + 'px'
40+
},
3541
}, {
3642
...propsToPass,
3743
renderIn: 'edit',
3844
selector: '.%s-column > .block-editor-inner-blocks > .block-editor-block-list__layout',
3945
styleRule: '--stk-column-gap',
4046
attrName: 'columnGap',
41-
format: '%spx',
4247
responsive: 'all',
48+
valueCallback: value => {
49+
if ( value.startsWith( 'var(--stk' ) ) {
50+
return value
51+
}
52+
return value + 'px'
53+
},
4354
} ] )
4455

4556
blockStyleGenerator.addBlockStyles( 'columnWrapDesktop', [ {
@@ -78,16 +89,26 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
7889
selector: '.%s-column',
7990
styleRule: 'rowGap',
8091
attrName: 'rowGap',
81-
format: '%spx',
8292
responsive: 'all',
93+
valueCallback: value => {
94+
if ( value.startsWith( 'var(--stk' ) ) {
95+
return value
96+
}
97+
return value + 'px'
98+
},
8399
}, {
84100
...propsToPass,
85101
renderIn: 'edit',
86102
selector: '.%s-column > .block-editor-inner-blocks > .block-editor-block-list__layout',
87103
styleRule: 'rowGap',
88104
attrName: 'rowGap',
89-
format: '%spx',
90105
responsive: 'all',
106+
valueCallback: value => {
107+
if ( value.startsWith( 'var(--stk' ) ) {
108+
return value
109+
}
110+
return value + 'px'
111+
},
91112
} ] )
92113
}
93114

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
import { Fragment } from '@wordpress/element'
1616
import { __ } from '@wordpress/i18n'
1717
import {
18-
useAttributeEditHandlers, useBlockLayoutDefaults, useBlockSetAttributesContext,
18+
useAttributeEditHandlers, useBlockLayoutDefaults, useBlockSetAttributesContext, usePresetControls,
1919
} from '~stackable/hooks'
2020
import { applyFilters } from '@wordpress/hooks'
2121

@@ -71,6 +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
75+
7476
return (
7577
<Fragment>
7678
{ props.hasBorderType &&
@@ -132,6 +134,8 @@ export const BorderControls = props => {
132134
isCorner={ true }
133135
sliderMax={ props.borderSliderMax }
134136
placeholder={ props.borderRadiusPlaceholder }
137+
marks={ presetMarks }
138+
hasCSSVariableValue={ true }
135139
/>
136140
}
137141
<ShadowControl

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

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,14 @@ export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
3636
attrName: 'borderRadius2',
3737
key: 'borderTopLeftRadius2',
3838
attrNameTemplate,
39-
format: '%spx',
39+
valueCallback: value => {
40+
// Substitute with using format to work with preset controls
41+
value = typeof value === 'number' ? value.toString() : value
42+
if ( value.startsWith( 'var(--stk' ) ) {
43+
return value
44+
}
45+
return value + 'px'
46+
},
4047
responsive: 'all',
4148
hover: 'all',
4249
valuePreCallback: value => value?.top,
@@ -48,7 +55,13 @@ export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
4855
attrName: 'borderRadius2',
4956
key: 'borderTopRightRadius2',
5057
attrNameTemplate,
51-
format: '%spx',
58+
valueCallback: value => {
59+
value = typeof value === 'number' ? value.toString() : value
60+
if ( value.startsWith( 'var(--stk' ) ) {
61+
return value
62+
}
63+
return value + 'px'
64+
},
5265
responsive: 'all',
5366
hover: 'all',
5467
valuePreCallback: value => value?.right,
@@ -60,7 +73,13 @@ export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
6073
attrName: 'borderRadius2',
6174
key: 'borderBottomRightRadius2',
6275
attrNameTemplate,
63-
format: '%spx',
76+
valueCallback: value => {
77+
value = typeof value === 'number' ? value.toString() : value
78+
if ( value.startsWith( 'var(--stk' ) ) {
79+
return value
80+
}
81+
return value + 'px'
82+
},
6483
responsive: 'all',
6584
hover: 'all',
6685
valuePreCallback: value => value?.left,
@@ -72,7 +91,13 @@ export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
7291
attrName: 'borderRadius2',
7392
key: 'borderBottomLeftRadius2',
7493
attrNameTemplate,
75-
format: '%spx',
94+
valueCallback: value => {
95+
value = typeof value === 'number' ? value.toString() : value
96+
if ( value.startsWith( 'var(--stk' ) ) {
97+
return value
98+
}
99+
return value + 'px'
100+
},
76101
responsive: 'all',
77102
hover: 'all',
78103
valuePreCallback: value => value?.bottom,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ export const sizeAttributes = {
22
height: {
33
stkResponsive: true,
44
stkUnits: 'px',
5-
type: 'number',
5+
type: 'string',
66
default: '',
77
},
88
width: {

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ import {
77
AdvancedRangeControl,
88
FourRangeControl,
99
} from '~stackable/components'
10-
import { useAttributeEditHandlers, useDeviceType } from '~stackable/hooks'
10+
import {
11+
useAttributeEditHandlers, useDeviceType, usePresetControls,
12+
} from '~stackable/hooks'
1113

1214
/**
1315
* WordPress dependencies
@@ -30,6 +32,8 @@ const Layout = props => {
3032
labelVerticalAlign = __( 'Content Vertical Align', i18n ),
3133
} = props.labels
3234

35+
const presetMarks = usePresetControls( 'blockHeights' )?.getPresetMarks() || null
36+
3337
return (
3438
<>
3539
{ props.hasMinHeight && <AdvancedRangeControl
@@ -47,6 +51,8 @@ const Layout = props => {
4751
description: __( 'Adjusts the minimum allowable height of the block', i18n ),
4852
} }
4953
visualGuide={ props.visualGuide }
54+
marks={ presetMarks }
55+
hasCSSVariableValue={ true }
5056
/> }
5157

5258
{ props.hasContentVerticalAlign &&
@@ -133,6 +139,8 @@ const Spacing = props => {
133139
highlight: 'margin',
134140
}
135141

142+
const presetMarks = usePresetControls( 'spacingSizes' )?.getPresetMarks() || null
143+
136144
return (
137145
<>
138146
<FourRangeControl
@@ -150,6 +158,8 @@ const Spacing = props => {
150158
} }
151159
visualGuide={ paddingVisualGuide }
152160
placeholder={ props.paddingPlaceholder }
161+
marks={ presetMarks }
162+
hasCSSVariableValue={ true }
153163
/>
154164

155165
{ props.enableMargin &&
@@ -167,6 +177,8 @@ const Spacing = props => {
167177
description: __( 'Sets the block margin, i.e. the space outside the block between the block border and the next block.', i18n ),
168178
} }
169179
visualGuide={ marginVisualGuide }
180+
marks={ presetMarks }
181+
hasCSSVariableValue={ true }
170182
/>
171183
}
172184
</>

‎src/block-components/typography/attributes.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { deprecatedAddAttributes } from './deprecated'
33
const typographyAttributes = {
44
fontSize: {
55
stkResponsive: true,
6-
type: 'number',
6+
type: 'string',
77
default: '',
88
stkUnits: 'px',
99
},

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
*/
44
import { unescape } from 'lodash'
55
import { i18n } from 'stackable'
6-
import { useAttributeEditHandlers } from '~stackable/hooks'
6+
import { useAttributeEditHandlers, usePresetControls } from '~stackable/hooks'
77
import {
88
AlignButtonsControl,
99
AdvancedRangeControl,
@@ -100,6 +100,8 @@ export const Controls = props => {
100100

101101
const onChangeContent = useCallback( text => setDebouncedText( escapeHTMLIfInvalid( text ) ), [] )
102102

103+
const presetMarks = usePresetControls( 'fontSizes' )?.getPresetMarks() || null
104+
103105
return (
104106
<>
105107
{ applyFilters( 'stackable.block-component.typography.before', null, props ) }
@@ -269,6 +271,8 @@ export const Controls = props => {
269271
title: __( 'Font size', i18n ),
270272
description: __( 'Sets the size of text characters', i18n ),
271273
} }
274+
marks={ presetMarks }
275+
hasCSSVariableValue={ true }
272276
/>
273277

274278
{ hasColor && (

0 commit comments

Comments
 (0)