← All changes | includes/frontend/blocks/src/post-count/components/padding-control.js +66 -64 4.4.0 → 4.5.1 View file →

		@@ -3,55 +3,55 @@
3	3	import { useState } from '@wordpress/element';
4	4	import UnitControl from './unit-control';
5	5	import { LinkIcon, UnlinkIcon } from './icons';
6	6
7		-const PaddingControl = ({ attributes, setAttributes }) => {
	7	+const PaddingControl = ( { attributes, setAttributes } ) => {
8	8	const {
9		- svgPaddingValues = [0, 0, 0, 0], // Default values for top, right, bottom, left
10		- svgPaddingUnits = ['px', 'px', 'px', 'px'], // Default units for top, right, bottom, left
	9	+ svgPaddingValues = [ 0, 0, 0, 0 ], // Default values for top, right, bottom, left
	10	+ svgPaddingUnits = [ 'px', 'px', 'px', 'px' ], // Default units for top, right, bottom, left
11	11	} = attributes;
12	12
13		- const [isPaddingLinked, setIsPaddingLinked] = useState(false);
	13	+ const [ isPaddingLinked, setIsPaddingLinked ] = useState( false );
14	14
15		- const handlePaddingChange = (value, index) => {
16		- const newPaddingValues = [...svgPaddingValues];
17		- if (isPaddingLinked) {
18		- newPaddingValues.fill(value);
	15	+ const handlePaddingChange = ( value, index ) => {
	16	+ const newPaddingValues = [ ...svgPaddingValues ];
	17	+ if ( isPaddingLinked ) {
	18	+ newPaddingValues.fill( value );
19	19	} else {
20		- newPaddingValues[index] = value;
	20	+ newPaddingValues[ index ] = value;
21	21	}
22		- setAttributes({ svgPaddingValues: newPaddingValues });
	22	+ setAttributes( { svgPaddingValues: newPaddingValues } );
23	23	};
24	24
25		- const handleUnitChange = (unit, index) => {
26		- const newPaddingUnits = [...svgPaddingUnits];
27		- if (isPaddingLinked) {
28		- newPaddingUnits.fill(unit);
	25	+ const handleUnitChange = ( unit, index ) => {
	26	+ const newPaddingUnits = [ ...svgPaddingUnits ];
	27	+ if ( isPaddingLinked ) {
	28	+ newPaddingUnits.fill( unit );
29	29	} else {
30		- newPaddingUnits[index] = unit;
	30	+ newPaddingUnits[ index ] = unit;
31	31	}
32		- setAttributes({ svgPaddingUnits: newPaddingUnits });
	32	+ setAttributes( { svgPaddingUnits: newPaddingUnits } );
33	33	};
34	34
35	35	const togglePaddingLink = () => {
36		- const newIsPaddingLinked = !isPaddingLinked;
37		- setIsPaddingLinked(newIsPaddingLinked);
38		- if (!newIsPaddingLinked) {
	36	+ const newIsPaddingLinked = ! isPaddingLinked;
	37	+ setIsPaddingLinked( newIsPaddingLinked );
	38	+ if ( ! newIsPaddingLinked ) {
39	39	const value =
40		- svgPaddingValues[0] ||
41		- svgPaddingValues[1] ||
42		- svgPaddingValues[2] ||
43		- svgPaddingValues[3] ||
	40	+ svgPaddingValues[ 0 ] ||
	41	+ svgPaddingValues[ 1 ] ||
	42	+ svgPaddingValues[ 2 ] ||
	43	+ svgPaddingValues[ 3 ] ||
44	44	0;
45		- setAttributes({
46		- svgPaddingValues: [value, value, value, value],
	45	+ setAttributes( {
	46	+ svgPaddingValues: [ value, value, value, value ],
47	47	svgPaddingUnits: [
48		- svgPaddingUnits[0],
49		- svgPaddingUnits[0],
50		- svgPaddingUnits[0],
51		- svgPaddingUnits[0],
	48	+ svgPaddingUnits[ 0 ],
	49	+ svgPaddingUnits[ 0 ],
	50	+ svgPaddingUnits[ 0 ],
	51	+ svgPaddingUnits[ 0 ],
52	52	],
53		- });
	53	+ } );
54	54	}
55	55	};
56	56
57	57	return (
		@@ -56,73 +56,75 @@
56	56
57	57	return (
58	58	<>
59	59	<div
60		- style={{
	60	+ style={ {
61	61	display: 'flex',
62	62	alignItems: 'center',
63		- }}
	63	+ } }
64	64	>
65		- <span>{__('Padding', 'top-10')}</span>
	65	+ <span>{ __( 'Padding', 'top-10' ) }</span>
66	66	<Button
67		- onClick={togglePaddingLink}
	67	+ onClick={ togglePaddingLink }
68	68	variant="secondary"
69		- style={{
	69	+ style={ {
70	70	marginLeft: '10px',
71	71	padding: '0px',
72	72	border: 0,
73	73	boxShadow: 'none',
74		- }}
	74	+ } }
75	75	title={
76	76	isPaddingLinked
77		- ? __('Unlink Padding', 'top-10')
78		- : __('Link Padding', 'top-10')
	77	+ ? __( 'Unlink Padding', 'top-10' )
	78	+ : __( 'Link Padding', 'top-10' )
79	79	}
80	80	>
81	81	<span
82		- dangerouslySetInnerHTML={{
	82	+ dangerouslySetInnerHTML={ {
83	83	__html: isPaddingLinked ? LinkIcon : UnlinkIcon,
84		- }}
	84	+ } }
85	85	/>
86	86	</Button>
87	87	</div>
88		- {isPaddingLinked ? (
	88	+ { isPaddingLinked ? (
89	89	<UnitControl
90		- label={__('Padding', 'top-10')}
91		- value={svgPaddingValues[0]}
92		- unit={svgPaddingUnits[0]}
93		- onValueChange={(value) => handlePaddingChange(value, 0)}
94		- onUnitChange={(unit) => handleUnitChange(unit, 0)}
	90	+ label={ __( 'Padding', 'top-10' ) }
	91	+ value={ svgPaddingValues[ 0 ] }
	92	+ unit={ svgPaddingUnits[ 0 ] }
	93	+ onValueChange={ ( value ) =>
	94	+ handlePaddingChange( value, 0 )
	95	+ }
	96	+ onUnitChange={ ( unit ) => handleUnitChange( unit, 0 ) }
95	97	/>
96	98	) : (
97	99	<div
98		- style={{
	100	+ style={ {
99	101	display: 'grid',
100	102	gridTemplateColumns: '1fr 1fr',
101	103	gap: '5px',
102		- }}
	104	+ } }
103	105	>
104		- {[
105		- { index: 0, label: __('Top', 'top-10') },
106		- { index: 1, label: __('Right', 'top-10') },
107		- { index: 2, label: __('Bottom', 'top-10') },
108		- { index: 3, label: __('Left', 'top-10') },
109		- ].map(({ index, label }) => (
	106	+ { [
	107	+ { index: 0, label: __( 'Top', 'top-10' ) },
	108	+ { index: 1, label: __( 'Right', 'top-10' ) },
	109	+ { index: 2, label: __( 'Bottom', 'top-10' ) },
	110	+ { index: 3, label: __( 'Left', 'top-10' ) },
	111	+ ].map( ( { index, label } ) => (
110	112	<UnitControl
111		- key={index}
112		- label={label}
113		- value={svgPaddingValues[index]}
114		- unit={svgPaddingUnits[index]}
115		- onValueChange={(value) =>
116		- handlePaddingChange(value, index)
	113	+ key={ index }
	114	+ label={ label }
	115	+ value={ svgPaddingValues[ index ] }
	116	+ unit={ svgPaddingUnits[ index ] }
	117	+ onValueChange={ ( value ) =>
	118	+ handlePaddingChange( value, index )
117	119	}
118		- onUnitChange={(unit) =>
119		- handleUnitChange(unit, index)
	120	+ onUnitChange={ ( unit ) =>
	121	+ handleUnitChange( unit, index )
120	122	}
121	123	/>
122		- ))}
	124	+ ) ) }
123	125	</div>
124		- )}
	126	+ ) }
125	127	</>
126	128	);
127	129	};
128	130