Add text-orientation to the typography block support

docs/reference-guides/theme-json-reference/theme-json-living.md

@@ -193,6 +193,7 @@ Settings related to typography.
 | textColumns | Allow users to set the number of text columns. | `boolean` | `false` |
 | textDecoration | Allow users to set custom text decorations. | `boolean` | `true` |
 | writingMode | Allow users to set the writing mode. | `boolean` | `false` |
+| textOrientation | Allow users to set the textOrientation. | `boolean` | `false` |
 | textTransform | Allow users to set custom text transforms. | `boolean` | `true` |
 | dropCap | Enable drop cap. | `boolean` | `true` |
 | fontSizes | Font size presets for the font size selector. | `[ { name, slug, size, fluid } ]` |  |
@@ -327,6 +328,7 @@ Typography styles.
 | textColumns | Sets the `column-count` CSS property. | `string`, `{ ref }` |
 | textDecoration | Sets the `text-decoration` CSS property. | `string`, `{ ref }` |
 | writingMode | Sets the `writing-mode` CSS property. | `string`, `{ ref }` |
+| textOrientation | Sets the `text-orientation` CSS property. | `string`, `{ ref }` |
 | textTransform | Sets the `text-transform` CSS property. | `string`, `{ ref }` |
 
 ---

lib/block-supports/typography.php

@@ -102,6 +102,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 	$has_text_decoration_support = $typography_supports['__experimentalTextDecoration'] ?? false;
 	$has_text_transform_support  = $typography_supports['__experimentalTextTransform'] ?? false;
 	$has_writing_mode_support    = $typography_supports['__experimentalWritingMode'] ?? false;
+	$has_text_orientation_support = $typography_supports['__experimentalTextOrientation'] ?? false;
 
 	// Whether to skip individual block support features.
 	$should_skip_font_size       = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontSize' );
@@ -115,6 +116,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 	$should_skip_text_transform  = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textTransform' );
 	$should_skip_letter_spacing  = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'letterSpacing' );
 	$should_skip_writing_mode    = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'writingMode' );
+	$should_skip_text_orentation = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textOrientation' );
 
 	$typography_block_styles = array();
 	if ( $has_font_size_support && ! $should_skip_font_size ) {
@@ -172,6 +174,10 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 
 	if ( $has_writing_mode_support && ! $should_skip_writing_mode && isset( $block_attributes['style']['typography']['writingMode'] ) ) {
 		$typography_block_styles['writingMode'] = $block_attributes['style']['typography']['writingMode'] ?? null;
+		// Text orientation requires writing mode to be set.
+		if ( $has_text_orientation_support && ! $should_skip_text_orentation && isset( $block_attributes['style']['typography']['textOrientation'] ) ) {
+			$typography_block_styles['textOrientation'] = _wp_array_get( $block_attributes, array( 'style', 'typography', 'textOrientation' ), null );
+		}
 	}
 
 	$attributes = array();

lib/class-wp-theme-json-gutenberg.php

@@ -373,9 +373,11 @@
 	 * @since 6.1.0 Added `layout.definitions` and `useRootPaddingAwareAlignments`.
 	 * @since 6.2.0 Added `dimensions.minHeight`, 'shadow.presets', 'shadow.defaultPresets',
 	 *              `position.fixed` and `position.sticky`.
-	 * @since 6.3.0 Removed `layout.definitions`. Added `typography.writingMode`.
+	 * @since 6.3.0 Removed `layout.definitions`.
 	 * @since 6.4.0 Added `layout.allowEditing`.
-	 * @since 6.4.0 Added `lightbox`.
+	 *              Added `lightbox`.
+	 *              Added `typography.writingMode`.
+	 * @since 6.6.0 Added `typography.textOrientation`.
 	 * @var array
 	 */
 	const VALID_SETTINGS = array(
@@ -459,6 +461,7 @@
 			'textDecoration'   => null,
 			'textTransform'    => null,
 			'writingMode'      => null,
+			'textOrientation' => null,
 		),
 	);
 
