33 lines
1.3 KiB
JavaScript
33 lines
1.3 KiB
JavaScript
import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
|
|
import { justifyLeft, justifyCenter, justifyRight } from '@wordpress/icons';
|
|
import { __ } from '@wordpress/i18n';
|
|
|
|
export default function JustificationControl({ value, onChange, label = __('Justification', 'directory-listings') }) {
|
|
const options = [
|
|
{ icon: justifyLeft, value: 'left', label: __('Left', 'directory-listings') },
|
|
{ icon: justifyCenter, value: 'center', label: __('Center', 'directory-listings') },
|
|
{ icon: justifyRight, value: 'right', label: __('Right', 'directory-listings') },
|
|
];
|
|
|
|
return (
|
|
<div className="justification-control">
|
|
{/* Label above toolbar */}
|
|
<div className="justification-control__label" style={{ marginBottom: '4px', display: 'block' }}>
|
|
{label}
|
|
</div>
|
|
|
|
<ToolbarGroup label={label}>
|
|
{options.map((option) => (
|
|
<ToolbarButton
|
|
key={option.value}
|
|
icon={option.icon}
|
|
label={option.label} // accessible for screen readers
|
|
isPressed={value === option.value}
|
|
onClick={() => onChange(option.value)}
|
|
/>
|
|
))}
|
|
</ToolbarGroup>
|
|
</div>
|
|
);
|
|
}
|