From 7b3fd791ca16ba15effd18a82a42751142b6b7ce Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Thu, 18 Apr 2024 12:07:07 +0900
Subject: [PATCH 01/24] Block Editor: Add new `TextAlignControl` component

---
 packages/block-editor/README.md               | 16 ++++
 packages/block-editor/src/components/index.js |  1 +
 .../components/text-align-control/README.md   | 54 +++++++++++
 .../components/text-align-control/index.js    | 89 +++++++++++++++++++
 .../text-align-control/stories/index.story.js | 36 ++++++++
 .../components/text-align-control/style.scss  | 18 ++++
 packages/block-editor/src/style.scss          |  1 +
 7 files changed, 215 insertions(+)
 create mode 100644 packages/block-editor/src/components/text-align-control/README.md
 create mode 100644 packages/block-editor/src/components/text-align-control/index.js
 create mode 100644 packages/block-editor/src/components/text-align-control/stories/index.story.js
 create mode 100644 packages/block-editor/src/components/text-align-control/style.scss

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 75f4d1143895e..07d55b9df6ea5 100644
--- a/packages/block-editor/README.md
+++ b/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.
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 5263ca3332b25..1751f3d96f3f7 100644
--- a/packages/block-editor/src/components/index.js
+++ b/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';
diff --git a/packages/block-editor/src/components/text-align-control/README.md b/packages/block-editor/src/components/text-align-control/README.md
new file mode 100644
index 0000000000000..a9eed6c2e09c4
--- /dev/null
+++ b/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
diff --git a/packages/block-editor/src/components/text-align-control/index.js b/packages/block-editor/src/components/text-align-control/index.js
new file mode 100644
index 0000000000000..a6fcb76b460b8
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/packages/block-editor/src/components/text-align-control/stories/index.story.js b/packages/block-editor/src/components/text-align-control/stories/index.story.js
new file mode 100644
index 0000000000000..fe2c27aec4e5c
--- /dev/null
+++ b/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( {} );
diff --git a/packages/block-editor/src/components/text-align-control/style.scss b/packages/block-editor/src/components/text-align-control/style.scss
new file mode 100644
index 0000000000000..83ea877abc58b
--- /dev/null
+++ b/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;
+	}
+}
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 535d1005d274d..a7c2646272021 100644
--- a/packages/block-editor/src/style.scss
+++ b/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";

From 6c69ce8028729eecf7a55d19049ec177c39e103b Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Fri, 19 Apr 2024 12:07:01 +0900
Subject: [PATCH 02/24] Rename `TextAlignControl` to `TextAlignmentControl`

---
 packages/block-editor/README.md                        |  2 +-
 packages/block-editor/src/components/index.js          |  2 +-
 .../README.md                                          | 10 +++++-----
 .../index.js                                           |  6 +++---
 .../stories/index.story.js                             |  8 ++++----
 .../style.scss                                         |  4 ++--
 packages/block-editor/src/style.scss                   |  2 +-
 7 files changed, 17 insertions(+), 17 deletions(-)
 rename packages/block-editor/src/components/{text-align-control => text-alignment-control}/README.md (62%)
 rename packages/block-editor/src/components/{text-align-control => text-alignment-control}/index.js (92%)
 rename packages/block-editor/src/components/{text-align-control => text-alignment-control}/stories/index.story.js (81%)
 rename packages/block-editor/src/components/{text-align-control => text-alignment-control}/style.scss (76%)

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 07d55b9df6ea5..ae9fb615af9ba 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -798,7 +798,7 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#registerStore>
 
-### TextAlignControl
+### TextAlignmentControl
 
 Control to facilitate text alignment selections.
 
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 1751f3d96f3f7..660c709dec55a 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -48,7 +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 TextAlignmentControl } from './text-alignment-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';
diff --git a/packages/block-editor/src/components/text-align-control/README.md b/packages/block-editor/src/components/text-alignment-control/README.md
similarity index 62%
rename from packages/block-editor/src/components/text-align-control/README.md
rename to packages/block-editor/src/components/text-alignment-control/README.md
index a9eed6c2e09c4..ff9c65d9cc8ee 100644
--- a/packages/block-editor/src/components/text-align-control/README.md
+++ b/packages/block-editor/src/components/text-alignment-control/README.md
@@ -1,6 +1,6 @@
-# TextAlignControl
+# TextAlignmentControl
 
-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`.
+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
 
@@ -9,10 +9,10 @@ The `TextAlignControl` component is responsible for rendering a control element
 Renders the Text Align Component with `left`, `center`, `right` options.
 
 ```jsx
-import { TextAlignControl } from '@wordpress/block-editor';
+import { TextAlignmentControl } from '@wordpress/block-editor';
 
