Initial

JustificationControl.js

@@ -0,0 +1,32 @@
+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>
+    );
+}