From 0dd2a51128050e226538916f68864161a59281e8 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 31 Jul 2023 13:53:19 +0200 Subject: [PATCH 1/5] Try adding upside down writing mode --- packages/block-editor/src/hooks/typography.js | 87 ++++++++++++++++++- .../block-library/src/paragraph/style.scss | 8 ++ .../src/post-navigation-link/index.php | 6 ++ .../src/post-navigation-link/style.scss | 15 ++++ 4 files changed, 115 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js index c7d1a6ba3b1443..3b2ba6ff3c7803 100644 --- a/packages/block-editor/src/hooks/typography.js +++ b/packages/block-editor/src/hooks/typography.js @@ -1,8 +1,14 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks'; import { useMemo, useCallback } from '@wordpress/element'; +import { addFilter } from '@wordpress/hooks'; /** * Internal dependencies @@ -16,7 +22,11 @@ import { import { LINE_HEIGHT_SUPPORT_KEY } from './line-height'; import { FONT_FAMILY_SUPPORT_KEY } from './font-family'; import { FONT_SIZE_SUPPORT_KEY } from './font-size'; -import { cleanEmptyObject, useBlockSettings } from './utils'; +import { + cleanEmptyObject, + useBlockSettings, + shouldSkipSerialization, +} from './utils'; function omit( object, keys ) { return Object.fromEntries( @@ -45,6 +55,14 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [ LETTER_SPACING_SUPPORT_KEY, ]; +const hasWritingModeSupport = ( blockType ) => { + const writingModeSupport = getBlockSupport( + blockType, + WRITING_MODE_SUPPORT_KEY + ); + return writingModeSupport; +}; + function styleToAttributes( style ) { const updatedStyle = { ...omit( style, [ 'fontFamily' ] ) }; const fontSizeValue = style?.typography?.fontSize; @@ -153,3 +171,70 @@ export const hasTypographySupport = ( blockName ) => { hasBlockSupport( blockName, key ) ); }; + +/** + * Filters registered block settings to extend the block edit wrapper + * to apply the desired classnames properly. + * + * @param {Object} settings Original block settings. + * + * @return {Object} Filtered block settings. + */ +export function addEditProps( settings ) { + if ( ! hasWritingModeSupport( settings ) ) { + return settings; + } + + const existingGetEditWrapperProps = settings.getEditWrapperProps; + settings.getEditWrapperProps = ( attributes ) => { + let props = {}; + if ( existingGetEditWrapperProps ) { + props = existingGetEditWrapperProps( attributes ); + } + return addSaveProps( props, settings, attributes ); + }; + + return settings; +} + +/** + * Override props assigned to save component to inject typography classnames. + * + * @param {Object} props Additional props applied to save element. + * @param {Object} blockType Block type. + * @param {Object} attributes Block attributes. + * + * @return {Object} Filtered props applied to save element. + */ +export function addSaveProps( props, blockType, attributes ) { + if ( + ! hasWritingModeSupport( blockType ) || + shouldSkipSerialization( blockType, WRITING_MODE_SUPPORT_KEY ) + ) { + return props; + } + + const { style } = attributes; + const writingMode = style?.typography?.writingMode; + const newClassName = classnames( props.className, { + 'has-writing-mode': writingMode ? true : false, + 'is-vertical-lr': writingMode === 'vertical-lr' ? true : false, + 'is-vertical-rl': writingMode === 'vertical-rl' ? true : false, + 'is-horizontal-tb': writingMode === 'horizontal-tb' ? true : false, + } ); + props.className = newClassName ? newClassName : undefined; + + return props; +} + +addFilter( + 'blocks.getSaveContent.extraProps', + 'core/typography/addSaveProps', + addSaveProps +); + +addFilter( + 'blocks.registerBlockType', + 'core/typography/addEditProps', + addEditProps +); diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss index f3bb9f8c5aee86..102ee9e406b6b1 100644 --- a/packages/block-library/src/paragraph/style.scss +++ b/packages/block-library/src/paragraph/style.scss @@ -49,3 +49,11 @@ p.has-background { :where(p.has-text-color:not(.has-link-color)) a { color: inherit; } + +p.has-text-align-right.has-writing-mode.is-vertical-rl { + transform: scale(-1, -1); +} + +body.rtl p.has-text-align-left.has-writing-mode.is-vertical-lr { + transform: scale(-1, -1); +} diff --git a/packages/block-library/src/post-navigation-link/index.php b/packages/block-library/src/post-navigation-link/index.php index cb1fe568bdf0e7..b30a54cef543a8 100644 --- a/packages/block-library/src/post-navigation-link/index.php +++ b/packages/block-library/src/post-navigation-link/index.php @@ -28,6 +28,12 @@ function render_block_core_post_navigation_link( $attributes, $content ) { if ( isset( $attributes['textAlign'] ) ) { $classes .= " has-text-align-{$attributes['textAlign']}"; } + + $writing_mode = _wp_array_get( $attributes, array( 'style', 'typography', 'writingMode' ), null ); + if ( isset( $writing_mode ) ) { + $classes .= " has-writing-mode"; + $classes .= " is-{$writing_mode}"; + } $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) ); // Set default values. $format = '%link'; diff --git a/packages/block-library/src/post-navigation-link/style.scss b/packages/block-library/src/post-navigation-link/style.scss index 7af462c3808193..881a4a0e062c69 100644 --- a/packages/block-library/src/post-navigation-link/style.scss +++ b/packages/block-library/src/post-navigation-link/style.scss @@ -20,4 +20,19 @@ } } + &.has-writing-mode.is-vertical-rl { + writing-mode: vertical-rl; + } + + &.has-writing-mode.is-vertical-lr { + writing-mode: vertical-lr; + } + + &.has-text-align-right.has-writing-mode.is-vertical-rl { + transform: scale(-1, -1); + } +} + +body.rtl .wp-block-post-navigation-link .has-text-align-left.has-writing-mode.is-vertical-lr { + transform: scale(-1, -1); } From 30bf09c320d2d143841c8d7db7589a345a9160cb Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Tue, 1 Aug 2023 05:10:54 +0200 Subject: [PATCH 2/5] Update packages/block-library/src/post-navigation-link/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 b30a54cef543a8..aa16a47b03bc4d 100644 --- a/packages/block-library/src/post-navigation-link/index.php +++ b/packages/block-library/src/post-navigation-link/index.php @@ -32,7 +32,7 @@ function render_block_core_post_navigation_link( $attributes, $content ) { $writing_mode = _wp_array_get( $attributes, array( 'style', 'typography', 'writingMode' ), null ); if ( isset( $writing_mode ) ) { $classes .= " has-writing-mode"; - $classes .= " is-{$writing_mode}"; + $classes .= ' is-{$writing_mode}'; } $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) ); // Set default values. From 4eba44cca316a86039ec96e9ac1877aae512efdb Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Tue, 1 Aug 2023 05:22:50 +0200 Subject: [PATCH 3/5] Update packages/block-library/src/post-navigation-link/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 aa16a47b03bc4d..9b48783514d191 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 ) { $writing_mode = _wp_array_get( $attributes, array( 'style', 'typography', 'writingMode' ), null ); if ( isset( $writing_mode ) ) { - $classes .= " has-writing-mode"; + $classes .= ' has-writing-mode'; $classes .= ' is-{$writing_mode}'; } $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) ); From 8ccf2d2e5a1c95131972b359e68fa9b1e0d12d09 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 1 Sep 2023 05:45:39 +0200 Subject: [PATCH 4/5] Revert the typography hook and update CSS --- packages/block-editor/src/hooks/typography.js | 87 +------------------ .../block-library/src/paragraph/editor.scss | 4 + .../block-library/src/paragraph/style.scss | 8 +- .../src/post-navigation-link/index.php | 2 +- .../src/post-navigation-link/style.scss | 16 +--- 5 files changed, 10 insertions(+), 107 deletions(-) diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js index 3b2ba6ff3c7803..c7d1a6ba3b1443 100644 --- a/packages/block-editor/src/hooks/typography.js +++ b/packages/block-editor/src/hooks/typography.js @@ -1,14 +1,8 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks'; import { useMemo, useCallback } from '@wordpress/element'; -import { addFilter } from '@wordpress/hooks'; /** * Internal dependencies @@ -22,11 +16,7 @@ import { import { LINE_HEIGHT_SUPPORT_KEY } from './line-height'; import { FONT_FAMILY_SUPPORT_KEY } from './font-family'; import { FONT_SIZE_SUPPORT_KEY } from './font-size'; -import { - cleanEmptyObject, - useBlockSettings, - shouldSkipSerialization, -} from './utils'; +import { cleanEmptyObject, useBlockSettings } from './utils'; function omit( object, keys ) { return Object.fromEntries( @@ -55,14 +45,6 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [ LETTER_SPACING_SUPPORT_KEY, ]; -const hasWritingModeSupport = ( blockType ) => { - const writingModeSupport = getBlockSupport( - blockType, - WRITING_MODE_SUPPORT_KEY - ); - return writingModeSupport; -}; - function styleToAttributes( style ) { const updatedStyle = { ...omit( style, [ 'fontFamily' ] ) }; const fontSizeValue = style?.typography?.fontSize; @@ -171,70 +153,3 @@ export const hasTypographySupport = ( blockName ) => { hasBlockSupport( blockName, key ) ); }; - -/** - * Filters registered block settings to extend the block edit wrapper - * to apply the desired classnames properly. - * - * @param {Object} settings Original block settings. - * - * @return {Object} Filtered block settings. - */ -export function addEditProps( settings ) { - if ( ! hasWritingModeSupport( settings ) ) { - return settings; - } - - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return addSaveProps( props, settings, attributes ); - }; - - return settings; -} - -/** - * Override props assigned to save component to inject typography classnames. - * - * @param {Object} props Additional props applied to save element. - * @param {Object} blockType Block type. - * @param {Object} attributes Block attributes. - * - * @return {Object} Filtered props applied to save element. - */ -export function addSaveProps( props, blockType, attributes ) { - if ( - ! hasWritingModeSupport( blockType ) || - shouldSkipSerialization( blockType, WRITING_MODE_SUPPORT_KEY ) - ) { - return props; - } - - const { style } = attributes; - const writingMode = style?.typography?.writingMode; - const newClassName = classnames( props.className, { - 'has-writing-mode': writingMode ? true : false, - 'is-vertical-lr': writingMode === 'vertical-lr' ? true : false, - 'is-vertical-rl': writingMode === 'vertical-rl' ? true : false, - 'is-horizontal-tb': writingMode === 'horizontal-tb' ? true : false, - } ); - props.className = newClassName ? newClassName : undefined; - - return props; -} - -addFilter( - 'blocks.getSaveContent.extraProps', - 'core/typography/addSaveProps', - addSaveProps -); - -addFilter( - 'blocks.registerBlockType', - 'core/typography/addEditProps', - addEditProps -); diff --git a/packages/block-library/src/paragraph/editor.scss b/packages/block-library/src/paragraph/editor.scss index 61dfe13ed9bbaa..9592bf41464dff 100644 --- a/packages/block-library/src/paragraph/editor.scss +++ b/packages/block-library/src/paragraph/editor.scss @@ -17,3 +17,7 @@ } } } + +.block-editor-block-list__block[data-type="core/paragraph"].has-text-align-right[style*="writing-mode: vertical-rl"] { + rotate: 180deg; +} diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss index 102ee9e406b6b1..1237e7c21e3672 100644 --- a/packages/block-library/src/paragraph/style.scss +++ b/packages/block-library/src/paragraph/style.scss @@ -50,10 +50,6 @@ p.has-background { color: inherit; } -p.has-text-align-right.has-writing-mode.is-vertical-rl { - transform: scale(-1, -1); -} - -body.rtl p.has-text-align-left.has-writing-mode.is-vertical-lr { - transform: scale(-1, -1); +p.has-text-align-right[style*="writing-mode:vertical-rl"] { + rotate: 180deg; } diff --git a/packages/block-library/src/post-navigation-link/index.php b/packages/block-library/src/post-navigation-link/index.php index 8b5d82e745aeed..c9e3bfa8aeff1e 100644 --- a/packages/block-library/src/post-navigation-link/index.php +++ b/packages/block-library/src/post-navigation-link/index.php @@ -30,7 +30,7 @@ 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']};"; } $wrapper_attributes = get_block_wrapper_attributes( array( diff --git a/packages/block-library/src/post-navigation-link/style.scss b/packages/block-library/src/post-navigation-link/style.scss index 881a4a0e062c69..7df2079af60bf9 100644 --- a/packages/block-library/src/post-navigation-link/style.scss +++ b/packages/block-library/src/post-navigation-link/style.scss @@ -20,19 +20,7 @@ } } - &.has-writing-mode.is-vertical-rl { - writing-mode: vertical-rl; + &.has-text-align-right[style*="writing-mode: vertical-rl"] { + rotate: 180deg; } - - &.has-writing-mode.is-vertical-lr { - writing-mode: vertical-lr; - } - - &.has-text-align-right.has-writing-mode.is-vertical-rl { - transform: scale(-1, -1); - } -} - -body.rtl .wp-block-post-navigation-link .has-text-align-left.has-writing-mode.is-vertical-lr { - transform: scale(-1, -1); } From daa4034f86fc4ea04c2ab98867646d73cf1140c6 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 1 Sep 2023 06:17:13 +0200 Subject: [PATCH 5/5] Add rotation for LTR --- packages/block-library/src/paragraph/editor.scss | 3 ++- packages/block-library/src/paragraph/style.scss | 3 ++- packages/block-library/src/post-navigation-link/style.scss | 3 ++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/paragraph/editor.scss b/packages/block-library/src/paragraph/editor.scss index 9592bf41464dff..369cc5cb1d63a9 100644 --- a/packages/block-library/src/paragraph/editor.scss +++ b/packages/block-library/src/paragraph/editor.scss @@ -18,6 +18,7 @@ } } -.block-editor-block-list__block[data-type="core/paragraph"].has-text-align-right[style*="writing-mode: vertical-rl"] { +.block-editor-block-list__block[data-type="core/paragraph"].has-text-align-right[style*="writing-mode: vertical-rl"], +.block-editor-block-list__block[data-type="core/paragraph"].has-text-align-left[style*="writing-mode: vertical-lr"] { rotate: 180deg; } diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss index 1237e7c21e3672..34960bdb2fd589 100644 --- a/packages/block-library/src/paragraph/style.scss +++ b/packages/block-library/src/paragraph/style.scss @@ -50,6 +50,7 @@ p.has-background { color: inherit; } -p.has-text-align-right[style*="writing-mode:vertical-rl"] { +p.has-text-align-right[style*="writing-mode:vertical-rl"], +p.has-text-align-left[style*="writing-mode:vertical-lr"] { rotate: 180deg; } diff --git a/packages/block-library/src/post-navigation-link/style.scss b/packages/block-library/src/post-navigation-link/style.scss index 7df2079af60bf9..0f6a9fd3062b81 100644 --- a/packages/block-library/src/post-navigation-link/style.scss +++ b/packages/block-library/src/post-navigation-link/style.scss @@ -20,7 +20,8 @@ } } - &.has-text-align-right[style*="writing-mode: vertical-rl"] { + &.has-text-align-right[style*="writing-mode: vertical-rl"], + &.has-text-align-left[style*="writing-mode: vertical-lr"] { rotate: 180deg; } }