Block Editor: Add new TextAlignmentControl component

packages/block-editor/README.md

@@ -798,6 +798,22 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#registerStore>
 
+### TextAlignControl
+
+Control to facilitate text alignment selections.
+
+_Parameters_
+
+-   _props_ `Object`: Component props.
+-   _props.className_ `string`: Class name to add to the control.
+-   _props.value_ `string`: Currently selected text align.
+-   _props.onChange_ `Function`: Handles change in text alignment selection.
+-   _props.controls_ `Array`: Array of text align controls to display.
+
+_Returns_
+
+-   `Element`: Text align control.
+
 ### ToolSelector
 
 Undocumented declaration.

packages/block-editor/src/components/index.js

@@ -48,6 +48,7 @@ export { default as __experimentalDuotoneControl } from './duotone-control';
 export { default as __experimentalFontAppearanceControl } from './font-appearance-control';
 export { default as __experimentalFontFamilyControl } from './font-family';
 export { default as __experimentalLetterSpacingControl } from './letter-spacing-control';
+export { default as TextAlignControl } from './text-align-control';
 export { default as __experimentalTextDecorationControl } from './text-decoration-control';
 export { default as __experimentalTextTransformControl } from './text-transform-control';
 export { default as __experimentalWritingModeControl } from './writing-mode-control';

packages/block-editor/src/components/text-align-control/README.md

@@ -0,0 +1,54 @@
+# TextAlignControl
+
+The `TextAlignControl` component is responsible for rendering a control element that allows users to select and apply text align options to blocks or elements in the Gutenberg editor. It provides an intuitive interface for changing the text alignment by applying different alignments such as `left`, `center`, `right`.
+
+## Development guidelines
+
+### Usage
+
+Renders the Text Align Component with `left`, `center`, `right` options.
+
+```jsx
+import { TextAlignControl } from '@wordpress/block-editor';
+
+const MyTextAlignControlComponent = () => (
+	<TextAlignControl
+		value={ textTransform }
+		onChange={ ( value ) => {
+			setAttributes( { textTransform: value } );
+		} }
+	/>
+);
+```
+
+### Props
+
+The component accepts the following props.
+
+#### value
+
+The current value of the Text Alignment setting. Available options are `left|center|right`.
+
+-   Type: `String`
+-   Required: No
+
+#### controls
+
+An array of strings for what controls to show, by default it shows all. Available options are `left|center|right`.
+
+-   Type: `Array`
+-   Required: No
+
+#### onChange
+
+Callback when the `value` changes.
+
+-   Type: `Function`
+-   Required: Yes
+
+#### className
+
+A string of classes to be added to the control component.
+
+-   Type: `String`
+-   Required: No

packages/block-editor/src/components/text-align-control/index.js

@@ -0,0 +1,89 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { BaseControl, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { alignLeft, alignCenter, alignRight } from '@wordpress/icons';
+
+const TEXT_ALIGNMENT_CONTROLS = [
+	{
+		icon: alignLeft,
+		label: __( 'Align text left' ),
+		align: 'left',
+	},
+	{
+		icon: alignCenter,
+		title: __( 'Align text center' ),
+		align: 'center',
+	},
+	{
+		icon: alignRight,
+		title: __( 'Align text right' ),
+		align: 'right',
+	},
+];
+
+const DEFAULT_CONTROLS = [ 'left', 'center', 'right' ];
+
+/**
+ * Control to facilitate text alignment selections.
+ *
+ * @param {Object}   props           Component props.
+ * @param {string}   props.className Class name to add to the control.
+ * @param {string}   props.value     Currently selected text align.
+ * @param {Function} props.onChange  Handles change in text alignment selection.
+ * @param {Array}    props.controls  Array of text align controls to display.
+ *
+ * @return {Element} Text align control.
+ */
+export default function TextAlignControl( {
+	className,
+	value,
+	onChange,
+	controls = DEFAULT_CONTROLS,
+} ) {
+	const validControls = TEXT_ALIGNMENT_CONTROLS.filter( ( control ) =>
+		controls.includes( control.align )
+	);
+
+	if ( ! validControls.length ) {
+		return null;
+	}
+
+	return (
+		<fieldset
+			className={ classnames(
+				'block-editor-text-align-control',
+				className
+			) }
+		>
+			<BaseControl.VisualLabel as="legend">
+				{ __( 'Text alignment' ) }
+			</BaseControl.VisualLabel>
+			<div className="block-editor-text-align-control__buttons">
+				{ validControls.map( ( textAlign ) => {
+					return (
+						<Button
+							key={ textAlign.align }
+							icon={ textAlign.icon }
+							label={ textAlign.label }
+							isPressed={ textAlign.align === value }
+							onClick={ () => {
+								onChange(
+									textAlign.align === value
+										? undefined
+										: textAlign.align
+								);
+							} }
+						/>
+					);
+				} ) }
+			</div>
+		</fieldset>
+	);
+}

packages/block-editor/src/components/text-align-control/stories/index.story.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TextAlignControl from '../';
+
+export default {
+	title: 'BlockEditor/TextAlignControl',
+	component: TextAlignControl,
+	argTypes: {
+		onChange: { action: 'onChange' },
+		className: { control: 'text' },
+		controls: { control: 'check', options: [ 'left', 'center', 'right' ] },
+		value: { control: { type: null } },
+	},
+};
+
+const Template = ( { onChange, ...args } ) => {
+	const [ value, setValue ] = useState();
+	return (
+		<TextAlignControl
+			{ ...args }
+			onChange={ ( ...changeArgs ) => {
+				onChange( ...changeArgs );
+				setValue( ...changeArgs );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );

packages/block-editor/src/components/text-align-control/style.scss

@@ -0,0 +1,18 @@
+.block-editor-text-align-control {
+	border: 0;
+	margin: 0;
+	padding: 0;
+
+	.block-editor-text-align-control__buttons {
+		// 4px of padding makes the row 40px high, same as an input.
+		padding: $grid-unit-05 0;
+		display: flex;
+	}
+
+	.components-button.has-icon {
+		height: $grid-unit-40;
+		margin-right: $grid-unit-05;
+		min-width: $grid-unit-40;
+		padding: 0;
+	}
+}

packages/block-editor/src/style.scss

@@ -42,6 +42,7 @@
 @import "./components/responsive-block-control/style.scss";
 @import "./components/rich-text/style.scss";
 @import "./components/skip-to-selected-block/style.scss";
+@import "./components/text-align-control/style.scss";
 @import "./components/text-decoration-control/style.scss";
 @import "./components/text-transform-control/style.scss";
 @import "./components/tool-selector/style.scss";