-const MyTextAlignControlComponent = () => (
-	<TextAlignControl
+const MyTextAlignmentControlComponent = () => (
+	<TextAlignmentControl
 		value={ textTransform }
 		onChange={ ( value ) => {
 			setAttributes( { textTransform: value } );
diff --git a/packages/block-editor/src/components/text-align-control/index.js b/packages/block-editor/src/components/text-alignment-control/index.js
similarity index 92%
rename from packages/block-editor/src/components/text-align-control/index.js
rename to packages/block-editor/src/components/text-alignment-control/index.js
index a6fcb76b460b8..aeb25f76758a4 100644
--- a/packages/block-editor/src/components/text-align-control/index.js
+++ b/packages/block-editor/src/components/text-alignment-control/index.js
@@ -41,7 +41,7 @@ const DEFAULT_CONTROLS = [ 'left', 'center', 'right' ];
  *
  * @return {Element} Text align control.
  */
-export default function TextAlignControl( {
+export default function TextAlignmentControl( {
 	className,
 	value,
 	onChange,
@@ -58,14 +58,14 @@ export default function TextAlignControl( {
 	return (
 		<fieldset
 			className={ classnames(
-				'block-editor-text-align-control',
+				'block-editor-text-alignment-control',
 				className
 			) }
 		>
 			<BaseControl.VisualLabel as="legend">
 				{ __( 'Text alignment' ) }
 			</BaseControl.VisualLabel>
-			<div className="block-editor-text-align-control__buttons">
+			<div className="block-editor-text-alignment-control__buttons">
 				{ validControls.map( ( textAlign ) => {
 					return (
 						<Button
diff --git a/packages/block-editor/src/components/text-align-control/stories/index.story.js b/packages/block-editor/src/components/text-alignment-control/stories/index.story.js
similarity index 81%
rename from packages/block-editor/src/components/text-align-control/stories/index.story.js
rename to packages/block-editor/src/components/text-alignment-control/stories/index.story.js
index fe2c27aec4e5c..c345393b21080 100644
--- a/packages/block-editor/src/components/text-align-control/stories/index.story.js
+++ b/packages/block-editor/src/components/text-alignment-control/stories/index.story.js
@@ -6,11 +6,11 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import TextAlignControl from '../';
+import TextAlignmentControl from '../';
 
 export default {
-	title: 'BlockEditor/TextAlignControl',
-	component: TextAlignControl,
+	title: 'BlockEditor/TextAlignmentControl',
+	component: TextAlignmentControl,
 	argTypes: {
 		onChange: { action: 'onChange' },
 		className: { control: 'text' },
@@ -22,7 +22,7 @@ export default {
 const Template = ( { onChange, ...args } ) => {
 	const [ value, setValue ] = useState();
 	return (
-		<TextAlignControl
+		<TextAlignmentControl
 			{ ...args }
 			onChange={ ( ...changeArgs ) => {
 				onChange( ...changeArgs );
diff --git a/packages/block-editor/src/components/text-align-control/style.scss b/packages/block-editor/src/components/text-alignment-control/style.scss
similarity index 76%
rename from packages/block-editor/src/components/text-align-control/style.scss
rename to packages/block-editor/src/components/text-alignment-control/style.scss
index 83ea877abc58b..8a77da5e38835 100644
--- a/packages/block-editor/src/components/text-align-control/style.scss
+++ b/packages/block-editor/src/components/text-alignment-control/style.scss
@@ -1,9 +1,9 @@
-.block-editor-text-align-control {
+.block-editor-text-alignment-control {
 	border: 0;
 	margin: 0;
 	padding: 0;
 
-	.block-editor-text-align-control__buttons {
+	.block-editor-text-alignment-control__buttons {
 		// 4px of padding makes the row 40px high, same as an input.
 		padding: $grid-unit-05 0;
 		display: flex;
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index a7c2646272021..2bbac00dd8ca9 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -42,7 +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-alignment-control/style.scss";
 @import "./components/text-decoration-control/style.scss";
 @import "./components/text-transform-control/style.scss";
 @import "./components/tool-selector/style.scss";

From b1dfa9949f2e4447a1006cbee498872848f76651 Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Fri, 19 Apr 2024 12:30:47 +0900
Subject: [PATCH 03/24] Replate `align` with `alignment`

---
 packages/block-editor/README.md                                 | 2 +-
 .../block-editor/src/components/text-alignment-control/index.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index ae9fb615af9ba..de567a1b67818 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -806,7 +806,7 @@ _Parameters_
 
 -   _props_ `Object`: Component props.
 -   _props.className_ `string`: Class name to add to the control.
--   _props.value_ `string`: Currently selected text align.
+-   _props.value_ `string`: Currently selected text alignment.
 -   _props.onChange_ `Function`: Handles change in text alignment selection.
 -   _props.controls_ `Array`: Array of text align controls to display.
 
diff --git a/packages/block-editor/src/components/text-alignment-control/index.js b/packages/block-editor/src/components/text-alignment-control/index.js
index aeb25f76758a4..04d8357679cfa 100644
--- a/packages/block-editor/src/components/text-alignment-control/index.js
+++ b/packages/block-editor/src/components/text-alignment-control/index.js
@@ -35,7 +35,7 @@ const DEFAULT_CONTROLS = [ 'left', 'center', 'right' ];
  *
  * @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 {string}   props.value     Currently selected text alignment.
  * @param {Function} props.onChange  Handles change in text alignment selection.
  * @param {Array}    props.controls  Array of text align controls to display.
  *

From 5f671cec09bb2b85285d817013fb6df2748b8aa5 Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Fri, 19 Apr 2024 13:21:11 +0900
Subject: [PATCH 04/24] Use components to reduce CSS writing

---
 .../text-alignment-control/index.js           | 49 +++++++++++--------
 .../text-alignment-control/style.scss         | 13 -----
 2 files changed, 29 insertions(+), 33 deletions(-)

diff --git a/packages/block-editor/src/components/text-alignment-control/index.js b/packages/block-editor/src/components/text-alignment-control/index.js
index 04d8357679cfa..1f45d338fce6c 100644
--- a/packages/block-editor/src/components/text-alignment-control/index.js
+++ b/packages/block-editor/src/components/text-alignment-control/index.js
@@ -6,7 +6,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { BaseControl, Button } from '@wordpress/components';
+import {
+	BaseControl,
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { alignLeft, alignCenter, alignRight } from '@wordpress/icons';
 
@@ -65,25 +70,29 @@ export default function TextAlignmentControl( {
 			<BaseControl.VisualLabel as="legend">
 				{ __( 'Text alignment' ) }
 			</BaseControl.VisualLabel>
-			<div className="block-editor-text-alignment-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>
+			{ /* // 4px of padding makes the row 40px high, same as an input. */ }
+			<Spacer marginBottom={ 0 } paddingY={ 1 }>
+				<HStack justify="flex-start" spacing={ 1 }>
+					{ validControls.map( ( textAlign ) => {
+						return (
+							<Button
+								key={ textAlign.align }
+								icon={ textAlign.icon }
+								label={ textAlign.label }
+								size="compact"
+								isPressed={ textAlign.align === value }
+								onClick={ () => {
+									onChange(
+										textAlign.align === value
+											? undefined
+											: textAlign.align
+									);
+								} }
+							/>
+						);
+					} ) }
+				</HStack>
+			</Spacer>
 		</fieldset>
 	);
 }
diff --git a/packages/block-editor/src/components/text-alignment-control/style.scss b/packages/block-editor/src/components/text-alignment-control/style.scss
index 8a77da5e38835..518308f633af3 100644
--- a/packages/block-editor/src/components/text-alignment-control/style.scss
+++ b/packages/block-editor/src/components/text-alignment-control/style.scss
@@ -2,17 +2,4 @@
 	border: 0;
 	margin: 0;
 	padding: 0;
-
-	.block-editor-text-alignment-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;
-	}
 }

From cc79460f74dcfd10957fd4c3324ebdf3c6923972 Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Sat, 20 Apr 2024 13:17:31 +0900
Subject: [PATCH 05/24] Refactor using new SegmentedTextControl component

---
 packages/block-editor/README.md               |  2 +-
 .../segmented-text-control/index.js           | 56 ++++++++++++++
 .../style.scss                                |  7 +-
 .../text-alignment-control/index.js           | 74 ++++++-------------
 .../text-decoration-control/index.js          | 63 ++++++----------
 .../text-decoration-control/style.scss        | 18 -----
 .../text-transform-control/index.js           | 57 +++++---------
 .../text-transform-control/style.scss         | 18 -----
 .../components/writing-mode-control/index.js  | 49 ++++--------
 packages/block-editor/src/style.scss          |  4 +-
 10 files changed, 135 insertions(+), 213 deletions(-)
 create mode 100644 packages/block-editor/src/components/segmented-text-control/index.js
 rename packages/block-editor/src/components/{writing-mode-control => segmented-text-control}/style.scss (58%)
 delete mode 100644 packages/block-editor/src/components/text-decoration-control/style.scss
 delete mode 100644 packages/block-editor/src/components/text-transform-control/style.scss

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index e7838065d4e8f..f7eb754db677c 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -812,7 +812,7 @@ _Parameters_
 
 _Returns_
 
--   `Element`: Text align control.
+-   `Element`: Text alignment control.
 
 ### ToolSelector
 
diff --git a/packages/block-editor/src/components/segmented-text-control/index.js b/packages/block-editor/src/components/segmented-text-control/index.js
new file mode 100644
index 0000000000000..5fe73b86f5a47
--- /dev/null
+++ b/packages/block-editor/src/components/segmented-text-control/index.js
@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { BaseControl, Button } from '@wordpress/components';
+
+/**
+ * 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 {Array}    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>
+	);
+}
diff --git a/packages/block-editor/src/components/writing-mode-control/style.scss b/packages/block-editor/src/components/segmented-text-control/style.scss
similarity index 58%
rename from packages/block-editor/src/components/writing-mode-control/style.scss
rename to packages/block-editor/src/components/segmented-text-control/style.scss
index 4b865dc0282c0..7a4a3bbea7cb3 100644
--- a/packages/block-editor/src/components/writing-mode-control/style.scss
+++ b/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;
 	}
 }
diff --git a/packages/block-editor/src/components/text-alignment-control/index.js b/packages/block-editor/src/components/text-alignment-control/index.js
index 1f45d338fce6c..893c4ddeb7db1 100644
--- a/packages/block-editor/src/components/text-alignment-control/index.js
+++ b/packages/block-editor/src/components/text-alignment-control/index.js
@@ -1,35 +1,29 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import {
-	BaseControl,
-	Button,
-	__experimentalHStack as HStack,
-	__experimentalSpacer as Spacer,
-} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { alignLeft, alignCenter, alignRight } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import SegmentedTextControl from '../segmented-text-control';
+
 const TEXT_ALIGNMENT_CONTROLS = [
 	{
-		icon: alignLeft,
 		label: __( 'Align text left' ),
-		align: 'left',
+		value: 'left',
+		icon: alignLeft,
 	},
 	{
+		label: __( 'Align text center' ),
+		value: 'center',
 		icon: alignCenter,
-		title: __( 'Align text center' ),
-		align: 'center',
 	},
 	{
+		label: __( 'Align text right' ),
+		value: 'right',
 		icon: alignRight,
-		title: __( 'Align text right' ),
-		align: 'right',
 	},
 ];
 
@@ -44,7 +38,7 @@ const DEFAULT_CONTROLS = [ 'left', 'center', 'right' ];
  * @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.
+ * @return {Element} Text alignment control.
  */
 export default function TextAlignmentControl( {
 	className,
@@ -53,7 +47,7 @@ export default function TextAlignmentControl( {
 	controls = DEFAULT_CONTROLS,
 } ) {
 	const validControls = TEXT_ALIGNMENT_CONTROLS.filter( ( control ) =>
-		controls.includes( control.align )
+		controls.includes( control.value )
 	);
 
 	if ( ! validControls.length ) {
@@ -61,38 +55,14 @@ export default function TextAlignmentControl( {
 	}
 
 	return (
-		<fieldset
-			className={ classnames(
-				'block-editor-text-alignment-control',
-				className
-			) }
-		>
-			<BaseControl.VisualLabel as="legend">
-				{ __( 'Text alignment' ) }
-			</BaseControl.VisualLabel>
-			{ /* // 4px of padding makes the row 40px high, same as an input. */ }
-			<Spacer marginBottom={ 0 } paddingY={ 1 }>
-				<HStack justify="flex-start" spacing={ 1 }>
-					{ validControls.map( ( textAlign ) => {
-						return (
-							<Button
-								key={ textAlign.align }
-								icon={ textAlign.icon }
-								label={ textAlign.label }
-								size="compact"
-								isPressed={ textAlign.align === value }
-								onClick={ () => {
-									onChange(
-										textAlign.align === value
-											? undefined
-											: textAlign.align
-									);
-								} }
-							/>
-						);
-					} ) }
-				</HStack>
-			</Spacer>
-		</fieldset>
+		<SegmentedTextControl
+			label={ __( 'Text alignment' ) }
+			controls={ validControls }
+			className={ className }
+			value={ value }
+			onChange={ ( newValue ) => {
+				onChange( newValue === value ? undefined : newValue );
+			} }
+		/>
 	);
 }
diff --git a/packages/block-editor/src/components/text-decoration-control/index.js b/packages/block-editor/src/components/text-decoration-control/index.js
index 973fb71a7448f..9064352b43185 100644
--- a/packages/block-editor/src/components/text-decoration-control/index.js
+++ b/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 );
+			} }
+		/>
 	);
 }
diff --git a/packages/block-editor/src/components/text-decoration-control/style.scss b/packages/block-editor/src/components/text-decoration-control/style.scss
deleted file mode 100644
index 689707a66b7ca..0000000000000
--- a/packages/block-editor/src/components/text-decoration-control/style.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.block-editor-text-decoration-control {
-	border: 0;
-	margin: 0;
-	padding: 0;
-
-	.block-editor-text-decoration-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;
-	}
-}
diff --git a/packages/block-editor/src/components/text-transform-control/index.js b/packages/block-editor/src/components/text-transform-control/index.js
index c5d0ce37e9acd..40aaab804280d 100644
--- a/packages/block-editor/src/components/text-transform-control/index.js
+++ b/packages/block-editor/src/components/text-transform-control/index.js
@@ -1,12 +1,6 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { BaseControl, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
 	reset,
@@ -15,24 +9,29 @@ import {
 	formatUppercase,
 } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import SegmentedTextControl from '../segmented-text-control';
+
 const TEXT_TRANSFORMS = [
 	{
-		name: __( 'None' ),
+		label: __( 'None' ),
 		value: 'none',
 		icon: reset,
 	},
 	{
-		name: __( 'Uppercase' ),
+		label: __( 'Uppercase' ),
 		value: 'uppercase',
 		icon: formatUppercase,
 	},
 	{
-		name: __( 'Lowercase' ),
+		label: __( 'Lowercase' ),
 		value: 'lowercase',
 		icon: formatLowercase,
 	},
 	{
-		name: __( 'Capitalize' ),
+		label: __( 'Capitalize' ),
 		value: 'capitalize',
 		icon: formatCapitalize,
 	},
@@ -50,34 +49,14 @@ const TEXT_TRANSFORMS = [
  */
 export default function TextTransformControl( { className, value, onChange } ) {
 	return (
-		<fieldset
-			className={ classnames(
-				'block-editor-text-transform-control',
-				className
-			) }
-		>
-			<BaseControl.VisualLabel as="legend">
-				{ __( 'Letter case' ) }
-			</BaseControl.VisualLabel>
-			<div className="block-editor-text-transform-control__buttons">
-				{ TEXT_TRANSFORMS.map( ( textTransform ) => {
-					return (
-						<Button
-							key={ textTransform.value }
-							icon={ textTransform.icon }
-							label={ textTransform.name }
-							isPressed={ textTransform.value === value }
-							onClick={ () => {
-								onChange(
-									textTransform.value === value
-										? undefined
-										: textTransform.value
-								);
-							} }
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
+		<SegmentedTextControl
+			label={ __( 'Letter case' ) }
+			controls={ TEXT_TRANSFORMS }
+			className={ className }
+			value={ value }
+			onChange={ ( newValue ) => {
+				onChange( newValue === value ? undefined : newValue );
+			} }
+		/>
 	);
 }
diff --git a/packages/block-editor/src/components/text-transform-control/style.scss b/packages/block-editor/src/components/text-transform-control/style.scss
deleted file mode 100644
index 0e097405e332b..0000000000000
--- a/packages/block-editor/src/components/text-transform-control/style.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.block-editor-text-transform-control {
-	border: 0;
-	margin: 0;
-	padding: 0;
-
-	.block-editor-text-transform-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;
-	}
-}
diff --git a/packages/block-editor/src/components/writing-mode-control/index.js b/packages/block-editor/src/components/writing-mode-control/index.js
index 2adf8be14ad39..6a4b85c4581c3 100644
--- a/packages/block-editor/src/components/writing-mode-control/index.js
+++ b/packages/block-editor/src/components/writing-mode-control/index.js
@@ -1,15 +1,14 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { BaseControl, Button } from '@wordpress/components';
 import { __, isRTL } from '@wordpress/i18n';
 import { textHorizontal, textVertical } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import SegmentedTextControl from '../segmented-text-control';
+
 const WRITING_MODES = [
 	{
 		name: __( 'Horizontal' ),
@@ -35,34 +34,14 @@ const WRITING_MODES = [
  */
 export default function WritingModeControl( { className, value, onChange } ) {
 	return (
-		<fieldset
-			className={ classnames(
-				'block-editor-writing-mode-control',
-				className
-			) }
-		>
-			<BaseControl.VisualLabel as="legend">
-				{ __( 'Orientation' ) }
-			</BaseControl.VisualLabel>
-			<div className="block-editor-writing-mode-control__buttons">
-				{ WRITING_MODES.map( ( writingMode ) => {
-					return (
-						<Button
-							key={ writingMode.value }
-							icon={ writingMode.icon }
-							label={ writingMode.name }
-							isPressed={ writingMode.value === value }
-							onClick={ () => {
-								onChange(
-									writingMode.value === value
-										? undefined
-										: writingMode.value
-								);
-							} }
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
+		<SegmentedTextControl
+			label={ __( 'Orientation' ) }
+			controls={ WRITING_MODES }
+			className={ className }
+			value={ value }
+			onChange={ ( newValue ) => {
+				onChange( newValue === value ? undefined : newValue );
+			} }
+		/>
 	);
 }
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 2bbac00dd8ca9..5080aa05718bb 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -41,10 +41,8 @@
 @import "./components/multi-selection-inspector/style.scss";
 @import "./components/responsive-block-control/style.scss";
 @import "./components/rich-text/style.scss";
+@import "./components/segmented-text-control/style.scss";
 @import "./components/skip-to-selected-block/style.scss";
-@import "./components/text-alignment-control/style.scss";
-@import "./components/text-decoration-control/style.scss";
-@import "./components/text-transform-control/style.scss";
 @import "./components/tool-selector/style.scss";
 @import "./components/url-input/style.scss";
 @import "./components/url-popover/style.scss";

From 036522b5b1f6851cb053c61fbd9e7984c870b66d Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Mon, 22 Apr 2024 20:53:26 +0900
Subject: [PATCH 06/24] Make a component private

---
 packages/block-editor/README.md                  | 16 ----------------
 packages/block-editor/src/components/index.js    |  1 -
 .../stories/index.story.js                       |  5 ++++-
 packages/block-editor/src/private-apis.js        |  2 ++
 4 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index f7eb754db677c..154ea248ae651 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -798,22 +798,6 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#registerStore>
 
-### TextAlignmentControl
-
-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 alignment.
--   _props.onChange_ `Function`: Handles change in text alignment selection.
--   _props.controls_ `Array`: Array of text align controls to display.
-
-_Returns_
-
--   `Element`: Text alignment control.
-
 ### ToolSelector
 
 Undocumented declaration.
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 660c709dec55a..5263ca3332b25 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -48,7 +48,6 @@ 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 TextAlignmentControl } from './text-alignment-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';
diff --git a/packages/block-editor/src/components/text-alignment-control/stories/index.story.js b/packages/block-editor/src/components/text-alignment-control/stories/index.story.js
index c345393b21080..2d70034dea4b2 100644
--- a/packages/block-editor/src/components/text-alignment-control/stories/index.story.js
+++ b/packages/block-editor/src/components/text-alignment-control/stories/index.story.js
@@ -2,11 +2,14 @@
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import TextAlignmentControl from '../';
+import { unlock } from '../../../lock-unlock';
+
+const { TextAlignmentControl } = unlock( blockEditorPrivateApis );
 
 export default {
 	title: 'BlockEditor/TextAlignmentControl',
diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
index e81a5eed39d5b..f10fcc4df2c72 100644
--- a/packages/block-editor/src/private-apis.js
+++ b/packages/block-editor/src/private-apis.js
@@ -23,6 +23,7 @@ import { BlockRemovalWarningModal } from './components/block-removal-warning-mod
 import { useLayoutClasses, useLayoutStyles } from './hooks';
 import DimensionsTool from './components/dimensions-tool';
 import ResolutionTool from './components/resolution-tool';
+import TextAlignmentControl from './components/text-alignment-control';
 import {
 	default as ReusableBlocksRenameHint,
 	useReusableBlocksRenameHint,
@@ -66,6 +67,7 @@ lock( privateApis, {
 	useLayoutStyles,
 	DimensionsTool,
 	ResolutionTool,
+	TextAlignmentControl,
 	ReusableBlocksRenameHint,
 	useReusableBlocksRenameHint,
 	usesContextKey,

From a050659a8c956626553f14d152c3ab1d50cc3ec8 Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Mon, 22 Apr 2024 20:58:41 +0900
Subject: [PATCH 07/24] SegmentedTextControl: Update JSDoc parameters

---
 .../segmented-text-control/index.js           | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/segmented-text-control/index.js b/packages/block-editor/src/components/segmented-text-control/index.js
index 5fe73b86f5a47..15761ef02af3c 100644
--- a/packages/block-editor/src/components/segmented-text-control/index.js
+++ b/packages/block-editor/src/components/segmented-text-control/index.js
@@ -8,15 +8,22 @@ import classnames from 'classnames';
  */
 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 {Array}    props.controls  Array of controls to display.
- * @param {string}   props.className Additional class name to apply.
+ * @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.
  */

From 7439461e7eefce880f776bd833afbbef844c31a0 Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Mon, 22 Apr 2024 21:02:47 +0900
Subject: [PATCH 08/24] TextAlignmentControl: Update JSDoc parameter

---
 .../block-editor/src/components/text-alignment-control/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/text-alignment-control/index.js b/packages/block-editor/src/components/text-alignment-control/index.js
index 893c4ddeb7db1..c73cffb2c715a 100644
--- a/packages/block-editor/src/components/text-alignment-control/index.js
+++ b/packages/block-editor/src/components/text-alignment-control/index.js
@@ -36,7 +36,7 @@ const DEFAULT_CONTROLS = [ 'left', 'center', 'right' ];
  * @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 {Array}    props.controls  Array of text align controls to display.
+ * @param {string[]} props.controls  Array of text align controls to display.
  *
  * @return {Element} Text alignment control.
  */

From 08fca2a5b28fb90ad2d1302bb7a4fbfb9f1800e7 Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Mon, 22 Apr 2024 21:09:26 +0900
Subject: [PATCH 09/24] TextAlignmentControl: Cache valid controls filtering

---
 .../src/components/text-alignment-control/index.js       | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/text-alignment-control/index.js b/packages/block-editor/src/components/text-alignment-control/index.js
index c73cffb2c715a..1dbe424a821b2 100644
--- a/packages/block-editor/src/components/text-alignment-control/index.js
+++ b/packages/block-editor/src/components/text-alignment-control/index.js
@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { alignLeft, alignCenter, alignRight } from '@wordpress/icons';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -46,8 +47,12 @@ export default function TextAlignmentControl( {
 	onChange,
 	controls = DEFAULT_CONTROLS,
 } ) {
-	const validControls = TEXT_ALIGNMENT_CONTROLS.filter( ( control ) =>
-		controls.includes( control.value )
+	const validControls = useMemo(
+		() =>
+			TEXT_ALIGNMENT_CONTROLS.filter( ( control ) =>
+				controls.includes( control.value )
+			),
+		[ controls ]
 	);
 
 	if ( ! validControls.length ) {

From 9f12b6a8fbec9d7e5ad2e5f065a3309c2a662769 Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Mon, 22 Apr 2024 21:15:37 +0900
Subject: [PATCH 10/24] WritingModeControl: fix control property

---
 .../block-editor/src/components/writing-mode-control/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/writing-mode-control/index.js b/packages/block-editor/src/components/writing-mode-control/index.js
index 6a4b85c4581c3..a7a25fa892698 100644
--- a/packages/block-editor/src/components/writing-mode-control/index.js
+++ b/packages/block-editor/src/components/writing-mode-control/index.js
@@ -11,12 +11,12 @@ import SegmentedTextControl from '../segmented-text-control';
 
 const WRITING_MODES = [
 	{
-		name: __( 'Horizontal' ),
+		label: __( 'Horizontal' ),
 		value: 'horizontal-tb',
 		icon: textHorizontal,
 	},
 	{
-		name: __( 'Vertical' ),
+		label: __( 'Vertical' ),
 		value: isRTL() ? 'vertical-lr' : 'vertical-rl',
 		icon: textVertical,
 	},

From cc75116f4281692e95ad4e5c3b08bc5424ecc054 Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Mon, 22 Apr 2024 21:33:20 +0900
Subject: [PATCH 11/24] TextAlignmentControl: Allow `justify` as an allowed
 value

---
 .../src/components/text-alignment-control/README.md  |  2 +-
 .../src/components/text-alignment-control/index.js   | 12 +++++++++++-
 .../text-alignment-control/stories/index.story.js    |  5 ++++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/text-alignment-control/README.md b/packages/block-editor/src/components/text-alignment-control/README.md
index ff9c65d9cc8ee..9def34fc4ac40 100644
--- a/packages/block-editor/src/components/text-alignment-control/README.md
+++ b/packages/block-editor/src/components/text-alignment-control/README.md
@@ -34,7 +34,7 @@ The current value of the Text Alignment setting. Available options are `left|cen
 
 #### controls
 
-An array of strings for what controls to show, by default it shows all. Available options are `left|center|right`.
+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
diff --git a/packages/block-editor/src/components/text-alignment-control/index.js b/packages/block-editor/src/components/text-alignment-control/index.js
index 1dbe424a821b2..d04551bce6607 100644
--- a/packages/block-editor/src/components/text-alignment-control/index.js
+++ b/packages/block-editor/src/components/text-alignment-control/index.js
@@ -2,7 +2,12 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { alignLeft, alignCenter, alignRight } from '@wordpress/icons';
+import {
+	alignLeft,
+	alignCenter,
+	alignRight,
+	alignJustify,
+} from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
 
 /**
@@ -26,6 +31,11 @@ const TEXT_ALIGNMENT_CONTROLS = [
 		value: 'right',
 		icon: alignRight,
 	},
+	{
+		label: __( 'Justify text' ),
+		value: 'justify',
+		icon: alignJustify,
+	},
 ];
 
 const DEFAULT_CONTROLS = [ 'left', 'center', 'right' ];
diff --git a/packages/block-editor/src/components/text-alignment-control/stories/index.story.js b/packages/block-editor/src/components/text-alignment-control/stories/index.story.js
index 2d70034dea4b2..d6dd7d15f4aac 100644
--- a/packages/block-editor/src/components/text-alignment-control/stories/index.story.js
+++ b/packages/block-editor/src/components/text-alignment-control/stories/index.story.js
@@ -17,7 +17,10 @@ export default {
 	argTypes: {
 		onChange: { action: 'onChange' },
 		className: { control: 'text' },
-		controls: { control: 'check', options: [ 'left', 'center', 'right' ] },
+		controls: {
+			control: 'check',
+			options: [ 'left', 'center', 'right', 'justify' ],
+		},
 		value: { control: { type: null } },
 	},
 };

From cfae31a2064bc2e0d52d306028421a80579c3b39 Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Mon, 22 Apr 2024 21:36:39 +0900
Subject: [PATCH 12/24] TextAlignmentControl: Update docs

---
 .../src/components/text-alignment-control/README.md             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/text-alignment-control/README.md b/packages/block-editor/src/components/text-alignment-control/README.md
index 9def34fc4ac40..9e909b48dd150 100644
--- a/packages/block-editor/src/components/text-alignment-control/README.md
+++ b/packages/block-editor/src/components/text-alignment-control/README.md
@@ -27,7 +27,7 @@ The component accepts the following props.
 
 #### value
 
-The current value of the Text Alignment setting. Available options are `left|center|right`.
+The current value of the Text Alignment setting. Available options are `left|center|right|justify`.
 
 -   Type: `String`
 -   Required: No

From b672c97785a52245638ee4a05e30ef161e98f70e Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Tue, 23 Apr 2024 19:43:35 +0900
Subject: [PATCH 13/24] SegmentedTextControl: Update description

Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
---
 .../block-editor/src/components/segmented-text-control/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/segmented-text-control/index.js b/packages/block-editor/src/components/segmented-text-control/index.js
index 15761ef02af3c..46fe9d2771ff0 100644
--- a/packages/block-editor/src/components/segmented-text-control/index.js
+++ b/packages/block-editor/src/components/segmented-text-control/index.js
@@ -16,7 +16,7 @@ import { BaseControl, Button } from '@wordpress/components';
  */
 
 /**
- * Control to facilitate segmented text selections.
+ * Control to facilitate selecting a text style from a set of options.
  *
  * @param {Object}    props           Component props.
  * @param {string}    props.label     A label for the control.

From 0ce16c2592b7f48a2f3e8e81cbc91079b91361eb Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Tue, 23 Apr 2024 19:44:47 +0900
Subject: [PATCH 14/24] TextAlignmentControl: Update readme

Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
---
 .../src/components/text-alignment-control/README.md             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/text-alignment-control/README.md b/packages/block-editor/src/components/text-alignment-control/README.md
index 9e909b48dd150..f75ea99c01102 100644
--- a/packages/block-editor/src/components/text-alignment-control/README.md
+++ b/packages/block-editor/src/components/text-alignment-control/README.md
@@ -1,6 +1,6 @@
 # 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`.
+The `TextAlignmentControl` component is responsible for rendering a control that allows users to select and apply text alignment options to blocks or elements in the Gutenberg editor.
 
 ## Development guidelines
 

From e0acab772b67c905a9153920fdbf7268c9ee957e Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Tue, 23 Apr 2024 19:45:19 +0900
Subject: [PATCH 15/24] TextAlignmentControl: Fix JSDoc

Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
---
 .../block-editor/src/components/text-alignment-control/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/text-alignment-control/index.js b/packages/block-editor/src/components/text-alignment-control/index.js
index d04551bce6607..71947bd36611b 100644
--- a/packages/block-editor/src/components/text-alignment-control/index.js
+++ b/packages/block-editor/src/components/text-alignment-control/index.js
@@ -47,7 +47,7 @@ const DEFAULT_CONTROLS = [ 'left', 'center', 'right' ];
  * @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.
+ * @param {string[]} props.controls  Array of text alignment controls to display.
  *
  * @return {Element} Text alignment control.
  */

From a5339214fc2459da047e68011f15322e477831e9 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Tue, 23 Apr 2024 19:47:40 +0900
Subject: [PATCH 16/24] TextAlignmentControl: Update readme

Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
---
 .../src/components/text-alignment-control/README.md            | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/text-alignment-control/README.md b/packages/block-editor/src/components/text-alignment-control/README.md
index f75ea99c01102..e2e15aa8a9389 100644
--- a/packages/block-editor/src/components/text-alignment-control/README.md
+++ b/packages/block-editor/src/components/text-alignment-control/README.md
@@ -27,10 +27,11 @@ The component accepts the following props.
 
 #### value
 
-The current value of the Text Alignment setting. Available options are `left|center|right|justify`.
+The current value of the Text Alignment setting.
 
 -   Type: `String`
 -   Required: No
+-   Options: `left`, `center`, `right`, `justify`
 
 #### controls
 

From 62d4003810ad2abc8cb54c200ee9f2e24f11d41b Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Tue, 23 Apr 2024 19:48:19 +0900
Subject: [PATCH 17/24] TextAlignmentControl: Update readme

Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
---
 .../src/components/text-alignment-control/README.md             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/text-alignment-control/README.md b/packages/block-editor/src/components/text-alignment-control/README.md
index e2e15aa8a9389..c8a928007c3ca 100644
--- a/packages/block-editor/src/components/text-alignment-control/README.md
+++ b/packages/block-editor/src/components/text-alignment-control/README.md
@@ -6,7 +6,7 @@ The `TextAlignmentControl` component is responsible for rendering a control that
 
 ### Usage
 
-Renders the Text Align Component with `left`, `center`, `right` options.
+Render the Text Alignment Component with its default `left`, `center`, and `right` options.
 
 ```jsx
 import { TextAlignmentControl } from '@wordpress/block-editor';

From 2288b72007c5616f82f47eae9f185dd69969ecc6 Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Tue, 23 Apr 2024 19:49:56 +0900
Subject: [PATCH 18/24] SegmentedTextControl: Update JSDoc

---
 .../src/components/segmented-text-control/index.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/segmented-text-control/index.js b/packages/block-editor/src/components/segmented-text-control/index.js
index 46fe9d2771ff0..fbbbc6aa24984 100644
--- a/packages/block-editor/src/components/segmented-text-control/index.js
+++ b/packages/block-editor/src/components/segmented-text-control/index.js
@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { BaseControl, Button } from '@wordpress/components';
 
 /**
- * @typedef {Object} Control
+ * @typedef {Object} Option
  * @property {string} label The label of the control.
  * @property {string} value The value of the control.
  * @property {string} icon  The icon of the control.
@@ -18,12 +18,12 @@ import { BaseControl, Button } from '@wordpress/components';
 /**
  * Control to facilitate selecting a text style from a set of options.
  *
- * @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.
+ * @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 {Option[]} props.controls  Array of controls to display.
+ * @param {string}   props.className Additional class name to apply.
  *
  * @return {Element} Element to render.
  */

From fcb384d1473823addf02fd8e631d38ab41c0381f Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Tue, 23 Apr 2024 20:08:30 +0900
Subject: [PATCH 19/24] TextAlignmentcontrol: remove unecessary `unlock()`

---
 .../components/text-alignment-control/stories/index.story.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/text-alignment-control/stories/index.story.js b/packages/block-editor/src/components/text-alignment-control/stories/index.story.js
index d6dd7d15f4aac..7163b7eaa8a52 100644
--- a/packages/block-editor/src/components/text-alignment-control/stories/index.story.js
+++ b/packages/block-editor/src/components/text-alignment-control/stories/index.story.js
@@ -2,14 +2,11 @@
  * 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 );
+import TextAlignmentControl from '../';
 
 export default {
 	title: 'BlockEditor/TextAlignmentControl',

From e038087a080ba0bde2acdf1031dd3a287e8050d5 Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Tue, 23 Apr 2024 20:11:54 +0900
Subject: [PATCH 20/24] TextAlignmentControl: Remove unnecessary styles

---
 .../src/components/text-alignment-control/style.scss         | 5 -----
 1 file changed, 5 deletions(-)
 delete mode 100644 packages/block-editor/src/components/text-alignment-control/style.scss

diff --git a/packages/block-editor/src/components/text-alignment-control/style.scss b/packages/block-editor/src/components/text-alignment-control/style.scss
deleted file mode 100644
index 518308f633af3..0000000000000
--- a/packages/block-editor/src/components/text-alignment-control/style.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.block-editor-text-alignment-control {
-	border: 0;
-	margin: 0;
-	padding: 0;
-}

From 12f4fc71f30630c5142ef5ca3d3256fbb49bc566 Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Tue, 23 Apr 2024 20:17:44 +0900
Subject: [PATCH 21/24] Restor default component classname

---
 .../src/components/text-alignment-control/index.js     | 10 +++++++++-
 .../src/components/text-decoration-control/index.js    | 10 +++++++++-
 .../src/components/text-transform-control/index.js     | 10 +++++++++-
 .../src/components/writing-mode-control/index.js       | 10 +++++++++-
 4 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/text-alignment-control/index.js b/packages/block-editor/src/components/text-alignment-control/index.js
index 71947bd36611b..ad92101e352da 100644
--- a/packages/block-editor/src/components/text-alignment-control/index.js
+++ b/packages/block-editor/src/components/text-alignment-control/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -73,7 +78,10 @@ export default function TextAlignmentControl( {
 		<SegmentedTextControl
 			label={ __( 'Text alignment' ) }
 			controls={ validControls }
-			className={ className }
+			className={ classnames(
+				'block-editor-text-alignment-control',
+				className
+			) }
 			value={ value }
 			onChange={ ( newValue ) => {
 				onChange( newValue === value ? undefined : newValue );
diff --git a/packages/block-editor/src/components/text-decoration-control/index.js b/packages/block-editor/src/components/text-decoration-control/index.js
index 9064352b43185..09ae27685f0ed 100644
--- a/packages/block-editor/src/components/text-decoration-control/index.js
+++ b/packages/block-editor/src/components/text-decoration-control/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -46,7 +51,10 @@ export default function TextDecorationControl( {
 		<SegmentedTextControl
 			label={ __( 'Decoration' ) }
 			controls={ TEXT_DECORATIONS }
-			className={ className }
+			className={ classnames(
+				'block-editor-text-decoration-control',
+				className
+			) }
 			value={ value }
 			onChange={ ( newValue ) => {
 				onChange( newValue === value ? undefined : newValue );
diff --git a/packages/block-editor/src/components/text-transform-control/index.js b/packages/block-editor/src/components/text-transform-control/index.js
index 40aaab804280d..73a1460bbdef0 100644
--- a/packages/block-editor/src/components/text-transform-control/index.js
+++ b/packages/block-editor/src/components/text-transform-control/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -52,7 +57,10 @@ export default function TextTransformControl( { className, value, onChange } ) {
 		<SegmentedTextControl
 			label={ __( 'Letter case' ) }
 			controls={ TEXT_TRANSFORMS }
-			className={ className }
+			className={ classnames(
+				'block-editor-text-transform-control',
+				className
+			) }
 			value={ value }
 			onChange={ ( newValue ) => {
 				onChange( newValue === value ? undefined : newValue );
diff --git a/packages/block-editor/src/components/writing-mode-control/index.js b/packages/block-editor/src/components/writing-mode-control/index.js
index a7a25fa892698..952cdfcc8f0ef 100644
--- a/packages/block-editor/src/components/writing-mode-control/index.js
+++ b/packages/block-editor/src/components/writing-mode-control/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -37,7 +42,10 @@ export default function WritingModeControl( { className, value, onChange } ) {
 		<SegmentedTextControl
 			label={ __( 'Orientation' ) }
 			controls={ WRITING_MODES }
-			className={ className }
+			className={ classnames(
+				'block-editor-writing-mode-control',
+				className
+			) }
 			value={ value }
 			onChange={ ( newValue ) => {
 				onChange( newValue === value ? undefined : newValue );

From 00f4ef8ee36de06b69a735642212cf1eb6192a65 Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Fri, 26 Apr 2024 15:01:00 +0900
Subject: [PATCH 22/24] Rename `control(s)` to `option(s)`

---
 .../segmented-text-control/index.js           | 24 +++++++++----------
 .../text-alignment-control/index.js           | 20 ++++++++--------
 .../text-decoration-control/index.js          |  2 +-
 .../text-transform-control/index.js           |  2 +-
 .../components/writing-mode-control/index.js  |  2 +-
 5 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/block-editor/src/components/segmented-text-control/index.js b/packages/block-editor/src/components/segmented-text-control/index.js
index fbbbc6aa24984..a6117bcc22151 100644
--- a/packages/block-editor/src/components/segmented-text-control/index.js
+++ b/packages/block-editor/src/components/segmented-text-control/index.js
@@ -10,19 +10,19 @@ import { BaseControl, Button } from '@wordpress/components';
 
 /**
  * @typedef {Object} Option
- * @property {string} label The label of the control.
- * @property {string} value The value of the control.
- * @property {string} icon  The icon of the control.
+ * @property {string} label The label of the option.
+ * @property {string} value The value of the option.
+ * @property {string} icon  The icon of the option.
  */
 
 /**
  * Control to facilitate selecting a text style from a set of options.
  *
  * @param {Object}   props           Component props.
- * @param {string}   props.label     A label for the control.
+ * @param {string}   props.label     A label for the option.
  * @param {string}   props.value     Currently selected value.
  * @param {Function} props.onChange  Callback to handle onChange.
- * @param {Option[]} props.controls  Array of controls to display.
+ * @param {Option[]} props.options   Array of options to display.
  * @param {string}   props.className Additional class name to apply.
  *
  * @return {Element} Element to render.
@@ -30,7 +30,7 @@ import { BaseControl, Button } from '@wordpress/components';
 export default function SegmentedTextControl( {
 	label,
 	value,
-	controls,
+	options,
 	onChange,
 	className,
 } ) {
@@ -45,15 +45,15 @@ export default function SegmentedTextControl( {
 				{ label }
 			</BaseControl.VisualLabel>
 			<div className="block-editor-segmented-text-control__buttons">
-				{ controls.map( ( control ) => {
+				{ options.map( ( option ) => {
 					return (
 						<Button
 							size="compact"
-							key={ control.value }
-							icon={ control.icon }
-							label={ control.label }
-							isPressed={ control.value === value }
-							onClick={ () => onChange( control.value ) }
+							key={ option.value }
+							icon={ option.icon }
+							label={ option.label }
+							isPressed={ option.value === value }
+							onClick={ () => onChange( option.value ) }
 						/>
 					);
 				} ) }
diff --git a/packages/block-editor/src/components/text-alignment-control/index.js b/packages/block-editor/src/components/text-alignment-control/index.js
index ad92101e352da..a8e9ee22df7fd 100644
--- a/packages/block-editor/src/components/text-alignment-control/index.js
+++ b/packages/block-editor/src/components/text-alignment-control/index.js
@@ -20,7 +20,7 @@ import { useMemo } from '@wordpress/element';
  */
 import SegmentedTextControl from '../segmented-text-control';
 
-const TEXT_ALIGNMENT_CONTROLS = [
+const TEXT_ALIGNMENT_OPTIONS = [
 	{
 		label: __( 'Align text left' ),
 		value: 'left',
@@ -43,7 +43,7 @@ const TEXT_ALIGNMENT_CONTROLS = [
 	},
 ];
 
-const DEFAULT_CONTROLS = [ 'left', 'center', 'right' ];
+const DEFAULT_OPTIONS = [ 'left', 'center', 'right' ];
 
 /**
  * Control to facilitate text alignment selections.
@@ -52,7 +52,7 @@ const DEFAULT_CONTROLS = [ 'left', 'center', 'right' ];
  * @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 alignment controls to display.
+ * @param {string[]} props.options   Array of text alignment options to display.
  *
  * @return {Element} Text alignment control.
  */
@@ -60,24 +60,24 @@ export default function TextAlignmentControl( {
 	className,
 	value,
 	onChange,
-	controls = DEFAULT_CONTROLS,
+	options = DEFAULT_OPTIONS,
 } ) {
-	const validControls = useMemo(
+	const validOptions = useMemo(
 		() =>
-			TEXT_ALIGNMENT_CONTROLS.filter( ( control ) =>
-				controls.includes( control.value )
+			TEXT_ALIGNMENT_OPTIONS.filter( ( option ) =>
+				options.includes( option.value )
 			),
-		[ controls ]
+		[ options ]
 	);
 
-	if ( ! validControls.length ) {
+	if ( ! validOptions.length ) {
 		return null;
 	}
 
 	return (
 		<SegmentedTextControl
 			label={ __( 'Text alignment' ) }
-			controls={ validControls }
+			options={ validOptions }
 			className={ classnames(
 				'block-editor-text-alignment-control',
 				className
diff --git a/packages/block-editor/src/components/text-decoration-control/index.js b/packages/block-editor/src/components/text-decoration-control/index.js
index 09ae27685f0ed..6a2085e980bd4 100644
--- a/packages/block-editor/src/components/text-decoration-control/index.js
+++ b/packages/block-editor/src/components/text-decoration-control/index.js
@@ -50,7 +50,7 @@ export default function TextDecorationControl( {
 	return (
 		<SegmentedTextControl
 			label={ __( 'Decoration' ) }
-			controls={ TEXT_DECORATIONS }
+			options={ TEXT_DECORATIONS }
 			className={ classnames(
 				'block-editor-text-decoration-control',
 				className
diff --git a/packages/block-editor/src/components/text-transform-control/index.js b/packages/block-editor/src/components/text-transform-control/index.js
index 73a1460bbdef0..8fd1fb9cfdf51 100644
--- a/packages/block-editor/src/components/text-transform-control/index.js
+++ b/packages/block-editor/src/components/text-transform-control/index.js
@@ -56,7 +56,7 @@ export default function TextTransformControl( { className, value, onChange } ) {
 	return (
 		<SegmentedTextControl
 			label={ __( 'Letter case' ) }
-			controls={ TEXT_TRANSFORMS }
+			options={ TEXT_TRANSFORMS }
 			className={ classnames(
 				'block-editor-text-transform-control',
 				className
diff --git a/packages/block-editor/src/components/writing-mode-control/index.js b/packages/block-editor/src/components/writing-mode-control/index.js
index 952cdfcc8f0ef..420c3d75ba31a 100644
--- a/packages/block-editor/src/components/writing-mode-control/index.js
+++ b/packages/block-editor/src/components/writing-mode-control/index.js
@@ -41,7 +41,7 @@ export default function WritingModeControl( { className, value, onChange } ) {
 	return (
 		<SegmentedTextControl
 			label={ __( 'Orientation' ) }
-			controls={ WRITING_MODES }
+			options={ WRITING_MODES }
 			className={ classnames(
 				'block-editor-writing-mode-control',
 				className

From 6b5442ca28c57be3d966bd9b66dbcfab9e47bc8c Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Fri, 26 Apr 2024 15:01:41 +0900
Subject: [PATCH 23/24] TextAlignmentControl: Remove README

---
 .../text-alignment-control/README.md          | 55 -------------------
 1 file changed, 55 deletions(-)
 delete mode 100644 packages/block-editor/src/components/text-alignment-control/README.md

diff --git a/packages/block-editor/src/components/text-alignment-control/README.md b/packages/block-editor/src/components/text-alignment-control/README.md
deleted file mode 100644
index c8a928007c3ca..0000000000000
--- a/packages/block-editor/src/components/text-alignment-control/README.md
+++ /dev/null
@@ -1,55 +0,0 @@
-# TextAlignmentControl
-
-The `TextAlignmentControl` component is responsible for rendering a control that allows users to select and apply text alignment options to blocks or elements in the Gutenberg editor.
-
-## Development guidelines
-
-### Usage
-
-Render the Text Alignment Component with its default `left`, `center`, and `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.
-
--   Type: `String`
--   Required: No
--   Options: `left`, `center`, `right`, `justify`
-
-#### 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

From 8e5cd0f3b5e7cc16210b474365c0287d0f777667 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Fri, 26 Apr 2024 16:29:20 +0900
Subject: [PATCH 24/24] TextAlignmentControl: Fix control name

Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
---
 .../components/text-alignment-control/stories/index.story.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/text-alignment-control/stories/index.story.js b/packages/block-editor/src/components/text-alignment-control/stories/index.story.js
index 7163b7eaa8a52..b2c171497acb0 100644
--- a/packages/block-editor/src/components/text-alignment-control/stories/index.story.js
+++ b/packages/block-editor/src/components/text-alignment-control/stories/index.story.js
@@ -14,7 +14,7 @@ export default {
 	argTypes: {
 		onChange: { action: 'onChange' },
 		className: { control: 'text' },
-		controls: {
+		options: {
 			control: 'check',
 			options: [ 'left', 'center', 'right', 'justify' ],
 		},