@@ -498,8 +501,11 @@
 	 *              added new property `shadow`,
 	 *              updated `blockGap` to be allowed at any level.
 	 * @since 6.2.0 Added `outline`, and `minHeight` properties.
+	 * @since 6.4.0 Added `writingMode` to `typography`.
 	 * @since 6.6.0 Added `background` sub properties to top-level only.
 	 * @since 6.6.0 Added `dimensions.aspectRatio`.
+	 * @since 6.7.0 Added `textOrientation` to `typography`.
+	 *
 	 * @var array
 	 */
 	const VALID_STYLES = array(
@@ -545,17 +551,18 @@
 			'blockGap' => null,
 		),
 		'typography' => array(
 			'fontFamily'     => null,
 			'fontSize'       => null,
 			'fontStyle'      => null,
 			'fontWeight'     => null,
 			'letterSpacing'  => null,
 			'lineHeight'     => null,
 			'textAlign'      => null,
 			'textColumns'    => null,
 			'textDecoration' => null,
 			'textTransform'  => null,
 			'writingMode'    => null,
+			'textOrientation' => null,
 		),
 		'css'        => null,
 	);

lib/compat/wordpress-6.6/kses.php

@@ -0,0 +1,18 @@
+<?php
+/**
+ * Temporary compatibility shims for block APIs present in Gutenberg.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Update allowed inline style attributes list.
+ *
+ * @param string[] $attrs Array of allowed CSS attributes.
+ * @return string[] CSS attributes.
+ */
+function gutenberg_safe_style_attrs_6_6( $attrs ) {
+	$attrs[] = 'text-orientation';
+	return $attrs;
+}
+add_filter( 'safe_style_css', 'gutenberg_safe_style_attrs_6_6' );

lib/load.php

@@ -162,6 +162,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.6/block-editor.php';
 require __DIR__ . '/compat/wordpress-6.6/compat.php';
 require __DIR__ . '/compat/wordpress-6.6/resolve-patterns.php';
+require __DIR__ . '/compat/wordpress-6.6/kses.php';
 require __DIR__ . '/compat/wordpress-6.6/block-bindings/pattern-overrides.php';
 require __DIR__ . '/compat/wordpress-6.6/block-template-utils.php';
 require __DIR__ . '/compat/wordpress-6.6/option.php';

packages/block-editor/src/components/global-styles/hooks.js

