Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature/KAD-4016 #654

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
+105 −1
Open

feature/KAD-4016 #654

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0f60f5e
KAD-4016 added vertical text option
gilbert-hernandez Jan 21, 2025
769acc6
KAD-4016 added vertical text option
gilbert-hernandez Jan 23, 2025
204db46
Fix code style issues with ESLint
lint-action Jan 23, 2025
4a18917
KAD-4016 added icons
gilbert-hernandez Jan 23, 2025
5bf8db8
Merge remote-tracking branch 'origin/feature/KAD-4016' into feature/K…
gilbert-hernandez Jan 23, 2025
5b64f52
Fix code style issues with ESLint
lint-action Jan 23, 2025
01079f3
KAD-4016 clean up and icon style correction
gilbert-hernandez Jan 23, 2025
11267c4
Fix code style issues with ESLint
lint-action Jan 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion includes/blocks/class-kadence-blocks-advanced-heading-block.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 4 additions & 0 deletions src/blocks/advancedheading/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -327,6 +327,10 @@
"type": "boolean",
"default": false
},
"textOrientation": {
"type": "string",
"default": "horizontal"
},
"textShadow": {
"type": "array",
"default": [
Expand Down
91 changes: 91 additions & 0 deletions src/blocks/advancedheading/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@ function KadenceAdvancedHeading(props) {
textShadow,
textShadowTablet,
textShadowMobile,
textOrientation,
mobileAlign,
tabletAlign,
size,
Expand Down Expand Up @@ -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')}
/>
Expand Down Expand Up @@ -1126,6 +1141,47 @@ function KadenceAdvancedHeading(props) {
}
}, [isSelected]);

const horizontalIcon = (
<div style={{ height: '24px', width: '24px' }}>
<svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141.73 139.79">
<g id="c">
<path d="M85.44,97.69h-41.05l-5.7,19.31H1.78L45.75,0h39.44l43.96,117h-37.86l-5.85-19.31ZM77.94,72.39l-12.91-42.06-12.78,42.06h25.69Z" />
<polygon points="141.73 131.23 132.91 122.67 132.91 128.26 0 128.26 0 134.2 132.91 134.2 132.91 139.79 141.73 131.23" />
</g>
</svg>
</div>
);
const stackedIcon = (
<div style={{ height: '24px', width: '24px' }}>
<svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 149.84 133.3">
<g id="c">
<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" />
<polygon points="8.56 133.3 17.11 125 11.53 125 11.53 0 5.59 0 5.59 125 0 125 8.56 133.3" />
</g>
</svg>
</div>
);
const sidewaysDownIcon = (
<div style={{ height: '24px', width: '24px' }}>
<svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 139.79 141.73">
<g id="c">
<path d="M42.1,90.84v-41.05l-19.31-5.7V7.18l117,43.97v39.44l-117,43.96v-37.86l19.31-5.85ZM67.4,83.34l42.06-12.91-42.06-12.78v25.69Z" />
<polygon points="8.56 141.73 17.11 132.91 11.53 132.91 11.53 0 5.59 0 5.59 132.91 0 132.91 8.56 141.73" />
</g>
</svg>
</div>
);
const sidewaysUpIcon = (
<div style={{ height: '24px', width: '24px' }}>
<svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 139.79 141.73">
<g id="c">
<path d="M97.69,50.89v41.05s19.31,5.7,19.31,5.7v36.91S0,90.58,0,90.58v-39.44S117,7.18,117,7.18v37.86s-19.31,5.85-19.31,5.85ZM72.39,58.39l-42.06,12.91,42.06,12.78v-25.69Z" />
<polygon points="131.23 0 122.67 8.83 128.26 8.83 128.26 141.73 134.2 141.73 134.2 8.83 139.79 8.83 131.23 0" />
</g>
</svg>
</div>
);

return (
<div {...blockProps}>
<style>
Expand Down Expand Up @@ -1775,6 +1831,41 @@ function KadenceAdvancedHeading(props) {
/>
)}
</KadencePanelBody>
<KadencePanelBody
title={__('Text Orientation', 'kadence-blocks')}
initialOpen={false}
panelName={'kb-adv-heading-text-orientation'}
>
<KadenceRadioButtons
label={__('Orientation', 'kadence-blocks')}
value={textOrientation}
className={'kb-letter-case'}
options={[
{
value: 'horizontal',
tooltip: __('Horizontal', 'kadence-blocks'),
icon: horizontalIcon,
},
{
value: 'stacked',
tooltip: __('Stacked Vertically', 'kadence-blocks'),
icon: stackedIcon,
},
{
value: 'sideways-down',
tooltip: __('Sideways Down', 'kadence-blocks'),
icon: sidewaysDownIcon,
},
{
value: 'sideways-up',
tooltip: __('Sideways Up', 'kadence-blocks'),
icon: sidewaysUpIcon,
},
]}
allowClear={true}
onChange={(value) => setAttributes({ textOrientation: value })}
/>
</KadencePanelBody>
{showSettings('iconSettings', 'kadence/advancedheading') && (
<KadencePanelBody
title={__('Icon Settings', 'kadence-blocks')}
Expand Down
Loading