diff --git a/includes/blocks/class-kadence-blocks-advanced-heading-block.php b/includes/blocks/class-kadence-blocks-advanced-heading-block.php index 11eb262e4..7aac1687f 100644 --- a/includes/blocks/class-kadence-blocks-advanced-heading-block.php +++ b/includes/blocks/class-kadence-blocks-advanced-heading-block.php @@ -204,7 +204,16 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) { $css->add_property( 'text-shadow', ( isset( $attributes['textShadowMobile'][0]['hOffset'] ) && ! empty( $attributes['textShadowMobile'][0]['hOffset'] ) ? $attributes['textShadowMobile'][0]['hOffset'] : ( isset( $attributes['textShadowTablet'][0]['hOffset'] ) && ! empty( $attributes['textShadowTablet'][0]['hOffset'] ) ? $attributes['textShadowTablet'][0]['hOffset'] : $attributes['textShadow'][0]['hOffset']) ) . 'px ' . ( isset( $attributes['textShadowMobile'][0]['vOffset'] ) && ! empty( $attributes['textShadowMobile'][0]['vOffset'] ) ? $attributes['textShadowMobile'][0]['vOffset'] : (isset( $attributes['textShadowTablet'][0]['vOffset'] ) && ! empty( $attributes['textShadowTablet'][0]['vOffset'] ) ? $attributes['textShadowTablet'][0]['vOffset'] : $attributes['textShadow'][0]['vOffset']) ) . 'px ' . ( isset( $attributes['textShadowMobile'][0]['blur'] ) && ! empty( $attributes['textShadowMobile'][0]['blur'] ) ? $attributes['textShadowMobile'][0]['blur'] : (isset( $attributes['textShadowTablet'][0]['blur'] ) && ! empty( $attributes['textShadowTablet'][0]['blur'] ) ? $attributes['textShadowTablet'][0]['blur'] : $attributes['textShadow'][0]['blur']) ) . 'px ' . (isset($attributes['textShadowMobile'][0]['color']) && ! empty($attributes['textShadowMobile'][0]['color']) ? $css->render_color($attributes['textShadowMobile'][0]['color']) : (isset($attributes['textShadowTablet'][0]['color']) && !empty($attributes['textShadowTablet'][0]['color']) ? $css->render_color($attributes['textShadowTablet'][0]['color']) : $css->render_color($attributes['textShadow'][0]['color']))) ); } } - + if (isset($attributes['textOrientation']) && $attributes['textOrientation'] == 'stacked') { + $css->add_property( 'writing-mode', 'vertical-lr' ); + $css->add_property( 'text-orientation', 'upright' ); + } + if (isset($attributes['textOrientation']) && $attributes['textOrientation'] == 'sideways-up') { + $css->add_property( 'writing-mode', 'sideways-lr' ); + } + if (isset($attributes['textOrientation']) && $attributes['textOrientation'] == 'sideways-down') { + $css->add_property( 'writing-mode', 'vertical-lr' ); + } $css->set_media_state( 'tablet' ); // Old size first. diff --git a/src/blocks/advancedheading/block.json b/src/blocks/advancedheading/block.json index 5b0e6f5f6..228105690 100644 --- a/src/blocks/advancedheading/block.json +++ b/src/blocks/advancedheading/block.json @@ -327,6 +327,10 @@ "type": "boolean", "default": false }, + "textOrientation": { + "type": "string", + "default": "horizontal" + }, "textShadow": { "type": "array", "default": [ diff --git a/src/blocks/advancedheading/edit.js b/src/blocks/advancedheading/edit.js index 94b14e970..1fd4ee933 100644 --- a/src/blocks/advancedheading/edit.js +++ b/src/blocks/advancedheading/edit.js @@ -124,6 +124,7 @@ function KadenceAdvancedHeading(props) { textShadow, textShadowTablet, textShadowMobile, + textOrientation, mobileAlign, tabletAlign, size, @@ -1012,6 +1013,20 @@ function KadenceAdvancedHeading(props) { previewColorTextShadow )}` : undefined, + writingMode: + textOrientation === 'horizontal' + ? '' + : textOrientation === 'stacked' || textOrientation === 'sideways-down' + ? 'vertical-lr' + : textOrientation === 'sideways-up' + ? 'sideways-lr' + : '', + textOrientation: + textOrientation === 'horizontal' || textOrientation === 'sideways-down' + ? '' + : textOrientation === 'stacked' + ? 'upright' + : '', }} placeholder={__('Write something…', 'kadence-blocks')} /> @@ -1126,6 +1141,47 @@ function KadenceAdvancedHeading(props) { } }, [isSelected]); + const horizontalIcon = ( +