From 89ab1e53d6204015a1fb659d6b72ba45050c3e6f Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 14 Jul 2023 06:23:56 +0200 Subject: [PATCH 01/41] Add text-orientation to the typography block support --- .../theme-json-reference/theme-json-living.md | 2 + lib/block-supports/typography.php | 50 +++++++----- lib/class-wp-theme-json-gutenberg.php | 53 +++++++------ lib/theme.json | 3 +- .../src/components/global-styles/hooks.js | 2 + .../global-styles/typography-panel.js | 78 ++++++++++++++----- packages/block-editor/src/components/index.js | 1 + .../text-orientation-control/index.js | 72 +++++++++++++++++ .../text-orientation-control/style.scss | 19 +++++ .../components/writing-mode-control/index.js | 2 +- packages/block-editor/src/hooks/supports.js | 6 ++ packages/block-editor/src/hooks/typography.js | 2 + packages/block-editor/src/hooks/utils.js | 3 + packages/block-editor/src/style.scss | 2 + .../block-library/src/paragraph/block.json | 1 + packages/blocks/src/api/constants.js | 5 ++ packages/icons/src/index.js | 2 + packages/icons/src/library/text-mixed.js | 12 +++ packages/icons/src/library/text-upright.js | 12 +++ .../style-engine/class-wp-style-engine.php | 6 ++ .../src/styles/typography/index.ts | 13 ++++ packages/style-engine/src/types.ts | 1 + schemas/json/theme.json | 16 ++++ 23 files changed, 298 insertions(+), 65 deletions(-) create mode 100644 packages/block-editor/src/components/text-orientation-control/index.js create mode 100644 packages/block-editor/src/components/text-orientation-control/style.scss create mode 100644 packages/icons/src/library/text-mixed.js create mode 100644 packages/icons/src/library/text-upright.js diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md index 4890386ca8333e..2b5e7e3052a796 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -182,6 +182,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 | @@ -264,6 +265,7 @@ Typography styles. | textColumns | string | | | textDecoration | string, object | | | writingMode | string, object | | +| textOrientation | string, object | | | textTransform | string, object | | --- diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 1e8c894387de62..02f80bef1e932e 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -20,16 +20,17 @@ function gutenberg_register_typography_support( $block_type ) { return; } - $has_font_family_support = _wp_array_get( $typography_supports, array( '__experimentalFontFamily' ), false ); - $has_font_size_support = _wp_array_get( $typography_supports, array( 'fontSize' ), false ); - $has_font_style_support = _wp_array_get( $typography_supports, array( '__experimentalFontStyle' ), false ); - $has_font_weight_support = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false ); - $has_letter_spacing_support = _wp_array_get( $typography_supports, array( '__experimentalLetterSpacing' ), false ); - $has_line_height_support = _wp_array_get( $typography_supports, array( 'lineHeight' ), false ); - $has_text_columns_support = _wp_array_get( $typography_supports, array( 'textColumns' ), 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_font_family_support = _wp_array_get( $typography_supports, array( '__experimentalFontFamily' ), false ); + $has_font_size_support = _wp_array_get( $typography_supports, array( 'fontSize' ), false ); + $has_font_style_support = _wp_array_get( $typography_supports, array( '__experimentalFontStyle' ), false ); + $has_font_weight_support = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false ); + $has_letter_spacing_support = _wp_array_get( $typography_supports, array( '__experimentalLetterSpacing' ), false ); + $has_line_height_support = _wp_array_get( $typography_supports, array( 'lineHeight' ), false ); + $has_text_columns_support = _wp_array_get( $typography_supports, array( 'textColumns' ), 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_text_orientation_support = _wp_array_get( $typography_supports, array( '__experimentalTextOrientation' ), false ); $has_typography_support = $has_font_family_support || $has_font_size_support @@ -40,7 +41,8 @@ function gutenberg_register_typography_support( $block_type ) { || $has_text_columns_support || $has_text_decoration_support || $has_text_transform_support - || $has_writing_mode_support; + || $has_writing_mode_support + || $has_text_orientation_support; if ( ! $block_type->attributes ) { $block_type->attributes = array(); @@ -89,16 +91,17 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { return array(); } - $has_font_family_support = _wp_array_get( $typography_supports, array( '__experimentalFontFamily' ), false ); - $has_font_size_support = _wp_array_get( $typography_supports, array( 'fontSize' ), false ); - $has_font_style_support = _wp_array_get( $typography_supports, array( '__experimentalFontStyle' ), false ); - $has_font_weight_support = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false ); - $has_letter_spacing_support = _wp_array_get( $typography_supports, array( '__experimentalLetterSpacing' ), false ); - $has_line_height_support = _wp_array_get( $typography_supports, array( 'lineHeight' ), false ); - $has_text_columns_support = _wp_array_get( $typography_supports, array( 'textColumns' ), 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_font_family_support = _wp_array_get( $typography_supports, array( '__experimentalFontFamily' ), false ); + $has_font_size_support = _wp_array_get( $typography_supports, array( 'fontSize' ), false ); + $has_font_style_support = _wp_array_get( $typography_supports, array( '__experimentalFontStyle' ), false ); + $has_font_weight_support = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false ); + $has_letter_spacing_support = _wp_array_get( $typography_supports, array( '__experimentalLetterSpacing' ), false ); + $has_line_height_support = _wp_array_get( $typography_supports, array( 'lineHeight' ), false ); + $has_text_columns_support = _wp_array_get( $typography_supports, array( 'textColumns' ), 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_text_orientation_support = _wp_array_get( $typography_supports, array( '__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 +114,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 ) { @@ -166,6 +170,10 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { $typography_block_styles['writingMode'] = _wp_array_get( $block_attributes, array( 'style', 'typography', 'writingMode' ), null ); } + 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(); $styles = gutenberg_style_engine_get_styles( array( 'typography' => $typography_block_styles ), diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 64b29497bef729..f9ef551d7a3148 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -207,6 +207,7 @@ class WP_Theme_JSON_Gutenberg { * removed the `--wp--style--block-gap` property. * @since 6.2.0 Added `outline-*`, and `min-height` properties. * @since 6.3.0 Added `writing-mode` property. + * @since 6.4.0 Added `text-orientation` property. * * @var array */ @@ -266,6 +267,7 @@ class WP_Theme_JSON_Gutenberg { 'filter' => array( 'filter', 'duotone' ), 'box-shadow' => array( 'shadow' ), 'writing-mode' => array( 'typography', 'writingMode' ), + 'text-orientation' => array( 'typography', 'textOrientation' ), ); /** @@ -346,7 +348,8 @@ class WP_Theme_JSON_Gutenberg { * `position.fixed` and `position.sticky`. * @since 6.3.0 Removed `layout.definitions`. Added `typography.writingMode`. * @since 6.4.0 Added `layout.allowEditing`. - * @since 6.4.0 Added `lightbox`. + * Added `lightbox`. + * Added `typography.textOrientation`. * @var array */ const VALID_SETTINGS = array( @@ -409,19 +412,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, ), ); @@ -474,16 +478,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, ); diff --git a/lib/theme.json b/lib/theme.json index 671dd50227852b..e5a714d56d5988 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -265,7 +265,8 @@ "textColumns": false, "textDecoration": true, "textTransform": true, - "writingMode": false + "writingMode": false, + "textOrientation": false }, "blocks": { "core/button": { diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js index 4bbc9c40588e03..51f09d9d67dc40 100644 --- a/packages/block-editor/src/components/global-styles/hooks.js +++ b/packages/block-editor/src/components/global-styles/hooks.js @@ -74,6 +74,7 @@ const VALID_SETTINGS = [ 'typography.textDecoration', 'typography.textTransform', 'typography.writingMode', + 'typography.textOrientation', ]; export const useGlobalStylesReset = () => { @@ -288,6 +289,7 @@ export function useSettingsForBlockElement( 'textTransform', 'textDecoration', 'writingMode', + 'textOrientation', ].forEach( ( key ) => { if ( ! supportedStyles.includes( key ) ) { updatedSettings.typography = { diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index c6ab607347f729..051a4c473cd350 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -20,6 +20,7 @@ import LetterSpacingControl from '../letter-spacing-control'; import TextTransformControl from '../text-transform-control'; import TextDecorationControl from '../text-decoration-control'; import WritingModeControl from '../writing-mode-control'; +import TextOrientationControl from '../text-orientation-control'; import { getValueFromVariable } from './utils'; import { setImmutably } from '../../utils/object'; @@ -34,6 +35,7 @@ export function useHasTypographyPanel( settings ) { const hasTextTransform = useHasTextTransformControl( settings ); const hasTextDecoration = useHasTextDecorationControl( settings ); const hasWritingMode = useHasWritingModeControl( settings ); + const hasTextOrientation = useHasTextOrientationControl( settings ); const hasTextColumns = useHasTextColumnsControl( settings ); const hasFontSize = useHasFontSizeControl( settings ); @@ -46,6 +48,7 @@ export function useHasTypographyPanel( settings ) { hasFontSize || hasTextDecoration || hasWritingMode || + hasTextOrientation || hasTextColumns ); } @@ -110,6 +113,10 @@ function useHasWritingModeControl( settings ) { return settings?.typography?.writingMode; } +function useHasTextOrientationControl( settings ) { + return settings?.typography?.textOrientation; +} + function useHasTextColumnsControl( settings ) { return settings?.typography?.textColumns; } @@ -330,7 +337,7 @@ 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 ) => { @@ -345,6 +352,23 @@ export default function TypographyPanel( { const hasWritingMode = () => !! value?.typography?.writingMode; const resetWritingMode = () => setWritingMode( undefined ); + // Text Orientation + const hasTextOrientationControl = useHasTextOrientationControl( settings ); + const textOrientation = decodeValue( + inheritedValue?.typography?.textOrientation + ); + const setTextOrientation = ( newValue ) => { + onChange( + setImmutably( + value, + [ 'typography', 'textOrientation' ], + newValue || undefined + ) + ); + }; + const hasTextOrientation = () => !! value?.typography?.textOrientation; + const resetTextOrientation = () => setTextOrientation( undefined ); + const resetAllFilter = useCallback( ( previousValue ) => { return { ...previousValue, @@ -491,23 +515,6 @@ export default function TypographyPanel( { /> ) } - { hasWritingModeControl && ( - - - - ) } { hasTextTransformControl && ( ) } + { hasWritingModeControl && ( + + + { hasTextOrientationControl && ( + + ) } + + ) } ); } diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 6edcd460e31ac4..9a8218cc8bfd50 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -51,6 +51,7 @@ export { default as __experimentalLetterSpacingControl } from './letter-spacing- export { default as __experimentalTextDecorationControl } from './text-decoration-control'; export { default as __experimentalTextTransformControl } from './text-transform-control'; export { default as __experimentalWritingModeControl } from './writing-mode-control'; +export { default as __experimentalTextOrientationControl } from './text-orientation-control'; export { default as __experimentalColorGradientControl } from './colors-gradients/control'; export { default as __experimentalColorGradientSettingsDropdown } from './colors-gradients/dropdown'; export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings'; diff --git a/packages/block-editor/src/components/text-orientation-control/index.js b/packages/block-editor/src/components/text-orientation-control/index.js new file mode 100644 index 00000000000000..1b97643bcb3c60 --- /dev/null +++ b/packages/block-editor/src/components/text-orientation-control/index.js @@ -0,0 +1,72 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { BaseControl, Button } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { textMixed, textUpright } from '@wordpress/icons'; + +const TEXT_ORIENTATIONS = [ + { + name: __( 'Upright' ), + value: 'upright', + icon: textUpright, + }, + { + name: __( 'Mixed' ), + value: 'mixed', + icon: textMixed, + }, +]; + +/** + * Control to facilitate text orientation selections. + * + * @param {Object} props Component props. + * @param {string} props.className Class name to add to the control. + * @param {string} props.value Currently selected text orientation. + * @param {Function} props.onChange Handles change in the text orientation selection. + * + * @return {WPElement} Text Orientation control. + */ +export default function TextOrientationControl( { + className, + value, + onChange, +} ) { + return ( +
+ + { __( 'Orientation' ) } + +
+ { TEXT_ORIENTATIONS.map( ( textOrientation ) => { + return ( +
+
+ ); +} diff --git a/packages/block-editor/src/components/text-orientation-control/style.scss b/packages/block-editor/src/components/text-orientation-control/style.scss new file mode 100644 index 00000000000000..f95f68cc0617b4 --- /dev/null +++ b/packages/block-editor/src/components/text-orientation-control/style.scss @@ -0,0 +1,19 @@ +.block-editor-text-orientation-control { + grid-column: 2/2; + border: 0; + margin: 0; + padding: 0; + + .block-editor-text-orientation__buttons { + // 4px of padding makes the row 40px high, same as an input. + padding: $grid-unit-05 0; + display: flex; + } + + .components-button.has-icon { + height: $grid-unit-40; + margin-right: $grid-unit-05; + min-width: $grid-unit-40; + padding: 0; + } +} diff --git a/packages/block-editor/src/components/writing-mode-control/index.js b/packages/block-editor/src/components/writing-mode-control/index.js index 99acc34570e99f..de5c7a3c1b6849 100644 --- a/packages/block-editor/src/components/writing-mode-control/index.js +++ b/packages/block-editor/src/components/writing-mode-control/index.js @@ -42,7 +42,7 @@ export default function WritingModeControl( { className, value, onChange } ) { ) } > - { __( 'Orientation' ) } + { __( 'Writing Mode' ) }
{ WRITING_MODES.map( ( writingMode ) => { diff --git a/packages/block-editor/src/hooks/supports.js b/packages/block-editor/src/hooks/supports.js index 2cf08d46fa8fe2..75882d403c684e 100644 --- a/packages/block-editor/src/hooks/supports.js +++ b/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 SPACING_SUPPORT_KEY = 'spacing'; diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js index c7d1a6ba3b1443..976e6438c8c12f 100644 --- a/packages/block-editor/src/hooks/typography.js +++ b/packages/block-editor/src/hooks/typography.js @@ -31,6 +31,7 @@ const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns'; const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle'; const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight'; const WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode'; +const TEXT_ORIENTATION_SUPPORT_KEY = 'typography.__experimentalTextOrientation'; export const TYPOGRAPHY_SUPPORT_KEY = 'typography'; export const TYPOGRAPHY_SUPPORT_KEYS = [ LINE_HEIGHT_SUPPORT_KEY, @@ -41,6 +42,7 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [ TEXT_COLUMNS_SUPPORT_KEY, TEXT_DECORATION_SUPPORT_KEY, WRITING_MODE_SUPPORT_KEY, + TEXT_ORIENTATION_SUPPORT_KEY, TEXT_TRANSFORM_SUPPORT_KEY, LETTER_SPACING_SUPPORT_KEY, ]; diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js index f81fc118ea84bb..66de7ad53867f6 100644 --- a/packages/block-editor/src/hooks/utils.js +++ b/packages/block-editor/src/hooks/utils.js @@ -135,6 +135,7 @@ export function useBlockSettings( name, parentLayout ) { const textColumns = useSetting( 'typography.textColumns' ); const textDecoration = useSetting( 'typography.textDecoration' ); const writingMode = useSetting( 'typography.writingMode' ); + const textOrientation = useSetting( 'typography.textOrientation' ); const textTransform = useSetting( 'typography.textTransform' ); const letterSpacing = useSetting( 'typography.letterSpacing' ); const padding = useSetting( 'spacing.padding' ); @@ -215,6 +216,7 @@ export function useBlockSettings( name, parentLayout ) { textTransform, letterSpacing, writingMode, + textOrientation, }, spacing: { spacingSizes: { @@ -249,6 +251,7 @@ export function useBlockSettings( name, parentLayout ) { textTransform, letterSpacing, writingMode, + textOrientation, padding, margin, blockGap, diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 93ab3b69a7aad3..fe1ce080aa75c8 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -43,6 +43,8 @@ @import "./components/skip-to-selected-block/style.scss"; @import "./components/text-decoration-control/style.scss"; @import "./components/text-transform-control/style.scss"; +@import "./components/text-orientation-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"; diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json index 85f56f4a838f50..2233be4fa80134 100644 --- a/packages/block-library/src/paragraph/block.json +++ b/packages/block-library/src/paragraph/block.json @@ -61,6 +61,7 @@ "__experimentalLetterSpacing": true, "__experimentalTextTransform": true, "__experimentalWritingMode": true, + "__experimentalTextOrientation": true, "__experimentalDefaultControls": { "fontSize": true } diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index 2afdee93278ce7..a7dd4490d3efd2 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -228,6 +228,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' ], diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index f135e77e066bed..69e653e37d8f5b 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -257,6 +257,8 @@ export { default as sidesTop } from './library/sides-top'; export { default as sidesVertical } from './library/sides-vertical'; export { default as textColor } from './library/text-color'; export { default as textHorizontal } from './library/text-horizontal'; +export { default as textMixed } from './library/text-mixed'; +export { default as textUpright } from './library/text-upright'; export { default as textVertical } from './library/text-vertical'; export { default as tablet } from './library/tablet'; export { default as title } from './library/title'; diff --git a/packages/icons/src/library/text-mixed.js b/packages/icons/src/library/text-mixed.js new file mode 100644 index 00000000000000..4dc10db36e54ff --- /dev/null +++ b/packages/icons/src/library/text-mixed.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const textMixed = ( + + + +); + +export default textMixed; diff --git a/packages/icons/src/library/text-upright.js b/packages/icons/src/library/text-upright.js new file mode 100644 index 00000000000000..03206357c6f9f9 --- /dev/null +++ b/packages/icons/src/library/text-upright.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const textUpright = ( + + + +); + +export default textUpright; diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index 6a61077c12ea24..93257f2103fbaf 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -270,6 +270,12 @@ final class WP_Style_Engine { ), 'path' => array( 'typography', 'writingMode' ), ), + 'textOrientation' => array( + 'property_keys' => array( + 'default' => 'text-orientation', + ), + 'path' => array( 'typography', 'textOrientation' ), + ), ), ); diff --git a/packages/style-engine/src/styles/typography/index.ts b/packages/style-engine/src/styles/typography/index.ts index 92c40d2e156198..afc6ba52f339d8 100644 --- a/packages/style-engine/src/styles/typography/index.ts +++ b/packages/style-engine/src/styles/typography/index.ts @@ -124,6 +124,18 @@ const writingMode = { }, }; +const textOrientation = { + name: 'textOrientation', + generate: ( style: Style, options: StyleOptions ) => { + return generateRule( + style, + options, + [ 'typography', 'textOrientation' ], + 'textOrientation' + ); + }, +}; + export default [ fontFamily, fontSize, @@ -135,4 +147,5 @@ export default [ textDecoration, textTransform, writingMode, + textOrientation, ]; diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts index f09f2c213eabb9..e069a2541e4e6c 100644 --- a/packages/style-engine/src/types.ts +++ b/packages/style-engine/src/types.ts @@ -63,6 +63,7 @@ export interface Style { textDecoration?: CSSProperties[ 'textDecoration' ]; textTransform?: CSSProperties[ 'textTransform' ]; writingMode?: CSSProperties[ 'writingMode' ]; + textOrientation?: CSSProperties[ 'textOrientation' ]; }; color?: { text?: CSSProperties[ 'color' ]; diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 5a0b049f6d0d5d..9cf864746f3fea 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -513,6 +513,11 @@ "type": "boolean", "default": false }, + "textOrientation": { + "description": "Allow users to set the text-orientation.", + "type": "boolean", + "default": false + }, "textTransform": { "description": "Allow users to set custom text transforms.", "type": "boolean", @@ -1593,6 +1598,17 @@ } ] }, + "textOrientation": { + "description": "Sets the `text-orientation` CSS property.", + "oneOf": [ + { + "type": "string" + }, + { + "$ref": "#/definitions/refComplete" + } + ] + }, "textTransform": { "description": "Sets the `text-transform` CSS property.", "oneOf": [ From 7ecad4d10401506b52833fac70e1e0cdecf84705 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 14 Jul 2023 07:05:15 +0200 Subject: [PATCH 02/41] Update class-wp-style-engine.php --- .../style-engine/class-wp-style-engine.php | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index 93257f2103fbaf..ccb829e6f12b5e 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -204,7 +204,7 @@ final class WP_Style_Engine { ), ), 'typography' => array( - 'fontSize' => array( + 'fontSize' => array( 'property_keys' => array( 'default' => 'font-size', ), @@ -213,7 +213,7 @@ final class WP_Style_Engine { 'has-$slug-font-size' => 'font-size', ), ), - 'fontFamily' => array( + 'fontFamily' => array( 'property_keys' => array( 'default' => 'font-family', ), @@ -222,55 +222,55 @@ final class WP_Style_Engine { 'has-$slug-font-family' => 'font-family', ), ), - 'fontStyle' => array( + 'fontStyle' => array( 'property_keys' => array( 'default' => 'font-style', ), 'path' => array( 'typography', 'fontStyle' ), ), - 'fontWeight' => array( + 'fontWeight' => array( 'property_keys' => array( 'default' => 'font-weight', ), 'path' => array( 'typography', 'fontWeight' ), ), - 'lineHeight' => array( + 'lineHeight' => array( 'property_keys' => array( 'default' => 'line-height', ), 'path' => array( 'typography', 'lineHeight' ), ), - 'textColumns' => array( + 'textColumns' => array( 'property_keys' => array( 'default' => 'column-count', ), 'path' => array( 'typography', 'textColumns' ), ), - 'textDecoration' => array( + 'textDecoration' => array( 'property_keys' => array( 'default' => 'text-decoration', ), 'path' => array( 'typography', 'textDecoration' ), ), - 'textTransform' => array( + 'textTransform' => array( 'property_keys' => array( 'default' => 'text-transform', ), 'path' => array( 'typography', 'textTransform' ), ), - 'letterSpacing' => array( + 'letterSpacing' => array( 'property_keys' => array( 'default' => 'letter-spacing', ), 'path' => array( 'typography', 'letterSpacing' ), ), - 'writingMode' => array( + 'writingMode' => array( 'property_keys' => array( 'default' => 'writing-mode', ), 'path' => array( 'typography', 'writingMode' ), ), - 'textOrientation' => array( + 'textOrientation' => array( 'property_keys' => array( 'default' => 'text-orientation', ), From 6288da81848d6958b07cdb5239a610e555cce326 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 10 Aug 2023 10:02:14 +0200 Subject: [PATCH 03/41] Update legends, hide text-orientation control unless the text is vertical --- .../global-styles/typography-panel.js | 24 ++++++++++++------- .../text-orientation-control/index.js | 2 +- .../text-orientation-control/style.scss | 7 +++++- .../components/writing-mode-control/index.js | 2 +- .../src/post-navigation-link/block.json | 1 + .../style-engine/class-wp-style-engine.php | 6 +++++ 6 files changed, 30 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index 051a4c473cd350..f220f468d3d89f 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -539,7 +539,11 @@ export default function TypographyPanel( { ! hasTextOrientationControl ? 'single-column' : '' } style={ - hasTextOrientationControl ? { display: 'grid' } : {} + hasTextOrientationControl && + ( writingMode === 'vertical-lr' || + writingMode === 'vertical-rl' ) + ? { display: 'grid' } + : {} } label={ __( 'Text orientation' ) } hasValue={ hasWritingMode && hasTextOrientation } @@ -558,14 +562,16 @@ export default function TypographyPanel( { : {} } /> - { hasTextOrientationControl && ( - - ) } + { hasTextOrientationControl && + ( writingMode === 'vertical-lr' || + writingMode === 'vertical-rl' ) && ( + + ) } ) } diff --git a/packages/block-editor/src/components/text-orientation-control/index.js b/packages/block-editor/src/components/text-orientation-control/index.js index 1b97643bcb3c60..9724113e4884a0 100644 --- a/packages/block-editor/src/components/text-orientation-control/index.js +++ b/packages/block-editor/src/components/text-orientation-control/index.js @@ -46,7 +46,7 @@ export default function TextOrientationControl( { ) } > - { __( 'Orientation' ) } + { __( 'Character rotation' ) }
{ TEXT_ORIENTATIONS.map( ( textOrientation ) => { diff --git a/packages/block-editor/src/components/text-orientation-control/style.scss b/packages/block-editor/src/components/text-orientation-control/style.scss index f95f68cc0617b4..3c164fa637fe79 100644 --- a/packages/block-editor/src/components/text-orientation-control/style.scss +++ b/packages/block-editor/src/components/text-orientation-control/style.scss @@ -4,7 +4,12 @@ margin: 0; padding: 0; - .block-editor-text-orientation__buttons { + // The legend is hidden, but takes up space so that the controls are aligned. + legend { + visibility: hidden; + } + + .block-editor-text-orientation-control__buttons { // 4px of padding makes the row 40px high, same as an input. padding: $grid-unit-05 0; display: flex; diff --git a/packages/block-editor/src/components/writing-mode-control/index.js b/packages/block-editor/src/components/writing-mode-control/index.js index de5c7a3c1b6849..99acc34570e99f 100644 --- a/packages/block-editor/src/components/writing-mode-control/index.js +++ b/packages/block-editor/src/components/writing-mode-control/index.js @@ -42,7 +42,7 @@ export default function WritingModeControl( { className, value, onChange } ) { ) } > - { __( 'Writing Mode' ) } + { __( 'Orientation' ) }
{ WRITING_MODES.map( ( writingMode ) => { diff --git a/packages/block-library/src/post-navigation-link/block.json b/packages/block-library/src/post-navigation-link/block.json index e1b6d4fa90a40c..f3c0124055e28f 100644 --- a/packages/block-library/src/post-navigation-link/block.json +++ b/packages/block-library/src/post-navigation-link/block.json @@ -46,6 +46,7 @@ "__experimentalTextDecoration": true, "__experimentalLetterSpacing": true, "__experimentalWritingMode": true, + "__experimentalTextOrientation": true, "__experimentalDefaultControls": { "fontSize": true } diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index ccb829e6f12b5e..9d0b9745cc0c6b 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -269,12 +269,18 @@ final class WP_Style_Engine { 'default' => 'writing-mode', ), 'path' => array( 'typography', 'writingMode' ), + 'classnames' => array( + 'has-writing-mode' => true, + ), ), 'textOrientation' => array( 'property_keys' => array( 'default' => 'text-orientation', ), 'path' => array( 'typography', 'textOrientation' ), + 'classnames' => array( + 'has-text-orientation' => true, + ), ), ), ); From 7d6465118b7b323d11456cc5217ba3c8a4566a1e Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 10 Aug 2023 10:09:06 +0200 Subject: [PATCH 04/41] Update class-wp-style-engine.php --- packages/style-engine/class-wp-style-engine.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index 9d0b9745cc0c6b..489434130aba01 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -270,7 +270,7 @@ final class WP_Style_Engine { ), 'path' => array( 'typography', 'writingMode' ), 'classnames' => array( - 'has-writing-mode' => true, + 'has-writing-mode' => true, ), ), 'textOrientation' => array( @@ -279,7 +279,7 @@ final class WP_Style_Engine { ), 'path' => array( 'typography', 'textOrientation' ), 'classnames' => array( - 'has-text-orientation' => true, + 'has-text-orientation' => true, ), ), ), From e4e680b16124b0fd97e7bd8d2e1146b5a2279b0d Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Tue, 15 Aug 2023 09:12:40 +0200 Subject: [PATCH 05/41] Update index.php --- packages/block-library/src/post-navigation-link/index.php | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/post-navigation-link/index.php b/packages/block-library/src/post-navigation-link/index.php index c9e3bfa8aeff1e..9ad527c2948f9b 100644 --- a/packages/block-library/src/post-navigation-link/index.php +++ b/packages/block-library/src/post-navigation-link/index.php @@ -30,7 +30,10 @@ function render_block_core_post_navigation_link( $attributes, $content ) { } $styles = ''; if ( isset( $attributes['style']['typography']['writingMode'] ) ) { - $styles = "writing-mode: {$attributes['style']['typography']['writingMode']};"; + $styles .= "writing-mode: {$attributes['style']['typography']['writingMode']};"; + } + if ( isset( $attributes['style']['typography']['textOrientation'] ) ) { + $styles .= "text-orientation: {$attributes['style']['typography']['textOrientation']};"; } $wrapper_attributes = get_block_wrapper_attributes( array( From fd4c2d3dadfd71aad1f5812c8fb312e70e807013 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Tue, 15 Aug 2023 10:20:04 +0200 Subject: [PATCH 06/41] remove the class names --- packages/block-library/src/post-navigation-link/index.php | 4 ++-- packages/style-engine/class-wp-style-engine.php | 6 ------ 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/post-navigation-link/index.php b/packages/block-library/src/post-navigation-link/index.php index 9ad527c2948f9b..5cffcbd84bce8b 100644 --- a/packages/block-library/src/post-navigation-link/index.php +++ b/packages/block-library/src/post-navigation-link/index.php @@ -30,10 +30,10 @@ function render_block_core_post_navigation_link( $attributes, $content ) { } $styles = ''; if ( isset( $attributes['style']['typography']['writingMode'] ) ) { - $styles .= "writing-mode: {$attributes['style']['typography']['writingMode']};"; + $styles .= "writing-mode:{$attributes['style']['typography']['writingMode']};"; } if ( isset( $attributes['style']['typography']['textOrientation'] ) ) { - $styles .= "text-orientation: {$attributes['style']['typography']['textOrientation']};"; + $styles .= "text-orientation:{$attributes['style']['typography']['textOrientation']};"; } $wrapper_attributes = get_block_wrapper_attributes( array( diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index 489434130aba01..ccb829e6f12b5e 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -269,18 +269,12 @@ final class WP_Style_Engine { 'default' => 'writing-mode', ), 'path' => array( 'typography', 'writingMode' ), - 'classnames' => array( - 'has-writing-mode' => true, - ), ), 'textOrientation' => array( 'property_keys' => array( 'default' => 'text-orientation', ), 'path' => array( 'typography', 'textOrientation' ), - 'classnames' => array( - 'has-text-orientation' => true, - ), ), ), ); From beca765315a6b525a13387fdef93146ce6e3006c Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 17 Aug 2023 05:52:39 +0200 Subject: [PATCH 07/41] Replace the icons --- packages/icons/src/library/text-mixed.js | 8 ++++++-- packages/icons/src/library/text-upright.js | 8 ++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/icons/src/library/text-mixed.js b/packages/icons/src/library/text-mixed.js index 4dc10db36e54ff..851478a2c59ca1 100644 --- a/packages/icons/src/library/text-mixed.js +++ b/packages/icons/src/library/text-mixed.js @@ -4,8 +4,12 @@ import { SVG, Path } from '@wordpress/primitives'; const textMixed = ( - - + + ); diff --git a/packages/icons/src/library/text-upright.js b/packages/icons/src/library/text-upright.js index 03206357c6f9f9..2f3498c8b1c53a 100644 --- a/packages/icons/src/library/text-upright.js +++ b/packages/icons/src/library/text-upright.js @@ -4,8 +4,12 @@ import { SVG, Path } from '@wordpress/primitives'; const textUpright = ( - - + + ); From 819e33c64348cc66216c520b0983fecbcee03bb5 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 17 Aug 2023 11:20:59 +0200 Subject: [PATCH 08/41] Update the onDeslect reset --- .../global-styles/typography-panel.js | 34 ++++++++++++------- 1 file changed, 22 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index f220f468d3d89f..314228652f66dd 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -8,7 +8,7 @@ import { __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { useCallback } from '@wordpress/element'; +import { useCallback, useEffect } from '@wordpress/element'; /** * Internal dependencies @@ -357,17 +357,26 @@ export default function TypographyPanel( { const textOrientation = decodeValue( inheritedValue?.typography?.textOrientation ); - const setTextOrientation = ( newValue ) => { - onChange( - setImmutably( - value, - [ 'typography', 'textOrientation' ], - newValue || undefined - ) - ); - }; + const setTextOrientation = useCallback( + ( newValue ) => { + onChange( + setImmutably( + value, + [ 'typography', 'textOrientation' ], + newValue || undefined + ) + ); + }, + [ onChange, value ] + ); const hasTextOrientation = () => !! value?.typography?.textOrientation; - const resetTextOrientation = () => setTextOrientation( undefined ); + + // Reset text orientation when writing mode is reset. + useEffect( () => { + if ( writingMode === undefined ) { + setTextOrientation( undefined ); + } + }, [ writingMode, setTextOrientation ] ); const resetAllFilter = useCallback( ( previousValue ) => { return { @@ -547,7 +556,7 @@ export default function TypographyPanel( { } label={ __( 'Text orientation' ) } hasValue={ hasWritingMode && hasTextOrientation } - onDeselect={ resetWritingMode && resetTextOrientation } + onDeselect={ resetWritingMode } isShownByDefault={ defaultControls.writingMode } panelId={ panelId } > @@ -563,6 +572,7 @@ export default function TypographyPanel( { } /> { hasTextOrientationControl && + hasWritingMode && ( writingMode === 'vertical-lr' || writingMode === 'vertical-rl' ) && ( Date: Fri, 1 Sep 2023 07:04:58 +0200 Subject: [PATCH 09/41] Post navigation link: Add spacing to the inline style --- packages/block-library/src/post-navigation-link/index.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/post-navigation-link/index.php b/packages/block-library/src/post-navigation-link/index.php index 5cffcbd84bce8b..9ad527c2948f9b 100644 --- a/packages/block-library/src/post-navigation-link/index.php +++ b/packages/block-library/src/post-navigation-link/index.php @@ -30,10 +30,10 @@ function render_block_core_post_navigation_link( $attributes, $content ) { } $styles = ''; if ( isset( $attributes['style']['typography']['writingMode'] ) ) { - $styles .= "writing-mode:{$attributes['style']['typography']['writingMode']};"; + $styles .= "writing-mode: {$attributes['style']['typography']['writingMode']};"; } if ( isset( $attributes['style']['typography']['textOrientation'] ) ) { - $styles .= "text-orientation:{$attributes['style']['typography']['textOrientation']};"; + $styles .= "text-orientation: {$attributes['style']['typography']['textOrientation']};"; } $wrapper_attributes = get_block_wrapper_attributes( array( From 8d82b614f06c7aed24effceeb9cc682653470286 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 1 Sep 2023 12:46:21 +0200 Subject: [PATCH 10/41] Remove the broken reset --- .../src/components/global-styles/typography-panel.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index 314228652f66dd..2c4766711c3dee 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -371,13 +371,6 @@ export default function TypographyPanel( { ); const hasTextOrientation = () => !! value?.typography?.textOrientation; - // Reset text orientation when writing mode is reset. - useEffect( () => { - if ( writingMode === undefined ) { - setTextOrientation( undefined ); - } - }, [ writingMode, setTextOrientation ] ); - const resetAllFilter = useCallback( ( previousValue ) => { return { ...previousValue, From 2b1bc2a85b3c6b036cd0602aef5b814e17edf70a Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 1 Sep 2023 13:24:46 +0200 Subject: [PATCH 11/41] Post navigation link: Update the condition for the inline styles --- .../block-library/src/post-navigation-link/index.php | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/post-navigation-link/index.php b/packages/block-library/src/post-navigation-link/index.php index 9ad527c2948f9b..62263dab09f0e7 100644 --- a/packages/block-library/src/post-navigation-link/index.php +++ b/packages/block-library/src/post-navigation-link/index.php @@ -30,10 +30,11 @@ function render_block_core_post_navigation_link( $attributes, $content ) { } $styles = ''; if ( isset( $attributes['style']['typography']['writingMode'] ) ) { - $styles .= "writing-mode: {$attributes['style']['typography']['writingMode']};"; - } - if ( isset( $attributes['style']['typography']['textOrientation'] ) ) { - $styles .= "text-orientation: {$attributes['style']['typography']['textOrientation']};"; + $styles = "writing-mode: {$attributes['style']['typography']['writingMode']};"; + + if ( isset( $attributes['style']['typography']['textOrientation'] ) ) { + $styles .= " text-orientation: {$attributes['style']['typography']['textOrientation']};"; + } } $wrapper_attributes = get_block_wrapper_attributes( array( From 09b5f91f8f0872b788b0f0f2c582eb420b6f0da9 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 1 Sep 2023 13:31:58 +0200 Subject: [PATCH 12/41] Update index.php --- packages/block-library/src/post-navigation-link/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/post-navigation-link/index.php b/packages/block-library/src/post-navigation-link/index.php index 62263dab09f0e7..dbdf1b0616f512 100644 --- a/packages/block-library/src/post-navigation-link/index.php +++ b/packages/block-library/src/post-navigation-link/index.php @@ -31,7 +31,7 @@ function render_block_core_post_navigation_link( $attributes, $content ) { $styles = ''; if ( isset( $attributes['style']['typography']['writingMode'] ) ) { $styles = "writing-mode: {$attributes['style']['typography']['writingMode']};"; - + if ( isset( $attributes['style']['typography']['textOrientation'] ) ) { $styles .= " text-orientation: {$attributes['style']['typography']['textOrientation']};"; } From 6496ba426c129e5deabcb1ae0b2c84bce96e5d42 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 1 Sep 2023 13:39:51 +0200 Subject: [PATCH 13/41] Remove the unused useEffect from the typography panel --- .../src/components/global-styles/typography-panel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index 2c4766711c3dee..dbd07018762aee 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -8,7 +8,7 @@ import { __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { useCallback, useEffect } from '@wordpress/element'; +import { useCallback } from '@wordpress/element'; /** * Internal dependencies From 093e659a1848daaa7fd3681f990c8f921ad023b6 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 4 Sep 2023 14:50:33 +0200 Subject: [PATCH 14/41] Update condition in typograhy.php and remove unnecessary constant from the typography panel. --- lib/block-supports/typography.php | 10 +++++----- .../src/components/global-styles/typography-panel.js | 3 +-- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 02f80bef1e932e..5465ca2fa99df0 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -41,8 +41,7 @@ function gutenberg_register_typography_support( $block_type ) { || $has_text_columns_support || $has_text_decoration_support || $has_text_transform_support - || $has_writing_mode_support - || $has_text_orientation_support; + || $has_writing_mode_support; if ( ! $block_type->attributes ) { $block_type->attributes = array(); @@ -168,10 +167,11 @@ 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'] = _wp_array_get( $block_attributes, array( 'style', 'typography', 'writingMode' ), null ); - } - 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 ); + // 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(); diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index dbd07018762aee..468a6727320986 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -369,7 +369,6 @@ export default function TypographyPanel( { }, [ onChange, value ] ); - const hasTextOrientation = () => !! value?.typography?.textOrientation; const resetAllFilter = useCallback( ( previousValue ) => { return { @@ -548,7 +547,7 @@ export default function TypographyPanel( { : {} } label={ __( 'Text orientation' ) } - hasValue={ hasWritingMode && hasTextOrientation } + hasValue={ hasWritingMode } onDeselect={ resetWritingMode } isShownByDefault={ defaultControls.writingMode } panelId={ panelId } From 18a09527a4bfda8cc4e22657fa7481c0f09b3307 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 4 Sep 2023 15:11:01 +0200 Subject: [PATCH 15/41] CS fix, remove unised variable. --- lib/block-supports/typography.php | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 5465ca2fa99df0..d473171ebe026d 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -30,7 +30,6 @@ function gutenberg_register_typography_support( $block_type ) { $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_text_orientation_support = _wp_array_get( $typography_supports, array( '__experimentalTextOrientation' ), false ); $has_typography_support = $has_font_family_support || $has_font_size_support From 4158f17bee05d92e535f04605a3de84df8d5b64e Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 4 Sep 2023 15:15:21 +0200 Subject: [PATCH 16/41] CS fix, adjust spacing. --- lib/block-supports/typography.php | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index d473171ebe026d..9f2228c24ba04a 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -20,16 +20,16 @@ function gutenberg_register_typography_support( $block_type ) { return; } - $has_font_family_support = _wp_array_get( $typography_supports, array( '__experimentalFontFamily' ), false ); - $has_font_size_support = _wp_array_get( $typography_supports, array( 'fontSize' ), false ); - $has_font_style_support = _wp_array_get( $typography_supports, array( '__experimentalFontStyle' ), false ); - $has_font_weight_support = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false ); - $has_letter_spacing_support = _wp_array_get( $typography_supports, array( '__experimentalLetterSpacing' ), false ); - $has_line_height_support = _wp_array_get( $typography_supports, array( 'lineHeight' ), false ); - $has_text_columns_support = _wp_array_get( $typography_supports, array( 'textColumns' ), 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_font_family_support = _wp_array_get( $typography_supports, array( '__experimentalFontFamily' ), false ); + $has_font_size_support = _wp_array_get( $typography_supports, array( 'fontSize' ), false ); + $has_font_style_support = _wp_array_get( $typography_supports, array( '__experimentalFontStyle' ), false ); + $has_font_weight_support = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false ); + $has_letter_spacing_support = _wp_array_get( $typography_supports, array( '__experimentalLetterSpacing' ), false ); + $has_line_height_support = _wp_array_get( $typography_supports, array( 'lineHeight' ), false ); + $has_text_columns_support = _wp_array_get( $typography_supports, array( 'textColumns' ), 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 From 1871d4d58705a2b92a2b806d10fa50d36737789f Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Wed, 6 Sep 2023 09:16:40 +0300 Subject: [PATCH 17/41] Update lib/class-wp-theme-json-gutenberg.php Co-authored-by: Carolina Nymark --- lib/class-wp-theme-json-gutenberg.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index f9ef551d7a3148..146964b55e2c1e 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -206,7 +206,7 @@ class WP_Theme_JSON_Gutenberg { * `--wp--style--root--padding-*`, and `box-shadow` properties, * removed the `--wp--style--block-gap` property. * @since 6.2.0 Added `outline-*`, and `min-height` properties. - * @since 6.3.0 Added `writing-mode` property. + * @since 6.4.0 Added `writing-mode` property. * @since 6.4.0 Added `text-orientation` property. * * @var array From c537dcbd9c4103eaaba07c77e2d2841a8516492d Mon Sep 17 00:00:00 2001 From: scruffian Date: Tue, 12 Sep 2023 19:02:54 +0100 Subject: [PATCH 18/41] add new UI to control writing mode --- .../global-styles/typography-panel.js | 68 ++++++++++++------- .../components/writing-mode-control/index.js | 25 +++++-- packages/icons/src/index.js | 1 + .../icons/src/library/text-vertical-up.js | 21 ++++++ 4 files changed, 86 insertions(+), 29 deletions(-) create mode 100644 packages/icons/src/library/text-vertical-up.js diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index 468a6727320986..e8529bebde20c3 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/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'; /** @@ -20,7 +20,6 @@ import LetterSpacingControl from '../letter-spacing-control'; import TextTransformControl from '../text-transform-control'; import TextDecorationControl from '../text-decoration-control'; import WritingModeControl from '../writing-mode-control'; -import TextOrientationControl from '../text-orientation-control'; import { getValueFromVariable } from './utils'; import { setImmutably } from '../../utils/object'; @@ -354,18 +353,50 @@ export default function TypographyPanel( { // Text Orientation const hasTextOrientationControl = useHasTextOrientationControl( settings ); - const textOrientation = decodeValue( - inheritedValue?.typography?.textOrientation - ); - const setTextOrientation = useCallback( + + const setWritingModeAndTextOrientation = useCallback( ( newValue ) => { - onChange( - setImmutably( - value, - [ 'typography', 'textOrientation' ], - newValue || undefined - ) + let newWritingMode, newTextOrientation; + switch ( newValue ) { + case 'bottom-to-top': + newTextOrientation = undefined; + newWritingMode = 'sideways-lr'; + break; + + case 'top-to-bottom': + newTextOrientation = undefined; + newWritingMode = 'sideways-rl'; + break; + + case 'upright': + newTextOrientation = 'upright'; + newWritingMode = isRTL() ? 'vertical-lr' : 'vertical-rl'; + break; + + case 'horizontal': + newTextOrientation = undefined; + newWritingMode = 'horizontal-tb'; + break; + + default: + newTextOrientation = undefined; + newWritingMode = undefined; + break; + } + + const newWritingModeAttributes = setImmutably( + value, + [ 'typography', 'writingMode' ], + newWritingMode || undefined ); + + const newTextOrientationAttributes = setImmutably( + newWritingModeAttributes, + [ 'typography', 'textOrientation' ], + newTextOrientation || undefined + ); + + onChange( newTextOrientationAttributes ); }, [ onChange, value ] ); @@ -554,7 +585,7 @@ export default function TypographyPanel( { > - { hasTextOrientationControl && - hasWritingMode && - ( writingMode === 'vertical-lr' || - writingMode === 'vertical-rl' ) && ( - - ) } ) } diff --git a/packages/block-editor/src/components/writing-mode-control/index.js b/packages/block-editor/src/components/writing-mode-control/index.js index 99acc34570e99f..9efd1a38b63cf3 100644 --- a/packages/block-editor/src/components/writing-mode-control/index.js +++ b/packages/block-editor/src/components/writing-mode-control/index.js @@ -7,20 +7,35 @@ import classnames from 'classnames'; * WordPress dependencies */ import { BaseControl, Button } from '@wordpress/components'; -import { __, isRTL } from '@wordpress/i18n'; -import { textHorizontal, textVertical } from '@wordpress/icons'; +import { __ } from '@wordpress/i18n'; +import { + textHorizontal, + textUpright, + textVertical, + textVerticalUp, +} from '@wordpress/icons'; const WRITING_MODES = [ { name: __( 'Horizontal' ), - value: 'horizontal-tb', + value: 'horizontal', icon: textHorizontal, }, { - name: __( 'Vertical' ), - value: isRTL() ? 'vertical-lr' : 'vertical-rl', + name: __( 'Top to bottom' ), + value: 'top-to-bottom', icon: textVertical, }, + { + name: __( 'Bottom to top' ), + value: 'bottom-to-top', + icon: textVerticalUp, + }, + { + name: __( 'Upright' ), + value: 'upright', + icon: textUpright, + }, ]; /** diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index 69e653e37d8f5b..23d20d03d05a11 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -260,6 +260,7 @@ export { default as textHorizontal } from './library/text-horizontal'; export { default as textMixed } from './library/text-mixed'; export { default as textUpright } from './library/text-upright'; export { default as textVertical } from './library/text-vertical'; +export { default as textVerticalUp } from './library/text-vertical-up'; export { default as tablet } from './library/tablet'; export { default as title } from './library/title'; export { default as tip } from './library/tip'; diff --git a/packages/icons/src/library/text-vertical-up.js b/packages/icons/src/library/text-vertical-up.js new file mode 100644 index 00000000000000..3ef6e97dd98c96 --- /dev/null +++ b/packages/icons/src/library/text-vertical-up.js @@ -0,0 +1,21 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const textVerticalUp = ( + + + +); + +export default textVerticalUp; From fcae9aeb60dc94bcf86e626e0c35edc89d230a3e Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 13 Sep 2023 13:16:52 +0100 Subject: [PATCH 19/41] remove sideways option --- .../global-styles/typography-panel.js | 81 +++++++++---------- .../components/writing-mode-control/index.js | 12 +-- packages/icons/src/index.js | 1 - .../icons/src/library/text-vertical-up.js | 21 ----- 4 files changed, 41 insertions(+), 74 deletions(-) delete mode 100644 packages/icons/src/library/text-vertical-up.js diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index e8529bebde20c3..933d6d6a3cba87 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -354,49 +354,48 @@ export default function TypographyPanel( { // Text Orientation const hasTextOrientationControl = useHasTextOrientationControl( settings ); + // 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-lr' : 'vertical-rl', + }; + + case 'horizontal': + return { + newTextOrientation: undefined, + newWritingMode: 'horizontal-tb', + }; + + default: + return { + newTextOrientation: undefined, + newWritingMode: undefined, + }; + } + }; + const setWritingModeAndTextOrientation = useCallback( ( newValue ) => { - let newWritingMode, newTextOrientation; - switch ( newValue ) { - case 'bottom-to-top': - newTextOrientation = undefined; - newWritingMode = 'sideways-lr'; - break; - - case 'top-to-bottom': - newTextOrientation = undefined; - newWritingMode = 'sideways-rl'; - break; - - case 'upright': - newTextOrientation = 'upright'; - newWritingMode = isRTL() ? 'vertical-lr' : 'vertical-rl'; - break; - - case 'horizontal': - newTextOrientation = undefined; - newWritingMode = 'horizontal-tb'; - break; - - default: - newTextOrientation = undefined; - newWritingMode = undefined; - break; - } - - const newWritingModeAttributes = setImmutably( - value, - [ 'typography', 'writingMode' ], - newWritingMode || undefined - ); - - const newTextOrientationAttributes = setImmutably( - newWritingModeAttributes, - [ 'typography', 'textOrientation' ], - newTextOrientation || undefined - ); - - onChange( newTextOrientationAttributes ); + const { newTextOrientation, newWritingMode } = + getTextOrientationAndWritingMode( newValue ); + + return onChange( { + ...value, + typography: { + ...value?.typography, + textOrientation: newTextOrientation, + writingMode: newWritingMode, + }, + } ); }, [ onChange, value ] ); diff --git a/packages/block-editor/src/components/writing-mode-control/index.js b/packages/block-editor/src/components/writing-mode-control/index.js index 9efd1a38b63cf3..3f6ffd70d97488 100644 --- a/packages/block-editor/src/components/writing-mode-control/index.js +++ b/packages/block-editor/src/components/writing-mode-control/index.js @@ -8,12 +8,7 @@ import classnames from 'classnames'; */ import { BaseControl, Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { - textHorizontal, - textUpright, - textVertical, - textVerticalUp, -} from '@wordpress/icons'; +import { textHorizontal, textUpright, textVertical } from '@wordpress/icons'; const WRITING_MODES = [ { @@ -26,11 +21,6 @@ const WRITING_MODES = [ value: 'top-to-bottom', icon: textVertical, }, - { - name: __( 'Bottom to top' ), - value: 'bottom-to-top', - icon: textVerticalUp, - }, { name: __( 'Upright' ), value: 'upright', diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index 23d20d03d05a11..69e653e37d8f5b 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -260,7 +260,6 @@ export { default as textHorizontal } from './library/text-horizontal'; export { default as textMixed } from './library/text-mixed'; export { default as textUpright } from './library/text-upright'; export { default as textVertical } from './library/text-vertical'; -export { default as textVerticalUp } from './library/text-vertical-up'; export { default as tablet } from './library/tablet'; export { default as title } from './library/title'; export { default as tip } from './library/tip'; diff --git a/packages/icons/src/library/text-vertical-up.js b/packages/icons/src/library/text-vertical-up.js deleted file mode 100644 index 3ef6e97dd98c96..00000000000000 --- a/packages/icons/src/library/text-vertical-up.js +++ /dev/null @@ -1,21 +0,0 @@ -/** - * WordPress dependencies - */ -import { SVG, Path } from '@wordpress/primitives'; - -const textVerticalUp = ( - - - -); - -export default textVerticalUp; From 14d0f52d23c06a6ff92c14ba366dd1d46488ec05 Mon Sep 17 00:00:00 2001 From: scruffian Date: Fri, 15 Sep 2023 17:42:29 +0100 Subject: [PATCH 20/41] Map text orientation and writing mode to the values in the control --- .../global-styles/typography-panel.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index 933d6d6a3cba87..89808c3113310a 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -353,6 +353,9 @@ export default function TypographyPanel( { // Text Orientation const hasTextOrientationControl = useHasTextOrientationControl( settings ); + const textOrientation = decodeValue( + inheritedValue?.typography?.textOrientation + ); // Returns the new text orientation and writing mode based on the value from the control. const getTextOrientationAndWritingMode = ( valueFromControl ) => { @@ -383,6 +386,18 @@ export default function TypographyPanel( { } }; + 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 } = @@ -583,7 +598,7 @@ export default function TypographyPanel( { panelId={ panelId } > Date: Fri, 15 Sep 2023 17:44:54 +0100 Subject: [PATCH 21/41] remove the text orientation control --- packages/block-editor/src/components/index.js | 1 - .../text-orientation-control/index.js | 72 ------------------- .../text-orientation-control/style.scss | 24 ------- 3 files changed, 97 deletions(-) delete mode 100644 packages/block-editor/src/components/text-orientation-control/index.js delete mode 100644 packages/block-editor/src/components/text-orientation-control/style.scss diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 9a8218cc8bfd50..6edcd460e31ac4 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -51,7 +51,6 @@ export { default as __experimentalLetterSpacingControl } from './letter-spacing- export { default as __experimentalTextDecorationControl } from './text-decoration-control'; export { default as __experimentalTextTransformControl } from './text-transform-control'; export { default as __experimentalWritingModeControl } from './writing-mode-control'; -export { default as __experimentalTextOrientationControl } from './text-orientation-control'; export { default as __experimentalColorGradientControl } from './colors-gradients/control'; export { default as __experimentalColorGradientSettingsDropdown } from './colors-gradients/dropdown'; export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings'; diff --git a/packages/block-editor/src/components/text-orientation-control/index.js b/packages/block-editor/src/components/text-orientation-control/index.js deleted file mode 100644 index 9724113e4884a0..00000000000000 --- a/packages/block-editor/src/components/text-orientation-control/index.js +++ /dev/null @@ -1,72 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - -/** - * WordPress dependencies - */ -import { BaseControl, Button } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; -import { textMixed, textUpright } from '@wordpress/icons'; - -const TEXT_ORIENTATIONS = [ - { - name: __( 'Upright' ), - value: 'upright', - icon: textUpright, - }, - { - name: __( 'Mixed' ), - value: 'mixed', - icon: textMixed, - }, -]; - -/** - * Control to facilitate text orientation selections. - * - * @param {Object} props Component props. - * @param {string} props.className Class name to add to the control. - * @param {string} props.value Currently selected text orientation. - * @param {Function} props.onChange Handles change in the text orientation selection. - * - * @return {WPElement} Text Orientation control. - */ -export default function TextOrientationControl( { - className, - value, - onChange, -} ) { - return ( -
- - { __( 'Character rotation' ) } - -
- { TEXT_ORIENTATIONS.map( ( textOrientation ) => { - return ( -
- - ); -} diff --git a/packages/block-editor/src/components/text-orientation-control/style.scss b/packages/block-editor/src/components/text-orientation-control/style.scss deleted file mode 100644 index 3c164fa637fe79..00000000000000 --- a/packages/block-editor/src/components/text-orientation-control/style.scss +++ /dev/null @@ -1,24 +0,0 @@ -.block-editor-text-orientation-control { - grid-column: 2/2; - border: 0; - margin: 0; - padding: 0; - - // The legend is hidden, but takes up space so that the controls are aligned. - legend { - visibility: hidden; - } - - .block-editor-text-orientation-control__buttons { - // 4px of padding makes the row 40px high, same as an input. - padding: $grid-unit-05 0; - display: flex; - } - - .components-button.has-icon { - height: $grid-unit-40; - margin-right: $grid-unit-05; - min-width: $grid-unit-40; - padding: 0; - } -} From 032896f7400cb118e1abdf0b1390dc2bd47a0605 Mon Sep 17 00:00:00 2001 From: scruffian Date: Fri, 15 Sep 2023 17:50:09 +0100 Subject: [PATCH 22/41] update reset function --- .../src/components/global-styles/typography-panel.js | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index 89808c3113310a..8326b14e9a20b6 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -339,17 +339,9 @@ export default function TypographyPanel( { // 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 hasTextOrientationControl = useHasTextOrientationControl( settings ); From aa624ca1d14737fe8e2c921012d09001edd54873 Mon Sep 17 00:00:00 2001 From: scruffian Date: Fri, 15 Sep 2023 17:50:57 +0100 Subject: [PATCH 23/41] remove text orientation import --- packages/block-editor/src/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index fe1ce080aa75c8..0835598abfac1c 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -43,7 +43,6 @@ @import "./components/skip-to-selected-block/style.scss"; @import "./components/text-decoration-control/style.scss"; @import "./components/text-transform-control/style.scss"; -@import "./components/text-orientation-control/style.scss"; @import "./components/writing-mode-control/style.scss"; @import "./components/tool-selector/style.scss"; @import "./components/url-input/style.scss"; From 9d0832b1158735051c05e2a3e00c93665d17436b Mon Sep 17 00:00:00 2001 From: scruffian Date: Fri, 15 Sep 2023 17:55:06 +0100 Subject: [PATCH 24/41] remove unused code --- .../global-styles/typography-panel.js | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index 8326b14e9a20b6..e9810df97cb0a7 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -344,7 +344,6 @@ export default function TypographyPanel( { setWritingModeAndTextOrientation( undefined ); // Text Orientation - const hasTextOrientationControl = useHasTextOrientationControl( settings ); const textOrientation = decodeValue( inheritedValue?.typography?.textOrientation ); @@ -573,32 +572,14 @@ export default function TypographyPanel( { ) } { hasWritingModeControl && ( ) } From e6104cf329d9ac1fc4f8e3ed9a2c4e46e8842540 Mon Sep 17 00:00:00 2001 From: scruffian Date: Fri, 15 Sep 2023 17:56:06 +0100 Subject: [PATCH 25/41] make alphabetical --- lib/theme.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/theme.json b/lib/theme.json index e5a714d56d5988..c652558e5df2fa 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -264,9 +264,9 @@ "lineHeight": false, "textColumns": false, "textDecoration": true, + "textOrientation": false, "textTransform": true, - "writingMode": false, - "textOrientation": false + "writingMode": false }, "blocks": { "core/button": { From 916ab15a1a3a4eed27e5c89daab062992e4aa84f Mon Sep 17 00:00:00 2001 From: scruffian Date: Mon, 18 Sep 2023 11:23:17 +0100 Subject: [PATCH 26/41] Add RTL icons --- .../src/components/writing-mode-control/index.js | 14 ++++++++++---- packages/icons/src/index.js | 3 ++- packages/icons/src/library/text-horizontal-rtl.js | 12 ++++++++++++ packages/icons/src/library/text-vertical-rtl.js | 12 ++++++++++++ 4 files changed, 36 insertions(+), 5 deletions(-) create mode 100644 packages/icons/src/library/text-horizontal-rtl.js create mode 100644 packages/icons/src/library/text-vertical-rtl.js diff --git a/packages/block-editor/src/components/writing-mode-control/index.js b/packages/block-editor/src/components/writing-mode-control/index.js index 3f6ffd70d97488..9681a49e04e31c 100644 --- a/packages/block-editor/src/components/writing-mode-control/index.js +++ b/packages/block-editor/src/components/writing-mode-control/index.js @@ -7,19 +7,25 @@ import classnames from 'classnames'; * WordPress dependencies */ import { BaseControl, Button } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; -import { textHorizontal, textUpright, textVertical } from '@wordpress/icons'; +import { __, isRTL } from '@wordpress/i18n'; +import { + textHorizontal, + textHorizontalRTL, + textUpright, + textVertical, + textVerticalRTL, +} from '@wordpress/icons'; const WRITING_MODES = [ { name: __( 'Horizontal' ), value: 'horizontal', - icon: textHorizontal, + icon: isRTL() ? textHorizontalRTL : textHorizontal, }, { name: __( 'Top to bottom' ), value: 'top-to-bottom', - icon: textVertical, + icon: isRTL() ? textVerticalRTL : textVertical, }, { name: __( 'Upright' ), diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index 69e653e37d8f5b..10e46a12cfb278 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -256,10 +256,11 @@ export { default as sidesRight } from './library/sides-right'; export { default as sidesTop } from './library/sides-top'; export { default as sidesVertical } from './library/sides-vertical'; export { default as textColor } from './library/text-color'; -export { default as textHorizontal } from './library/text-horizontal'; +export { default as textHorizontalRTL } from './library/text-horizontal-rtl'; export { default as textMixed } from './library/text-mixed'; export { default as textUpright } from './library/text-upright'; export { default as textVertical } from './library/text-vertical'; +export { default as textVerticalRTL } from './library/text-vertical-rtl'; export { default as tablet } from './library/tablet'; export { default as title } from './library/title'; export { default as tip } from './library/tip'; diff --git a/packages/icons/src/library/text-horizontal-rtl.js b/packages/icons/src/library/text-horizontal-rtl.js new file mode 100644 index 00000000000000..241e8245a22fef --- /dev/null +++ b/packages/icons/src/library/text-horizontal-rtl.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const textHorizontalRTL = ( + + + +); + +export default textHorizontalRTL; diff --git a/packages/icons/src/library/text-vertical-rtl.js b/packages/icons/src/library/text-vertical-rtl.js new file mode 100644 index 00000000000000..9418118f637d6e --- /dev/null +++ b/packages/icons/src/library/text-vertical-rtl.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const textVerticalRTL = ( + + + +); + +export default textVerticalRTL; From bdadc104b044e5c6fd232d9c15f15ac0d100244e Mon Sep 17 00:00:00 2001 From: scruffian Date: Mon, 18 Sep 2023 11:25:19 +0100 Subject: [PATCH 27/41] remove mixed icon --- packages/icons/src/index.js | 1 - packages/icons/src/library/text-mixed.js | 16 ---------------- 2 files changed, 17 deletions(-) delete mode 100644 packages/icons/src/library/text-mixed.js diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index 10e46a12cfb278..66bb6aeaa7144b 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -257,7 +257,6 @@ export { default as sidesTop } from './library/sides-top'; export { default as sidesVertical } from './library/sides-vertical'; export { default as textColor } from './library/text-color'; export { default as textHorizontalRTL } from './library/text-horizontal-rtl'; -export { default as textMixed } from './library/text-mixed'; export { default as textUpright } from './library/text-upright'; export { default as textVertical } from './library/text-vertical'; export { default as textVerticalRTL } from './library/text-vertical-rtl'; diff --git a/packages/icons/src/library/text-mixed.js b/packages/icons/src/library/text-mixed.js deleted file mode 100644 index 851478a2c59ca1..00000000000000 --- a/packages/icons/src/library/text-mixed.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * WordPress dependencies - */ -import { SVG, Path } from '@wordpress/primitives'; - -const textMixed = ( - - - -); - -export default textMixed; From 52e66f22323bf19a972ea00d88e9024085e3d73c Mon Sep 17 00:00:00 2001 From: scruffian Date: Mon, 18 Sep 2023 12:44:24 +0100 Subject: [PATCH 28/41] Add textHorizontal back --- packages/icons/src/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index 66bb6aeaa7144b..77d672fcace27c 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -256,6 +256,7 @@ export { default as sidesRight } from './library/sides-right'; export { default as sidesTop } from './library/sides-top'; export { default as sidesVertical } from './library/sides-vertical'; export { default as textColor } from './library/text-color'; +export { default as textHorizontal } from './library/text-horizontal'; export { default as textHorizontalRTL } from './library/text-horizontal-rtl'; export { default as textUpright } from './library/text-upright'; export { default as textVertical } from './library/text-vertical'; From 4845cbad2c209e460a83abee84b53d97c78dde62 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Thu, 28 Sep 2023 09:11:55 +0300 Subject: [PATCH 29/41] CS fixes --- lib/block-supports/typography.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 846febbd23fecb..99ce8ddbc94c68 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -99,7 +99,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; + $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' ); @@ -165,7 +165,7 @@ 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; + $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 ); From c0c5026a2682d74dc2e224c420144cea5febc768 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 28 Sep 2023 10:28:15 +0200 Subject: [PATCH 30/41] Update class-wp-theme-json-gutenberg.php --- lib/class-wp-theme-json-gutenberg.php | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index ab900c912f5016..3d4ca96b99e9cf 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -207,7 +207,6 @@ class WP_Theme_JSON_Gutenberg { * removed the `--wp--style--block-gap` property. * @since 6.2.0 Added `outline-*`, and `min-height` properties. * @since 6.4.0 Added `writing-mode` property. - * @since 6.4.0 Added `text-orientation` property. * * @var array */ @@ -267,7 +266,6 @@ class WP_Theme_JSON_Gutenberg { 'filter' => array( 'filter', 'duotone' ), 'box-shadow' => array( 'shadow' ), 'writing-mode' => array( 'typography', 'writingMode' ), - 'text-orientation' => array( 'typography', 'textOrientation' ), ); /** @@ -346,10 +344,10 @@ 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`. * Added `lightbox`. - * Added `typography.textOrientation`. + * Added `typography.WritingMode`. * @var array */ const VALID_SETTINGS = array( @@ -425,7 +423,6 @@ class WP_Theme_JSON_Gutenberg { 'textDecoration' => null, 'textTransform' => null, 'writingMode' => null, - 'textOrientation' => null, ), ); @@ -488,7 +485,6 @@ class WP_Theme_JSON_Gutenberg { 'textDecoration' => null, 'textTransform' => null, 'writingMode' => null, - 'textOrientation' => null, ), 'css' => null, ); From 1e63355f6c8ec758e0e5f69cd38c8055f9d347bd Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 28 Sep 2023 10:30:41 +0200 Subject: [PATCH 31/41] Update class-wp-theme-json-gutenberg.php --- lib/class-wp-theme-json-gutenberg.php | 46 +++++++++++++-------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 3d4ca96b99e9cf..9ee7acf0978f6e 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -410,19 +410,19 @@ 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, ), ); @@ -475,16 +475,16 @@ 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, ), 'css' => null, ); From 21c9e70fff12c26631a267b027f3e11c06d80b66 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 28 Sep 2023 10:45:52 +0200 Subject: [PATCH 32/41] Revert theme.json changes. --- .../theme-json-reference/theme-json-living.md | 2 -- lib/theme.json | 1 - schemas/json/theme.json | 20 ++----------------- 3 files changed, 2 insertions(+), 21 deletions(-) diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md index 2b5e7e3052a796..4890386ca8333e 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -182,7 +182,6 @@ 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 | @@ -265,7 +264,6 @@ Typography styles. | textColumns | string | | | textDecoration | string, object | | | writingMode | string, object | | -| textOrientation | string, object | | | textTransform | string, object | | --- diff --git a/lib/theme.json b/lib/theme.json index c652558e5df2fa..671dd50227852b 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -264,7 +264,6 @@ "lineHeight": false, "textColumns": false, "textDecoration": true, - "textOrientation": false, "textTransform": true, "writingMode": false }, diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 9cf864746f3fea..02d4138c34eb19 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -509,12 +509,7 @@ "default": true }, "writingMode": { - "description": "Allow users to set the writing mode.", - "type": "boolean", - "default": false - }, - "textOrientation": { - "description": "Allow users to set the text-orientation.", + "description": "Allow users to set the writing mode and text orientation.", "type": "boolean", "default": false }, @@ -1588,18 +1583,7 @@ ] }, "writingMode": { - "description": "Sets the `writing-mode` CSS property.", - "oneOf": [ - { - "type": "string" - }, - { - "$ref": "#/definitions/refComplete" - } - ] - }, - "textOrientation": { - "description": "Sets the `text-orientation` CSS property.", + "description": "Sets the `writing-mode` and `text-orientation` CSS properties.", "oneOf": [ { "type": "string" From 9adb5d23ea6bbfd4924b1d0c335d8c5ff67eda4a Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 28 Sep 2023 11:01:03 +0200 Subject: [PATCH 33/41] Update theme.json --- schemas/json/theme.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 02d4138c34eb19..6d55bae2072b0b 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -1583,7 +1583,7 @@ ] }, "writingMode": { - "description": "Sets the `writing-mode` and `text-orientation` CSS properties.", + "description": "Sets the `writing-mode` CSS property.", "oneOf": [ { "type": "string" From 3328e3fb8fb5a98704b75ff5f6dcce01b9694297 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 2 Oct 2023 10:13:55 +0200 Subject: [PATCH 34/41] Re-add isShownByDefault --- .../src/components/global-styles/typography-panel.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index e9810df97cb0a7..612cd89f9c774f 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -575,6 +575,7 @@ export default function TypographyPanel( { label={ __( 'Text orientation' ) } hasValue={ hasWritingMode } onDeselect={ resetWritingMode } + isShownByDefault={ defaultControls.writingMode } panelId={ panelId } > Date: Tue, 3 Oct 2023 09:01:38 +0200 Subject: [PATCH 35/41] Add text-orientation to the safe_style_css filter --- lib/compat/wordpress-6.4/kses.php | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/compat/wordpress-6.4/kses.php b/lib/compat/wordpress-6.4/kses.php index 019d1cc9b06dbf..45f5e1f3405c82 100644 --- a/lib/compat/wordpress-6.4/kses.php +++ b/lib/compat/wordpress-6.4/kses.php @@ -13,6 +13,7 @@ */ function gutenberg_safe_style_attrs_6_4( $attrs ) { $attrs[] = 'writing-mode'; + $attrs[] = 'text-orientation'; return $attrs; } add_filter( 'safe_style_css', 'gutenberg_safe_style_attrs_6_4' ); From 542fdead49aeadabae2c54eb773614b8902bdfb2 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Tue, 10 Oct 2023 10:15:05 +0200 Subject: [PATCH 36/41] Try to safely remove unused code --- lib/block-supports/typography.php | 4 +--- .../src/components/global-styles/typography-panel.js | 6 ------ packages/block-editor/src/hooks/supports.js | 6 ------ packages/block-editor/src/hooks/typography.js | 2 -- packages/block-library/src/paragraph/block.json | 1 - packages/block-library/src/post-navigation-link/block.json | 1 - packages/blocks/src/api/constants.js | 5 ----- 7 files changed, 1 insertion(+), 24 deletions(-) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 99ce8ddbc94c68..6760343ba86702 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -99,7 +99,6 @@ 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' ); @@ -112,7 +111,6 @@ 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 ) { @@ -167,7 +165,7 @@ 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'] ) ) { + if ( isset( $block_attributes['style']['typography']['textOrientation'] ) ) { $typography_block_styles['textOrientation'] = _wp_array_get( $block_attributes, array( 'style', 'typography', 'textOrientation' ), null ); } } diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index 612cd89f9c774f..93940871e67dde 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -34,7 +34,6 @@ export function useHasTypographyPanel( settings ) { const hasTextTransform = useHasTextTransformControl( settings ); const hasTextDecoration = useHasTextDecorationControl( settings ); const hasWritingMode = useHasWritingModeControl( settings ); - const hasTextOrientation = useHasTextOrientationControl( settings ); const hasTextColumns = useHasTextColumnsControl( settings ); const hasFontSize = useHasFontSizeControl( settings ); @@ -47,7 +46,6 @@ export function useHasTypographyPanel( settings ) { hasFontSize || hasTextDecoration || hasWritingMode || - hasTextOrientation || hasTextColumns ); } @@ -112,10 +110,6 @@ function useHasWritingModeControl( settings ) { return settings?.typography?.writingMode; } -function useHasTextOrientationControl( settings ) { - return settings?.typography?.textOrientation; -} - function useHasTextColumnsControl( settings ) { return settings?.typography?.textColumns; } diff --git a/packages/block-editor/src/hooks/supports.js b/packages/block-editor/src/hooks/supports.js index 75882d403c684e..2cf08d46fa8fe2 100644 --- a/packages/block-editor/src/hooks/supports.js +++ b/packages/block-editor/src/hooks/supports.js @@ -35,11 +35,6 @@ 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`. @@ -62,7 +57,6 @@ 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 SPACING_SUPPORT_KEY = 'spacing'; diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js index 976e6438c8c12f..c7d1a6ba3b1443 100644 --- a/packages/block-editor/src/hooks/typography.js +++ b/packages/block-editor/src/hooks/typography.js @@ -31,7 +31,6 @@ const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns'; const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle'; const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight'; const WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode'; -const TEXT_ORIENTATION_SUPPORT_KEY = 'typography.__experimentalTextOrientation'; export const TYPOGRAPHY_SUPPORT_KEY = 'typography'; export const TYPOGRAPHY_SUPPORT_KEYS = [ LINE_HEIGHT_SUPPORT_KEY, @@ -42,7 +41,6 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [ TEXT_COLUMNS_SUPPORT_KEY, TEXT_DECORATION_SUPPORT_KEY, WRITING_MODE_SUPPORT_KEY, - TEXT_ORIENTATION_SUPPORT_KEY, TEXT_TRANSFORM_SUPPORT_KEY, LETTER_SPACING_SUPPORT_KEY, ]; diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json index 2233be4fa80134..85f56f4a838f50 100644 --- a/packages/block-library/src/paragraph/block.json +++ b/packages/block-library/src/paragraph/block.json @@ -61,7 +61,6 @@ "__experimentalLetterSpacing": true, "__experimentalTextTransform": true, "__experimentalWritingMode": true, - "__experimentalTextOrientation": true, "__experimentalDefaultControls": { "fontSize": true } diff --git a/packages/block-library/src/post-navigation-link/block.json b/packages/block-library/src/post-navigation-link/block.json index f3c0124055e28f..e1b6d4fa90a40c 100644 --- a/packages/block-library/src/post-navigation-link/block.json +++ b/packages/block-library/src/post-navigation-link/block.json @@ -46,7 +46,6 @@ "__experimentalTextDecoration": true, "__experimentalLetterSpacing": true, "__experimentalWritingMode": true, - "__experimentalTextOrientation": true, "__experimentalDefaultControls": { "fontSize": true } diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index a7dd4490d3efd2..2afdee93278ce7 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -228,11 +228,6 @@ 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' ], From cf7180b41fee54f57e550a9b05259c7d9e919824 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Tue, 10 Oct 2023 10:20:57 +0200 Subject: [PATCH 37/41] fix CS spacing issues --- lib/block-supports/typography.php | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 6760343ba86702..0ea4740b452745 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -89,16 +89,16 @@ 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; // Whether to skip individual block support features. $should_skip_font_size = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontSize' ); From 8efe3a26935bddf4ea80eaa9d9a7e91d13dc2830 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Wed, 25 Oct 2023 06:18:12 +0200 Subject: [PATCH 38/41] Fix CS issues after merge conflict --- packages/block-editor/src/hooks/utils.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js index 93005da92b4d1f..0464cd06073066 100644 --- a/packages/block-editor/src/hooks/utils.js +++ b/packages/block-editor/src/hooks/utils.js @@ -136,7 +136,7 @@ export function useBlockSettings( name, parentLayout ) { textColumns, textDecoration, writingMode, - textOrientation, + textOrientation, textTransform, letterSpacing, padding, @@ -180,7 +180,7 @@ export function useBlockSettings( name, parentLayout ) { 'typography.textColumns', 'typography.textDecoration', 'typography.writingMode', - 'typography.textOrientation', + 'typography.textOrientation', 'typography.textTransform', 'typography.letterSpacing', 'spacing.padding', From 5b6bd3ec1a5ddfa7b8e1812a802288ed69ead96a Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 7 Mar 2024 09:55:21 +0100 Subject: [PATCH 39/41] Try to fix CS spacing issues after the merge conflict. --- packages/style-engine/class-wp-style-engine.php | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index 6f3495fb2eeb20..102ae6d715583f 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -297,12 +297,12 @@ final class WP_Style_Engine { ), 'path' => array( 'typography', 'writingMode' ), ), - 'textOrientation' => array( - 'property_keys' => array( - 'default' => 'text-orientation', - ), - 'path' => array( 'typography', 'textOrientation' ), - ), + 'textOrientation' => array( + 'property_keys' => array( + 'default' => 'text-orientation', + ), + 'path' => array( 'typography', 'textOrientation' ), + ), ), ); From e060c4d7d81fc66b19de4838f2adb1e078f7afe6 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 7 Mar 2024 11:12:05 +0100 Subject: [PATCH 40/41] Try to re-add text-orientation block support --- .../theme-json-reference/theme-json-living.md | 1 + lib/block-supports/typography.php | 24 +++++++++-------- lib/class-wp-theme-json-gutenberg.php | 27 +++++++++++-------- lib/compat/wordpress-6.4/kses.php | 1 - lib/compat/wordpress-6.6/kses.php | 18 +++++++++++++ lib/load.php | 3 +++ packages/block-editor/src/hooks/supports.js | 6 +++++ .../block-library/src/paragraph/block.json | 1 + .../src/post-navigation-link/block.json | 1 + packages/blocks/src/api/constants.js | 5 ++++ .../style-engine/class-wp-style-engine.php | 20 +++++++------- schemas/json/theme.json | 7 ++++- 12 files changed, 80 insertions(+), 34 deletions(-) create mode 100644 lib/compat/wordpress-6.6/kses.php diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md index 98e574913853e0..d9b17ada049829 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/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 | diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index b8608096f00984..8f30817ce3598a 100644 --- a/lib/block-supports/typography.php +++ b/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 ) { @@ -165,7 +167,7 @@ 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 ( isset( $block_attributes['style']['typography']['textOrientation'] ) ) { + 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 ); } } diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index a5f27e9f9b114e..26fe3d0e4937e4 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -349,7 +349,8 @@ class WP_Theme_JSON_Gutenberg { * @since 6.3.0 Removed `layout.definitions`. * @since 6.4.0 Added `layout.allowEditing`. * Added `lightbox`. - * Added `typography.WritingMode`. + * Added `typography.writingMode`. + * @since 6.6.0 Added `typography.textOrientation`. * @var array */ const VALID_SETTINGS = array( @@ -428,6 +429,7 @@ class WP_Theme_JSON_Gutenberg { 'textDecoration' => null, 'textTransform' => null, 'writingMode' => null, + 'textOrientation' => null, ), ); @@ -467,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 */ @@ -513,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, ); diff --git a/lib/compat/wordpress-6.4/kses.php b/lib/compat/wordpress-6.4/kses.php index 45f5e1f3405c82..019d1cc9b06dbf 100644 --- a/lib/compat/wordpress-6.4/kses.php +++ b/lib/compat/wordpress-6.4/kses.php @@ -13,7 +13,6 @@ */ function gutenberg_safe_style_attrs_6_4( $attrs ) { $attrs[] = 'writing-mode'; - $attrs[] = 'text-orientation'; return $attrs; } add_filter( 'safe_style_css', 'gutenberg_safe_style_attrs_6_4' ); diff --git a/lib/compat/wordpress-6.6/kses.php b/lib/compat/wordpress-6.6/kses.php new file mode 100644 index 00000000000000..0baa6dfd924542 --- /dev/null +++ b/lib/compat/wordpress-6.6/kses.php @@ -0,0 +1,18 @@ + array( - 'fontSize' => array( + 'fontSize' => array( 'property_keys' => array( 'default' => 'font-size', ), @@ -237,7 +237,7 @@ final class WP_Style_Engine { 'has-$slug-font-size' => 'font-size', ), ), - 'fontFamily' => array( + 'fontFamily' => array( 'property_keys' => array( 'default' => 'font-family', ), @@ -249,49 +249,49 @@ final class WP_Style_Engine { 'has-$slug-font-family' => 'font-family', ), ), - 'fontStyle' => array( + 'fontStyle' => array( 'property_keys' => array( 'default' => 'font-style', ), 'path' => array( 'typography', 'fontStyle' ), ), - 'fontWeight' => array( + 'fontWeight' => array( 'property_keys' => array( 'default' => 'font-weight', ), 'path' => array( 'typography', 'fontWeight' ), ), - 'lineHeight' => array( + 'lineHeight' => array( 'property_keys' => array( 'default' => 'line-height', ), 'path' => array( 'typography', 'lineHeight' ), ), - 'textColumns' => array( + 'textColumns' => array( 'property_keys' => array( 'default' => 'column-count', ), 'path' => array( 'typography', 'textColumns' ), ), - 'textDecoration' => array( + 'textDecoration' => array( 'property_keys' => array( 'default' => 'text-decoration', ), 'path' => array( 'typography', 'textDecoration' ), ), - 'textTransform' => array( + 'textTransform' => array( 'property_keys' => array( 'default' => 'text-transform', ), 'path' => array( 'typography', 'textTransform' ), ), - 'letterSpacing' => array( + 'letterSpacing' => array( 'property_keys' => array( 'default' => 'letter-spacing', ), 'path' => array( 'typography', 'letterSpacing' ), ), - 'writingMode' => array( + 'writingMode' => array( 'property_keys' => array( 'default' => 'writing-mode', ), diff --git a/schemas/json/theme.json b/schemas/json/theme.json index c075fd18c7c0cf..d9eb727a2c4858 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -557,7 +557,12 @@ "default": true }, "writingMode": { - "description": "Allow users to set the writing mode and text orientation.", + "description": "Allow users to set the writing mode.", + "type": "boolean", + "default": false + }, + "textOrientation": { + "description": "Allow users to set the textOrientation.", "type": "boolean", "default": false }, From 620e6be978a8f86f339ebca0d040cc2da97a5d8c Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 8 Mar 2024 02:43:43 +0100 Subject: [PATCH 41/41] CS: Increase spacing before double arrows in class-wp-theme-json-gutenberg.php --- lib/class-wp-theme-json-gutenberg.php | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 26fe3d0e4937e4..d4fedd368f04e1 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -416,19 +416,19 @@ 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, ), );