Skip to content

Commit 8efb71e

Browse files
ArukuenArukuen
committed
fix: implement presets in the design system; fix issues with reactivity, variable type, units, etc.
1 parent 46a7b29 commit 8efb71e

File tree

8 files changed

+167
-67
lines changed

8 files changed

+167
-67
lines changed

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

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -104,20 +104,22 @@ const AdvancedRangeControl = props => {
104104
placeholderRender = null
105105
}
106106

107+
let derivedValue = typeof props.value === 'undefined'
108+
? value : props.value
109+
107110
// Is value at first render the same as a step value? If so, do mark mode
108111
// at the start, or show custom
109-
let currentMark = null
110-
if ( props.marks && value ) {
111-
const valueToCheck = value + ( props.hasCSSVariableValue ? '' : unit )
112+
let isMarkValue = !! props.marks
113+
if ( props.marks && derivedValue ) {
112114
// Check if the current value exists in the marks only by their CSS variable name
113115
// to match in case the fallback size changes.
114-
props.marks.forEach( mark => {
115-
if ( getCSSVarName( mark.value ) === getCSSVarName( valueToCheck ) ) {
116-
currentMark = mark
117-
}
118-
} )
116+
const matchedMark = props.marks.find( mark => getCSSVarName( mark.value ) === getCSSVarName( derivedValue ) )
117+
isMarkValue = !! matchedMark
118+
if ( matchedMark ) {
119+
derivedValue = matchedMark.value
120+
}
119121
}
120-
const [ isMarkMode, setIsMarkMode ] = useState( !! currentMark )
122+
const [ isMarkMode, setIsMarkMode ] = useState( isMarkValue )
121123

122124
// If this supports dynamic content, the value should be saved as a String.
123125
// Similar if using marks to accomodate CSS variable
@@ -140,11 +142,6 @@ const AdvancedRangeControl = props => {
140142
onChangeFunc( newValue )
141143
}
142144

143-
const derivedValue = typeof props.value === 'undefined'
144-
// Use the value from the provided marks
145-
? currentMark ? currentMark.value : value
146-
: props.value
147-
148145
const dynamicContentProps = useDynamicContentControlProps( {
149146
value: derivedValue,
150147
onChange: _onChange,
@@ -207,9 +204,9 @@ const AdvancedRangeControl = props => {
207204
const markValue = props.marks[ value ]?.[ property ] || '0'
208205
let [ newValue, unit ] = extractNumbersAndUnits( markValue )[ 0 ]
209206

210-
// If the attribute has no units (only support px), and the
211-
// preset units are rem or em, convert to px
212-
if ( ! hasUnits && ( unit === 'rem' || unit === 'em' ) ) {
207+
// If the attribute has no support for rem, and the
208+
// preset units is rem, convert to px
209+
if ( ( ! hasUnits || ( hasUnits && ! props.units.includes( 'rem' ) ) ) && unit === 'rem' ) {
213210
newValue = `${ parseFloat( newValue ) * 16 }`
214211
unit = 'px'
215212
}
@@ -218,6 +215,9 @@ const AdvancedRangeControl = props => {
218215
if ( unit ) {
219216
dispatch( 'core/block-editor' ).__unstableMarkNextChangeAsNotPersistent()
220217
setAttributes( { [ unitAttrName ]: unit } )
218+
if ( props.onChangeUnit ) {
219+
props.onChangeUnit( unit )
220+
}
221221
}
222222

223223
_onChange( newValue )

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

Lines changed: 47 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import RangeControl from '../advanced-range-control/range-control'
1818
import { ResetButton } from '../base-control2/reset-button'
1919
import AdvancedControl, { extractControlProps } from '../base-control2'
2020
import { useControlHandlers } from '../base-control2/hooks'
21-
import { extractNumbersAndUnits } from '~stackable/util'
2221

2322
/**
2423
* WordPress dependencies
@@ -45,6 +44,7 @@ import {
4544
useBlockHoverState,
4645
useBlockSetAttributesContext,
4746
} from '~stackable/hooks'
47+
import { extractNumbersAndUnits, getCSSVarName } from '~stackable/util'
4848

4949
const isEqualInitial = ( props, value, firstValue ) => {
5050
let isEqual = true
@@ -81,7 +81,7 @@ const FourRangeControl = memo( props => {
8181
( props.enableBottom && value.bottom === '' ) &&
8282
( props.enableLeft && value.left === '' )
8383

84-
const firstValue = props.enableTop ? value.top
84+
let firstValue = props.enableTop ? value.top
8585
: props.enableRight ? value.right
8686
: props.enableBottom ? value.bottom
8787
: value.left
@@ -195,17 +195,26 @@ const FourRangeControl = memo( props => {
195195
left: !! props.marks,
196196
}
197197
if ( props.marks && firstValue ) {
198-
// Check if the current value exsits in the marks
199-
const marksUnit = ( props.hasCSSVariableValue ? '' : unit )
200-
isMarkValue.first = isMarkValue.first && props.marks.some( mark => mark.value === firstValue + marksUnit )
201-
isMarkValue.top = isMarkValue.top && props.marks.some( mark => mark.value === value.top + marksUnit )
202-
isMarkValue.right = isMarkValue.right && props.marks.some( mark => mark.value === value.right + marksUnit )
203-
isMarkValue.bottom = isMarkValue.bottom && props.marks.some( mark => mark.value === value.bottom + marksUnit )
204-
isMarkValue.left = isMarkValue.left && props.marks.some( mark => mark.value === value.left + marksUnit )
198+
// Check if the current value exists in the marks only by their CSS variable name
199+
// to match in case the fallback size changes.
200+
const firstMatchedMark = props.marks.find( mark => getCSSVarName( mark.value ) === getCSSVarName( firstValue ) )
201+
isMarkValue.first = !! firstMatchedMark
202+
if ( firstMatchedMark ) {
203+
firstValue = firstMatchedMark.value
204+
}
205+
206+
[ 'top', 'right', 'bottom', 'left' ].forEach( side => {
207+
const matchedMark = props.marks.find( mark => getCSSVarName( mark.value ) === getCSSVarName( value[ side ] ) )
208+
isMarkValue[ side ] = !! matchedMark
209+
if ( matchedMark ) {
210+
value[ side ] = matchedMark.value
211+
}
212+
} )
205213
}
206214
const [ isFourMarkMode, setIsFourMarkMode ] = useState( isMarkValue )
207215

208-
const onChangeAll = newValue => {
216+
const onChangeAll = _newValue => {
217+
const newValue = props.marks ? String( _newValue ) : _newValue
209218
onChange( {
210219
top: props.enableTop ? newValue : value.top,
211220
right: props.enableRight ? newValue : value.right,
@@ -221,7 +230,8 @@ const FourRangeControl = memo( props => {
221230
} ) )
222231
}
223232

224-
const onChangeTop = newValue => {
233+
const onChangeTop = _newValue => {
234+
const newValue = props.marks ? String( _newValue ) : _newValue
225235
onChange( {
226236
top: newValue,
227237
right: value.right,
@@ -231,7 +241,8 @@ const FourRangeControl = memo( props => {
231241
setIsFourMarkMode( prev => ( { ...prev, first: prev.top } ) )
232242
}
233243

234-
const onChangeRight = newValue => {
244+
const onChangeRight = _newValue => {
245+
const newValue = props.marks ? String( _newValue ) : _newValue
235246
onChange( {
236247
top: value.top,
237248
right: newValue,
@@ -241,7 +252,8 @@ const FourRangeControl = memo( props => {
241252
setIsFourMarkMode( prev => ( { ...prev, first: prev.right } ) )
242253
}
243254

244-
const onChangeBottom = newValue => {
255+
const onChangeBottom = _newValue => {
256+
const newValue = props.marks ? String( _newValue ) : _newValue
245257
onChange( {
246258
top: value.top,
247259
right: value.right,
@@ -251,7 +263,8 @@ const FourRangeControl = memo( props => {
251263
setIsFourMarkMode( prev => ( { ...prev, first: prev.bottom } ) )
252264
}
253265

254-
const onChangeLeft = newValue => {
266+
const onChangeLeft = _newValue => {
267+
const newValue = props.marks ? String( _newValue ) : _newValue
255268
onChange( {
256269
top: value.top,
257270
right: value.right,
@@ -261,7 +274,8 @@ const FourRangeControl = memo( props => {
261274
setIsFourMarkMode( prev => ( { ...prev, first: prev.left } ) )
262275
}
263276

264-
const onChangeVertical = newValue => {
277+
const onChangeVertical = _newValue => {
278+
const newValue = props.marks ? String( _newValue ) : _newValue
265279
onChange( {
266280
top: newValue,
267281
right: value.right,
@@ -275,7 +289,8 @@ const FourRangeControl = memo( props => {
275289
} ) )
276290
}
277291

278-
const onChangeHorizontal = newValue => {
292+
const onChangeHorizontal = _newValue => {
293+
const newValue = props.marks ? String( _newValue ) : _newValue
279294
onChange( {
280295
top: value.top,
281296
right: newValue,
@@ -327,7 +342,7 @@ const FourRangeControl = memo( props => {
327342
}
328343

329344
// We need to change the way we handle the value and onChange if we're doing marks
330-
let rangeValue = props.hasCSSVariableValue ? parseFloat( initialValue ) : initialValue
345+
let rangeValue = props.marks ? parseFloat( initialValue ) : initialValue
331346
let rangeOnChange = initialOnChange
332347
if ( props.marks && isMarkMode ) {
333348
rangeValue = props.marks.findIndex( mark => {
@@ -341,12 +356,23 @@ const FourRangeControl = memo( props => {
341356

342357
// Extract the unit and value.
343358
const markValue = props.marks[ value ]?.[ property ] || '0'
344-
const [ _newValue, unit ] = extractNumbersAndUnits( markValue )[ 0 ]
345-
const newValue = _newValue
359+
let [ newValue, unit ] = extractNumbersAndUnits( markValue )[ 0 ]
360+
361+
// If the attribute has no support for rem, and the
362+
// preset units is rem, convert to px
363+
if ( ( ! hasUnits || ( hasUnits && ! props.units.includes( 'rem' ) ) ) && unit === 'rem' ) {
364+
newValue = `${ parseFloat( newValue ) * 16 }`
365+
unit = 'px'
366+
}
346367

347368
// Update the unit.
348-
dispatch( 'core/block-editor' ).__unstableMarkNextChangeAsNotPersistent()
349-
setAttributes( { [ unitAttrName ]: unit } )
369+
if ( unit ) {
370+
dispatch( 'core/block-editor' ).__unstableMarkNextChangeAsNotPersistent()
371+
setAttributes( { [ unitAttrName ]: unit } )
372+
if ( props.onChangeUnit ) {
373+
props.onChangeUnit( unit )
374+
}
375+
}
350376

351377
initialOnChange( newValue )
352378
}
@@ -890,7 +916,6 @@ FourRangeControl.defaultProps = {
890916

891917
marks: undefined,
892918
allowCustom: true,
893-
hasCSSVariableValue: false,
894919
}
895920

896921
export default memo( FourRangeControl )

‎src/global-settings.php‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,26 @@ public static function get_four_range_properties() {
144144

145145
return Stackable_Global_Settings::create_global_schema( $four_range_type );
146146
}
147+
148+
/**
149+
* This function defines a schema for a string four-range type and utilizes the
150+
* `create_global_schema` function to generate the complete schema.
151+
*
152+
* @return array The generated schema for four-range type.
153+
*/
154+
public static function get_string_four_range_properties() {
155+
$string_four_range_type = array(
156+
'type' => 'object',
157+
'properties' => array(
158+
'top' => array( 'type' => 'string', 'default' => '' ),
159+
'right' => array( 'type' => 'string', 'default' => '' ),
160+
'bottom' => array( 'type' => 'string', 'default' => '' ),
161+
'left' => array( 'type' => 'string', 'default' => '' ),
162+
)
163+
);
164+
165+
return Stackable_Global_Settings::create_global_schema( $string_four_range_type );
166+
}
147167

148168
/**
149169
* This function defines a schema for a string type and utilizes the
@@ -1019,7 +1039,7 @@ public static function generate_global_block_layouts( $option_name, $settings_na
10191039
$custom_property .= '-' . $hover_state;
10201040
}
10211041

1022-
if ( is_string( $value ) ) {
1042+
if ( is_string( $value ) && ! is_numeric( $value ) ) {
10231043
if ( strpos( $value, 'rgb' ) ) {
10241044
// Convert rgba colors to hex alpha colors because
10251045
// the function wp_style_engine_get_stylesheet_from_css_rules() doesn't allow css values to have '('
@@ -1050,7 +1070,10 @@ public static function generate_global_block_layouts( $option_name, $settings_na
10501070
$bottom = isset( $value[ 'bottom' ] ) ? $value[ 'bottom' ] : $default_value[ 'bottom' ];
10511071
$left = isset( $value[ 'left' ] ) ? $value[ 'left' ] : $default_value[ 'left' ];
10521072

1053-
$style = $top . $unit . ' ' . $right . $unit . ' ' . $bottom . $unit . ' ' . $left . $unit;
1073+
$style = Stackable_Global_Settings::append_unit_if_needed( $top, $unit ) . ' '
1074+
. Stackable_Global_Settings::append_unit_if_needed( $right, $unit ) . ' '
1075+
. Stackable_Global_Settings::append_unit_if_needed( $bottom, $unit ) . ' '
1076+
. Stackable_Global_Settings::append_unit_if_needed( $left, $unit );
10541077
} else {
10551078
$style = $value . $unit;
10561079
}
@@ -1100,6 +1123,14 @@ public static function generate_global_block_layouts( $option_name, $settings_na
11001123
return $generated_css;
11011124
}
11021125

1126+
public static function append_unit_if_needed( $value, $unit ) {
1127+
if ( is_string( $value ) && str_starts_with( trim( $value ), 'var(' ) ) {
1128+
return $value;
1129+
}
1130+
return $value . $unit;
1131+
}
1132+
1133+
11031134
public static function extract_rgba($value) {
11041135
$options = $value;
11051136
$color = '';

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
} from '../utils'
2424
import { BORDER_CONTROLS } from '~stackable/block-components'
2525
import { i18n } from 'stackable'
26+
import { usePresetControls } from '~stackable/hooks'
2627

2728
/**
2829
* WordPress dependencies
@@ -54,6 +55,17 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-buttons-and-
5455
saveTimeout
5556
)
5657

58+
// Add additional presets for setting margins and paddings to None
59+
const nonePreset = {
60+
name: 'None',
61+
size: '0rem',
62+
slug: 'none',
63+
}
64+
const sizePresetMarks = usePresetControls( 'spacingSizes' )
65+
?.getPresetMarks( { additionalPresets: [ nonePreset ] } ) || null
66+
const gapPresetMarks = usePresetControls( 'spacingSizes' )?.getPresetMarks() || null
67+
const borderRadiusPresetMarks = usePresetControls( 'borderRadius' )?.getPresetMarks() || null
68+
5769
return (
5870
<>
5971
{ output }
@@ -112,6 +124,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-buttons-and-
112124
onChange={ value => onChange( 'button-min-height', value, STATES.RESPONSIVE ) }
113125
hasTabletValue={ getHasDeviceValue( 'button-min-height', 'tablet' ) }
114126
hasMobileValue={ getHasDeviceValue( 'button-min-height', 'mobile' ) }
127+
marks={ sizePresetMarks }
115128
/>
116129
<FourRangeControl
117130
label={ __( 'Button Padding', i18n ) }
@@ -138,6 +151,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-buttons-and-
138151
title: __( 'Button padding', i18n ),
139152
description: __( 'Adjusts the space between the button text and button borders', i18n ),
140153
} }
154+
marks={ sizePresetMarks }
141155
/>
142156
<AdvancedToolbarControl
143157
label={ __( 'Borders', i18n ) }
@@ -205,6 +219,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-buttons-and-
205219
video: 'general-border-radius',
206220
description: __( 'Adjusts the radius of block corners to make them more rounded', i18n ),
207221
} }
222+
marks={ borderRadiusPresetMarks }
208223
/>
209224
<ShadowControl
210225
label={ __( 'Shadow / Outline', i18n ) }
@@ -251,6 +266,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-buttons-and-
251266
onChange={ value => onChange( 'button-column-gap', value, STATES.RESPONSIVE ) }
252267
hasTabletValue={ getHasDeviceValue( 'button-column-gap', 'tablet' ) }
253268
hasMobileValue={ getHasDeviceValue( 'button-column-gap', 'mobile' ) }
269+
marks={ gapPresetMarks }
254270
/>
255271
<AdvancedRangeControl
256272
label={ __( 'Row Gap', i18n ) }
@@ -262,6 +278,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-buttons-and-
262278
onChange={ value => onChange( 'button-row-gap', value, STATES.RESPONSIVE ) }
263279
hasTabletValue={ getHasDeviceValue( 'button-row-gap', 'tablet' ) }
264280
hasMobileValue={ getHasDeviceValue( 'button-row-gap', 'mobile' ) }
281+
marks={ gapPresetMarks }
265282
/>
266283
</SectionSettings>
267284

@@ -294,6 +311,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-buttons-and-
294311
title: __( 'Button padding', i18n ),
295312
description: __( 'Adjusts the space between the button text and button borders', i18n ),
296313
} }
314+
marks={ sizePresetMarks }
297315
/>
298316
</SectionSettings>
299317
<SectionSettings
@@ -322,6 +340,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-buttons-and-
322340
onChange={ value => onChange( 'icon-list-row-gap', value, STATES.RESPONSIVE ) }
323341
hasTabletValue={ getHasDeviceValue( 'icon-list-row-gap', 'tablet' ) }
324342
hasMobileValue={ getHasDeviceValue( 'icon-list-row-gap', 'mobile' ) }
343+
marks={ gapPresetMarks }
325344
/>
326345
<AdvancedRangeControl
327346
label={ __( 'Icon Gap', i18n ) }

0 commit comments

Comments
 (0)