From ea37ca3823470519216739d96b9c41f73571e70e Mon Sep 17 00:00:00 2001
From: sejas <antonio@sejas.es>
Date: Fri, 7 Jul 2023 14:20:32 +0100
Subject: [PATCH 1/5] Global style: add dummy text alignment

---
 .../src/components/global-styles/root-menu.js | 11 ++-
 .../global-styles/screen-text-alignment.js    | 79 +++++++++++++++++++
 .../src/components/global-styles/ui.js        |  5 ++
 3 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 packages/edit-site/src/components/global-styles/screen-text-alignment.js

diff --git a/packages/edit-site/src/components/global-styles/root-menu.js b/packages/edit-site/src/components/global-styles/root-menu.js
index 9edfd064acbf7..a3cb326efe4d4 100644
--- a/packages/edit-site/src/components/global-styles/root-menu.js
+++ b/packages/edit-site/src/components/global-styles/root-menu.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-import { typography, color, layout } from '@wordpress/icons';
+import { typography, color, layout, alignLeft } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
@@ -40,6 +40,15 @@ function RootMenu() {
 						{ __( 'Typography' ) }
 					</NavigationButtonAsItem>
 				) }
+				{ hasTypographyPanel && (
+					<NavigationButtonAsItem
+						icon={ alignLeft }
+						path="/text-alignment"
+						aria-label={ __( 'Text alignment' ) }
+					>
+						{ __( 'Text alignment' ) }
+					</NavigationButtonAsItem>
+				) }
 				{ hasColorPanel && (
 					<NavigationButtonAsItem
 						icon={ color }
diff --git a/packages/edit-site/src/components/global-styles/screen-text-alignment.js b/packages/edit-site/src/components/global-styles/screen-text-alignment.js
new file mode 100644
index 0000000000000..395a61d7bf63a
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-text-alignment.js
@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalVStack as VStack, Button } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+import Subtitle from './subtitle';
+import BlockPreviewPanel from './block-preview-panel';
+import {
+	alignCenter,
+	alignJustify,
+	alignLeft,
+	alignRight,
+} from '@wordpress/icons';
+
+const DEFAULT_ALIGNMENT_CONTROLS = [
+	{
+		icon: alignLeft,
+		title: __( 'Align text left' ),
+		align: 'left',
+	},
+	{
+		icon: alignCenter,
+		title: __( 'Align text center' ),
+		align: 'center',
+	},
+	{
+		icon: alignRight,
+		title: __( 'Align text right' ),
+		align: 'right',
+	},
+	{
+		icon: alignJustify,
+		title: __( 'Align justify' ),
+		align: 'justify',
+	},
+];
+
+function ScreenTextAlignment() {
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Global Text Alignment' ) }
+				description={ __(
+					'Manage the global text alignment for pages and posts content.'
+				) }
+			/>
+
+			<BlockPreviewPanel />
+
+			<div className="edit-site-global-styles-screen-typography">
+				<VStack spacing={ 3 }>
+					<Subtitle level={ 3 }>{ __( 'Alignment' ) }</Subtitle>
+					{ DEFAULT_ALIGNMENT_CONTROLS.map(
+						( { icon, title, align } ) => (
+							<Button
+								icon={ icon }
+								key={ title }
+								onClick={ () => {
+									// TODO: update the style with useGlobalStyle
+									// eslint-disable-next-line no-console
+									console.log( 'clicked', align );
+								} }
+							>
+								{ title }
+							</Button>
+						)
+					) }
+				</VStack>
+			</div>
+		</>
+	);
+}
+
+export default ScreenTextAlignment;
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 8d62da34f4966..0138b0b069ba0 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -39,6 +39,7 @@ import {
 import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
 import ScreenTypographyElement from './screen-typography-element';
+import ScreenTextAlignment from './screen-text-alignment';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
 import ScreenLayout from './screen-layout';
@@ -380,6 +381,10 @@ function GlobalStylesUI() {
 				<ScreenTypographyElement element="button" />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path="/text-alignment">
+				<ScreenTextAlignment />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen path="/colors">
 				<ScreenColors />
 			</GlobalStylesNavigationScreen>

From 8955943f2ca0167b27ba30235f35b475a41f06ee Mon Sep 17 00:00:00 2001
From: sejas <antonio@sejas.es>
Date: Fri, 7 Jul 2023 14:29:42 +0100
Subject: [PATCH 2/5] Global style: add dummy hypens option

---
 .../global-styles/screen-text-alignment.js    | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-text-alignment.js b/packages/edit-site/src/components/global-styles/screen-text-alignment.js
index 395a61d7bf63a..1e0cc15651883 100644
--- a/packages/edit-site/src/components/global-styles/screen-text-alignment.js
+++ b/packages/edit-site/src/components/global-styles/screen-text-alignment.js
@@ -2,7 +2,12 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalVStack as VStack, Button } from '@wordpress/components';
+import {
+	__experimentalVStack as VStack,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	Button,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -70,6 +75,24 @@ function ScreenTextAlignment() {
 							</Button>
 						)
 					) }
