Skip to content

Commit 5ac5abc

Browse files
ArukuenArukuen
committed
Merge branch 'feat/size-control-steps' into feat/typography-typescale
2 parents 054216e + 9a558c8 commit 5ac5abc

File tree

14 files changed

+189
-100
lines changed

14 files changed

+189
-100
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
3333
responsive: 'all',
3434
valueCallback: value => {
3535
// Substitute with using format to work with preset controls
36-
if ( value.startsWith( 'var(--stk' ) ) {
36+
if ( value.startsWith( 'var' ) ) {
3737
return value
3838
}
3939
return value + 'px'
@@ -46,7 +46,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
4646
attrName: 'columnGap',
4747
responsive: 'all',
4848
valueCallback: value => {
49-
if ( value.startsWith( 'var(--stk' ) ) {
49+
if ( value.startsWith( 'var' ) ) {
5050
return value
5151
}
5252
return value + 'px'
@@ -91,7 +91,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
9191
attrName: 'rowGap',
9292
responsive: 'all',
9393
valueCallback: value => {
94-
if ( value.startsWith( 'var(--stk' ) ) {
94+
if ( value.startsWith( 'var' ) ) {
9595
return value
9696
}
9797
return value + 'px'
@@ -104,7 +104,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
104104
attrName: 'rowGap',
105105
responsive: 'all',
106106
valueCallback: value => {
107-
if ( value.startsWith( 'var(--stk' ) ) {
107+
if ( value.startsWith( 'var' ) ) {
108108
return value
109109
}
110110
return value + 'px'

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
3939
valueCallback: value => {
4040
// Substitute with using format to work with preset controls
4141
value = typeof value === 'number' ? value.toString() : value
42-
if ( value.startsWith( 'var(--stk' ) ) {
42+
if ( value.startsWith( 'var' ) ) {
4343
return value
4444
}
4545
return value + 'px'
@@ -57,7 +57,7 @@ export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
5757
attrNameTemplate,
5858
valueCallback: value => {
5959
value = typeof value === 'number' ? value.toString() : value
60-
if ( value.startsWith( 'var(--stk' ) ) {
60+
if ( value.startsWith( 'var' ) ) {
6161
return value
6262
}
6363
return value + 'px'
@@ -75,7 +75,7 @@ export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
7575
attrNameTemplate,
7676
valueCallback: value => {
7777
value = typeof value === 'number' ? value.toString() : value
78-
if ( value.startsWith( 'var(--stk' ) ) {
78+
if ( value.startsWith( 'var' ) ) {
7979
return value
8080
}
8181
return value + 'px'
@@ -93,7 +93,7 @@ export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
9393
attrNameTemplate,
9494
valueCallback: value => {
9595
value = typeof value === 'number' ? value.toString() : value
96-
if ( value.startsWith( 'var(--stk' ) ) {
96+
if ( value.startsWith( 'var' ) ) {
9797
return value
9898
}
9999
return value + 'px'

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

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,10 @@ const Layout = props => {
4040
label={ labelHeight }
4141
attribute={ getAttrName( 'height' ) }
4242
responsive="all"
43-
units={ [ 'px', 'vh' ] }
44-
min={ [ 0, 0 ] }
45-
sliderMax={ [ 1000, 100 ] }
46-
step={ [ 1, 1 ] }
43+
units={ [ 'px', 'rem', 'vh' ] }
44+
min={ [ 0, 0, 0 ] }
45+
sliderMax={ [ 1000, 60, 100 ] }
46+
step={ [ 1, 1, 1 ] }
4747
allowReset={ true }
4848
placeholder="0"
4949
helpTooltip={ {
@@ -139,7 +139,14 @@ const Spacing = props => {
139139
highlight: 'margin',
140140
}
141141

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

144151
return (
145152
<>
@@ -148,10 +155,10 @@ const Spacing = props => {
148155
attribute={ getAttrName( 'padding' ) }
149156
responsive="all"
150157
hover="all"
151-
units={ [ 'px', 'em', '%' ] }
158+
units={ [ 'px', 'em', 'rem', '%' ] }
152159
defaultLocked={ true }
153-
min={ [ 0, 0, 0 ] }
154-
sliderMax={ [ 200, 30, 100 ] }
160+
min={ [ 0, 0, 0, 0 ] }
161+
sliderMax={ [ 200, 30, 30, 100 ] }
155162
helpTooltip={ {
156163
video: 'inner-block-padding',
157164
description: __( 'Sets the block paddings, i.e the space between the inner columns and the block border', i18n ),
@@ -167,10 +174,10 @@ const Spacing = props => {
167174
label={ labelMargins }
168175
attribute={ getAttrName( 'margin' ) }
169176
responsive="all"
170-
units={ [ 'px', '%' ] }
177+
units={ [ 'px', 'rem', '%' ] }
171178
defaultLocked={ false }
172-
sliderMin={ [ -200, -100 ] }
173-
sliderMax={ [ 200, 100 ] }
179+
sliderMin={ [ -200, -15, -100 ] }
180+
sliderMax={ [ 200, 15, 100 ] }
174181
placeholder="0"
175182
helpTooltip={ {
176183
video: 'advanced-block-margin',

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,8 @@ export const Controls = props => {
104104

105105
const onChangeContent = useCallback( text => setDebouncedText( escapeHTMLIfInvalid( text ) ), [] )
106106

107-
const presetMarks = usePresetControls( 'fontSizes' )?.getPresetMarks( useTypographyAsPresets ) || null
107+
const presetMarks = usePresetControls( 'fontSizes' )
108+
?.getPresetMarks( { customOnly: useTypographyAsPresets } ) || null
108109

109110
return (
110111
<>
@@ -265,9 +266,9 @@ export const Controls = props => {
265266
allowReset={ true }
266267
attribute={ attributeName( 'fontSize' ) }
267268
units={ [ 'px', 'em', 'rem' ] }
268-
min={ [ 0, 0 ] }
269-
sliderMax={ [ 150, 7 ] }
270-
step={ [ 1, 0.05 ] }
269+
min={ [ 0, 0, 0 ] }
270+
sliderMax={ [ 150, 7, 7 ] }
271+
step={ [ 1, 0.05, 0.05 ] }
271272
placeholder={ props.sizePlaceholder }
272273
responsive="all"
273274
helpTooltip={ {

‎src/components/advanced-range-control/index.js‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
useBlockSetAttributesContext,
1414
useDeviceType,
1515
} from '~stackable/hooks'
16+
import { extractNumbersAndUnits } from '~stackable/util'
1617

1718
/**
1819
* External dependencies
@@ -186,18 +187,23 @@ const AdvancedRangeControl = props => {
186187
let rangeOnChange = _onChange
187188
if ( isMarkMode ) {
188189
rangeValue = props.marks.findIndex( mark => {
189-
const [ _value, _unit ] = extractNumberAndUnit( mark.value )
190+
const [ _value, _unit ] = extractNumbersAndUnits( mark.value )[ 0 ]
190191
return _value === derivedValue
191192
} )
192-
rangeOnChange = value => {
193+
rangeOnChange = ( value, property = 'value' ) => {
193194
if ( value === '' ) {
194195
return _onChange( value )
195196
}
196-
197197
// Extract the unit and value.
198-
const markValue = props.marks[ value ]?.value || '0'
199-
const [ _newValue, unit ] = extractNumberAndUnit( markValue )
200-
const newValue = _newValue
198+
const markValue = props.marks[ value ]?.[ property ] || '0'
199+
let [ newValue, unit ] = extractNumbersAndUnits( markValue )[ 0 ]
200+
201+
// If the attribute has no units (only support px), and the
202+
// preset units are rem or em, convert to px
203+
if ( ! hasUnits && ( unit === 'rem' || unit === 'em' ) ) {
204+
newValue = `${ parseFloat( newValue ) * 16 }`
205+
unit = 'px'
206+
}
201207

202208
// Update the unit.
203209
if ( unit ) {
@@ -229,7 +235,13 @@ const AdvancedRangeControl = props => {
229235
className="stk-range-control__custom-button"
230236
size="small"
231237
variant="tertiary"
232-
onClick={ () => setIsMarkMode( ! isMarkMode ) }
238+
onClick={ () => {
239+
// Set the value when changing from mark mode to custom
240+
if ( isMarkMode && rangeValue !== -1 ) {
241+
rangeOnChange( rangeValue, 'size' )
242+
}
243+
setIsMarkMode( ! isMarkMode )
244+
} }
233245
icon={ settings }
234246
>
235247
</Button>
@@ -272,14 +284,3 @@ AdvancedRangeControl.defaultProps = {
272284
}
273285

274286
export default memo( AdvancedRangeControl, isEqual )
275-
276-
// The value can be in the format '10px' or '10.0em' or '10rem'.
277-
// Return an array with the number and the unit.
278-
const extractNumberAndUnit = value => {
279-
// Match the last characters that are not numbers.
280-
const matches = value.match( /([\d.]+)(\D*)$/ )
281-
if ( ! matches || value.startsWith( 'var(--stk' ) ) {
282-
return [ value, '' ]
283-
}
284-
return [ matches[ 1 ], matches[ 2 ] ]
285-
}

‎src/components/block-css/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ const BlockCss = props => {
183183

184184
if ( unit ) { // Note: this will only work for non-objects.
185185
// If the value is `auto` or a CSS variable, don't add units.
186-
if ( ! ( value === 'auto' || ( typeof value === 'string' && value.startsWith( 'var(--stk' ) ) ) ) {
186+
if ( ! ( value === 'auto' || ( typeof value === 'string' && value.startsWith( 'var' ) ) ) ) {
187187
value = `${ value }${ unit }`
188188
}
189189
}

0 commit comments

Comments
 (0)