stellarwp · gilbert-hernandez · Jan 21, 2025 · Jan 23, 2025 · Jan 23, 2025 · Jan 23, 2025
diff --git a/includes/blocks/class-kadence-blocks-advanced-heading-block.php b/includes/blocks/class-kadence-blocks-advanced-heading-block.php
@@ -204,7 +204,62 @@ 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']) ) {
+			switch ( $attributes['textOrientation'] ) {
+				case 'horizontal':
+					$css->add_property( 'writing-mode', 'horizontal-tb' );
+					$css->add_property( 'text-orientation', 'mixed' );
+					break;
+				case 'stacked':
+					$css->add_property( 'writing-mode', 'vertical-lr' );
+					$css->add_property( 'text-orientation', 'upright' );
+					break;
+				case 'sideways-down':
+					$css->add_property( 'writing-mode', 'vertical-lr' );
+					break;
+				case 'sideways-up':
+					$css->add_property( 'writing-mode', 'sideways-lr' );
+					break;
+			}
+		}
+		if ( isset($attributes['tabletTextOrientation']) ) {
+			$css->set_media_state('tablet');
+			switch ( $attributes['tabletTextOrientation'] ) {
+				case 'horizontal':
+					$css->add_property( 'writing-mode', 'horizontal-tb' );
+					$css->add_property( 'text-orientation', 'mixed' );
+					break;
+				case 'stacked':
+					$css->add_property( 'writing-mode', 'vertical-lr' );
+					$css->add_property( 'text-orientation', 'upright' );
+					break;
+				case 'sideways-down':
+					$css->add_property( 'writing-mode', 'vertical-lr' );
+					break;
+				case 'sideways-up':
+					$css->add_property( 'writing-mode', 'sideways-lr' );
+					break;
+			}
+		}
+		if ( isset($attributes['mobileTextOrientation']) ) {
+			$css->set_media_state('mobile');
+			switch ( $attributes['mobileTextOrientation'] ) {
+				case 'horizontal':
+					$css->add_property( 'writing-mode', 'horizontal-tb' );
+					$css->add_property( 'text-orientation', 'mixed' );
+					break;
+				case 'stacked':
+					$css->add_property( 'writing-mode', 'vertical-lr' );
+					$css->add_property( 'text-orientation', 'upright' );
+					break;
+				case 'sideways-down':
+					$css->add_property( 'writing-mode', 'vertical-lr' );
+					break;
+				case 'sideways-up':
+					$css->add_property( 'writing-mode', 'sideways-lr' );
+					break;
+			}
+		}
 
 		$css->set_media_state( 'tablet' );
 		// Old size first.

diff --git a/src/blocks/advancedheading/block.json b/src/blocks/advancedheading/block.json
@@ -327,6 +327,16 @@
 			"type": "boolean",
 			"default": false
 		},
