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] 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 d31ebfc5e2b29a..5d4d0abad2c786 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 }
+			/>
+		);
 	},
 };