WIP Add/text orientation block support

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

@@ -91,6 +91,7 @@ Settings related to typography.
 | letterSpacing | boolean | true |  |
 | lineHeight | boolean | false |  |
 | textDecoration | boolean | true |  |
+| writingMode | boolean | true |  |
 | textTransform | boolean | true |  |
 | dropCap | boolean | true |  |
 | fontSizes | array |  | name, size, slug |
@@ -157,6 +158,7 @@ Typography styles.
 | letterSpacing | string |  |
 | lineHeight | string |  |
 | textDecoration | string |  |
+| writingMode | string |  |
 | textTransform | string |  |
 
 ---

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

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

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

@@ -16,6 +16,47 @@
  */
 class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_5_9 {
 
+	/**
+	 * Metadata for style properties.
+	 *
+	 * Each element is a direct mapping from the CSS property name to the
+	 * path to the value in theme.json & block attributes.
+	 */
+	const PROPERTIES_METADATA = array(
+		'background'                 => array( 'color', 'gradient' ),
+		'background-color'           => array( 'color', 'background' ),
+		'border-radius'              => array( 'border', 'radius' ),
+		'border-top-left-radius'     => array( 'border', 'radius', 'topLeft' ),
+		'border-top-right-radius'    => array( 'border', 'radius', 'topRight' ),
+		'border-bottom-left-radius'  => array( 'border', 'radius', 'bottomLeft' ),
+		'border-bottom-right-radius' => array( 'border', 'radius', 'bottomRight' ),
+		'border-color'               => array( 'border', 'color' ),
+		'border-width'               => array( 'border', 'width' ),
+		'border-style'               => array( 'border', 'style' ),
+		'color'                      => array( 'color', 'text' ),
+		'font-family'                => array( 'typography', 'fontFamily' ),
+		'font-size'                  => array( 'typography', 'fontSize' ),
+		'font-style'                 => array( 'typography', 'fontStyle' ),
+		'font-weight'                => array( 'typography', 'fontWeight' ),
+		'letter-spacing'             => array( 'typography', 'letterSpacing' ),
+		'line-height'                => array( 'typography', 'lineHeight' ),
+		'margin'                     => array( 'spacing', 'margin' ),
+		'margin-top'                 => array( 'spacing', 'margin', 'top' ),
+		'margin-right'               => array( 'spacing', 'margin', 'right' ),
+		'margin-bottom'              => array( 'spacing', 'margin', 'bottom' ),
+		'margin-left'                => array( 'spacing', 'margin', 'left' ),
+		'padding'                    => array( 'spacing', 'padding' ),
+		'padding-top'                => array( 'spacing', 'padding', 'top' ),
+		'padding-right'              => array( 'spacing', 'padding', 'right' ),
+		'padding-bottom'             => array( 'spacing', 'padding', 'bottom' ),
+		'padding-left'               => array( 'spacing', 'padding', 'left' ),
+		'--wp--style--block-gap'     => array( 'spacing', 'blockGap' ),
+		'text-decoration'            => array( 'typography', 'textDecoration' ),
+		'text-transform'             => array( 'typography', 'textTransform' ),
+		'filter'                     => array( 'filter', 'duotone' ),
+		'writing-mode'               => array( 'typography', 'writingMode' ),
+	);
+
 	/**
 	 * The top-level keys a theme.json can have.
 	 *
@@ -30,6 +71,96 @@ class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_5_9 {
 		'version',
 	);
 
+	/**
+	 * The valid properties under the settings key.
+	 *
+	 * @var array
+	 */
+	const VALID_SETTINGS = array(
+		'appearanceTools' => null,
+		'border'          => array(
+			'color'  => null,
+			'radius' => null,
+			'style'  => null,
+			'width'  => null,
+		),
+		'color'           => array(
+			'background'       => null,
+			'custom'           => null,
+			'customDuotone'    => null,
+			'customGradient'   => null,
+			'defaultGradients' => null,
+			'defaultPalette'   => null,
+			'duotone'          => null,
+			'gradients'        => null,
+			'link'             => null,
+			'palette'          => null,
+			'text'             => null,
+		),
+		'custom'          => null,
+		'layout'          => array(
+			'contentSize' => null,
+			'wideSize'    => null,
+		),
+		'spacing'         => array(
+			'blockGap' => null,
+			'margin'   => null,
+			'padding'  => null,
+			'units'    => null,
+		),
+		'typography'      => array(
+			'customFontSize' => null,
+			'dropCap'        => null,
+			'fontFamilies'   => null,
+			'fontSizes'      => null,
+			'fontStyle'      => null,
+			'fontWeight'     => null,
+			'letterSpacing'  => null,
+			'lineHeight'     => null,
+			'textDecoration' => null,
+			'textTransform'  => null,
+			'writingMode'    => null,
+		),
+	);
+
+	/**
+	 * The valid properties under the styles key.
+	 *
+	 * @var array
+	 */
+	const VALID_STYLES = array(
+		'border'     => array(
+			'color'  => null,
+			'radius' => null,
+			'style'  => null,
+			'width'  => null,
+		),
+		'color'      => array(
+			'background' => null,
+			'gradient'   => null,
+			'text'       => null,
+		),
+		'filter'     => array(
+			'duotone' => null,
+		),
+		'spacing'    => array(
+			'margin'   => null,
+			'padding'  => null,
+			'blockGap' => 'top',
+		),
+		'typography' => array(
+			'fontFamily'     => null,
+			'fontSize'       => null,
+			'fontStyle'      => null,
+			'fontWeight'     => null,
+			'letterSpacing'  => null,
+			'lineHeight'     => null,
+			'textDecoration' => null,
+			'textTransform'  => null,
+			'writingMode'    => null,
+		),
+	);
+
 	/**
 	 * Returns the current theme's wanted patterns(slugs) to be
 	 * registered from Pattern Directory.

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/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 ),
 	];