Skip to content

Commit e853ebd

Browse files
ArukuenArukuen
committed
fix: bug fixes
1 parent fac5fb6 commit e853ebd

File tree

3 files changed

+149
-69
lines changed

3 files changed

+149
-69
lines changed

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

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -118,19 +118,20 @@ const AdvancedRangeControl = props => {
118118
// If no initial value, use the given default from the settings
119119
const [ isMarkMode, setIsMarkMode ] = useState( false )
120120

121-
// Set the markMode when at first render and when device type changes
122-
useEffect( () => {
123-
let isMarkValue = !! props.marks && isMarkModeDefault
124-
if ( props.marks && derivedValue ) {
121+
let isMarkValue = !! props.marks && isMarkModeDefault
122+
if ( props.marks && derivedValue ) {
125123
// Check if the current value exists in the marks only by their CSS variable name
126124
// to match in case the fallback size changes.
127-
const derivedValueCssVarName = getCSSVarName( derivedValue )
128-
const matchedMark = props.marks.find( mark => getCSSVarName( mark.value ) === derivedValueCssVarName )
129-
isMarkValue = !! matchedMark
130-
if ( matchedMark ) {
131-
derivedValue = matchedMark.value
132-
}
125+
const derivedValueCssVarName = getCSSVarName( derivedValue )
126+
const matchedMark = props.marks.find( mark => getCSSVarName( mark.value ) === derivedValueCssVarName )
127+
isMarkValue = !! matchedMark
128+
if ( matchedMark ) {
129+
derivedValue = matchedMark.value
133130
}
131+
}
132+
133+
// Set the markMode when device type changes
134+
useEffect( () => {
134135
setIsMarkMode( isMarkValue )
135136
}, [ deviceType ] )
136137

@@ -202,18 +203,8 @@ const AdvancedRangeControl = props => {
202203
let rangeOnChange = _onChange
203204
if ( isMarkMode ) {
204205
rangeValue = props.marks.findIndex( mark => {
205-
let _unit, _value
206-
// If the derivedValue is a CSS variable, compare with mark's CSS variable.
207-
// Otherwise, the derivedValue is custom, so compare with raw size and units
208-
if ( typeof derivedValue === 'string' && derivedValue.startsWith( 'var' ) ) {
209-
[ _value, _unit ] = extractNumbersAndUnits( mark.value )[ 0 ]
210-
} else {
211-
[ _value, _unit ] = extractNumbersAndUnits( mark.size )[ 0 ]
212-
const converted = convertToPxIfUnsupported( props.units, _unit, _value )
213-
_value = converted.value
214-
_unit = converted.unit
215-
}
216-
return _value === derivedValue && ( _unit === '' || _unit === unit )
206+
const [ _value, _unit ] = extractNumbersAndUnits( mark.value )[ 0 ]
207+
return _value === derivedValue
217208
} )
218209
rangeOnChange = ( value, property = 'value' ) => {
219210
if ( value === '' ) {
@@ -266,6 +257,19 @@ const AdvancedRangeControl = props => {
266257
// Set the value when changing from mark mode to custom
267258
if ( isMarkMode && rangeValue !== -1 ) {
268259
rangeOnChange( rangeValue, 'size' )
260+
} else {
261+
const rangeValue = props.marks.findIndex( mark => {
262+
let _unit, _value
263+
264+
[ _value, _unit ] = extractNumbersAndUnits( mark.size )[ 0 ]
265+
const converted = convertToPxIfUnsupported( props.units, _unit, _value )
266+
_value = converted.value
267+
_unit = converted.unit
268+
269+
return _value === derivedValue && ( _unit === '' || _unit === unit )
270+
} )
271+
const markValue = props.marks[ rangeValue ]?.value || '0'
272+
_onChange( markValue )
269273
}
270274
setIsMarkMode( ! isMarkMode )
271275
} }

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

Lines changed: 109 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -191,39 +191,40 @@ const FourRangeControl = memo( props => {
191191

192192
const [ isFourMarkMode, setIsFourMarkMode ] = useState( false )
193193

194-
// Set the markMode when at first render and when device type changes
195-
useEffect( () => {
196-
// Is value at first render the same as a step value? If so, do mark mode
197-
// at the start, or show custom
198-
// If no initial value, use the given default from the settings
199-
const isMarkValue = {
200-
first: !! props.marks && isMarkModeDefault,
201-
top: !! props.marks && isMarkModeDefault,
202-
right: !! props.marks && isMarkModeDefault,
203-
bottom: !! props.marks && isMarkModeDefault,
204-
left: !! props.marks && isMarkModeDefault,
194+
// Is value at first render the same as a step value? If so, do mark mode
195+
// at the start, or show custom
196+
// If no initial value, use the given default from the settings
197+
const isMarkValue = {
198+
first: !! props.marks && isMarkModeDefault,
199+
top: !! props.marks && isMarkModeDefault,
200+
right: !! props.marks && isMarkModeDefault,
201+
bottom: !! props.marks && isMarkModeDefault,
202+
left: !! props.marks && isMarkModeDefault,
203+
}
204+
205+
if ( props.marks && firstValue ) {
206+
// Check if the current value exists in the marks only by their CSS variable name
207+
// to match in case the fallback size changes.
208+
const firstValueCssVarName = getCSSVarName( firstValue )
209+
const firstMatchedMark = props.marks.find( mark => getCSSVarName( mark.value ) === firstValueCssVarName )
210+
isMarkValue.first = !! firstMatchedMark
211+
if ( firstMatchedMark ) {
212+
firstValue = firstMatchedMark.value
205213
}
206214

207-
if ( props.marks && firstValue ) {
208-
// Check if the current value exists in the marks only by their CSS variable name
209-
// to match in case the fallback size changes.
210-
const firstValueCssVarName = getCSSVarName( firstValue )
211-
const firstMatchedMark = props.marks.find( mark => getCSSVarName( mark.value ) === firstValueCssVarName )
212-
isMarkValue.first = !! firstMatchedMark
213-
if ( firstMatchedMark ) {
214-
firstValue = firstMatchedMark.value
215+
[ 'top', 'right', 'bottom', 'left' ].forEach( side => {
216+
const sideCssVarName = getCSSVarName( value[ side ] )
217+
const matchedMark = props.marks.find( mark => getCSSVarName( mark.value ) === sideCssVarName )
218+
isMarkValue[ side ] = !! matchedMark
219+
if ( matchedMark ) {
220+
value[ side ] = matchedMark.value
215221
}
222+
} )
223+
}
216224

217-
[ 'top', 'right', 'bottom', 'left' ].forEach( side => {
218-
const sideCssVarName = getCSSVarName( value[ side ] )
219-
const matchedMark = props.marks.find( mark => getCSSVarName( mark.value ) === sideCssVarName )
220-
isMarkValue[ side ] = !! matchedMark
221-
if ( matchedMark ) {
222-
value[ side ] = matchedMark.value
223-
}
224-
} )
225-
setIsFourMarkMode( isMarkValue )
226-
}
225+
// Set the markMode when device type changes
226+
useEffect( () => {
227+
setIsFourMarkMode( isMarkValue )
227228
}, [ deviceType ] )
228229

229230
const onChangeAll = _newValue => {
@@ -359,18 +360,8 @@ const FourRangeControl = memo( props => {
359360
let rangeOnChange = initialOnChange
360361
if ( props.marks && isMarkMode ) {
361362
rangeValue = props.marks.findIndex( mark => {
362-
let _unit, _value
363-
// If the initialValue is a CSS variable, compare with mark's CSS variable.
364-
// Otherwise, the initialValue is custom, so compare with raw size and units
365-
if ( typeof initialValue === 'string' && initialValue.startsWith( 'var' ) ) {
366-
[ _value, _unit ] = extractNumbersAndUnits( mark.value )[ 0 ]
367-
} else {
368-
[ _value, _unit ] = extractNumbersAndUnits( mark.size )[ 0 ]
369-
const converted = convertToPxIfUnsupported( props.units, _unit, _value )
370-
_value = converted.value
371-
_unit = converted.unit
372-
}
373-
return _value === initialValue && ( _unit === '' || _unit === unit )
363+
const [ _value, _unit ] = extractNumbersAndUnits( mark.value )[ 0 ]
364+
return _value === initialValue
374365
} )
375366
rangeOnChange = ( value, property = 'value' ) => {
376367
if ( value === '' ) {
@@ -506,6 +497,17 @@ const FourRangeControl = memo( props => {
506497
// Set the value when changing from mark mode to custom
507498
if ( isFourMarkMode.first && rangeValueFirst !== -1 ) {
508499
rangeOnChangeFirst( rangeValueFirst, 'size' )
500+
} else {
501+
const rangeValue = props.marks.findIndex( mark => {
502+
let _unit, _value
503+
[ _value, _unit ] = extractNumbersAndUnits( mark.size )[ 0 ]
504+
const converted = convertToPxIfUnsupported( props.units, _unit, _value )
505+
_value = converted.value
506+
_unit = converted.unit
507+
return _value === firstValue && ( ! unit || _unit === '' || _unit === unit )
508+
} )
509+
const markValue = props.marks[ rangeValue ]?.value || '0'
510+
onChangeAll( markValue )
509511
}
510512
setIsFourMarkMode( prev => ( { ...prev, first: ! prev.first } ) )
511513
} }
@@ -569,6 +571,17 @@ const FourRangeControl = memo( props => {
569571
onClick={ () => {
570572
if ( isFourMarkMode.top && rangeValueTop !== -1 ) {
571573
rangeOnChangeTop( rangeValueTop, 'size' )
574+
} else {
575+
const rangeValue = props.marks.findIndex( mark => {
576+
let _unit, _value
577+
[ _value, _unit ] = extractNumbersAndUnits( mark.size )[ 0 ]
578+
const converted = convertToPxIfUnsupported( props.units, _unit, _value )
579+
_value = converted.value
580+
_unit = converted.unit
581+
return _value === value.top && ( ! unit || _unit === '' || _unit === unit )
582+
} )
583+
const markValue = props.marks[ rangeValue ]?.value || '0'
584+
onChangeVertical( markValue )
572585
}
573586
setIsFourMarkMode( prev => ( { ...prev, top: ! prev.top } ) )
574587
} }
@@ -628,6 +641,17 @@ const FourRangeControl = memo( props => {
628641
onClick={ () => {
629642
if ( isFourMarkMode.left && rangeValueLeft !== -1 ) {
630643
rangeOnChangeLeft( rangeValueLeft, 'size' )
644+
} else {
645+
const rangeValue = props.marks.findIndex( mark => {
646+
let _unit, _value
647+
[ _value, _unit ] = extractNumbersAndUnits( mark.size )[ 0 ]
648+
const converted = convertToPxIfUnsupported( props.units, _unit, _value )
649+
_value = converted.value
650+
_unit = converted.unit
651+
return _value === value.left && ( ! unit || _unit === '' || _unit === unit )
652+
} )
653+
const markValue = props.marks[ rangeValue ]?.value || '0'
654+
onChangeHorizontal( markValue )
631655
}
632656
setIsFourMarkMode( prev => ( { ...prev, left: ! prev.left } ) )
633657
} }
@@ -693,6 +717,17 @@ const FourRangeControl = memo( props => {
693717
onClick={ () => {
694718
if ( isFourMarkMode.top && rangeValueTop !== -1 ) {
695719
rangeOnChangeTop( rangeValueTop, 'size' )
720+
} else {
721+
const rangeValue = props.marks.findIndex( mark => {
722+
let _unit, _value
723+
[ _value, _unit ] = extractNumbersAndUnits( mark.size )[ 0 ]
724+
const converted = convertToPxIfUnsupported( props.units, _unit, _value )
725+
_value = converted.value
726+
_unit = converted.unit
727+
return _value === value.top && ( ! unit || _unit === '' || _unit === unit )
728+
} )
729+
const markValue = props.marks[ rangeValue ]?.value || '0'
730+
onChangeTop( markValue )
696731
}
697732
setIsFourMarkMode( prev => ( { ...prev, top: ! prev.top } ) )
698733
} }
@@ -755,6 +790,17 @@ const FourRangeControl = memo( props => {
755790
onClick={ () => {
756791
if ( isFourMarkMode.right && rangeValueRight !== -1 ) {
757792
rangeOnChangeRight( rangeValueRight, 'size' )
793+
} else {
794+
const rangeValue = props.marks.findIndex( mark => {
795+
let _unit, _value
796+
[ _value, _unit ] = extractNumbersAndUnits( mark.size )[ 0 ]
797+
const converted = convertToPxIfUnsupported( props.units, _unit, _value )
798+
_value = converted.value
799+
_unit = converted.unit
800+
return _value === value.right && ( ! unit || _unit === '' || _unit === unit )
801+
} )
802+
const markValue = props.marks[ rangeValue ]?.value || '0'
803+
onChangeRight( markValue )
758804
}
759805
setIsFourMarkMode( prev => ( { ...prev, right: ! prev.right } ) )
760806
} }
@@ -817,6 +863,17 @@ const FourRangeControl = memo( props => {
817863
onClick={ () => {
818864
if ( isFourMarkMode.bottom && rangeValueBottom !== -1 ) {
819865
rangeOnChangeBottom( rangeValueBottom, 'size' )
866+
} else {
867+
const rangeValue = props.marks.findIndex( mark => {
868+
let _unit, _value
869+
[ _value, _unit ] = extractNumbersAndUnits( mark.size )[ 0 ]
870+
const converted = convertToPxIfUnsupported( props.units, _unit, _value )
871+
_value = converted.value
872+
_unit = converted.unit
873+
return _value === value.bottom && ( ! unit || _unit === '' || _unit === unit )
874+
} )
875+
const markValue = props.marks[ rangeValue ]?.value || '0'
876+
onChangeBottom( markValue )
820877
}
821878
setIsFourMarkMode( prev => ( { ...prev, bottom: ! prev.bottom } ) )
822879
} }
@@ -879,6 +936,17 @@ const FourRangeControl = memo( props => {
879936
onClick={ () => {
880937
if ( isFourMarkMode.left && rangeValueLeft !== -1 ) {
881938
rangeOnChangeLeft( rangeValueLeft, 'size' )
939+
} else {
940+
const rangeValue = props.marks.findIndex( mark => {
941+
let _unit, _value
942+
[ _value, _unit ] = extractNumbersAndUnits( mark.size )[ 0 ]
943+
const converted = convertToPxIfUnsupported( props.units, _unit, _value )
944+
_value = converted.value
945+
_unit = converted.unit
946+
return _value === value.left && ( ! unit || _unit === '' || _unit === unit )
947+
} )
948+
const markValue = props.marks[ rangeValue ]?.value || '0'
949+
onChangeLeft( markValue )
882950
}
883951
setIsFourMarkMode( prev => ( { ...prev, left: ! prev.left } ) )
884952
} }

‎src/global-settings.php‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -697,6 +697,14 @@ public function form_paragraph_selector() {
697697
return $selectors;
698698
}
699699

700+
public function clean_font_size( $font_size, $font_size_unit = '' ) {
701+
if ( is_string( $font_size ) && str_starts_with( $font_size, 'var' ) ) {
702+
return $font_size;
703+
}
704+
705+
return $font_size . $font_size_unit;
706+
}
707+
700708
/**
701709
* Creates a CSS style rule with an added !important if necessary.
702710
*
@@ -753,7 +761,7 @@ public function generate_typography_styles( $selector, $styles ) {
753761
$css['desktop'][] = $this->create_style( 'font-family', $this->get_font_family( $styles['fontFamily'] ) );
754762
}
755763
if ( isset( $styles['fontSize'] ) ) {
756-
$css['desktop'][] = $this->create_style( 'font-size', $styles['fontSize'] . $styles['fontSizeUnit'] );
764+
$css['desktop'][] = $this->create_style( 'font-size', $this->clean_font_size( $styles['fontSize'], $styles['fontSizeUnit'] ) );
757765
}
758766
if ( isset( $styles['fontWeight'] ) ) {
759767
$css['desktop'][] = $this->create_style( 'font-weight', $styles['fontWeight'] );
@@ -782,12 +790,12 @@ public function generate_typography_styles( $selector, $styles ) {
782790
if ( isset( $styles['fontSize'] ) ) {
783791
$clamp_desktop_value = $this->clamp_inherited_style( $styles['fontSize'], $inherit_max );
784792
if ( ! empty( $clamp_desktop_value ) ) {
785-
$font_size = $this->create_style( 'font-size', $clamp_desktop_value . $styles['fontSizeUnit'] );
793+
$font_size = $this->create_style( 'font-size', $this->clean_font_size( $clamp_desktop_value . $styles['fontSizeUnit'] ) );
786794
}
787795
}
788796
}
789797
if ( isset( $styles['tabletFontSize'] ) ) {
790-
$font_size = $this->create_style( 'font-size', $styles['tabletFontSize'] . $styles['tabletFontSizeUnit'] );
798+
$font_size = $this->create_style( 'font-size', $this->clean_font_size( $styles['tabletFontSize'], $styles['tabletFontSizeUnit'] ) );
791799
}
792800
if ( ! empty( $font_size ) ) {
793801
$css['tablet'][] = $font_size;
@@ -810,15 +818,15 @@ public function generate_typography_styles( $selector, $styles ) {
810818
if ( isset( $styles['fontSize'] ) ) {
811819
$clamp_desktop_value = $this->clamp_inherited_style( $styles['fontSize'], $inherit_max );
812820
if ( ! empty( $clamp_desktop_value ) ) {
813-
$font_size = $this->create_style( 'font-size', $clamp_desktop_value . $styles['fontSizeUnit'] );
821+
$font_size = $this->create_style( 'font-size', $this->clean_font_size( $clamp_desktop_value, $styles['fontSizeUnit'] ) );
814822
}
815823
}
816824

817825
$clamp_tablet_value = null;
818826
if ( isset( $styles['tabletFontSize'] ) ) {
819827
$clamp_tablet_value = $this->clamp_inherited_style( $styles['tabletFontSize'], $inherit_max );
820828
if ( ! empty( $clamp_tablet_value ) ) {
821-
$font_size = $this->create_style( 'font-size', $clamp_tablet_value . $styles['tabletFontSizeUnit'] );
829+
$font_size = $this->create_style( $this->clean_font_size( 'font-size', $clamp_tablet_value, $styles['tabletFontSizeUnit'] ) );
822830
}
823831
}
824832
if ( empty( $clamp_tablet_value ) ) {
@@ -831,7 +839,7 @@ public function generate_typography_styles( $selector, $styles ) {
831839
}
832840
}
833841
if ( isset( $styles['mobileFontSize'] ) ) {
834-
$font_size = $this->create_style( 'font-size', $styles['mobileFontSize'] . $styles['mobileFontSizeUnit'] );
842+
$font_size = $this->create_style( 'font-size', $this->clean_font_size( $styles['mobileFontSize'], $styles['mobileFontSizeUnit'] ) );
835843
}
836844
if ( ! empty( $font_size ) ) {
837845
$css['mobile'][] = $font_size;

0 commit comments

Comments
 (0)