48 lines
1.6 KiB
JavaScript
48 lines
1.6 KiB
JavaScript
import { __ } from '@wordpress/i18n';
|
|
import { BaseControl, NumberControl, SelectControl, __experimentalHStack as HStack } from '@wordpress/components';
|
|
|
|
/**
|
|
* Control component with a number input and a select dropdown for units (px, rem, em, % etc.).
|
|
*/
|
|
export function NumberWithUnitControl() {
|
|
// Example options for select control (CSS units)
|
|
const unitOptions = [
|
|
{ label: __('px'), value: 'px' },
|
|
{ label: __('rem'), value: 'rem' },
|
|
{ label: __('em'), value: 'em' },
|
|
{ label: __('%'), value: '%' },
|
|
{ label: __('vh'), value: 'vh' },
|
|
{ label: __('vw'), value: 'vw' },
|
|
{ label: __('pt'), value: 'pt' },
|
|
{ label: __('cm'), value: 'cm' },
|
|
{ label: __('mm'), value: 'mm' },
|
|
];
|
|
|
|
// State to manage the number and unit values
|
|
const [value, setValue] = React.useState(10);
|
|
const [unit, setUnit] = React.useState('px');
|
|
|
|
return (
|
|
<BaseControl label={__('Padding with Unit')}>
|
|
<HStack>
|
|
{/* Number input control */}
|
|
<NumberControl
|
|
value={value}
|
|
onChange={(newValue) => setValue(newValue)}
|
|
min={0}
|
|
step={1}
|
|
label={__('Value')}
|
|
/>
|
|
|
|
{/* Select dropdown control for units */}
|
|
<SelectControl
|
|
value={unit}
|
|
options={unitOptions}
|
|
onChange={(newUnit) => setUnit(newUnit)}
|
|
label={__('Unit')}
|
|
/>
|
|
</HStack>
|
|
</BaseControl>
|
|
);
|
|
}
|