Skip to content

Commit 48ae050

Browse files
edanzeredanzer
committed
Fix and improve editor rendering
1 parent c8b1c5c commit 48ae050

File tree

5 files changed

+167
-79
lines changed

5 files changed

+167
-79
lines changed

‎projects/packages/forms/src/blocks/slider-input/edit.js

Lines changed: 50 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,40 @@
11
import './editor.scss';
22
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
33
import { PanelBody, __experimentalNumberControl as NumberControl } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
4-
import { useState } from '@wordpress/element';
4+
import { useEffect } from '@wordpress/element';
55
import { __ } from '@wordpress/i18n';
66

77
export default function SliderInputEdit( props ) {
88
const { attributes, setAttributes } = props;
9-
const { min = 0, max = 100, value = 50 } = attributes;
10-
const [ internalValue, setInternalValue ] = useState( value );
9+
const { min, max, value, startingValue } = attributes;
10+
11+
// Ensure min, max, value, and defaultValue are always set and saved
12+
useEffect( () => {
13+
if ( min === undefined ) setAttributes( { min: 0 } );
14+
if ( max === undefined ) setAttributes( { max: 100 } );
15+
if ( value === undefined ) setAttributes( { value: 50 } );
16+
if ( startingValue === undefined ) setAttributes( { startingValue: 50 } );
17+
}, [ min, max, value, startingValue, setAttributes ] );
1118

1219
const onChange = event => {
13-
const newValue = Number( event.target.value );
14-
setInternalValue( newValue );
15-
setAttributes( { value: newValue } );
20+
setAttributes( { value: Number( event.target.value ) } );
1621
};
1722

1823
const blockProps = useBlockProps( {
1924
className: 'jetpack-slider-input',
2025
} );
2126

27+
// Mimic the Interactivity API's getIndicatorPosition logic
28+
const getIndicatorPosition = () => {
29+
const minNum = Number( min );
30+
const maxNum = Number( max );
31+
let valueNum = Number( value );
32+
valueNum = valueNum < minNum ? minNum : valueNum;
33+
valueNum = valueNum > maxNum ? maxNum : valueNum;
34+
const percent = ( ( valueNum - minNum ) * 100 ) / ( maxNum - minNum );
35+
return `calc(${ percent }% + (${ 8 - percent * 0.15 }px))`;
36+
};
37+
2238
return (
2339
<>
2440
<InspectorControls>
@@ -46,22 +62,38 @@ export default function SliderInputEdit( props ) {
4662
__next40pxDefaultSize={ true }
4763
help={ __( 'The maximum value to accept in the slider.', 'jetpack-forms' ) }
4864
/>
65+
<NumberControl
66+
key="startingValue"
67+
label={ __( 'Starting value', 'jetpack-forms' ) }
68+
value={ startingValue }
69+
onChange={ newStartValue => setAttributes( { startingValue: newStartValue } ) }
70+
min={ min }
71+
max={ max }
72+
__nextHasNoMarginBottom={ true }
73+
__next40pxDefaultSize={ true }
74+
help={ __( 'The value the slider will start at.', 'jetpack-forms' ) }
75+
/>
4976
</PanelBody>
5077
</InspectorControls>
5178
<div { ...blockProps }>
52-
<div className="jetpack-slider-input__current-value">
53-
{ __( 'Selected:', 'jetpack-forms' ) } { internalValue }
54-
</div>
55-
<div className="jetpack-slider-input__slider-row">
79+
<div className="jetpack-slider-input-row">
5680
<span className="jetpack-slider-input__min-label">{ min }</span>
57-
<input
58-
type="range"
59-
min={ min }
60-
max={ max }
61-
value={ internalValue }
62-
onChange={ onChange }
63-
className="jetpack-slider-input__range"
64-
/>
81+
<div className="jetpack-slider-input__input-container">
82+
<input
83+
type="range"
84+
min={ min }
85+
max={ max }
86+
value={ value }
87+
onChange={ onChange }
88+
className="jetpack-slider-input__range"
89+
/>
90+
<div
91+
className="jetpack-slider-input__value-indicator"
92+
style={ { left: getIndicatorPosition() } }
93+
>
94+
{ value }
95+
</div>
96+
</div>
6597
<span className="jetpack-slider-input__max-label">{ max }</span>
6698
</div>
6799
</div>

‎projects/packages/forms/src/blocks/slider-input/editor.scss

Lines changed: 92 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,96 @@
1-
.jetpack-slider-input__range {
1+
.jetpack-slider-input-row {
2+
display: flex;
3+
align-items: center;
4+
width: 100%;
5+
gap: 12px;
6+
margin-top: 30px;
7+
}
8+
9+
.jetpack-slider-input__min-label,
10+
.jetpack-slider-input__max-label {
11+
font-size: .9em;
12+
text-align: center;
13+
}
14+
15+
.jetpack-slider-input__input-container {
16+
display: flex;
17+
flex: 1 1 auto;
18+
min-width: 0;
19+
position: relative;
20+
}
21+
22+
.jetpack-slider-input-row input[type="range"] {
223
-webkit-appearance: none;
324
appearance: none;
4-
width: 100%;
525
height: 2px;
6-
background: #000;
7-
opacity: 0.7;
8-
transition: opacity .2s;
9-
border: none;
10-
11-
&:focus {
12-
outline: none;
13-
opacity: 1;
14-
}
15-
16-
&::-webkit-slider-thumb,
17-
&::-moz-range-thumb,
18-
&::-ms-thumb {
19-
width: 12px;
20-
height: 12px;
21-
background: #000;
22-
cursor: pointer;
23-
border-radius: 50%;
24-
-webkit-appearance: none;
25-
appearance: none;
26-
}
27-
28-
&::-moz-range-track {
29-
background: #000;
30-
height: 2px;
31-
}
32-
33-
&::-ms-fill-lower,
34-
&::-ms-fill-upper,
35-
&:focus::-ms-fill-lower,
36-
&:focus::-ms-fill-upper {
37-
background: #000;
38-
}
26+
background: var(--jetpack--contact-form--button-primary--background-color);
27+
outline: none;
28+
border-radius: 2px;
29+
transition: background 0.3s;
30+
margin: 0 8px;
31+
width: 100%;
32+
box-sizing: border-box;
33+
}
34+
35+
.jetpack-slider-input-row input[type="range"]:focus {
36+
outline: none;
37+
opacity: 1;
38+
}
39+
40+
.jetpack-slider-input-row input[type="range"]::-webkit-slider-thumb {
41+
-webkit-appearance: none;
42+
appearance: none;
43+
width: 12px;
44+
height: 12px;
45+
background: var(--jetpack--contact-form--button-primary--background-color);
46+
border-radius: 50%;
47+
cursor: pointer;
48+
transition: background 0.3s;
49+
box-shadow: 0 0 2px rgba(0,0,0,0.2);
50+
}
51+
52+
.jetpack-slider-input-row input[type="range"]:focus::-webkit-slider-thumb {
53+
background: var(--jetpack--contact-form--button-primary--background-color);
54+
}
55+
56+
.jetpack-slider-input-row input[type="range"]::-moz-range-thumb {
57+
width: 12px;
58+
height: 12px;
59+
background: var(--jetpack--contact-form--button-primary--background-color);
60+
border-radius: 50%;
61+
cursor: pointer;
62+
transition: background 0.3s;
63+
}
64+
65+
.jetpack-slider-input-row input[type="range"]:focus::-moz-range-thumb {
66+
background: var(--jetpack--contact-form--button-primary--background-color);
67+
}
68+
69+
.jetpack-slider-input-row input[type="range"]::-ms-thumb {
70+
width: 12px;
71+
height: 12px;
72+
background: var(--jetpack--contact-form--button-primary--background-color);
73+
border-radius: 50%;
74+
cursor: pointer;
75+
transition: background 0.3s;
76+
}
77+
78+
.jetpack-slider-input-row input[type="range"]::-ms-fill-lower,
79+
.jetpack-slider-input-row input[type="range"]::-ms-fill-upper,
80+
.jetpack-slider-input-row input[type="range"]:focus::-ms-fill-lower,
81+
.jetpack-slider-input-row input[type="range"]:focus::-ms-fill-upper {
82+
background: var(--jetpack--contact-form--button-primary--background-color);
83+
}
84+
85+
.jetpack-slider-input__value-indicator {
86+
position: absolute;
87+
top: -32px; /* Adjust as needed to sit above the slider */
88+
left: 0;
89+
transform: translateX(-50%);
90+
background: var(--jetpack--contact-form--button-primary--background-color);
91+
color: var(--jetpack--contact-form--button-primary--color);
92+
border-radius: 8px;
93+
padding: 2px 8px;
94+
font-size: 0.7em;
95+
z-index: 2;
3996
}

‎projects/packages/forms/src/blocks/slider-input/index.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,14 @@ const settings = {
2828
type: 'number',
2929
default: 100,
3030
},
31+
value: {
32+
type: 'number',
33+
default: 50,
34+
},
35+
startingValue: {
36+
type: 'number',
37+
default: 50,
38+
},
3139
},
3240
edit,
3341
save,

‎projects/packages/forms/src/contact-form/css/slider-field.css

Lines changed: 14 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,6 @@
2020
}
2121

2222
.jetpack-slider-input-row input[type="range"] {
23-
width: 100%;
24-
box-sizing: border-box;
25-
}
26-
27-
/* Jetpack Slider Input Styles */
28-
.grunion-field-slider-wrap input[type="range"] {
2923
-webkit-appearance: none;
3024
appearance: none;
3125
height: 2px;
@@ -34,14 +28,16 @@
3428
border-radius: 2px;
3529
transition: background 0.3s;
3630
margin: 0 8px;
31+
width: 100%;
32+
box-sizing: border-box;
3733
}
3834

39-
.grunion-field-slider-wrap input[type="range"]:focus {
35+
.jetpack-slider-input-row input[type="range"]:focus {
4036
outline: none;
4137
opacity: 1;
4238
}
4339

44-
.grunion-field-slider-wrap input[type="range"]::-webkit-slider-thumb {
40+
.jetpack-slider-input-row input[type="range"]::-webkit-slider-thumb {
4541
-webkit-appearance: none;
4642
appearance: none;
4743
width: 12px;
@@ -53,26 +49,24 @@
5349
box-shadow: 0 0 2px rgba(0,0,0,0.2);
5450
}
5551

56-
.grunion-field-slider-wrap input[type="range"]:focus::-webkit-slider-thumb {
52+
.jetpack-slider-input-row input[type="range"]:focus::-webkit-slider-thumb {
5753
background: var(--jetpack--contact-form--button-primary--background-color);
5854
}
5955

60-
.grunion-field-slider-wrap input[type="range"]::-moz-range-thumb {
56+
.jetpack-slider-input-row input[type="range"]::-moz-range-thumb {
6157
width: 12px;
6258
height: 12px;
63-
background: var(--jetpack--contact-form--button-primary--background-color);;
59+
background: var(--jetpack--contact-form--button-primary--background-color);
6460
border-radius: 50%;
6561
cursor: pointer;
6662
transition: background 0.3s;
67-
68-
/* box-shadow: 0 0 2px rgba(0,0,0,0.2); */
6963
}
7064

71-
.grunion-field-slider-wrap input[type="range"]:focus::-moz-range-thumb {
65+
.jetpack-slider-input-row input[type="range"]:focus::-moz-range-thumb {
7266
background: var(--jetpack--contact-form--button-primary--background-color);
7367
}
7468

75-
.grunion-field-slider-wrap input[type="range"]::-ms-thumb {
69+
.jetpack-slider-input-row input[type="range"]::-ms-thumb {
7670
width: 12px;
7771
height: 12px;
7872
background: var(--jetpack--contact-form--button-primary--background-color);
@@ -81,28 +75,22 @@
8175
transition: background 0.3s;
8276
}
8377

84-
.grunion-field-slider-wrap input[type="range"]::-ms-fill-lower,
85-
.grunion-field-slider-wrap input[type="range"]::-ms-fill-upper,
86-
.grunion-field-slider-wrap input[type="range"]:focus::-ms-fill-lower,
87-
.grunion-field-slider-wrap input[type="range"]:focus::-ms-fill-upper {
78+
.jetpack-slider-input-row input[type="range"]::-ms-fill-lower,
79+
.jetpack-slider-input-row input[type="range"]::-ms-fill-upper,
80+
.jetpack-slider-input-row input[type="range"]:focus::-ms-fill-lower,
81+
.jetpack-slider-input-row input[type="range"]:focus::-ms-fill-upper {
8882
background: var(--jetpack--contact-form--button-primary--background-color);
8983
}
9084

9185
.jetpack-slider-input__value-indicator {
9286
position: absolute;
93-
top: -32px; /* Adjust as needed to sit above the slider */
87+
top: -32px;
9488
left: 0;
9589
transform: translateX(-50%);
96-
97-
/* pointer-events: none; */
9890
background: var(--jetpack--contact-form--button-primary--background-color);
9991
color: var(--jetpack--contact-form--button-primary--color);
10092
border-radius: 8px;
10193
padding: 2px 8px;
10294
font-size: 0.7em;
103-
104-
/* box-shadow: 0 2px 6px rgba(0,0,0,0.08); */
105-
106-
/* white-space: nowrap; */
10795
z-index: 2;
10896
}

‎projects/packages/forms/src/modules/slider-field/view.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ store( 'jetpack/field-slider', {
1212
const context = getContext();
1313
const min = Number( context.fieldExtra?.min ?? 0 );
1414
const max = Number( context.fieldExtra?.max ?? 100 );
15+
// console.log( 'context.fieldExtra?.min', context.fieldExtra?.min );
16+
// console.log( 'context.fieldExtra?.max', context.fieldExtra?.max );
17+
// console.log( 'context.fieldValue', context.fieldValue );
1518
let value = Number( context.fieldValue ?? min );
1619
value = value < min ? min : value;
1720
value = value > max ? max : value;

0 commit comments

Comments
 (0)