+		"textOrientation": {
+			"type": "string"
+		},
+		"tabletTextOrientation": {
+			"type": "string"
+		},
+		"mobileTextOrientation": {
+			"type": "string"
+		},
+
 		"textShadow": {
 			"type": "array",
 			"default": [

diff --git a/src/blocks/advancedheading/edit.js b/src/blocks/advancedheading/edit.js
@@ -38,9 +38,16 @@ import {
 	DynamicTextControl,
 	DynamicInlineReplaceControl,
 	GradientControl,
+	ResponsiveKadenceRadioButtons,
 } from '@kadence/components';
 
-import { dynamicIcon } from '@kadence/icons';
+import {
+	dynamicIcon,
+	horizontalTextOrientationIcon,
+	stackedTextOrientationIcon,
+	sidewaysDownTextOrientationIcon,
+	sidewaysUpTextOrientationIcon,
+} from '@kadence/icons';
 
 import {
 	KadenceColorOutput,
@@ -124,6 +131,9 @@ function KadenceAdvancedHeading(props) {
 		textShadow,
 		textShadowTablet,
 		textShadowMobile,
+		textOrientation,
+		tabletTextOrientation,
+		mobileTextOrientation,
 		mobileAlign,
 		tabletAlign,
 		size,
@@ -761,6 +771,12 @@ function KadenceAdvancedHeading(props) {
 		undefined !== tabletMarkBorderRadius ? tabletMarkBorderRadius[3] : '',
 		undefined !== mobileMarkBorderRadius ? mobileMarkBorderRadius[3] : ''
 	);
+	const previewTextOrientation = getPreviewSize(
+		previewDevice,
+		undefined !== textOrientation ? textOrientation : '',
+		undefined !== tabletTextOrientation ? tabletTextOrientation : '',
+		undefined !== mobileTextOrientation ? mobileTextOrientation : ''
+	);
 	const markBorderRadiusUnitPreview = undefined !== markBorderRadiusUnit ? markBorderRadiusUnit : 'px';
 	let backgroundIgnoreClass = backgroundColorClass ? false : true;
 	if (!backgroundIgnoreClass && !kadence_blocks_params.isKadenceT && background && background.startsWith('palette')) {
@@ -1012,6 +1028,13 @@ function KadenceAdvancedHeading(props) {
 									previewColorTextShadow
 							  )}`
 							: undefined,
+						writingMode:
+							previewTextOrientation === 'stacked' || previewTextOrientation === 'sideways-down'
+								? 'vertical-lr'
+								: previewTextOrientation === 'sideways-up'
+								? 'sideways-lr'
+								: '',
+						textOrientation: previewTextOrientation === 'stacked' ? 'upright' : '',
 					}}
 					placeholder={__('Write something…', 'kadence-blocks')}
 				/>
@@ -1125,7 +1148,6 @@ function KadenceAdvancedHeading(props) {
 			};
 		}
 	}, [isSelected]);
-
 	return (
 		<div {...blockProps}>
 			<style>
@@ -1775,6 +1797,44 @@ function KadenceAdvancedHeading(props) {
 									/>
 								)}
 							</KadencePanelBody>
+							<KadencePanelBody
+								title={__('Text Orientation', 'kadence-blocks')}
+								initialOpen={false}
+								panelName={'kb-adv-heading-text-orientation'}
+							>
+								<ResponsiveKadenceRadioButtons
+									label={__('Orientation', 'kadence-blocks')}
+									value={previewTextOrientation}
+									tabletValue={previewTextOrientation}
+									mobileValue={previewTextOrientation}
+									className={'kb-text-orientation'}
+									options={[
+										{
+											value: 'horizontal',
+											tooltip: __('Horizontal', 'kadence-blocks'),
+											icon: horizontalTextOrientationIcon,
+										},
+										{
+											value: 'stacked',
+											tooltip: __('Stacked Vertically', 'kadence-blocks'),
+											icon: stackedTextOrientationIcon,
+										},
+										{
+											value: 'sideways-down',
+											tooltip: __('Sideways Down', 'kadence-blocks'),
+											icon: sidewaysDownTextOrientationIcon,
+										},
+										{
+											value: 'sideways-up',
+											tooltip: __('Sideways Up', 'kadence-blocks'),
+											icon: sidewaysUpTextOrientationIcon,
+										},
+									]}
+									onChange={(value) => setAttributes({ textOrientation: value })}
+									onChangeTablet={(value) => setAttributes({ tabletTextOrientation: value })}
+									onChangeMobile={(value) => setAttributes({ mobileTextOrientation: value })}
+								/>
+							</KadencePanelBody>
 							{showSettings('iconSettings', 'kadence/advancedheading') && (
 								<KadencePanelBody
 									title={__('Icon Settings', 'kadence-blocks')}

diff --git a/src/blocks/advancedheading/editor.scss b/src/blocks/advancedheading/editor.scss
@@ -601,3 +601,7 @@ button.components-button.kt-font-clear-btn {
 .kb-tooltip-popover .components-popover__content .block-editor-link-control {
 	width: auto;
 }
+
+.kb-text-orientation .kadence-radio-container-control.components-button-group button.has-icon svg {
+	margin: 0 0;
+}
diff --git a/src/packages/components/src/responsive-radio-buttons/index.js b/src/packages/components/src/responsive-radio-buttons/index.js
@@ -37,6 +37,7 @@ export default function ResponsiveKadenceRadioButtons({
 			desktopChildren={
 				<KadenceRadioButtons
 					// className={'kadence-row-layout-radio-btns kb-acccordion-column-layout'}
+					className={className}
 					value={value}
 					options={options}
 					onChange={onChange}
@@ -49,6 +50,7 @@ export default function ResponsiveKadenceRadioButtons({
 			tabletChildren={
 				<KadenceRadioButtons
 					// className={'kadence-row-layout-radio-btns kb-acccordion-column-layout'}
+					className={className}
 					value={tabletValue}
 					options={tabletOptions}
 					onChange={onChangeTablet}
@@ -61,6 +63,7 @@ export default function ResponsiveKadenceRadioButtons({
 			mobileChildren={
 				<KadenceRadioButtons
 					// className={'kadence-row-layout-radio-btns kb-acccordion-column-layout'}
+					className={className}
 					value={mobileValue}
 					options={mobileOptions}
 					onChange={onChangeMobile}

diff --git a/src/packages/icons/src/index.js b/src/packages/icons/src/index.js
@@ -258,3 +258,10 @@ export { default as headerSectionBlockIcon } from './block-icons/header-section'
 export { default as headerRowBlockIcon } from './block-icons/header-row';
 export { default as headerColumnBlockIcon } from './block-icons/header-column';
 export { default as searchBlockIcon } from './block-icons/search';
+
+// Text Orientation
+export { default as horizontalTextOrientationIcon } from './text-orientation/horizontal';
+export { default as stackedTextOrientationIcon } from './text-orientation/stacked-vertical';
+export { default as sidewaysDownTextOrientationIcon } from './text-orientation/sideways-down';
+export { default as sidewaysUpTextOrientationIcon } from './text-orientation/sideways-up';
+
diff --git a/src/packages/icons/src/text-orientation/horizontal/index.js b/src/packages/icons/src/text-orientation/horizontal/index.js
@@ -0,0 +1,15 @@
+export default
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	id="b" viewBox="0 0 131 164.33"
+>
+	<g
+		id="c"
+		strokeWidth="0"
+	>
+		<path
+			d="m131 145.76-28.18-18.57v10.82H0v15.5h102.82v10.82zM84.03 97.69H42.98L37.28 117H.37L44.34 0h39.44l43.96 117H89.88zm-7.5-25.3L63.62 30.33 50.84 72.39z">
+		</path>
+	</g>
+</svg>;
+
diff --git a/src/packages/icons/src/text-orientation/sideways-down/index.js b/src/packages/icons/src/text-orientation/sideways-down/index.js
@@ -0,0 +1,14 @@
+export default
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	id="b" viewBox="0 0 164 164.33"
+>
+	<g
+		id="c"
+		strokeWidth="0"
+	>
+		<path d="m18.57 131 18.58-28.18H26.32V0h-15.5v102.82H0zM66.65 84.03V42.98l-19.31-5.7V.37l117 43.97v39.44l-117 43.96V89.88zm25.3-7.5 42.06-12.91-42.06-12.78z"></path>
+
+	</g>
+</svg>;
+
diff --git a/src/packages/icons/src/text-orientation/sideways-up/index.js b/src/packages/icons/src/text-orientation/sideways-up/index.js
@@ -0,0 +1,13 @@
+export default
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	id="b" viewBox="0 0 164 164.33"
+>
+	<g
+		id="c"
+		strokeWidth="0"
+	>
+		<path d="m145.76 0-18.57 28.18h10.82V131h15.5V28.18h10.82zM97.69 46.97v41.05l19.31 5.7v36.91L0 86.66V47.22L117 3.26v37.86zm-25.3 7.5L30.33 67.38l42.06 12.78z"></path>
+	</g>
+</svg>;
+
diff --git a/src/packages/icons/src/text-orientation/stacked-vertical/index.js b/src/packages/icons/src/text-orientation/stacked-vertical/index.js
@@ -0,0 +1,15 @@
+export default
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	id="b" viewBox="0 0 164 164.33"
+>
+	<g
+		id="c"
+		strokeWidth="0"
+	>
+		<path
+			d="M126.51 99.72H85.46l-5.7 19.31H42.85L86.83 2.04h39.44l43.96 117h-37.86l-5.85-19.31Zm-7.5-25.3L106.1 32.36 93.32 74.42zM18.57 131l18.58-28.18H26.32V0h-15.5v102.82H0z">
+		</path>
+	</g>
+</svg>;
+