From 9805cdf0a718e9c01a5f7b2d9225e9514fc60488 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Thu, 13 Jan 2022 13:42:25 +1100
Subject: [PATCH] Initial commit: experimenting with adding writing mode to
 layout

---
 packages/block-editor/src/hooks/layout.js   | 43 ++++++++++++++++++++-
 packages/block-editor/src/hooks/layout.scss |  7 +++-
 packages/block-editor/src/layouts/flex.js   |  6 ++-
 packages/block-editor/src/layouts/flow.js   | 25 ++++++++++--
 packages/block-library/src/group/block.json |  4 +-
 5 files changed, 77 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
index b2cfde0b5e06cc..20673e763e3e36 100644
--- a/packages/block-editor/src/hooks/layout.js
+++ b/packages/block-editor/src/hooks/layout.js
@@ -19,6 +19,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useContext, createPortal } from '@wordpress/element';
+import { arrowRight, arrowDown } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -49,6 +50,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 		allowSwitching,
 		allowEditing = true,
 		allowInheriting = true,
+		allowWritingMode,
 		default: defaultBlockLayout,
 	} = layoutBlockSupport;
 
@@ -103,6 +105,25 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 							layoutBlockSupport={ layoutBlockSupport }
 						/>
 					) }
+
+					{ ! inherit && allowWritingMode && (
+						<WritingModeControls
+							writingMode={ layout?.writingMode }
+							onChange={ ( newWritingMode ) => {
+								const newOrientation =
+									newWritingMode === 'vertical'
+										? 'vertical'
+										: layout.orientation;
+								setAttributes( {
+									layout: {
+										...layout,
+										orientation: newOrientation,
+										writingMode: newWritingMode,
+									},
+								} );
+							} }
+						/>
+					) }
 				</PanelBody>
 			</InspectorControls>
 			{ ! inherit && layoutType && (
@@ -118,7 +139,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 
 function LayoutTypeSwitcher( { type, onChange } ) {
 	return (
-		<ButtonGroup>
+		<ButtonGroup className="block-editor-hooks__layout-controls-buttons">
 			{ getLayoutTypes().map( ( { name, label } ) => {
 				return (
 					<Button
@@ -134,6 +155,26 @@ function LayoutTypeSwitcher( { type, onChange } ) {
 	);
 }
 
+function WritingModeControls( { writingMode = 'horizontal', onChange } ) {
+	return (
+		<fieldset className="block-editor-hooks__writing-mode-controls">
+			<legend>{ __( 'Writing mode' ) }</legend>
+			<Button
+				label={ 'horizontal' }
+				icon={ arrowRight }
+				isPressed={ writingMode === 'horizontal' }
+				onClick={ () => onChange( 'horizontal' ) }
+			/>
+			<Button
+				label={ 'vertical' }
+				icon={ arrowDown }
+				isPressed={ writingMode === 'vertical' }
+				onClick={ () => onChange( 'vertical' ) }
+			/>
+		</fieldset>
+	);
+}
+
 /**
  * Filters registered block settings, extending attributes to include `layout`.
  *
diff --git a/packages/block-editor/src/hooks/layout.scss b/packages/block-editor/src/hooks/layout.scss
index 5589e08b9837c4..bc165dd8a6b493 100644
--- a/packages/block-editor/src/hooks/layout.scss
+++ b/packages/block-editor/src/hooks/layout.scss
@@ -1,6 +1,6 @@
 .block-editor-hooks__layout-controls {
 	display: flex;
-	margin-bottom: $grid-unit-20;
+	margin-bottom: $grid-unit-30;
 
 	.block-editor-hooks__layout-controls-unit {
 		display: flex;
@@ -12,6 +12,10 @@
 	}
 }
 
+.block-editor-hooks__layout-controls-buttons {
+	margin-bottom: $grid-unit-30;
+}
+
 .block-editor-hooks__layout-controls-reset {
 	display: flex;
 	justify-content: flex-end;
@@ -23,6 +27,7 @@
 }
 
 .block-editor-hooks__flex-layout-justification-controls,
+.block-editor-hooks__writing-mode-controls,
 .block-editor-hooks__flex-layout-orientation-controls {
 	margin-bottom: $grid-unit-15;
 	legend {
diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js
index 092da1e036a10f..50b4e66fe667dc 100644
--- a/packages/block-editor/src/layouts/flex.js
+++ b/packages/block-editor/src/layouts/flex.js
@@ -85,7 +85,10 @@ export default {
 		);
 	},
 	save: function FlexLayoutStyle( { selector, layout, style } ) {
-		const { orientation = 'horizontal' } = layout;
+		const {
+			orientation = 'horizontal',
+			writingMode = 'horizontal',
+		} = layout;
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
 		const hasBlockGapStylesSupport = blockGapSupport !== null;
 		const blockGapValue =
@@ -115,6 +118,7 @@ export default {
 					gap: ${ hasBlockGapStylesSupport ? blockGapValue : '0.5em' };
 					flex-wrap: ${ flexWrap };
 					${ orientation === 'horizontal' ? rowOrientation : columnOrientation }
+					writing-mode: ${ writingMode === 'vertical' ? 'vertical-rl' : 'horizontal-tb' };
 				}
 
 				${ appendSelectors( selector, '> *' ) } {
diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js
index 86d9a2a1f5ddae..a1245d63b1d803 100644
--- a/packages/block-editor/src/layouts/flow.js
+++ b/packages/block-editor/src/layouts/flow.js
@@ -106,13 +106,17 @@ export default {
 		return null;
 	},
 	save: function DefaultLayoutStyle( { selector, layout = {}, style } ) {
-		const { contentSize, wideSize } = layout;
+		const { contentSize, wideSize, writingMode = 'horizontal' } = layout;
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
 		const hasBlockGapStylesSupport = blockGapSupport !== null;
 		const blockGapValue =
 			style?.spacing?.blockGap ?? 'var( --wp--style--block-gap )';
-
-		let output =
+		let output = `
+			${ appendSelectors( selector ) } {
+				writing-mode: ${ writingMode === 'vertical' ? 'vertical-rl' : 'horizontal-tb' };
+			}
+		`;
+		output +=
 			!! contentSize || !! wideSize
 				? `
 					${ appendSelectors( selector, '> *' ) } {
@@ -144,7 +148,7 @@ export default {
 
 		`;
 
-		if ( hasBlockGapStylesSupport ) {
+		if ( hasBlockGapStylesSupport && writingMode !== 'vertical' ) {
 			output += `
 				${ appendSelectors( selector, '> *' ) } {
 					margin-top: 0;
@@ -156,6 +160,19 @@ export default {
 			`;
 		}
 
+		if ( hasBlockGapStylesSupport && writingMode === 'vertical' ) {
+			output += `
+				${ appendSelectors( selector, '> *' ) } {
+					margin-left: ${ blockGapValue };
+					margin-right: 0;
+					margin-top: 0;
+				}
+				${ appendSelectors( selector, '> *:last-child' ) } {
+					margin-left: 0;
+				}
+			`;
+		}
+
 		return <style>{ output }</style>;
 	},
 	getOrientation() {
diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json
index 19947d40b543ed..faa1ac2b7d8004 100644
--- a/packages/block-library/src/group/block.json
+++ b/packages/block-library/src/group/block.json
@@ -56,7 +56,9 @@
 				"fontSize": true
 			}
 		},
-		"__experimentalLayout": true
+		"__experimentalLayout": {
+			"allowWritingMode": true
+		}
 	},
 	"editorStyle": "wp-block-group-editor",
 	"style": "wp-block-group"