From c99be7b97bb25532bf72c81294a560c6960900cb Mon Sep 17 00:00:00 2001
From: Sukhendu Sekhar Guria <sukhendu.guria@rtcamp.com>
Date: Wed, 27 Nov 2024 16:05:15 +0530
Subject: [PATCH 1/3] Storybook: Add WritingModeControl story

---
 .../stories/index.story.js                    | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 packages/block-editor/src/components/writing-mode-control/stories/index.story.js

diff --git a/packages/block-editor/src/components/writing-mode-control/stories/index.story.js b/packages/block-editor/src/components/writing-mode-control/stories/index.story.js
new file mode 100644
index 0000000000000..d31ebfc5e2b29
--- /dev/null
+++ b/packages/block-editor/src/components/writing-mode-control/stories/index.story.js
@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { isRTL } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import WritingModeControl from '../';
+
+/**
+ * WritingModeControl component allows selecting writing mode.
+ */
+const meta = {
+	title: 'BlockEditor/WritingModeControl',
+	component: WritingModeControl,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component: 'Control to facilitate writing mode selections.',
+			},
+		},
+	},
+	argTypes: {
+		value: {
+			control: { type: 'select' },
+			options: ( () => {
+				const modes = [
+					'horizontal-tb',
+					isRTL() ? 'vertical-lr' : 'vertical-rl',
+				];
+				return modes;
+			} )(),
+			description: 'Currently selected writing mode.',
+		},
+		className: {
+			control: 'text',
+			description: 'Class name to add to the control.',
+		},
+		onChange: {
+			action: 'onChange',
+			description: 'Handles change in the writing mode selection.',
+		},
+	},
+};
+
+export default meta;
+
+export const Default = {
+	args: {
+		value: 'horizontal-tb',
+	},
+};
+
+/**
+ * This story demonstrates the WritingModeControl component with the vertical writing mode.
+ */
+export const Vertical = {
+	args: {
+		value: isRTL() ? 'vertical-lr' : 'vertical-rl',
+	},
+};

From f510d8a06d9df34a5e2b3c3b8bf6ebe146641e01 Mon Sep 17 00:00:00 2001
From: Sukhendu Sekhar Guria <sukhendu.guria@rtcamp.com>
Date: Tue, 3 Dec 2024 16:26:31 +0530
Subject: [PATCH 2/3] Enhance WritingModeControl usability and simplify
 structure

---
 .../stories/index.story.js                    | 35 +++++++++----------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/packages/block-editor/src/components/writing-mode-control/stories/index.story.js b/packages/block-editor/src/components/writing-mode-control/stories/index.story.js
index d31ebfc5e2b29..5d4d0abad2c78 100644
--- a/packages/block-editor/src/components/writing-mode-control/stories/index.story.js
+++ b/packages/block-editor/src/components/writing-mode-control/stories/index.story.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { isRTL } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -24,14 +25,7 @@ const meta = {
 	},
 	argTypes: {
 		value: {
-			control: { type: 'select' },
-			options: ( () => {
-				const modes = [
-					'horizontal-tb',
-					isRTL() ? 'vertical-lr' : 'vertical-rl',
-				];
-				return modes;
-			} )(),
+			control: { type: null },
 			description: 'Currently selected writing mode.',
 		},
 		className: {
@@ -40,6 +34,7 @@ const meta = {
 		},
 		onChange: {
 			action: 'onChange',
+			control: { type: null },
 			description: 'Handles change in the writing mode selection.',
 		},
 	},
@@ -48,16 +43,20 @@ const meta = {
 export default meta;
 
 export const Default = {
-	args: {
-		value: 'horizontal-tb',
-	},
-};
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState(
+			isRTL() ? 'vertical-lr' : 'vertical-rl'
+		);
 
-/**
- * This story demonstrates the WritingModeControl component with the vertical writing mode.
- */
-export const Vertical = {
-	args: {
-		value: isRTL() ? 'vertical-lr' : 'vertical-rl',
+		return (
+			<WritingModeControl
+				{ ...args }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
+				value={ value }
+			/>
+		);
 	},
 };

From b9f3c2c9657f45b501cf5d68f6b3f171870cc87c Mon Sep 17 00:00:00 2001
From: Sukhendu Sekhar Guria <sukhendu.guria@rtcamp.com>
Date: Mon, 9 Dec 2024 12:00:10 +0530
Subject: [PATCH 3/3] Simplify WritingModeControl story implementation

---
 .../writing-mode-control/stories/index.story.js           | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/writing-mode-control/stories/index.story.js b/packages/block-editor/src/components/writing-mode-control/stories/index.story.js
index 5d4d0abad2c78..ea4bd65a37a00 100644
--- a/packages/block-editor/src/components/writing-mode-control/stories/index.story.js
+++ b/packages/block-editor/src/components/writing-mode-control/stories/index.story.js
@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { isRTL } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 
 /**
@@ -9,9 +8,6 @@ import { useState } from '@wordpress/element';
  */
 import WritingModeControl from '../';
 
-/**
- * WritingModeControl component allows selecting writing mode.
- */
 const meta = {
 	title: 'BlockEditor/WritingModeControl',
 	component: WritingModeControl,
@@ -44,9 +40,7 @@ export default meta;
 
 export const Default = {
 	render: function Template( { onChange, ...args } ) {
-		const [ value, setValue ] = useState(
-			isRTL() ? 'vertical-lr' : 'vertical-rl'
-		);
+		const [ value, setValue ] = useState();
 
 		return (
 			<WritingModeControl