From 28cebc76589b7091c282abbbb4c2c18d68482060 Mon Sep 17 00:00:00 2001
From: dhananjaykuber <dnkuber2002@gmail.com>
Date: Thu, 18 Jul 2024 15:16:00 +0530
Subject: [PATCH 01/16] add label and description props and update default
 label of block alignment control

---
 .../src/components/block-alignment-control/ui.js           | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-alignment-control/ui.js b/packages/block-editor/src/components/block-alignment-control/ui.js
index 87c5c7b0275a22..22587e5fde22c4 100644
--- a/packages/block-editor/src/components/block-alignment-control/ui.js
+++ b/packages/block-editor/src/components/block-alignment-control/ui.js
@@ -26,6 +26,8 @@ function BlockAlignmentUI( {
 	controls,
 	isToolbar,
 	isCollapsed = true,
+	label = __( 'Align block' ),
+	description = __( 'Change block alignment' ),
 } ) {
 	const enabledControls = useAvailableAlignments( controls );
 	const hasEnabledControls = !! enabledControls.length;
@@ -47,7 +49,8 @@ function BlockAlignmentUI( {
 		icon: activeAlignmentControl
 			? activeAlignmentControl.icon
 			: defaultAlignmentControl.icon,
-		label: __( 'Align' ),
+		label,
+		describedBy: description,
 	};
 	const extraProps = isToolbar
 		? {
@@ -64,7 +67,7 @@ function BlockAlignmentUI( {
 				} ),
 		  }
 		: {
-				toggleProps: { description: __( 'Change alignment' ) },
+				toggleProps: { describedBy: description },
 				children: ( { onClose } ) => {
 					return (
 						<>

From 17092f65e01ce90295287f667d42d7da7ff97f7e Mon Sep 17 00:00:00 2001
From: dhananjaykuber <dnkuber2002@gmail.com>
Date: Thu, 18 Jul 2024 15:16:53 +0530
Subject: [PATCH 02/16] add label and description props to block vertical
 alignment control

---
 .../block-vertical-alignment-control/ui.js        | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/ui.js b/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
index 26340aa9179d82..e2a934c5afba7e 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
+++ b/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
@@ -43,6 +43,11 @@ function BlockVerticalAlignmentUI( {
 	controls = DEFAULT_CONTROLS,
 	isCollapsed = true,
 	isToolbar,
+	label = _x( 'Align vertically', 'Block vertical alignment setting label' ),
+	description = _x(
+		'Change vertical alignment',
+		'Block vertical alignment setting description'
+	),
 } ) {
 	function applyOrUnset( align ) {
 		return () => onChange( value === align ? undefined : align );
@@ -53,7 +58,9 @@ function BlockVerticalAlignmentUI( {
 		BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
 
 	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
-	const extraProps = isToolbar ? { isCollapsed } : {};
+	const extraProps = isToolbar
+		? { isCollapsed }
+		: { toggleProps: { describedBy: description } };
 
 	return (
 		<UIComponent
@@ -62,10 +69,8 @@ function BlockVerticalAlignmentUI( {
 					? activeAlignment.icon
 					: defaultAlignmentControl.icon
 			}
-			label={ _x(
-				'Change vertical alignment',
-				'Block vertical alignment setting label'
-			) }
+			label={ label }
+			describedBy={ description }
 			controls={ controls.map( ( control ) => {
 				return {
 					...BLOCK_ALIGNMENTS_CONTROLS[ control ],

From 1012f8e56788fdcf08a2f4cf5acc31158e7258a0 Mon Sep 17 00:00:00 2001
From: dhananjaykuber <dnkuber2002@gmail.com>
Date: Thu, 18 Jul 2024 15:18:15 +0530
Subject: [PATCH 03/16] update aria-description of media, paragraph and table
 block

---
 packages/block-library/src/media-text/edit.js | 3 +++
 packages/block-library/src/paragraph/edit.js  | 3 +++
 packages/block-library/src/table/edit.js      | 3 +++
 3 files changed, 9 insertions(+)

diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index c208200b084db0..edaa0b5e9459a0 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -478,6 +478,9 @@ function MediaTextEdit( {
 						<BlockVerticalAlignmentControl
 							onChange={ onVerticalAlignmentChange }
 							value={ verticalAlignment }
+							description={ __(
+								'Adjust the vertical alignment of content within the block'
+							) }
 						/>
 						<ToolbarButton
 							icon={ pullLeft }
diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
index 0a8c58fa49b217..9f76851f6561f2 100644
--- a/packages/block-library/src/paragraph/edit.js
+++ b/packages/block-library/src/paragraph/edit.js
@@ -133,6 +133,9 @@ function ParagraphBlock( {
 									: dropCap,
 							} )
 						}
+						description={ __(
+							'Adjust the alignment of text within the paragraph'
+						) }
 					/>
 					<ParagraphRTLControl
 						direction={ direction }
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index d9dd4c05143db9..abe7416bd2e34b 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -462,6 +462,9 @@ function TableEdit( {
 					<BlockControls group="block">
 						<AlignmentControl
 							label={ __( 'Change column alignment' ) }
+							description={ __(
+								'Adjust the alignment of content within table columns'
+							) }
 							alignmentControls={ ALIGNMENT_CONTROLS }
 							value={ getCellAlignment() }
 							onChange={ ( nextAlign ) =>

From ce55573545c9643fa5332772e79246022922bd30 Mon Sep 17 00:00:00 2001
From: dhananjaykuber <dnkuber2002@gmail.com>
Date: Thu, 18 Jul 2024 17:47:26 +0530
Subject: [PATCH 04/16] pass described by prop correctly

---
 .../components/block-alignment-control/ui.js  |  3 +-
 .../block-vertical-alignment-control/ui.js    | 43 ++++++++++---------
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/block-editor/src/components/block-alignment-control/ui.js b/packages/block-editor/src/components/block-alignment-control/ui.js
index 22587e5fde22c4..0e977c4e12c2fe 100644
--- a/packages/block-editor/src/components/block-alignment-control/ui.js
+++ b/packages/block-editor/src/components/block-alignment-control/ui.js
@@ -50,7 +50,6 @@ function BlockAlignmentUI( {
 			? activeAlignmentControl.icon
 			: defaultAlignmentControl.icon,
 		label,
-		describedBy: description,
 	};
 	const extraProps = isToolbar
 		? {
@@ -67,7 +66,7 @@ function BlockAlignmentUI( {
 				} ),
 		  }
 		: {
-				toggleProps: { describedBy: description },
+				toggleProps: { 'aria-description': description },
 				children: ( { onClose } ) => {
 					return (
 						<>
diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/ui.js b/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
index e2a934c5afba7e..45f75ad83afbb2 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
+++ b/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
@@ -60,28 +60,29 @@ function BlockVerticalAlignmentUI( {
 	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
 	const extraProps = isToolbar
 		? { isCollapsed }
-		: { toggleProps: { describedBy: description } };
+		: {
+				popoverProps: { focusOnMount: 'firstElement' },
+				toggleProps: {
+					describedBy: description,
+				},
+		  };
 
-	return (
-		<UIComponent
-			icon={
-				activeAlignment
-					? activeAlignment.icon
-					: defaultAlignmentControl.icon
-			}
-			label={ label }
-			describedBy={ description }
-			controls={ controls.map( ( control ) => {
-				return {
-					...BLOCK_ALIGNMENTS_CONTROLS[ control ],
-					isActive: value === control,
-					role: isCollapsed ? 'menuitemradio' : undefined,
-					onClick: applyOrUnset( control ),
-				};
-			} ) }
-			{ ...extraProps }
-		/>
-	);
+	const commonProps = {
+		icon: activeAlignment
+			? activeAlignment.icon
+			: defaultAlignmentControl.icon,
+		label,
+		controls: controls.map( ( control ) => {
+			return {
+				...BLOCK_ALIGNMENTS_CONTROLS[ control ],
+				isActive: value === control,
+				role: isCollapsed ? 'menuitemradio' : undefined,
+				onClick: applyOrUnset( control ),
+			};
+		} ),
+	};
+
+	return <UIComponent { ...commonProps } { ...extraProps } />;
 }
 
 /**

From f6ad46c2a7a2ed3f2f07d8c732324da960f1637a Mon Sep 17 00:00:00 2001
From: dhananjaykuber <dnkuber2002@gmail.com>
Date: Thu, 18 Jul 2024 17:47:39 +0530
Subject: [PATCH 05/16] update test cases

---
 .../test/__snapshots__/index.js.snap          |  4 ++--
 .../block-alignment-control/test/index.js     |  2 +-
 .../test/__snapshots__/index.js.snap          |  4 ++--
 .../test/index.js                             | 20 +++++++++++++++++--
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.js.snap
index 9e7e59c0c31447..9365e185b68157 100644
--- a/packages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.js.snap
@@ -9,7 +9,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are hidden 1`] = `
     <button
       aria-expanded="false"
       aria-haspopup="true"
-      aria-label="Align"
+      aria-label="Align block"
       class="components-button components-dropdown-menu__toggle has-icon"
       data-toolbar-item="true"
       type="button"
@@ -36,7 +36,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
   <div
     class="components-toolbar"
     icon="[object Object]"
-    label="Align"
+    label="Align block"
   >
     <div>
       <button
diff --git a/packages/block-editor/src/components/block-alignment-control/test/index.js b/packages/block-editor/src/components/block-alignment-control/test/index.js
index c8cd686e06954b..0cb4465b93221d 100644
--- a/packages/block-editor/src/components/block-alignment-control/test/index.js
+++ b/packages/block-editor/src/components/block-alignment-control/test/index.js
@@ -61,7 +61,7 @@ describe( 'BlockAlignmentUI', () => {
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Align',
+				name: 'Align block',
 			} )
 		);
 
diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap
index e8ad6cddbba56e..335cc8761c13a0 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap
@@ -9,7 +9,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are hidden
     <button
       aria-expanded="false"
       aria-haspopup="true"
-      aria-label="Change vertical alignment"
+      aria-label="Align vertically"
       class="components-button components-dropdown-menu__toggle has-icon"
       data-toolbar-item="true"
       type="button"
@@ -36,7 +36,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
   <div
     class="components-toolbar"
     icon="[object Object]"
-    label="Change vertical alignment"
+    label="Align vertically"
   >
     <div>
       <button
diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/test/index.js b/packages/block-editor/src/components/block-vertical-alignment-control/test/index.js
index 74c21cd100e7e2..93c417649db88e 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-control/test/index.js
+++ b/packages/block-editor/src/components/block-vertical-alignment-control/test/index.js
@@ -40,6 +40,22 @@ describe( 'BlockVerticalAlignmentUI', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
+	test( 'should use custom label and description', () => {
+		render(
+			<BlockVerticalAlignmentUI
+				value={ alignment }
+				onChange={ onChange }
+				label="Custom Label"
+				description="Custom Description"
+			/>
+		);
+
+		const button = screen.getByRole( 'button', { name: 'Custom Label' } );
+		expect( button ).toHaveAttribute( 'aria-label', 'Custom Label' );
+		// The description is now part of the toggleProps and not directly accessible
+		// We can't easily test for the describedBy attribute here
+	} );
+
 	test( 'should expand controls when toggled', async () => {
 		const user = userEvent.setup();
 
@@ -59,7 +75,7 @@ describe( 'BlockVerticalAlignmentUI', () => {
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Change vertical alignment',
+				name: 'Align vertically',
 			} )
 		);
 
@@ -86,7 +102,7 @@ describe( 'BlockVerticalAlignmentUI', () => {
 		);
 
 		const activeControl = screen.getByRole( 'button', {
-			name: `Align ${ alignment }`,
+			name: `Align top`,
 			pressed: true,
 		} );
 

From e348b271683eee2a3c37e2399428e817c48947c0 Mon Sep 17 00:00:00 2001
From: dhananjaykuber <dnkuber2002@gmail.com>
Date: Thu, 18 Jul 2024 18:15:14 +0530
Subject: [PATCH 06/16] update unit test for mobile

---
 .../block-library/src/columns/test/edit.native.js   | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/block-library/src/columns/test/edit.native.js b/packages/block-library/src/columns/test/edit.native.js
index 20430704c8e1e2..c71a3a17fe0420 100644
--- a/packages/block-library/src/columns/test/edit.native.js
+++ b/packages/block-library/src/columns/test/edit.native.js
@@ -259,9 +259,7 @@ describe( 'Columns block', () => {
 		fireEvent.press( columnsBlock );
 
 		// Open vertical alignment menu
-		const verticalAlignmentButton = getByLabelText(
-			/Change vertical alignment/
-		);
+		const verticalAlignmentButton = getByLabelText( /Align vertically/ );
 		fireEvent.press( verticalAlignmentButton );
 
 		// Get Align top button
@@ -281,9 +279,8 @@ describe( 'Columns block', () => {
 		fireEvent.press( columnsBlock );
 
 		// Open vertical alignment menu
-		const verticalAlignmentButton = screen.getByLabelText(
-			/Change vertical alignment/
-		);
+		const verticalAlignmentButton =
+			screen.getByLabelText( /Align vertically/ );
 		fireEvent.press( verticalAlignmentButton );
 
 		// Get Align top button
@@ -320,9 +317,7 @@ describe( 'Columns block', () => {
 		fireEvent.press( columnsBlock );
 
 		// Open vertical alignment menu
-		const verticalAlignmentButton = getByLabelText(
-			/Change vertical alignment/
-		);
+		const verticalAlignmentButton = getByLabelText( /Align vertically/ );
 		fireEvent.press( verticalAlignmentButton );
 
 		// Get Align top button

From 61398876db4e421419408eec586669065b1fa713 Mon Sep 17 00:00:00 2001
From: Dhananjay Kuber <dhananjay.kuber@rtcamp.com>
Date: Mon, 6 Jan 2025 18:46:07 +0530
Subject: [PATCH 07/16] fix: Update alignment control labels and remove default
 description for clear labels

---
 .../src/components/alignment-control/ui.js       |  8 +++-----
 .../src/components/block-alignment-control/ui.js |  6 ++++--
 .../test/__snapshots__/index.js.snap             |  4 ++--
 .../test/index.js                                |  2 +-
 .../block-vertical-alignment-control/ui.js       | 16 +++++++++-------
 packages/block-library/src/media-text/edit.js    |  4 +---
 packages/block-library/src/paragraph/edit.js     |  4 +---
 packages/block-library/src/table/edit.js         |  5 +----
 8 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/packages/block-editor/src/components/alignment-control/ui.js b/packages/block-editor/src/components/alignment-control/ui.js
index 6b423a79aa9e06..b2bdf0b14928e0 100644
--- a/packages/block-editor/src/components/alignment-control/ui.js
+++ b/packages/block-editor/src/components/alignment-control/ui.js
@@ -31,8 +31,8 @@ function AlignmentUI( {
 	value,
 	onChange,
 	alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
-	label = __( 'Align text' ),
-	description = __( 'Change text alignment' ),
+	label = __( 'Align block' ),
+	description,
 	isCollapsed = true,
 	isToolbar,
 } ) {
@@ -55,9 +55,7 @@ function AlignmentUI( {
 	const extraProps = isToolbar
 		? { isCollapsed }
 		: {
-				toggleProps: {
-					description,
-				},
+				toggleProps: description ? { description } : {},
 				popoverProps: POPOVER_PROPS,
 		  };
 
diff --git a/packages/block-editor/src/components/block-alignment-control/ui.js b/packages/block-editor/src/components/block-alignment-control/ui.js
index 0e977c4e12c2fe..b5cdb64ad1ef05 100644
--- a/packages/block-editor/src/components/block-alignment-control/ui.js
+++ b/packages/block-editor/src/components/block-alignment-control/ui.js
@@ -27,7 +27,7 @@ function BlockAlignmentUI( {
 	isToolbar,
 	isCollapsed = true,
 	label = __( 'Align block' ),
-	description = __( 'Change block alignment' ),
+	description,
 } ) {
 	const enabledControls = useAvailableAlignments( controls );
 	const hasEnabledControls = !! enabledControls.length;
@@ -66,7 +66,9 @@ function BlockAlignmentUI( {
 				} ),
 		  }
 		: {
-				toggleProps: { 'aria-description': description },
+				toggleProps: description
+					? { 'aria-description': description }
+					: {},
 				children: ( { onClose } ) => {
 					return (
 						<>
diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap
index 335cc8761c13a0..67701b424be2ce 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap
@@ -9,7 +9,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are hidden
     <button
       aria-expanded="false"
       aria-haspopup="true"
-      aria-label="Align vertically"
+      aria-label="Align content vertically"
       class="components-button components-dropdown-menu__toggle has-icon"
       data-toolbar-item="true"
       type="button"
@@ -36,7 +36,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
   <div
     class="components-toolbar"
     icon="[object Object]"
-    label="Align vertically"
+    label="Align content vertically"
   >
     <div>
       <button
diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/test/index.js b/packages/block-editor/src/components/block-vertical-alignment-control/test/index.js
index 93c417649db88e..cf89bc89629cf6 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-control/test/index.js
+++ b/packages/block-editor/src/components/block-vertical-alignment-control/test/index.js
@@ -75,7 +75,7 @@ describe( 'BlockVerticalAlignmentUI', () => {
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Align vertically',
+				name: 'Align content vertically',
 			} )
 		);
 
diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/ui.js b/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
index 45f75ad83afbb2..242ba91a1d3510 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
+++ b/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
@@ -43,11 +43,11 @@ function BlockVerticalAlignmentUI( {
 	controls = DEFAULT_CONTROLS,
 	isCollapsed = true,
 	isToolbar,
-	label = _x( 'Align vertically', 'Block vertical alignment setting label' ),
-	description = _x(
-		'Change vertical alignment',
-		'Block vertical alignment setting description'
+	label = _x(
+		'Align content vertically',
+		'Block vertical alignment setting label'
 	),
+	description,
 } ) {
 	function applyOrUnset( align ) {
 		return () => onChange( value === align ? undefined : align );
@@ -62,9 +62,11 @@ function BlockVerticalAlignmentUI( {
 		? { isCollapsed }
 		: {
 				popoverProps: { focusOnMount: 'firstElement' },
-				toggleProps: {
-					describedBy: description,
-				},
+				toggleProps: description
+					? {
+							describedBy: description,
+					  }
+					: {},
 		  };
 
 	const commonProps = {
diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index edaa0b5e9459a0..a0fc070e3e4d19 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -478,9 +478,7 @@ function MediaTextEdit( {
 						<BlockVerticalAlignmentControl
 							onChange={ onVerticalAlignmentChange }
 							value={ verticalAlignment }
-							description={ __(
-								'Adjust the vertical alignment of content within the block'
-							) }
+							label={ __( 'Align media and text vertically' ) }
 						/>
 						<ToolbarButton
 							icon={ pullLeft }
diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
index 9f76851f6561f2..6c5b7cc7565d83 100644
--- a/packages/block-library/src/paragraph/edit.js
+++ b/packages/block-library/src/paragraph/edit.js
@@ -133,9 +133,7 @@ function ParagraphBlock( {
 									: dropCap,
 							} )
 						}
-						description={ __(
-							'Adjust the alignment of text within the paragraph'
-						) }
+						label={ __( 'Align text' ) }
 					/>
 					<ParagraphRTLControl
 						direction={ direction }
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index abe7416bd2e34b..960d6d0d135b74 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -461,10 +461,7 @@ function TableEdit( {
 				<>
 					<BlockControls group="block">
 						<AlignmentControl
-							label={ __( 'Change column alignment' ) }
-							description={ __(
-								'Adjust the alignment of content within table columns'
-							) }
+							label={ __( 'Align columns content' ) }
 							alignmentControls={ ALIGNMENT_CONTROLS }
 							value={ getCellAlignment() }
 							onChange={ ( nextAlign ) =>

From 3f9a5666768295f053486a5d79b89bbf1282032b Mon Sep 17 00:00:00 2001
From: Aki Hamano <tetsuaki.hamano@gmail.com>
Date: Sun, 31 May 2026 20:58:14 +0900
Subject: [PATCH 08/16] Block Vertical Alignment: Revert commonProps refactor

Keep the label/description prop additions but restore the inline JSX
return, dropping the unrelated commonProps variable that obscured the
intended label change.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../block-vertical-alignment-control/ui.js    | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/ui.js b/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
index 242ba91a1d3510..b7a27ac38af478 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
+++ b/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
@@ -69,22 +69,25 @@ function BlockVerticalAlignmentUI( {
 					: {},
 		  };
 
-	const commonProps = {
-		icon: activeAlignment
-			? activeAlignment.icon
-			: defaultAlignmentControl.icon,
-		label,
-		controls: controls.map( ( control ) => {
-			return {
-				...BLOCK_ALIGNMENTS_CONTROLS[ control ],
-				isActive: value === control,
-				role: isCollapsed ? 'menuitemradio' : undefined,
-				onClick: applyOrUnset( control ),
-			};
-		} ),
-	};
-
-	return <UIComponent { ...commonProps } { ...extraProps } />;
+	return (
+		<UIComponent
+			icon={
+				activeAlignment
+					? activeAlignment.icon
+					: defaultAlignmentControl.icon
+			}
+			label={ label }
+			controls={ controls.map( ( control ) => {
+				return {
+					...BLOCK_ALIGNMENTS_CONTROLS[ control ],
+					isActive: value === control,
+					role: isCollapsed ? 'menuitemradio' : undefined,
+					onClick: applyOrUnset( control ),
+				};
+			} ) }
+			{ ...extraProps }
+		/>
+	);
 }
 
 /**

From c7989c87cb1618c737e295f6aa3cc47aa40461be Mon Sep 17 00:00:00 2001
From: Aki Hamano <tetsuaki.hamano@gmail.com>
Date: Sun, 31 May 2026 21:01:33 +0900
Subject: [PATCH 09/16] Alignment Control: Use 'Align text' as the default
 label

The component controls text alignment, as its icon indicates, so
'Align block' was misleading for screen reader users.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 packages/block-editor/src/components/alignment-control/ui.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/alignment-control/ui.js b/packages/block-editor/src/components/alignment-control/ui.js
index b2bdf0b14928e0..d16ac238ddeddf 100644
--- a/packages/block-editor/src/components/alignment-control/ui.js
+++ b/packages/block-editor/src/components/alignment-control/ui.js
@@ -31,7 +31,7 @@ function AlignmentUI( {
 	value,
 	onChange,
 	alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
-	label = __( 'Align block' ),
+	label = __( 'Align text' ),
 	description,
 	isCollapsed = true,
 	isToolbar,

From a7b3a94d87d3eea65bb0978f7856b16f45cde87e Mon Sep 17 00:00:00 2001
From: Aki Hamano <tetsuaki.hamano@gmail.com>
Date: Sun, 31 May 2026 21:03:16 +0900
Subject: [PATCH 10/16] Block Alignment Control: Use Button's 'description'
 prop

Button has no 'aria-description' prop, so the value was passed as a raw
DOM attribute instead of feeding the accessible description. Use the
supported 'description' prop, matching the alignment-control component.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../block-editor/src/components/block-alignment-control/ui.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-alignment-control/ui.js b/packages/block-editor/src/components/block-alignment-control/ui.js
index b5cdb64ad1ef05..4319659efde845 100644
--- a/packages/block-editor/src/components/block-alignment-control/ui.js
+++ b/packages/block-editor/src/components/block-alignment-control/ui.js
@@ -66,9 +66,7 @@ function BlockAlignmentUI( {
 				} ),
 		  }
 		: {
-				toggleProps: description
-					? { 'aria-description': description }
-					: {},
+				toggleProps: description ? { description } : {},
 				children: ( { onClose } ) => {
 					return (
 						<>

From e087b707deb94b2296674b4ce5ab875996edbc4f Mon Sep 17 00:00:00 2001
From: Aki Hamano <tetsuaki.hamano@gmail.com>
Date: Sun, 31 May 2026 21:04:33 +0900
Subject: [PATCH 11/16] Block Vertical Alignment: Drop redundant translation
 context

The 'Align content vertically' label is unambiguous on its own, so use
__() instead of _x() with a redundant context.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/components/block-vertical-alignment-control/ui.js  | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/ui.js b/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
index b7a27ac38af478..0966a6e19f46bc 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
+++ b/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { _x } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { ToolbarGroup, ToolbarDropdownMenu } from '@wordpress/components';
 import {
 	justifyTop,
@@ -43,10 +43,7 @@ function BlockVerticalAlignmentUI( {
 	controls = DEFAULT_CONTROLS,
 	isCollapsed = true,
 	isToolbar,
-	label = _x(
-		'Align content vertically',
-		'Block vertical alignment setting label'
-	),
+	label = __( 'Align content vertically' ),
 	description,
 } ) {
 	function applyOrUnset( align ) {

From 6cadd7e0488666ea7f12c0762f8577c7b9db0648 Mon Sep 17 00:00:00 2001
From: Aki Hamano <tetsuaki.hamano@gmail.com>
Date: Sun, 31 May 2026 21:07:09 +0900
Subject: [PATCH 12/16] Block Vertical Alignment: Drop unused description prop
 support

No consumer passes a description to this component yet, so revert the
newly added prop and its toggleProps wiring. It can be reintroduced in a
follow-up if a real use case appears.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../block-vertical-alignment-control/ui.js           | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/ui.js b/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
index 0966a6e19f46bc..78a767aa825ade 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
+++ b/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
@@ -44,7 +44,6 @@ function BlockVerticalAlignmentUI( {
 	isCollapsed = true,
 	isToolbar,
 	label = __( 'Align content vertically' ),
-	description,
 } ) {
 	function applyOrUnset( align ) {
 		return () => onChange( value === align ? undefined : align );
@@ -55,16 +54,7 @@ function BlockVerticalAlignmentUI( {
 		BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
 
 	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
-	const extraProps = isToolbar
-		? { isCollapsed }
-		: {
-				popoverProps: { focusOnMount: 'firstElement' },
-				toggleProps: description
-					? {
-							describedBy: description,
-					  }
-					: {},
-		  };
+	const extraProps = isToolbar ? { isCollapsed } : {};
 
 	return (
 		<UIComponent

From c1ff9ec43c51b4973ada50b2ea9d88c35f90b79a Mon Sep 17 00:00:00 2001
From: Aki Hamano <tetsuaki.hamano@gmail.com>
Date: Sun, 31 May 2026 22:03:09 +0900
Subject: [PATCH 13/16] Tests: Update alignment control labels in E2E and
 native tests

The alignment control labels changed in this branch, so the tests that
located toolbar buttons by their old accessible names timed out. Update
them to the new labels: block alignment 'Align' -> 'Align block', table
column alignment 'Change column alignment' -> 'Align columns content',
and vertical alignment 'Align vertically' -> 'Align content vertically'.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/columns/test/edit.native.js           |  6 +--
 test/e2e/specs/editor/blocks/table.spec.js    |  6 +--
 .../specs/editor/plugins/align-hook.spec.js   | 54 +++++++++----------
 .../editor/various/block-grouping.spec.js     |  8 +--
 .../various/keyboard-navigable-blocks.spec.js |  2 +-
 .../specs/editor/various/writing-flow.spec.js |  2 +-
 6 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/packages/block-library/src/columns/test/edit.native.js b/packages/block-library/src/columns/test/edit.native.js
index c71a3a17fe0420..dc242a58ee3301 100644
--- a/packages/block-library/src/columns/test/edit.native.js
+++ b/packages/block-library/src/columns/test/edit.native.js
@@ -259,7 +259,7 @@ describe( 'Columns block', () => {
 		fireEvent.press( columnsBlock );
 
 		// Open vertical alignment menu
-		const verticalAlignmentButton = getByLabelText( /Align vertically/ );
+		const verticalAlignmentButton = getByLabelText( /Align content vertically/ );
 		fireEvent.press( verticalAlignmentButton );
 
 		// Get Align top button
@@ -280,7 +280,7 @@ describe( 'Columns block', () => {
 
 		// Open vertical alignment menu
 		const verticalAlignmentButton =
-			screen.getByLabelText( /Align vertically/ );
+			screen.getByLabelText( /Align content vertically/ );
 		fireEvent.press( verticalAlignmentButton );
 
 		// Get Align top button
@@ -317,7 +317,7 @@ describe( 'Columns block', () => {
 		fireEvent.press( columnsBlock );
 
 		// Open vertical alignment menu
-		const verticalAlignmentButton = getByLabelText( /Align vertically/ );
+		const verticalAlignmentButton = getByLabelText( /Align content vertically/ );
 		fireEvent.press( verticalAlignmentButton );
 
 		// Get Align top button
diff --git a/test/e2e/specs/editor/blocks/table.spec.js b/test/e2e/specs/editor/blocks/table.spec.js
index 92e209e88aeb17..6c75ad5c4fa76b 100644
--- a/test/e2e/specs/editor/blocks/table.spec.js
+++ b/test/e2e/specs/editor/blocks/table.spec.js
@@ -208,19 +208,19 @@ test.describe( 'Table', () => {
 		// Click to the next cell and add some text. Align left.
 		await cells.nth( 1 ).click();
 		await page.keyboard.type( 'To the left' );
-		await editor.clickBlockToolbarButton( 'Change column alignment' );
+		await editor.clickBlockToolbarButton( 'Align columns content' );
 		await page.click( 'role=menuitemradio[name="Align column left"i]' );
 
 		// Click the next cell and add some text. Align center.
 		await cells.nth( 2 ).click();
 		await page.keyboard.type( 'Centered' );
-		await editor.clickBlockToolbarButton( 'Change column alignment' );
+		await editor.clickBlockToolbarButton( 'Align columns content' );
 		await page.click( 'role=menuitemradio[name="Align column center"i]' );
 
 		// Tab to the next cell and add some text. Align right.
 		await cells.nth( 3 ).click();
 		await page.keyboard.type( 'Right aligned' );
-		await editor.clickBlockToolbarButton( 'Change column alignment' );
+		await editor.clickBlockToolbarButton( 'Align columns content' );
 		await page.click( 'role=menuitemradio[name="Align column right"i]' );
 
 		// Expect the post to have the correct alignment classes inside the table.
diff --git a/test/e2e/specs/editor/plugins/align-hook.spec.js b/test/e2e/specs/editor/plugins/align-hook.spec.js
index 6929022a2c6f87..495ae4af73c924 100644
--- a/test/e2e/specs/editor/plugins/align-hook.spec.js
+++ b/test/e2e/specs/editor/plugins/align-hook.spec.js
@@ -36,7 +36,7 @@ test.describe( 'Align Hook Works as Expected', () => {
 			await expect(
 				page
 					.getByRole( 'toolbar', { name: 'Block tools' } )
-					.getByRole( 'button', { name: 'Align', exact: true } )
+					.getByRole( 'button', { name: 'Align block', exact: true } )
 			).toBeHidden();
 		} );
 
@@ -57,11 +57,11 @@ test.describe( 'Align Hook Works as Expected', () => {
 			page,
 		} ) => {
 			await editor.insertBlock( { name: 'test/test-align-true' } );
-			await editor.clickBlockToolbarButton( 'Align' );
+			await editor.clickBlockToolbarButton( 'Align block' );
 
 			await expect(
 				page
-					.getByRole( 'menu', { name: 'Align' } )
+					.getByRole( 'menu', { name: 'Align block' } )
 					.getByRole( 'menuitemradio' )
 			).toHaveText( Object.values( alignLabels ) );
 		} );
@@ -71,11 +71,11 @@ test.describe( 'Align Hook Works as Expected', () => {
 			page,
 		} ) => {
 			await editor.insertBlock( { name: 'test/test-align-true' } );
-			await editor.clickBlockToolbarButton( 'Align' );
+			await editor.clickBlockToolbarButton( 'Align block' );
 
 			await expect(
 				page
-					.getByRole( 'menu', { name: 'Align' } )
+					.getByRole( 'menu', { name: 'Align block' } )
 					.getByRole( 'menuitemradio', { name: 'None' } )
 			).toHaveAttribute( 'aria-checked', 'true' );
 		} );
@@ -85,10 +85,10 @@ test.describe( 'Align Hook Works as Expected', () => {
 			page,
 		} ) => {
 			await editor.insertBlock( { name: 'test/test-align-true' } );
-			await editor.clickBlockToolbarButton( 'Align' );
+			await editor.clickBlockToolbarButton( 'Align block' );
 
 			const dropdown = page.getByRole( 'menu', {
-				name: 'Align',
+				name: 'Align block',
 			} );
 
 			await dropdown
@@ -96,7 +96,7 @@ test.describe( 'Align Hook Works as Expected', () => {
 				.click();
 
 			// Verify the button of the specified alignment is pressed.
-			await editor.clickBlockToolbarButton( 'Align' );
+			await editor.clickBlockToolbarButton( 'Align block' );
 			await expect(
 				dropdown.getByRole( 'menuitemradio', { name: 'Align right' } )
 			).toHaveAttribute( 'aria-checked', 'true' );
@@ -112,7 +112,7 @@ test.describe( 'Align Hook Works as Expected', () => {
 				.click();
 
 			// Verify 'none' alignment button is in pressed state.
-			await editor.clickBlockToolbarButton( 'Align' );
+			await editor.clickBlockToolbarButton( 'Align block' );
 			await expect(
 				dropdown.getByRole( 'menuitemradio', { name: 'None' } )
 			).toHaveAttribute( 'aria-checked', 'true' );
@@ -130,11 +130,11 @@ test.describe( 'Align Hook Works as Expected', () => {
 			page,
 		} ) => {
 			await editor.insertBlock( { name: 'test/test-align-array' } );
-			await editor.clickBlockToolbarButton( 'Align' );
+			await editor.clickBlockToolbarButton( 'Align block' );
 
 			await expect(
 				page
-					.getByRole( 'menu', { name: 'Align' } )
+					.getByRole( 'menu', { name: 'Align block' } )
 					.getByRole( 'menuitemradio' )
 			).toHaveText( [
 				alignLabels.none,
@@ -148,11 +148,11 @@ test.describe( 'Align Hook Works as Expected', () => {
 			page,
 		} ) => {
 			await editor.insertBlock( { name: 'test/test-align-array' } );
-			await editor.clickBlockToolbarButton( 'Align' );
+			await editor.clickBlockToolbarButton( 'Align block' );
 
 			await expect(
 				page
-					.getByRole( 'menu', { name: 'Align' } )
+					.getByRole( 'menu', { name: 'Align block' } )
 					.getByRole( 'menuitemradio', { name: 'None' } )
 			).toHaveAttribute( 'aria-checked', 'true' );
 		} );
@@ -162,10 +162,10 @@ test.describe( 'Align Hook Works as Expected', () => {
 			page,
 		} ) => {
 			await editor.insertBlock( { name: 'test/test-align-array' } );
-			await editor.clickBlockToolbarButton( 'Align' );
+			await editor.clickBlockToolbarButton( 'Align block' );
 
 			const dropdown = page.getByRole( 'menu', {
-				name: 'Align',
+				name: 'Align block',
 			} );
 
 			await dropdown
@@ -173,7 +173,7 @@ test.describe( 'Align Hook Works as Expected', () => {
 				.click();
 
 			// Verify the button of the specified alignment is pressed.
-			await editor.clickBlockToolbarButton( 'Align' );
+			await editor.clickBlockToolbarButton( 'Align block' );
 			await expect(
 				dropdown.getByRole( 'menuitemradio', { name: 'Center' } )
 			).toHaveAttribute( 'aria-checked', 'true' );
@@ -189,7 +189,7 @@ test.describe( 'Align Hook Works as Expected', () => {
 				.click();
 
 			// Verify 'none' alignment button is in pressed state.
-			await editor.clickBlockToolbarButton( 'Align' );
+			await editor.clickBlockToolbarButton( 'Align block' );
 			await expect(
 				dropdown.getByRole( 'menuitemradio', { name: 'None' } )
 			).toHaveAttribute( 'aria-checked', 'true' );
@@ -207,11 +207,11 @@ test.describe( 'Align Hook Works as Expected', () => {
 			page,
 		} ) => {
 			await editor.insertBlock( { name: 'test/test-default-align' } );
-			await editor.clickBlockToolbarButton( 'Align' );
+			await editor.clickBlockToolbarButton( 'Align block' );
 
 			await expect(
 				page
-					.getByRole( 'menu', { name: 'Align' } )
+					.getByRole( 'menu', { name: 'Align block' } )
 					.getByRole( 'menuitemradio' )
 			).toHaveText( Object.values( alignLabels ) );
 		} );
@@ -221,11 +221,11 @@ test.describe( 'Align Hook Works as Expected', () => {
 			page,
 		} ) => {
 			await editor.insertBlock( { name: 'test/test-default-align' } );
-			await editor.clickBlockToolbarButton( 'Align' );
+			await editor.clickBlockToolbarButton( 'Align block' );
 
 			await expect(
 				page
-					.getByRole( 'menu', { name: 'Align' } )
+					.getByRole( 'menu', { name: 'Align block' } )
 					.getByRole( 'menuitemradio', { name: 'Align right' } )
 			).toHaveAttribute( 'aria-checked', 'true' );
 		} );
@@ -245,11 +245,11 @@ test.describe( 'Align Hook Works as Expected', () => {
 			page,
 		} ) => {
 			await editor.insertBlock( { name: 'test/test-default-align' } );
-			await editor.clickBlockToolbarButton( 'Align' );
+			await editor.clickBlockToolbarButton( 'Align block' );
 
 			// Remove the alignment.
 			await page
-				.getByRole( 'menu', { name: 'Align' } )
+				.getByRole( 'menu', { name: 'Align block' } )
 				.getByRole( 'menuitemradio', { name: 'Align right' } )
 				.click();
 
@@ -263,10 +263,10 @@ test.describe( 'Align Hook Works as Expected', () => {
 			page,
 		} ) => {
 			await editor.insertBlock( { name: 'test/test-default-align' } );
-			await editor.clickBlockToolbarButton( 'Align' );
+			await editor.clickBlockToolbarButton( 'Align block' );
 
 			const dropdown = page.getByRole( 'menu', {
-				name: 'Align',
+				name: 'Align block',
 			} );
 
 			await dropdown
@@ -274,7 +274,7 @@ test.describe( 'Align Hook Works as Expected', () => {
 				.click();
 
 			// Verify the button of the specified alignment is pressed.
-			await editor.clickBlockToolbarButton( 'Align' );
+			await editor.clickBlockToolbarButton( 'Align block' );
 			await expect(
 				dropdown.getByRole( 'menuitemradio', { name: 'Align center' } )
 			).toHaveAttribute( 'aria-checked', 'true' );
@@ -290,7 +290,7 @@ test.describe( 'Align Hook Works as Expected', () => {
 				.click();
 
 			// Verify 'none' alignment button is in pressed state.
-			await editor.clickBlockToolbarButton( 'Align' );
+			await editor.clickBlockToolbarButton( 'Align block' );
 			await expect(
 				dropdown.getByRole( 'menuitemradio', { name: 'None' } )
 			).toHaveAttribute( 'aria-checked', 'true' );
diff --git a/test/e2e/specs/editor/various/block-grouping.spec.js b/test/e2e/specs/editor/various/block-grouping.spec.js
index ec09edc4160d08..a2a09e534b8c55 100644
--- a/test/e2e/specs/editor/various/block-grouping.spec.js
+++ b/test/e2e/specs/editor/various/block-grouping.spec.js
@@ -315,18 +315,18 @@ test.describe( 'Block Grouping', () => {
 				name: 'core/heading',
 				attributes: { content: 'Heading', level: 2 },
 			} );
-			const alignOptions = page.getByRole( 'menu', { name: 'Align' } );
+			const alignOptions = page.getByRole( 'menu', { name: 'Align block' } );
 
 			// Full width image.
 			await editor.insertBlock( { name: 'core/image' } );
-			await editor.clickBlockToolbarButton( 'Align' );
+			await editor.clickBlockToolbarButton( 'Align block' );
 			await alignOptions
 				.getByRole( 'menuitemradio', { name: 'Full width' } )
 				.click();
 
 			// Wide width image.
 			await editor.insertBlock( { name: 'core/image' } );
-			await editor.clickBlockToolbarButton( 'Align' );
+			await editor.clickBlockToolbarButton( 'Align block' );
 			await alignOptions
 				.getByRole( 'menuitemradio', {
 					name: 'Wide width',
@@ -344,7 +344,7 @@ test.describe( 'Block Grouping', () => {
 
 			// We expect Group block align setting to match that
 			// of the widest of it's "child" innerBlocks
-			await editor.clickBlockToolbarButton( 'Align' );
+			await editor.clickBlockToolbarButton( 'Align block' );
 			await expect(
 				alignOptions.getByRole( 'menuitemradio', { checked: true } )
 			).toHaveText( 'Full width' );
diff --git a/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js b/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
index 102caf2a7bd6fa..88c146ac19865b 100644
--- a/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
+++ b/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
@@ -136,7 +136,7 @@ class KeyboardNavigableBlocks {
 		await this.expectLabelToHaveFocus( 'Move down' );
 
 		await this.page.keyboard.press( 'ArrowRight' );
-		await this.expectLabelToHaveFocus( 'Align' );
+		await this.expectLabelToHaveFocus( 'Align block' );
 
 		await this.page.keyboard.press( 'ArrowRight' );
 		await this.expectLabelToHaveFocus( 'Align text' );
diff --git a/test/e2e/specs/editor/various/writing-flow.spec.js b/test/e2e/specs/editor/various/writing-flow.spec.js
index 711566a002db88..5db2e44794b7f3 100644
--- a/test/e2e/specs/editor/various/writing-flow.spec.js
+++ b/test/e2e/specs/editor/various/writing-flow.spec.js
@@ -881,7 +881,7 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
 			page.getByRole( 'option', { name: 'Image', selected: true } )
 		).toBeVisible();
 		await page.keyboard.press( 'Enter' );
-		await editor.clickBlockToolbarButton( 'Align' );
+		await editor.clickBlockToolbarButton( 'Align block' );
 
 		const wideButton = page.locator(
 			'role=menuitemradio[name="Wide width"i]'

From 0f2c2dcf056c67258328d5bfd0d5db1434e67f61 Mon Sep 17 00:00:00 2001
From: Aki Hamano <tetsuaki.hamano@gmail.com>
Date: Sun, 31 May 2026 22:24:01 +0900
Subject: [PATCH 14/16] Tests: Reformat alignment label test lines

Apply formatter line wrapping triggered by the longer alignment labels.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../block-library/src/columns/test/edit.native.js   | 13 +++++++++----
 .../e2e/specs/editor/various/block-grouping.spec.js |  4 +++-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/columns/test/edit.native.js b/packages/block-library/src/columns/test/edit.native.js
index dc242a58ee3301..551bf05d5d3b67 100644
--- a/packages/block-library/src/columns/test/edit.native.js
+++ b/packages/block-library/src/columns/test/edit.native.js
@@ -259,7 +259,9 @@ describe( 'Columns block', () => {
 		fireEvent.press( columnsBlock );
 
 		// Open vertical alignment menu
-		const verticalAlignmentButton = getByLabelText( /Align content vertically/ );
+		const verticalAlignmentButton = getByLabelText(
+			/Align content vertically/
+		);
 		fireEvent.press( verticalAlignmentButton );
 
 		// Get Align top button
@@ -279,8 +281,9 @@ describe( 'Columns block', () => {
 		fireEvent.press( columnsBlock );
 
 		// Open vertical alignment menu
-		const verticalAlignmentButton =
-			screen.getByLabelText( /Align content vertically/ );
+		const verticalAlignmentButton = screen.getByLabelText(
+			/Align content vertically/
+		);
 		fireEvent.press( verticalAlignmentButton );
 
 		// Get Align top button
@@ -317,7 +320,9 @@ describe( 'Columns block', () => {
 		fireEvent.press( columnsBlock );
 
 		// Open vertical alignment menu
-		const verticalAlignmentButton = getByLabelText( /Align content vertically/ );
+		const verticalAlignmentButton = getByLabelText(
+			/Align content vertically/
+		);
 		fireEvent.press( verticalAlignmentButton );
 
 		// Get Align top button
diff --git a/test/e2e/specs/editor/various/block-grouping.spec.js b/test/e2e/specs/editor/various/block-grouping.spec.js
index a2a09e534b8c55..3cefb8dd3978bc 100644
--- a/test/e2e/specs/editor/various/block-grouping.spec.js
+++ b/test/e2e/specs/editor/various/block-grouping.spec.js
@@ -315,7 +315,9 @@ test.describe( 'Block Grouping', () => {
 				name: 'core/heading',
 				attributes: { content: 'Heading', level: 2 },
 			} );
-			const alignOptions = page.getByRole( 'menu', { name: 'Align block' } );
+			const alignOptions = page.getByRole( 'menu', {
+				name: 'Align block',
+			} );
 
 			// Full width image.
 			await editor.insertBlock( { name: 'core/image' } );

From ef0053498b2590422d0c8dba6f84df17005c7e9f Mon Sep 17 00:00:00 2001
From: Aki Hamano <tetsuaki.hamano@gmail.com>
Date: Mon, 1 Jun 2026 19:03:20 +0900
Subject: [PATCH 15/16] Tests: Match Lock toolbar button exactly in
 block-locking E2E

The block alignment toolbar label changed to "Align block", whose
substring "lock" matches Playwright's case-insensitive partial name
query for the "Lock" button, causing a strict-mode violation. Pin the
query with exact: true so it only targets the actual Lock button.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 test/e2e/specs/editor/various/block-locking.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/specs/editor/various/block-locking.spec.js b/test/e2e/specs/editor/various/block-locking.spec.js
index a8895d282fb956..77a5b92434c3d1 100644
--- a/test/e2e/specs/editor/various/block-locking.spec.js
+++ b/test/e2e/specs/editor/various/block-locking.spec.js
@@ -85,7 +85,7 @@ test.describe( 'Block Locking', () => {
 		await expect(
 			page
 				.getByRole( 'toolbar', { name: 'Block tools' } )
-				.getByRole( 'button', { name: 'Lock' } )
+				.getByRole( 'button', { name: 'Lock', exact: true } )
 		).toBeFocused();
 
 		expect( await editor.getEditedPostContent() )

From d9b6fb88a498672695f5054216ebb7ca6f2fd7bb Mon Sep 17 00:00:00 2001
From: Aki Hamano <tetsuaki.hamano@gmail.com>
Date: Wed, 22 Jul 2026 23:38:18 +0900
Subject: [PATCH 16/16] Table: Use singular 'Align column content' toolbar
 label

The alignment control applies to the currently selected column, not to all
columns at once, so the plural label misdescribed what the button does.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 packages/block-library/src/table/edit.js   | 2 +-
 test/e2e/specs/editor/blocks/table.spec.js | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index d96ab7875f2c5c..6a8aa58fed80be 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -455,7 +455,7 @@ function TableEdit( {
 				<>
 					<BlockControls group="block">
 						<AlignmentControl
-							label={ __( 'Align columns content' ) }
+							label={ __( 'Align column content' ) }
 							alignmentControls={ ALIGNMENT_CONTROLS }
 							value={ getCellAlignment() }
 							onChange={ ( nextAlign ) =>
diff --git a/test/e2e/specs/editor/blocks/table.spec.js b/test/e2e/specs/editor/blocks/table.spec.js
index 6c75ad5c4fa76b..3060a7cb3d5d42 100644
--- a/test/e2e/specs/editor/blocks/table.spec.js
+++ b/test/e2e/specs/editor/blocks/table.spec.js
@@ -208,19 +208,19 @@ test.describe( 'Table', () => {
 		// Click to the next cell and add some text. Align left.
 		await cells.nth( 1 ).click();
 		await page.keyboard.type( 'To the left' );
-		await editor.clickBlockToolbarButton( 'Align columns content' );
+		await editor.clickBlockToolbarButton( 'Align column content' );
 		await page.click( 'role=menuitemradio[name="Align column left"i]' );
 
 		// Click the next cell and add some text. Align center.
 		await cells.nth( 2 ).click();
 		await page.keyboard.type( 'Centered' );
-		await editor.clickBlockToolbarButton( 'Align columns content' );
+		await editor.clickBlockToolbarButton( 'Align column content' );
 		await page.click( 'role=menuitemradio[name="Align column center"i]' );
 
 		// Tab to the next cell and add some text. Align right.
 		await cells.nth( 3 ).click();
 		await page.keyboard.type( 'Right aligned' );
-		await editor.clickBlockToolbarButton( 'Align columns content' );
+		await editor.clickBlockToolbarButton( 'Align column content' );
 		await page.click( 'role=menuitemradio[name="Align column right"i]' );
 
 		// Expect the post to have the correct alignment classes inside the table.