+
+					<ToggleGroupControl
+						isBlock
+						label={ __( 'Hyphens' ) }
+						onClick={ ( event ) => {
+							// TODO: update the style with useGlobalStyle
+							// eslint-disable-next-line no-console
+							console.log( 'changed', event.target.value );
+						} }
+						value="auto"
+					>
+						<ToggleGroupControlOption label="auto" value="auto" />
+						<ToggleGroupControlOption
+							label="manual"
+							value="manual"
+						/>
+						<ToggleGroupControlOption label="none" value="none" />
+					</ToggleGroupControl>
 				</VStack>
 			</div>
 		</>

From e069d4a48615ce0b9f716395efbe17c1c97da6d1 Mon Sep 17 00:00:00 2001
From: sejas <antonio@sejas.es>
Date: Fri, 7 Jul 2023 14:42:46 +0100
Subject: [PATCH 3/5] Global style: update dummy hypens option

---
 .../src/components/global-styles/screen-text-alignment.js     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-text-alignment.js b/packages/edit-site/src/components/global-styles/screen-text-alignment.js
index 1e0cc15651883..18fcfd303f077 100644
--- a/packages/edit-site/src/components/global-styles/screen-text-alignment.js
+++ b/packages/edit-site/src/components/global-styles/screen-text-alignment.js
@@ -79,10 +79,10 @@ function ScreenTextAlignment() {
 					<ToggleGroupControl
 						isBlock
 						label={ __( 'Hyphens' ) }
-						onClick={ ( event ) => {
+						onChange={ ( value ) => {
 							// TODO: update the style with useGlobalStyle
 							// eslint-disable-next-line no-console
-							console.log( 'changed', event.target.value );
+							console.log( 'changed', value );
 						} }
 						value="auto"
 					>

From 2f5ee205bb5767186f572d18ddce2d9e82cb4811 Mon Sep 17 00:00:00 2001
From: sejas <antonio@sejas.es>
Date: Fri, 7 Jul 2023 14:43:59 +0100
Subject: [PATCH 4/5] Global style: update global text alignment title

---
 .../src/components/global-styles/screen-text-alignment.js       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-text-alignment.js b/packages/edit-site/src/components/global-styles/screen-text-alignment.js
index 18fcfd303f077..507451a325f47 100644
--- a/packages/edit-site/src/components/global-styles/screen-text-alignment.js
+++ b/packages/edit-site/src/components/global-styles/screen-text-alignment.js
@@ -49,7 +49,7 @@ function ScreenTextAlignment() {
 	return (
 		<>
 			<ScreenHeader
-				title={ __( 'Global Text Alignment' ) }
+				title={ __( 'Text Alignment' ) }
 				description={ __(
 					'Manage the global text alignment for pages and posts content.'
 				) }

From 76411935bfdbc884903de8ad803a4ff40dc73569 Mon Sep 17 00:00:00 2001
From: sejas <antonio@sejas.es>
Date: Fri, 7 Jul 2023 14:45:53 +0100
Subject: [PATCH 5/5] Global style: translate Hyphens labels

---
 .../global-styles/screen-text-alignment.js           | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-text-alignment.js b/packages/edit-site/src/components/global-styles/screen-text-alignment.js
index 507451a325f47..2ccdbff375600 100644
--- a/packages/edit-site/src/components/global-styles/screen-text-alignment.js
+++ b/packages/edit-site/src/components/global-styles/screen-text-alignment.js
@@ -86,12 +86,18 @@ function ScreenTextAlignment() {
 						} }
 						value="auto"
 					>
-						<ToggleGroupControlOption label="auto" value="auto" />
 						<ToggleGroupControlOption
-							label="manual"
+							label={ __( 'auto' ) }
+							value="auto"
+						/>
+						<ToggleGroupControlOption
+							label={ __( 'manual' ) }
 							value="manual"
 						/>
-						<ToggleGroupControlOption label="none" value="none" />
+						<ToggleGroupControlOption
+							label={ __( 'none' ) }
+							value="none"
+						/>
 					</ToggleGroupControl>
 				</VStack>
 			</div>