From 0f60f5e4ca3fb5b249ea298a4c372478a12277fa Mon Sep 17 00:00:00 2001 From: gilbert-hernandez Date: Tue, 21 Jan 2025 14:20:58 -0700 Subject: [PATCH 1/7] KAD-4016 added vertical text option --- ...-kadence-blocks-advanced-heading-block.php | 4 ++ src/blocks/advancedheading/block.json | 11 +++++ src/blocks/advancedheading/edit.js | 44 +++++++++++++++++++ 3 files changed, 59 insertions(+) diff --git a/includes/blocks/class-kadence-blocks-advanced-heading-block.php b/includes/blocks/class-kadence-blocks-advanced-heading-block.php index 11eb262e4..674d673c1 100644 --- a/includes/blocks/class-kadence-blocks-advanced-heading-block.php +++ b/includes/blocks/class-kadence-blocks-advanced-heading-block.php @@ -204,6 +204,10 @@ 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['enableTextOrientation']) ) { + $css->add_property( 'writing-mode', ( isset($attributes['textWritingMode']) ? $attributes['textWritingMode'] : 'vertical-lr' ) ); + $css->add_property( 'text-orientation', ( isset($attributes['textOrientation']) ? $attributes['textOrientation'] : 'mixed' ) ); + } $css->set_media_state( 'tablet' ); diff --git a/src/blocks/advancedheading/block.json b/src/blocks/advancedheading/block.json index 5b0e6f5f6..3c6015f85 100644 --- a/src/blocks/advancedheading/block.json +++ b/src/blocks/advancedheading/block.json @@ -327,6 +327,17 @@ "type": "boolean", "default": false }, + "enableTextOrientation": { + "type": "boolean", + "default": false + }, + "textOrientation": { + "type": "string" + }, + "textWritingMode": { + "type": "string", + "default": "vertical-lr" + }, "textShadow": { "type": "array", "default": [ diff --git a/src/blocks/advancedheading/edit.js b/src/blocks/advancedheading/edit.js index 94b14e970..6e818605c 100644 --- a/src/blocks/advancedheading/edit.js +++ b/src/blocks/advancedheading/edit.js @@ -124,6 +124,9 @@ function KadenceAdvancedHeading(props) { textShadow, textShadowTablet, textShadowMobile, + enableTextOrientation, + textOrientation, + textWritingMode, mobileAlign, tabletAlign, size, @@ -1012,6 +1015,8 @@ function KadenceAdvancedHeading(props) { previewColorTextShadow )}` : undefined, + writingMode: enableTextOrientation ? textWritingMode : 'horizontal-tb', + textOrientation: enableTextOrientation ? textOrientation : 'mixed', }} placeholder={__('Write something…', 'kadence-blocks')} /> @@ -1775,6 +1780,45 @@ function KadenceAdvancedHeading(props) { /> )} + + { + setAttributes({ enableTextOrientation: value }); + }} + /> + {enableTextOrientation === true && ( + <> + setAttributes({ textWritingMode: value })} + /> + setAttributes({ textOrientation: value })} + /> + + )} + {showSettings('iconSettings', 'kadence/advancedheading') && ( Date: Thu, 23 Jan 2025 09:38:38 -0700 Subject: [PATCH 2/7] KAD-4016 added vertical text option --- ...-kadence-blocks-advanced-heading-block.php | 13 ++-- src/blocks/advancedheading/block.json | 9 +-- src/blocks/advancedheading/edit.js | 66 +++++++++---------- 3 files changed, 40 insertions(+), 48 deletions(-) diff --git a/includes/blocks/class-kadence-blocks-advanced-heading-block.php b/includes/blocks/class-kadence-blocks-advanced-heading-block.php index 674d673c1..7aac1687f 100644 --- a/includes/blocks/class-kadence-blocks-advanced-heading-block.php +++ b/includes/blocks/class-kadence-blocks-advanced-heading-block.php @@ -204,11 +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['enableTextOrientation']) ) { - $css->add_property( 'writing-mode', ( isset($attributes['textWritingMode']) ? $attributes['textWritingMode'] : 'vertical-lr' ) ); - $css->add_property( 'text-orientation', ( isset($attributes['textOrientation']) ? $attributes['textOrientation'] : 'mixed' ) ); + 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 3c6015f85..228105690 100644 --- a/src/blocks/advancedheading/block.json +++ b/src/blocks/advancedheading/block.json @@ -327,16 +327,9 @@ "type": "boolean", "default": false }, - "enableTextOrientation": { - "type": "boolean", - "default": false - }, "textOrientation": { - "type": "string" - }, - "textWritingMode": { "type": "string", - "default": "vertical-lr" + "default": "horizontal" }, "textShadow": { "type": "array", diff --git a/src/blocks/advancedheading/edit.js b/src/blocks/advancedheading/edit.js index 6e818605c..80334ac25 100644 --- a/src/blocks/advancedheading/edit.js +++ b/src/blocks/advancedheading/edit.js @@ -124,9 +124,7 @@ function KadenceAdvancedHeading(props) { textShadow, textShadowTablet, textShadowMobile, - enableTextOrientation, textOrientation, - textWritingMode, mobileAlign, tabletAlign, size, @@ -1015,8 +1013,8 @@ function KadenceAdvancedHeading(props) { previewColorTextShadow )}` : undefined, - writingMode: enableTextOrientation ? textWritingMode : 'horizontal-tb', - textOrientation: enableTextOrientation ? textOrientation : 'mixed', + 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')} /> @@ -1785,39 +1783,35 @@ function KadenceAdvancedHeading(props) { initialOpen={false} panelName={'kb-adv-heading-text-orientation'} > - { - setAttributes({ enableTextOrientation: value }); - }} + setAttributes({ textOrientation: value })} /> - {enableTextOrientation === true && ( - <> - setAttributes({ textWritingMode: value })} - /> - setAttributes({ textOrientation: value })} - /> - - )} {showSettings('iconSettings', 'kadence/advancedheading') && ( Date: Thu, 23 Jan 2025 16:40:23 +0000 Subject: [PATCH 3/7] Fix code style issues with ESLint --- src/blocks/advancedheading/edit.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/blocks/advancedheading/edit.js b/src/blocks/advancedheading/edit.js index 80334ac25..7a73c27d1 100644 --- a/src/blocks/advancedheading/edit.js +++ b/src/blocks/advancedheading/edit.js @@ -1013,8 +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' : '', + 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')} /> From 4a1891781c3e151b2ed0e61f95bc563a1e8fd33d Mon Sep 17 00:00:00 2001 From: gilbert-hernandez Date: Thu, 23 Jan 2025 10:35:43 -0700 Subject: [PATCH 4/7] KAD-4016 added icons --- src/blocks/advancedheading/edit.js | 71 ++++++++++++++++++++++++++---- 1 file changed, 63 insertions(+), 8 deletions(-) diff --git a/src/blocks/advancedheading/edit.js b/src/blocks/advancedheading/edit.js index 80334ac25..ed751c0ab 100644 --- a/src/blocks/advancedheading/edit.js +++ b/src/blocks/advancedheading/edit.js @@ -64,6 +64,10 @@ import './formats/markformat'; import './formats/typed-text'; import './formats/tooltips'; import AIText from './ai-text/ai-text.js'; +// import { ReactComponent as HorizontalIcon } from './icons/horizontal.svg'; +// import { ReactComponent as StackedIcon } from './icons/stacked-vertically.svg'; +// import { ReactComponent as SidewaysDownIcon } from './icons/sideways-down.svg'; +// import { ReactComponent as SidewaysUpIcon } from './icons/sideways-up.svg'; import Typed from 'typed.js'; @@ -1129,6 +1133,57 @@ function KadenceAdvancedHeading(props) { } }, [isSelected]); + // const horizontalIcon = ( + // + // + // + // + // + // ); + const horizontalIcon = ( +
+ {/**/} + + + + + +
+ ); + const stackedIcon = ( +
+ {/**/} + + < + path d="M106.13,97.69h-41.05l-5.7,19.31H22.46L66.44,0h39.44l43.96,117h-37.86l-5.85-19.31ZM98.63,72.39l-12.91-42.06-12.78,42.06h25.69Z" style={{ fill:'#000', strokeWidth:'0px' }}/> + + + +
+ ); + const sidewaysDownIcon = ( +
+ {/**/} + + + + + + +
+ ); + const sidewaysUpIcon = ( +
+ {/**/} + + + + + + +
+ ); + return (