Block Editor: Add new TextAlignmentControl component

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

@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { BaseControl, Button } from '@wordpress/components';
+
+/**
+ * @typedef {Object} Control
+ * @property {string} label The label of the control.
+ * @property {string} value The value of the control.
+ * @property {string} icon  The icon of the control.
+ */
+
+/**
+ * Control to facilitate segmented text selections.
+ *
+ * @param {Object}    props           Component props.
+ * @param {string}    props.label     A label for the control.
+ * @param {string}    props.value     Currently selected value.
+ * @param {Function}  props.onChange  Callback to handle onChange.
+ * @param {Control[]} props.controls  Array of controls to display.
+ * @param {string}    props.className Additional class name to apply.
+ *
+ * @return {Element} Element to render.
+ */
+export default function SegmentedTextControl( {
+	label,
+	value,
+	controls,
+	onChange,
+	className,
+} ) {
+	return (
+		<fieldset
+			className={ classnames(
+				'block-editor-segmented-text-control',
+				className
+			) }
+		>
+			<BaseControl.VisualLabel as="legend">
+				{ label }
+			</BaseControl.VisualLabel>
+			<div className="block-editor-segmented-text-control__buttons">
+				{ controls.map( ( control ) => {
+					return (
+						<Button
+							size="compact"
+							key={ control.value }
+							icon={ control.icon }
+							label={ control.label }
+							isPressed={ control.value === value }
+							onClick={ () => onChange( control.value ) }
+						/>
+					);
+				} ) }
+			</div>
+		</fieldset>
+	);
+}

packages/block-editor/src/components/writing-mode-control/style.scss → packages/block-editor/src/components/segmented-text-control/style.scss

@@ -1,18 +1,15 @@
-.block-editor-writing-mode-control {
+.block-editor-segmented-text-control {
 	border: 0;
 	margin: 0;
 	padding: 0;
 
-	.block-editor-writing-mode-control__buttons {
+	.block-editor-segmented-text-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/components/text-alignment-control/README.md

@@ -0,0 +1,54 @@
+# TextAlignmentControl
+
+The `TextAlignmentControl` 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 { TextAlignmentControl } from '@wordpress/block-editor';
+
+const MyTextAlignmentControlComponent = () => (
+	<TextAlignmentControl
+		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|justify`.
+
+-   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|justify`.
+
+-   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-alignment-control/index.js

@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	alignLeft,
+	alignCenter,
+	alignRight,
+	alignJustify,
+} from '@wordpress/icons';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SegmentedTextControl from '../segmented-text-control';
+
+const TEXT_ALIGNMENT_CONTROLS = [
+	{
+		label: __( 'Align text left' ),
+		value: 'left',
+		icon: alignLeft,
+	},
+	{
+		label: __( 'Align text center' ),
+		value: 'center',
+		icon: alignCenter,
+	},
+	{
+		label: __( 'Align text right' ),
+		value: 'right',
+		icon: alignRight,
+	},
+	{
+		label: __( 'Justify text' ),
+		value: 'justify',
+		icon: alignJustify,
+	},
+];
+
+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 alignment.
+ * @param {Function} props.onChange  Handles change in text alignment selection.
+ * @param {string[]} props.controls  Array of text align controls to display.
+ *
+ * @return {Element} Text alignment control.
+ */
+export default function TextAlignmentControl( {
+	className,
+	value,
+	onChange,
+	controls = DEFAULT_CONTROLS,
+} ) {
+	const validControls = useMemo(
+		() =>
+			TEXT_ALIGNMENT_CONTROLS.filter( ( control ) =>
+				controls.includes( control.value )
+			),
+		[ controls ]
+	);
+
+	if ( ! validControls.length ) {
+		return null;
+	}
+
+	return (
+		<SegmentedTextControl
+			label={ __( 'Text alignment' ) }
+			controls={ validControls }
+			className={ className }
+			value={ value }
+			onChange={ ( newValue ) => {
+				onChange( newValue === value ? undefined : newValue );
+			} }
+		/>
+	);
+}

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

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

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

@@ -0,0 +1,5 @@
+.block-editor-text-alignment-control {
+	border: 0;
+	margin: 0;
+	padding: 0;
+}

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

@@ -1,28 +1,27 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { BaseControl, Button } from '@wordpress/components';
 import { reset, formatStrikethrough, formatUnderline } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import SegmentedTextControl from '../segmented-text-control';
+
 const TEXT_DECORATIONS = [
 	{
-		name: __( 'None' ),
+		label: __( 'None' ),
 		value: 'none',
 		icon: reset,
 	},
 	{
-		name: __( 'Underline' ),
+		label: __( 'Underline' ),
 		value: 'underline',
 		icon: formatUnderline,
 	},
 	{
-		name: __( 'Strikethrough' ),
+		label: __( 'Strikethrough' ),
 		value: 'line-through',
 		icon: formatStrikethrough,
 	},
@@ -31,10 +30,10 @@ const TEXT_DECORATIONS = [
 /**
  * Control to facilitate text decoration selections.
  *
- * @param {Object}   props             Component props.
- * @param {string}   props.value       Currently selected text decoration.
- * @param {Function} props.onChange    Handles change in text decoration selection.
- * @param {string}   [props.className] Additional class name to apply.
+ * @param {Object}   props           Component props.
+ * @param {string}   props.value     Currently selected text decoration.
+ * @param {Function} props.onChange  Handles change in text decoration selection.
+ * @param {string}   props.className Additional class name to apply.
  *
  * @return {Element} Text decoration control.
  */
@@ -44,34 +43,14 @@ export default function TextDecorationControl( {
 	className,
 } ) {
 	return (
-		<fieldset
-			className={ classnames(
-				'block-editor-text-decoration-control',
-				className
-			) }
-		>
-			<BaseControl.VisualLabel as="legend">
-				{ __( 'Decoration' ) }
-			</BaseControl.VisualLabel>
-			<div className="block-editor-text-decoration-control__buttons">
-				{ TEXT_DECORATIONS.map( ( textDecoration ) => {
-					return (
-						<Button
-							key={ textDecoration.value }
-							icon={ textDecoration.icon }
-							label={ textDecoration.name }
-							isPressed={ textDecoration.value === value }
-							onClick={ () => {
-								onChange(
-									textDecoration.value === value
-										? undefined
-										: textDecoration.value
-								);
-							} }
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
+		<SegmentedTextControl
+			label={ __( 'Decoration' ) }
+			controls={ TEXT_DECORATIONS }
+			className={ className }
+			value={ value }
+			onChange={ ( newValue ) => {
+				onChange( newValue === value ? undefined : newValue );
+			} }
+		/>
 	);
 }