@gechiui/block-editor/src/components/letter-spacing-control/index.js

Generic block editor.

/**
 * GeChiUI dependencies
 */
import {
	__experimentalUnitControl as UnitControl,
	__experimentalUseCustomUnits as useCustomUnits,
} from '@gechiui/components';
import { __ } from '@gechiui/i18n';

/**
 * Internal dependencies
 */
import useSetting from '../../components/use-setting';

/**
 * Control for letter-spacing.
 *
 * @param {Object}   props                      Component props.
 * @param {string}   props.value                Currently selected letter-spacing.
 * @param {Function} props.onChange             Handles change in letter-spacing selection.
 * @param {boolean}  props.__unstableInputWidth Input width to pass through to inner UnitControl.
 *
 * @return {GCElement}                          Letter-spacing control.
 */
export default function LetterSpacingControl( {
	value,
	onChange,
	__unstableInputWidth = '60px',
} ) {
	const units = useCustomUnits( {
		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
		defaultValues: { px: '2', em: '.2', rem: '.2' },
	} );
	return (
		<UnitControl
			label={ __( '字母间距' ) }
			value={ value }
			__unstableInputWidth={ __unstableInputWidth }
			units={ units }
			onChange={ onChange }
		/>
	);
}