@@ -82,6 +82,7 @@ const VALID_SETTINGS = [
 	'typography.textDecoration',
 	'typography.textTransform',
 	'typography.writingMode',
+	'typography.textOrientation',
 ];
 
 export const useGlobalStylesReset = () => {
@@ -304,6 +305,7 @@ export function useSettingsForBlockElement(
 			'textTransform',
 			'textDecoration',
 			'writingMode',
+			'textOrientation',
 		].forEach( ( key ) => {
 			if ( ! supportedStyles.includes( key ) ) {
 				updatedSettings.typography = {

packages/block-editor/src/components/global-styles/typography-panel.js

@@ -7,7 +7,7 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import { useCallback, useMemo, useEffect } from '@wordpress/element';
 
 /**
@@ -361,20 +361,75 @@ export default function TypographyPanel( {
 	const hasTextDecoration = () => !! value?.typography?.textDecoration;
 	const resetTextDecoration = () => setTextDecoration( undefined );
 
-	// Text Orientation
+	// Writing Mode
 	const hasWritingModeControl = useHasWritingModeControl( settings );
 	const writingMode = decodeValue( inheritedValue?.typography?.writingMode );
-	const setWritingMode = ( newValue ) => {
-		onChange(
-			setImmutably(
-				value,
-				[ 'typography', 'writingMode' ],
-				newValue || undefined
-			)
-		);
-	};
 	const hasWritingMode = () => !! value?.typography?.writingMode;
-	const resetWritingMode = () => setWritingMode( undefined );
+	const resetWritingMode = () =>
+		setWritingModeAndTextOrientation( undefined );
+
+	// Text Orientation
+	const textOrientation = decodeValue(
+		inheritedValue?.typography?.textOrientation
+	);
+
+	// Returns the new text orientation and writing mode based on the value from the control.
+	const getTextOrientationAndWritingMode = ( valueFromControl ) => {
+		switch ( valueFromControl ) {
+			case 'top-to-bottom':
+				return {
+					newTextOrientation: 'mixed',
+					newWritingMode: isRTL() ? 'vertical-lr' : 'vertical-rl',
+				};
+
+			case 'upright':
+				return {
+					newTextOrientation: 'upright',
+					newWritingMode: isRTL() ? 'vertical-rl' : 'vertical-lr',
+				};
+
+			case 'horizontal':
+				return {
+					newTextOrientation: undefined,
+					newWritingMode: 'horizontal-tb',
+				};
+
+			default:
+				return {
+					newTextOrientation: undefined,
+					newWritingMode: undefined,
+				};
+		}
+	};
+
+	function getValuefromWritingModeAndTextOrientation() {
+		if ( writingMode === 'horizontal-tb' ) {
+			return 'horizontal';
+		}
+		if ( writingMode === 'vertical-lr' || writingMode === 'vertical-rl' ) {
+			if ( textOrientation === 'upright' ) {
+				return 'upright';
+			}
+			return 'top-to-bottom';
+		}
+	}
+
+	const setWritingModeAndTextOrientation = useCallback(
+		( newValue ) => {
+			const { newTextOrientation, newWritingMode } =
+				getTextOrientationAndWritingMode( newValue );
+
+			return onChange( {
+				...value,
+				typography: {
+					...value?.typography,
+					textOrientation: newTextOrientation,
+					writingMode: newWritingMode,
+				},
+			} );
+		},
+		[ onChange, value ]
+	);
 
 	// Text Alignment
 	const hasTextAlignmentControl = useHasTextAlignmentControl( settings );
@@ -537,23 +592,6 @@ export default function TypographyPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
-			{ hasWritingModeControl && (
-				<ToolsPanelItem
-					className="single-column"
-					label={ __( 'Orientation' ) }
-					hasValue={ hasWritingMode }
-					onDeselect={ resetWritingMode }
-					isShownByDefault={ defaultControls.writingMode }
-					panelId={ panelId }
-				>
-					<WritingModeControl
-						value={ writingMode }
-						onChange={ setWritingMode }
-						size="__unstable-large"
-						__nextHasNoMarginBottom
-					/>
-				</ToolsPanelItem>
-			) }
 			{ hasTextTransformControl && (
 				<ToolsPanelItem
 					label={ __( 'Letter case' ) }
@@ -588,6 +626,20 @@ export default function TypographyPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ hasWritingModeControl && (
+				<ToolsPanelItem
+					label={ __( 'Text orientation' ) }
+					hasValue={ hasWritingMode }
+					onDeselect={ resetWritingMode }
+					isShownByDefault={ defaultControls.writingMode }
+					panelId={ panelId }
+				>
+					<WritingModeControl
+						value={ getValuefromWritingModeAndTextOrientation() }
+						onChange={ setWritingModeAndTextOrientation }
+					/>
+				</ToolsPanelItem>
+			) }
 		</Wrapper>
 	);
 }

packages/block-editor/src/components/writing-mode-control/index.js

@@ -7,7 +7,13 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { __, isRTL } from '@wordpress/i18n';
-import { textHorizontal, textVertical } from '@wordpress/icons';
+import {
+	textHorizontal,
+	textHorizontalRTL,
+	textUpright,
+	textVertical,
+	textVerticalRTL,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -16,14 +22,19 @@ import SegmentedTextControl from '../segmented-text-control';
 
 const WRITING_MODES = [
 	{
-		label: __( 'Horizontal' ),
-		value: 'horizontal-tb',
-		icon: textHorizontal,
+		name: __( 'Horizontal' ),
+		value: 'horizontal',
+		icon: isRTL() ? textHorizontalRTL : textHorizontal,
 	},
 	{
-		label: __( 'Vertical' ),
-		value: isRTL() ? 'vertical-lr' : 'vertical-rl',
-		icon: textVertical,
+		name: __( 'Top to bottom' ),
+		value: 'top-to-bottom',
+		icon: isRTL() ? textVerticalRTL : textVertical,
+	},
+	{
+		name: __( 'Upright' ),
+		value: 'upright',
+		icon: textUpright,
 	},
 ];
 

packages/block-editor/src/hooks/supports.js

@@ -40,6 +40,11 @@ const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
  * e.g. settings found in `block.json`.
  */
 const WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode';
+/**
+ * Key within block settings' supports array indicating support for text orientation
+ * e.g. settings found in `block.json`.
+ */
+const TEXT_ORIENTATION_SUPPORT_KEY = 'typography.__experimentalTextOrientation';
 /**
  * Key within block settings' supports array indicating support for text
  * transforms e.g. settings found in `block.json`.
@@ -63,6 +68,7 @@ const TYPOGRAPHY_SUPPORT_KEYS = [
 	TEXT_DECORATION_SUPPORT_KEY,
 	TEXT_TRANSFORM_SUPPORT_KEY,
 	WRITING_MODE_SUPPORT_KEY,
+	TEXT_ORIENTATION_SUPPORT_KEY,
 	LETTER_SPACING_SUPPORT_KEY,
 ];
 const EFFECTS_SUPPORT_KEYS = [ 'shadow' ];

packages/block-editor/src/hooks/utils.js

@@ -237,6 +237,7 @@ export function useBlockSettings( name, parentLayout ) {
 		textColumns,
 		textDecoration,
 		writingMode,
+		textOrientation,
 		textTransform,
 		letterSpacing,
 		padding,
@@ -294,6 +295,7 @@ export function useBlockSettings( name, parentLayout ) {
 		'typography.textColumns',
 		'typography.textDecoration',
 		'typography.writingMode',
+		'typography.textOrientation',
 		'typography.textTransform',
 		'typography.letterSpacing',
 		'spacing.padding',
@@ -391,6 +393,7 @@ export function useBlockSettings( name, parentLayout ) {
 				textTransform,
 				letterSpacing,
 				writingMode,
+				textOrientation,
 			},
 			spacing: {
 				spacingSizes: {
@@ -439,6 +442,7 @@ export function useBlockSettings( name, parentLayout ) {
 		textTransform,
 		letterSpacing,
 		writingMode,
+		textOrientation,
 		padding,
 		margin,
 		blockGap,

packages/block-editor/src/style.scss

@@ -43,6 +43,8 @@
 @import "./components/segmented-text-control/style.scss";
 @import "./components/skip-to-selected-block/style.scss";
 @import "./components/tabbed-sidebar/style.scss";
+@import "./components/text-transform-control/style.scss";
+@import "./components/writing-mode-control/style.scss";
 @import "./components/tool-selector/style.scss";
 @import "./components/url-input/style.scss";
 @import "./components/url-popover/style.scss";

packages/block-library/src/paragraph/block.json

@@ -65,6 +65,7 @@
 			"__experimentalLetterSpacing": true,
 			"__experimentalTextTransform": true,
 			"__experimentalWritingMode": true,
+			"__experimentalTextOrientation": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

packages/block-library/src/post-navigation-link/block.json

@@ -51,6 +51,7 @@
 			"__experimentalTextDecoration": true,
 			"__experimentalLetterSpacing": true,
 			"__experimentalWritingMode": true,
+			"__experimentalTextOrientation": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

packages/blocks/src/api/constants.js

@@ -258,6 +258,11 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 		support: [ 'typography', '__experimentalWritingMode' ],
 		useEngine: true,
 	},
+	textOrientation: {
+		value: [ 'typography', 'textOrientation' ],
+		support: [ 'typography', '__experimentalTextOrientation' ],
+		useEngine: true,
+	},
 	'--wp--style--root--padding': {
 		value: [ 'spacing', 'padding' ],
 		support: [ 'spacing', 'padding' ],