Skip to content

Commit 71b7fb7

Browse files
glendaviesnzglendaviesnz
committed
Some clean up of redundant code
1 parent 7568aaa commit 71b7fb7

File tree

5 files changed

+68
-86
lines changed

5 files changed

+68
-86
lines changed

‎packages/block-editor/src/components/spacing-sizes-control/all-input-control.js‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ const noop = () => {};
1414

1515
export default function AllInputControl( {
1616
onChange = noop,
17-
onFocus = noop,
1817
values,
1918
sides,
2019
...props
@@ -24,10 +23,6 @@ export default function AllInputControl( {
2423
const isMixed = hasValues && isValuesMixed( values, sides );
2524
const allPlaceholder = isMixed ? LABELS.mixed : null;
2625

27-
const handleOnFocus = ( event ) => {
28-
onFocus( event, { side: 'all' } );
29-
};
30-
3126
// Applies a value to an object representing top, right, bottom and left
3227
// sides while taking into account any custom side configuration.
3328
const applyValueToSides = ( currentValues, newValue ) => {
@@ -63,7 +58,6 @@ export default function AllInputControl( {
6358
{ ...props }
6459
value={ allValue }
6560
onChange={ handleOnChange }
66-
onFocus={ handleOnFocus }
6761
placeholder={ allPlaceholder }
6862
withInputField={ false }
6963
/>

‎packages/block-editor/src/components/spacing-sizes-control/axial-input-controls.js‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,10 @@ const groupedSides = [ 'vertical', 'horizontal' ];
1313

1414
export default function AxialInputControls( {
1515
onChange,
16-
onFocus,
1716
values,
1817
sides,
1918
...props
2019
} ) {
21-
const createHandleOnFocus = ( side ) => () => {
22-
if ( ! onFocus ) {
23-
return;
24-
}
25-
onFocus( side );
26-
};
27-
2820
const createHandleOnChange = ( side ) => ( next ) => {
2921
if ( ! onChange ) {
3022
return;
@@ -70,10 +62,10 @@ export default function AxialInputControls( {
7062
{ ...props }
7163
value={ value }
7264
onChange={ createHandleOnChange( side ) }
73-
onFocus={ createHandleOnFocus( side ) }
7465
label={ LABELS[ side ] }
7566
key={ `box-control-${ side }` }
7667
withInputField={ false }
68+
side={ side }
7769
/>
7870
);
7971
} ) }

‎packages/block-editor/src/components/spacing-sizes-control/index.js‎

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,7 @@ import AllInputControl from './all-input-control';
1919
import InputControls from './input-controls';
2020
import AxialInputControls from './axial-input-controls';
2121
import LinkedButton from './linked-button';
22-
import {
23-
DEFAULT_VALUES,
24-
getInitialSide,
25-
isValuesMixed,
26-
isValuesDefined,
27-
} from './utils';
22+
import { DEFAULT_VALUES, isValuesMixed, isValuesDefined } from './utils';
2823
import useSetting from '../use-setting';
2924

3025
const defaultInputProps = {
@@ -39,7 +34,7 @@ export default function SpacingSizesControl( {
3934
label = __( 'Spacing Control' ),
4035
values: valuesProp,
4136
sides,
42-
splitOnAxis = false,
37+
splitOnAxis = true,
4338
allowReset = true,
4439
resetValues = DEFAULT_VALUES,
4540
useSelect,
@@ -58,17 +53,8 @@ export default function SpacingSizesControl( {
5853
! hasInitialValue || ! isValuesMixed( inputValues ) || hasOneSide
5954
);
6055

61-
const [ side, setSide ] = useState(
62-
getInitialSide( isLinked, splitOnAxis )
63-
);
64-
6556
const toggleLinked = () => {
6657
setIsLinked( ! isLinked );
67-
setSide( getInitialSide( ! isLinked, splitOnAxis ) );
68-
};
69-
70-
const handleOnFocus = ( nextSide ) => {
71-
setSide( nextSide );
7258
};
7359

7460
const handleOnChange = ( nextValue ) => {
@@ -87,7 +73,6 @@ export default function SpacingSizesControl( {
8773
const inputControlProps = {
8874
...inputProps,
8975
onChange: handleOnChange,
90-
onFocus: handleOnFocus,
9176
isLinked,
9277
sides,
9378
values: inputValues,
@@ -114,9 +99,6 @@ export default function SpacingSizesControl( {
11499
) }
115100
</Flex>
116101
<Flex className="component-box-control__header-control-wrapper">
117-
<FlexItem>
118-
<BoxControlIcon side={ side } sides={ sides } />
119-
</FlexItem>
120102
{ isLinked && (
121103
<FlexBlock>
122104
<AllInputControl

‎packages/block-editor/src/components/spacing-sizes-control/spacing-range-control.js‎

Lines changed: 61 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ import {
1010
__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
1111
Flex,
1212
FlexItem,
13+
__experimentalBoxControlIcon as BoxControlIcon,
14+
__experimentalHStack as HStack,
15+
__experimentalText as Text,
1316
} from '@wordpress/components';
1417
import { __ } from '@wordpress/i18n';
1518
import { settings } from '@wordpress/icons';
@@ -21,14 +24,17 @@ import { settings } from '@wordpress/icons';
2124
*
2225
* @return {WPElement} Font size edit element.
2326
*/
24-
export default function SpacingRangeControl( props ) {
27+
export default function SpacingRangeControl( {
28+
spacingSizes,
29+
value,
30+
side,
31+
label,
32+
onChange,
33+
} ) {
2534
const [ valueNow, setValueNow ] = useState( null );
2635
const [ showCustomValueControl, setShowCustomValueControl ] =
2736
useState( false );
28-
const customTooltipContent = ( value ) => props.spacingSizes[ value ]?.name;
29-
const createHandleOnFocus = ( side ) => () => {
30-
props.onFocus( side );
31-
};
37+
const customTooltipContent = ( newValue ) => spacingSizes[ newValue ]?.name;
3238
const useSelect = false; //props.useSelect;
3339
const getNewCustomValue = ( newSize ) => {
3440
return newSize;
@@ -39,87 +45,91 @@ export default function SpacingRangeControl( props ) {
3945
if ( size === 0 ) {
4046
return '0';
4147
}
42-
return `var:preset|spacing|${ props.spacingSizes[ newSize ]?.slug }`;
48+
return `var:preset|spacing|${ spacingSizes[ newSize ]?.slug }`;
4349
};
4450

45-
const currentValueHint = customTooltipContent( props.value );
51+
const currentValueHint = customTooltipContent( value );
4652

47-
const options = props.spacingSizes.map( ( size, index ) => ( {
53+
const options = spacingSizes.map( ( size, index ) => ( {
4854
key: index,
4955
name: size.name,
5056
} ) );
51-
const marks = props.spacingSizes.map( ( value, index ) => ( {
57+
const marks = spacingSizes.map( ( newValue, index ) => ( {
5258
value: index,
5359
lable: undefined,
5460
} ) );
5561

5662
return (
5763
<>
58-
<Flex>
59-
<FlexItem>
60-
<div>
61-
<span>{ props.label }</span>{ ' ' }
62-
<span className="components-spacing-sizes-control__hint">
63-
{ currentValueHint !== undefined
64-
? currentValueHint
65-
: __( 'Default' ) }
66-
</span>
67-
</div>
68-
</FlexItem>
69-
<FlexItem>
70-
<Button
71-
label={
72-
showCustomValueControl
73-
? __( 'Use size preset' )
74-
: __( 'Set custom size' )
75-
}
76-
icon={ settings }
77-
onClick={ () => {
78-
setShowCustomValueControl(
79-
! showCustomValueControl
80-
);
81-
} }
82-
isPressed={ showCustomValueControl }
83-
isSmall
84-
/>
85-
</FlexItem>
86-
</Flex>
64+
<HStack>
65+
<BoxControlIcon
66+
side={ side }
67+
sides={ [
68+
'top',
69+
'right',
70+
'bottom',
71+
'left',
72+
'vertical',
73+
'horizontal',
74+
] }
75+
/>
76+
77+
<Text className="components-spacing-sizes-control__hint">
78+
{ currentValueHint !== undefined
79+
? currentValueHint
80+
: __( 'Default' ) }
81+
</Text>
82+
83+
<Button
84+
label={
85+
showCustomValueControl
86+
? __( 'Use size preset' )
87+
: __( 'Set custom size' )
88+
}
89+
icon={ settings }
90+
onClick={ () => {
91+
setShowCustomValueControl( ! showCustomValueControl );
92+
} }
93+
isPressed={ showCustomValueControl }
94+
isSmall
95+
className="components-spacing-sizes-control__custom-toggle"
96+
/>
97+
</HStack>
8798
{ showCustomValueControl && (
8899
<div>
89100
<UnitControl
90-
label={ props.label }
101+
label={ label }
91102
onChange={ ( newSize ) =>
92-
props.onChange( getNewCustomValue( newSize ) )
103+
onChange( getNewCustomValue( newSize ) )
93104
}
94105
value="28%"
95106
/>
96107

97108
<RangeControl
98-
value={ props.value }
109+
value={ value }
99110
label={ <></> }
100111
min={ 0 }
101112
max={ 50 }
102113
// initialPosition={ 0 }
103114
withInputField={ false }
104-
onChange={ ( value ) => console.log( value ) }
115+
onChange={ ( newValue ) => console.log( newValue ) }
105116
// step={ step }
106117
/>
107118
</div>
108119
) }
109120
{ ! useSelect && ! showCustomValueControl && (
110121
<RangeControl
111-
value={ props.value }
122+
value={ value }
112123
label={ <></> }
113124
onChange={ ( newSize ) =>
114-
props.onChange( getNewRangeValue( newSize ) )
125+
onChange( getNewRangeValue( newSize ) )
115126
}
116-
onFocus={ createHandleOnFocus( props.side ) }
117127
withInputField={ false }
118128
aria-valuenow={ valueNow }
119-
aria-valuetext={ props.spacingSizes[ valueNow ]?.name }
129+
aria-valuetext={ spacingSizes[ valueNow ]?.name }
120130
renderTooltipContent={ customTooltipContent }
121131
min={ 0 }
122-
max={ props.spacingSizes.length - 1 }
132+
max={ spacingSizes.length - 1 }
123133
marks={ marks }
124134
/>
125135
) }
@@ -128,15 +138,15 @@ export default function SpacingRangeControl( props ) {
128138
value={ options.find(
129139
( option ) => option.key === valueNow
130140
) }
131-
label={ props.label }
141+
label={ label }
132142
onChange={ ( selectedItem ) => {
133-
props.onChange( getNewRangeValue( selectedItem.key ) );
143+
onChange( getNewRangeValue( selectedItem.key ) );
134144
} }
135-
onFocus={ createHandleOnFocus( props.side ) }
145+
onFocus={ createHandleOnFocus( side ) }
136146
options={ options }
137147
onHighlightedIndexChange={ ( index ) => {
138148
if ( index.type === '__item_mouse_move__' ) {
139-
props.onChange(
149+
onChange(
140150
getNewRangeValue( index.highlightedIndex )
141151
);
142152
}

‎packages/block-editor/src/components/spacing-sizes-control/style.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@
1919
z-index: 3;
2020
}
2121

22+
.components-spacing-sizes-control__custom-toggle {
23+
margin-left: auto;
24+
}
25+
2226
.components-custom-select-control {
2327
button {
2428
width: 100%;

0 commit comments

Comments
 (0)