# top-10/4.4.3/includes/frontend/blocks/src/post-count/components/unit-control.js

WebberZone Top 10 — Popular Posts, version 4.4.3. 46 lines.

- Page: https://pluginprobe.com/plugins/top-10/4.4.3/code/includes/frontend/blocks/src/post-count/components/unit-control.js
- Raw: https://pluginprobe.com/plugins/top-10/4.4.3/raw/includes/frontend/blocks/src/post-count/components/unit-control.js
- Modified: 2026-05-28T14:37:10+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/top-10/4.4.3/code/includes/frontend/blocks/src/post-count/components/unit-control.js#L10-L20`.

```javascript
import { TextControl, SelectControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

const UnitControl = ({
	label,
	value,
	unit = 'px',
	onValueChange,
	onUnitChange,
	options = [
		{ label: 'px', value: 'px' },
		{ label: 'em', value: 'em' },
		{ label: '%', value: '%' },
		{ label: 'rem', value: 'rem' },
	],
	style = {},
}) => {
	return (
		<div className="unit-control" style={style}>
			<div style={{ display: 'flex' }}>
				<TextControl
					label={label}
					__nextHasNoMarginBottom
					type="number"
					value={value}
					onChange={onValueChange}
					style={{
						flexGrow: 1,
						marginBottom: 0,
					}}
				/>
				<SelectControl
					label={__('Unit', 'top-10')}
					__nextHasNoMarginBottom
					value={unit}
					options={options}
					onChange={onUnitChange}
					style={{ width: 'max-content', marginBottom: 0 }}
				/>
			</div>
		</div>
	);
};

export default UnitControl;

```