initial commit

lib/block-supports/typography.php

@@ -28,6 +28,7 @@ function gutenberg_register_typography_support( $block_type ) {
 	$has_line_height_support     = _wp_array_get( $typography_supports, array( 'lineHeight' ), false );
 	$has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
 	$has_text_transform_support  = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );
+	$has_writing_mode_support    = _wp_array_get( $typography_supports, array( '__experimentalWritingMode' ), false );
 
 	$has_typography_support = $has_font_family_support
 		|| $has_font_size_support
@@ -36,7 +37,8 @@ function gutenberg_register_typography_support( $block_type ) {
 		|| $has_letter_spacing_support
 		|| $has_line_height_support
 		|| $has_text_decoration_support
-		|| $has_text_transform_support;
+		|| $has_text_transform_support
+		|| $has_writing_mode_support;
 
 	if ( ! $block_type->attributes ) {
 		$block_type->attributes = array();
@@ -92,6 +94,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 	$has_line_height_support     = _wp_array_get( $typography_supports, array( 'lineHeight' ), false );
 	$has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
 	$has_text_transform_support  = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );
+	$has_writing_mode_support    = _wp_array_get( $typography_supports, array( '__experimentalWritingMode' ), false );
 
 	if ( $has_font_size_support ) {
 		$has_named_font_size  = array_key_exists( 'fontSize', $block_attributes );
@@ -165,6 +168,12 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 		}
 	}
 
+	if ( $has_writing_mode_support ) {
+		$writing_mode_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'writingMode', 'writing-mode' );
+		if ( $writing_mode_style ) {
+			$styles[] = $writing_mode_style;
+		}
+	}
 	if ( ! empty( $classes ) ) {
 		$attributes['class'] = implode( ' ', $classes );
 	}

lib/blocks.php

@@ -550,6 +550,7 @@ function gutenberg_migrate_old_typography_shape( $metadata ) {
 			'__experimentalFontWeight',
 			'__experimentalLetterSpacing',
 			'__experimentalTextDecoration',
+			'__experimentalOrientation',
 			'__experimentalTextTransform',
 			'fontSize',
 			'lineHeight',

lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php

@@ -181,6 +181,7 @@ class WP_Theme_JSON_Gutenberg {
 		'padding-left'               => array( 'spacing', 'padding', 'left' ),
 		'--wp--style--block-gap'     => array( 'spacing', 'blockGap' ),
 		'text-decoration'            => array( 'typography', 'textDecoration' ),
+		'writing-mode'               => array( 'typography', 'textOrientation' ),
 		'text-transform'             => array( 'typography', 'textTransform' ),
 		'filter'                     => array( 'filter', 'duotone' ),
 	);
@@ -249,16 +250,17 @@ class WP_Theme_JSON_Gutenberg {
 			'units'    => null,
 		),
 		'typography'      => array(
-			'customFontSize' => null,
-			'dropCap'        => null,
-			'fontFamilies'   => null,
-			'fontSizes'      => null,
-			'fontStyle'      => null,
-			'fontWeight'     => null,
-			'letterSpacing'  => null,
-			'lineHeight'     => null,
-			'textDecoration' => null,
-			'textTransform'  => null,
+			'customFontSize'  => null,
+			'dropCap'         => null,
+			'fontFamilies'    => null,
+			'fontSizes'       => null,
+			'fontStyle'       => null,
+			'fontWeight'      => null,
+			'letterSpacing'   => null,
+			'lineHeight'      => null,
+			'textDecoration'  => null,
+			'textTransform'   => null,
+			'writingMode'     => null,
 		),
 	);
 
@@ -288,14 +290,15 @@ class WP_Theme_JSON_Gutenberg {
 			'blockGap' => 'top',
 		),
 		'typography' => array(
-			'fontFamily'     => null,
-			'fontSize'       => null,
-			'fontStyle'      => null,
-			'fontWeight'     => null,
-			'letterSpacing'  => null,
-			'lineHeight'     => null,
-			'textDecoration' => null,
-			'textTransform'  => null,
+			'fontFamily'      => null,
+			'fontSize'        => null,
+			'fontStyle'       => null,
+			'fontWeight'      => null,
+			'letterSpacing'   => null,
+			'lineHeight'      => null,
+			'textDecoration'  => null,
+			'textTransform'   => null,
+			'writingMode'     => null,
 		),
 	);
 

packages/block-editor/src/components/index.js

@@ -47,6 +47,7 @@ export { default as __experimentalFontAppearanceControl } from './font-appearanc
 export { default as __experimentalFontFamilyControl } from './font-family';
 export { default as __experimentalLetterSpacingControl } from './letter-spacing-control';
 export { default as __experimentalTextDecorationControl } from './text-decoration-control';
