Main

src/AlignButtons/AlignButtons.jsx

+import {Button} from "@wordpress/components";
+export default function AlignButtons ({label, onChange}) {
+
+
+	const handleChange =  (newAlignment) => {
+		if (onChange) {
+			onChange(newAlignment);
+		}
+	}
+
+	return (
+		<div className='fi-field-wrapper'>
+			<div className='fi-field-label-wrapper'>
+				<span className='fi-field-label'>{label}</span>
+			</div>
+			<div className='fi-field-buttons-wrapper fi-alignbuttons-wrapper'>
+				<Button
+					icon="editor-alignleft"
+					className="has-dashicons"
+					onClick={() => handleChange('left')}
+				/>
+				<Button
+					icon="editor-aligncenter"
+					className="has-dashicons"
+					onClick={() => handleChange('center')}
+				/>
+				<Button
+					icon="editor-alignright"
+					className="has-dashicons"
+					onClick={() => handleChange('right')}
+				/>
+			</div>
+		</div>
+	);
+}