Add text-orientation to the typography block support

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

@@ -188,6 +188,7 @@ Settings related to typography.
 | textColumns | boolean | false |  |
 | textDecoration | boolean | true |  |
 | writingMode | boolean | false |  |
+| textOrientation | boolean | false |  |
 | textTransform | boolean | true |  |
 | dropCap | boolean | true |  |
 | fontSizes | array |  | fluid, name, size, slug |

lib/block-supports/typography.php

@@ -89,16 +89,17 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 		return array();
 	}
 
-	$has_font_family_support     = $typography_supports['__experimentalFontFamily'] ?? false;
-	$has_font_size_support       = $typography_supports['fontSize'] ?? false;
-	$has_font_style_support      = $typography_supports['__experimentalFontStyle'] ?? false;
-	$has_font_weight_support     = $typography_supports['__experimentalFontWeight'] ?? false;
-	$has_letter_spacing_support  = $typography_supports['__experimentalLetterSpacing'] ?? false;
-	$has_line_height_support     = $typography_supports['lineHeight'] ?? false;
-	$has_text_columns_support    = $typography_supports['textColumns'] ?? false;
-	$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_font_family_support      = $typography_supports['__experimentalFontFamily'] ?? false;
+	$has_font_size_support        = $typography_supports['fontSize'] ?? false;
+	$has_font_style_support       = $typography_supports['__experimentalFontStyle'] ?? false;
+	$has_font_weight_support      = $typography_supports['__experimentalFontWeight'] ?? false;
+	$has_letter_spacing_support   = $typography_supports['__experimentalLetterSpacing'] ?? false;
+	$has_line_height_support      = $typography_supports['lineHeight'] ?? false;
+	$has_text_columns_support     = $typography_supports['textColumns'] ?? false;
+	$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' );
@@ -111,6 +112,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 ) {
@@ -164,6 +166,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

@@ -346,9 +346,11 @@ class WP_Theme_JSON_Gutenberg {
 	 * @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(
@@ -414,19 +416,20 @@ class WP_Theme_JSON_Gutenberg {
 			'defaultPresets' => null,
 		),
 		'typography'                    => array(
-			'fluid'          => null,
-			'customFontSize' => null,
-			'dropCap'        => null,
-			'fontFamilies'   => null,
-			'fontSizes'      => null,
-			'fontStyle'      => null,
-			'fontWeight'     => null,
-			'letterSpacing'  => null,
-			'lineHeight'     => null,
-			'textColumns'    => null,
-			'textDecoration' => null,
-			'textTransform'  => null,
-			'writingMode'    => null,
+			'fluid'           => null,
+			'customFontSize'  => null,
+			'dropCap'         => null,
+			'fontFamilies'    => null,
+			'fontSizes'       => null,
+			'fontStyle'       => null,
+			'fontWeight'      => null,
+			'letterSpacing'   => null,
+			'lineHeight'      => null,
+			'textColumns'     => null,
+			'textDecoration'  => null,
+			'textTransform'   => null,
+			'writingMode'     => null,
+			'textOrientation' => null,
 		),
 	);
 
@@ -466,7 +469,9 @@ class WP_Theme_JSON_Gutenberg {
 	 *              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.
+	 *              added `textOrientation` to `typography`.
 	 *
 	 * @var array
 	 */
@@ -512,16 +517,17 @@ class WP_Theme_JSON_Gutenberg {
 			'blockGap' => null,
 		),
 		'typography' => array(
-			'fontFamily'     => null,
-			'fontSize'       => null,
-			'fontStyle'      => null,
-			'fontWeight'     => null,
-			'letterSpacing'  => null,
-			'lineHeight'     => null,
-			'textColumns'    => null,
-			'textDecoration' => null,
-			'textTransform'  => null,
-			'writingMode'    => null,
+			'fontFamily'      => null,
+			'fontSize'        => null,
+			'fontStyle'       => null,
+			'fontWeight'      => null,
+			'letterSpacing'   => null,
+			'lineHeight'      => 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

@@ -125,6 +125,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.5/script-loader.php';
 
 // WordPress 6.6 compat.
+require __DIR__ . '/compat/wordpress-6.6/kses.php';
 require __DIR__ . '/compat/wordpress-6.6/block-bindings/pattern-overrides.php';
 
 // Experimental features.

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

@@ -78,6 +78,7 @@ const VALID_SETTINGS = [
 	'typography.textDecoration',
 	'typography.textTransform',
 	'typography.writingMode',
+	'typography.textOrientation',
 ];
 
 export const useGlobalStylesReset = () => {
@@ -292,6 +293,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 } from '@wordpress/element';
 
 /**
@@ -315,20 +315,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 ]
+	);
 
 	const resetAllFilter = useCallback( ( previousValue ) => {
 		return {
@@ -475,23 +530,6 @@ export default function TypographyPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
-			{ hasWritingModeControl && (
-				<ToolsPanelItem
-					className="single-column"
-					label={ __( 'Text 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' ) }
@@ -510,6 +548,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

@@ -8,18 +8,29 @@ import classnames from 'classnames';
  */
 import { BaseControl, Button } from '@wordpress/components';
 import { __, isRTL } from '@wordpress/i18n';
-import { textHorizontal, textVertical } from '@wordpress/icons';
+import {
+	textHorizontal,
+	textHorizontalRTL,
+	textUpright,
+	textVertical,
+	textVerticalRTL,
+} from '@wordpress/icons';
 
 const WRITING_MODES = [
 	{
 		name: __( 'Horizontal' ),
-		value: 'horizontal-tb',
-		icon: textHorizontal,
+		value: 'horizontal',
+		icon: isRTL() ? textHorizontalRTL : textHorizontal,
 	},
 	{
-		name: __( '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

@@ -35,6 +35,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`.
@@ -57,6 +62,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' ];