+export { default as experimentalWritingModeControl } from './writing-mode-control';
 export { default as __experimentalTextTransformControl } from './text-transform-control';
 export { default as __experimentalColorGradientControl } from './colors-gradients/control';
 export { default as __experimentalColorGradientSettingsDropdown } from './colors-gradients/dropdown';

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

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { arrowDown, arrowRight } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+const WRITING_MODES = [
+	{
+		name: __( 'Horizontal (default)' ),
+		value: 'horizontal-tb',
+		icon: arrowRight,
+	},
+	{
+		name: __( 'Vertical - right to left' ),
+		value: 'vertical-rl',
+		icon: arrowDown,
+	},
+];
+
+/**
+ * Control to facilitate writing mode selections.
+ *
+ * @param {Object}   props          Component props.
+ * @param {string}   props.value    Currently selected writing mode.
+ * @param {Function} props.onChange Handles change in writing mode selection.
+ *
+ * @return {WPElement} Writing mode control.
+ */
+export default function WritingModeControl( { value, onChange } ) {
+	return (
+		<fieldset className="block-editor-writing-mode-control">
+			<legend>{ __( 'Orientation' ) }</legend>
+			<div className="block-editor-writing-mode-control__buttons">
+				{ WRITING_MODES.map( ( writingMode ) => {
+					return (
+						<Button
+							key={ writingMode.value }
+							icon={ writingMode.icon }
+							isSmall
+							isPressed={ writingMode.value === value }
+							onClick={ () =>
+								onChange(
+									writingMode.value === value
+										? undefined
+										: writingMode.value
+								)
+							}
+							aria-label={ writingMode.name }
+						/>
+					);
+				} ) }
+			</div>
+		</fieldset>
+	);
+}

packages/block-editor/src/components/writing-mode-control/style.scss

@@ -0,0 +1,18 @@
+.block-editor-writing-mode-control {
+	flex: 0 0 50%;
+
+	legend {
+		margin-bottom: 8px;
+	}
+
+	.block-editor-writing-mode-control__buttons {
+		display: inline-flex;
+		margin-bottom: 24px;
+
+		.components-button.has-icon {
+			min-width: 24px;
+			padding: 0;
+			margin-right: 4px;
+		}
+	}
+}

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

@@ -84,7 +84,6 @@ export function getInlineStyles( styles = {} ) {
 			// Checking if style value is a string allows for shorthand css
 			// option and backwards compatibility for border radius support.
 			const styleValue = get( styles, path );
-
 			if ( !! subPaths && ! isString( styleValue ) ) {
 				Object.entries( subPaths ).forEach( ( entry ) => {
 					const [ name, subPath ] = entry;

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

@@ -49,6 +49,13 @@ import {
 	resetTextDecoration,
 	useIsTextDecorationDisabled,
 } from './text-decoration';
+import {
+	WRITING_MODE_SUPPORT_KEY,
+	WritingModeEdit,
+	hasWritingModeValue,
+	resetWritingMode,
+	useIsWritingModeDisabled,
+} from './writing-mode';
 import {
 	TEXT_TRANSFORM_SUPPORT_KEY,
 	TextTransformEdit,
@@ -72,6 +79,7 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [
 	FONT_WEIGHT_SUPPORT_KEY,
 	FONT_FAMILY_SUPPORT_KEY,
 	TEXT_DECORATION_SUPPORT_KEY,
+	WRITING_MODE_SUPPORT_KEY,
 	TEXT_TRANSFORM_SUPPORT_KEY,
 	LETTER_SPACING_SUPPORT_KEY,
 ];
@@ -83,6 +91,7 @@ export function TypographyPanel( props ) {
 	const isFontAppearanceDisabled = useIsFontAppearanceDisabled( props );
 	const isLineHeightDisabled = useIsLineHeightDisabled( props );
 	const isTextDecorationDisabled = useIsTextDecorationDisabled( props );
+	const isWritingModeDisabled = useIsWritingModeDisabled( props );
 	const isTextTransformDisabled = useIsTextTransformDisabled( props );
 	const isLetterSpacingDisabled = useIsLetterSpacingDisabled( props );
 
@@ -227,6 +236,19 @@ export function TypographyPanel( props ) {
 					<LetterSpacingEdit { ...props } />
 				</ToolsPanelItem>
 			) }
+			{ ! isWritingModeDisabled && (
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ () => hasWritingModeValue( props ) }
+					label={ __( 'Orientation' ) }
+					onDeselect={ () => resetWritingMode( props ) }
+					isShownByDefault={ defaultControls?.writingMode }
+					resetAllFilter={ createResetAllFilter( 'writingMode' ) }
+					panelId={ clientId }
+				>
+					<WritingModeEdit { ...props } />
+				</ToolsPanelItem>
+			) }
 		</InspectorControls>
 	);
 }
@@ -244,6 +266,7 @@ function useIsTypographyDisabled( props = {} ) {
 		useIsLineHeightDisabled( props ),
 		useIsFontFamilyDisabled( props ),
 		useIsTextDecorationDisabled( props ),
+		useIsWritingModeDisabled( props ),
 		useIsTextTransformDisabled( props ),
 		useIsLetterSpacingDisabled( props ),
 	];