Skip to content

Commit

Permalink
Merge pull request #416 from stellarwp/update/adv-button-show-only-te…
Browse files Browse the repository at this point in the history
…xt-option

Update/adv button show only text option
  • Loading branch information
oakesjosh authored Feb 15, 2024
2 parents ce49ca4 + a84fb3a commit be825a4
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 15 deletions.
18 changes: 18 additions & 0 deletions includes/blocks/class-kadence-blocks-singlebtn-block.php
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,15 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
$css->add_property( 'display', 'block' );
}
}
if ( isset( $attributes['onlyText'][0] ) && '' !== $attributes['onlyText'][0] ) {
$css->set_media_state( 'tablet' );
$css->set_selector( '.kb-btn' . $unique_id . '.kb-button .kb-svg-icon-wrap' );
if ( true == $attributes['onlyText'][0] ) {
$css->add_property( 'display', 'none' );
} elseif ( false == $attributes['onlyText'][0] ) {
$css->add_property( 'display', 'block' );
}
}
if ( isset( $attributes['onlyIcon'][2] ) && '' !== $attributes['onlyIcon'][2] ) {
$css->set_media_state( 'mobile' );
$css->set_selector( '.kb-btn' . $unique_id . '.kb-button .kt-btn-inner-text' );
Expand All @@ -187,6 +196,15 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
$css->add_property( 'display', 'block' );
}
}
if ( isset( $attributes['onlyText'][1] ) && '' !== $attributes['onlyText'][1] ) {
$css->set_media_state( 'mobile' );
$css->set_selector( '.kb-btn' . $unique_id . '.kb-button .kb-svg-icon-wrap' );
if ( true == $attributes['onlyText'][1] ) {
$css->add_property( 'display', 'none' );
} elseif ( false == $attributes['onlyText'][1] ) {
$css->add_property( 'display', 'block' );
}
}
$css->set_media_state( 'desktop' );
return $css->css_output();
}
Expand Down
4 changes: 4 additions & 0 deletions src/blocks/advancedbtn/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -369,3 +369,7 @@
.kb-btn-only-icon .kt-button-text {
display:none;
}

.kb-btn-only-text .kt-btn-svg-icon {
display: none !important;
}
4 changes: 4 additions & 0 deletions src/blocks/singlebtn/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -268,6 +268,10 @@
"type": "array",
"default": [ false, "", "" ]
},
"onlyText": {
"type": "array",
"default": [ false, ""]
},
"label": {
"type": "string",
"default": ""
Expand Down
43 changes: 28 additions & 15 deletions src/blocks/singlebtn/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,7 @@ export default function KadenceButtonEdit( props ) {
mobileIconPadding,
iconPaddingUnit,
onlyIcon,
onlyText,
iconColor,
iconColorHover,
label,
Expand Down Expand Up @@ -445,6 +446,7 @@ export default function KadenceButtonEdit( props ) {
const previewAlign = getPreviewSize( previewDevice, ( undefined !== btnsBlock?.[0]?.attributes?.hAlign ? btnsBlock?.[0]?.attributes?.hAlign : '' ), ( undefined !== btnsBlock?.[0]?.attributes?.thAlign ? btnsBlock?.[0]?.attributes?.thAlign : '' ), ( undefined !== btnsBlock?.[0]?.attributes?.mhAlign ? btnsBlock?.[0]?.attributes?.mhAlign : '' ) );
const previewVertical = getPreviewSize( previewDevice, ( undefined !== btnsBlock?.[0]?.attributes?.vAlign ? btnsBlock?.[0]?.attributes?.vAlign : '' ), ( undefined !== btnsBlock?.[0]?.attributes?.tvAlign ? btnsBlock?.[0]?.attributes?.tvAlign : '' ), ( undefined !== btnsBlock?.[0]?.attributes?.mvAlign ? btnsBlock?.[0]?.attributes?.mvAlign : '' ) );
const previewOnlyIcon = getPreviewSize( previewDevice, ( undefined !== onlyIcon?.[0] ? onlyIcon[0] : '' ), ( undefined !== onlyIcon?.[1] ? onlyIcon[1] : undefined ), ( undefined !== onlyIcon?.[2] ? onlyIcon[2] : undefined ) );
const previewOnlyText = getPreviewSize( previewDevice, false, ( undefined !== onlyText?.[0] ? onlyText[0] : undefined ), ( undefined !== onlyText?.[1] ? onlyText[1] : undefined ) );
let btnbg;
// let btnGrad;
// let btnGrad2;
Expand All @@ -466,9 +468,10 @@ export default function KadenceButtonEdit( props ) {
[ `kt-button-${uniqueID}` ] : true,
[ `kb-btn-global-${inheritStyles}` ] : inheritStyles,
'wp-block-button__link' : inheritStyles && 'inherit' === inheritStyles,
[ `kb-btn-has-icon` ] : icon,
[ `kb-btn-has-icon` ] : (undefined !== previewOnlyText && previewOnlyText ? false : icon),
[ `kt-btn-svg-show-${( !iconHover ? 'always' : 'hover' )}` ] : icon,
[ `kb-btn-only-icon` ] : previewOnlyIcon,
[ `kb-btn-only-text` ] : previewOnlyText,
[ `kt-btn-size-${( sizePreset ? sizePreset : 'standard' )}` ] : true,
[ `kb-btn-underline-${textUnderline}` ] : textUnderline,
[`${className}`] : className,
Expand Down Expand Up @@ -980,37 +983,47 @@ export default function KadenceButtonEdit( props ) {
}}
/>}
tabletChildren={<SelectControl
value={( undefined !== onlyIcon?.[1] && onlyIcon[1] ? 'true' : ( undefined !== onlyIcon?.[1] && false === onlyIcon[1] ? 'false' : '' ) )}
value={( undefined !== onlyText?.[0] && onlyText[0] ? 'text' : ( undefined !== onlyIcon?.[1] && onlyIcon[1] ? 'true' : ( undefined !== onlyIcon?.[1] && false === onlyIcon[1] ? 'false' : '' ) ) )}
options={[
{ value: '', label: __( 'Inherit', 'kadence-blocks' ) },
{ value: 'false', label: __( 'Show Icon and Text', 'kadence-blocks' ) },
{ value: 'true', label: __( 'Show Only Icon', 'kadence-blocks' ) },
{ value: 'text', label: __( 'Show Only Text', 'kadence-blocks' ) },
]}
onChange={value => {
let newValue = value;
if ( value === 'true' ) {
newValue = true;
} else if ( value === 'false' ) {
newValue = false;
if('text' !== value) {
let newValue = value;
if ( value === 'true' ) {
newValue = true;
} else if ( value === 'false' ) {
newValue = false;
}
setAttributes( { onlyIcon: [ ( undefined !== onlyIcon?.[0] ? onlyIcon[0] : '' ), newValue, ( undefined !== onlyIcon?.[2] ? onlyIcon[2] : '' ) ], onlyText: [ ( undefined !== onlyText?.[0] ? false : '' ), ( undefined !== onlyText?.[1] ? onlyText[1] : '' ) ] } );
} else {
setAttributes( { onlyText: [ ( undefined !== onlyText?.[0] ? true : '' ), ( undefined !== onlyText?.[1] ? onlyText[1] : '' ) ], onlyIcon: [ ( undefined !== onlyIcon?.[0] ? onlyIcon[0] : '' ), false, ( undefined !== onlyIcon?.[2] ? onlyIcon[2] : '' ) ] } );
}
setAttributes( { onlyIcon: [ ( undefined !== onlyIcon?.[0] ? onlyIcon[0] : '' ), newValue, ( undefined !== onlyIcon?.[2] ? onlyIcon[2] : '' ) ] } );
}}
/>}
mobileChildren={<SelectControl
value={( undefined !== onlyIcon?.[2] && onlyIcon[2] ? 'true' : ( undefined !== onlyIcon?.[2] && false === onlyIcon[2] ? 'false' : '' ) )}
value={( undefined !== onlyText?.[1] && onlyText[1] ? 'text' : ( undefined !== onlyIcon?.[2] && onlyIcon[2] ? 'true' : ( undefined !== onlyIcon?.[2] && false === onlyIcon[2] ? 'false' : '' ) ) )}
options={[
{ value: '', label: __( 'Inherit', 'kadence-blocks' ) },
{ value: 'false', label: __( 'Show Icon and Text', 'kadence-blocks' ) },
{ value: 'true', label: __( 'Show Only Icon', 'kadence-blocks' ) },
{ value: 'text', label: __( 'Show Only Text', 'kadence-blocks' ) },
]}
onChange={value => {
let newValue = value;
if ( value === 'true' ) {
newValue = true;
} else if ( value === 'false' ) {
newValue = false;
if('text' !== value) {
let newValue = value;
if ( value === 'true' ) {
newValue = true;
} else if ( value === 'false' ) {
newValue = false;
}
setAttributes( { onlyIcon: [ ( undefined !== onlyIcon?.[0] ? onlyIcon[0] : '' ), ( undefined !== onlyIcon?.[1] ? onlyIcon[1] : '' ), newValue ], onlyText: [ ( undefined !== onlyText?.[0] ? onlyText?.[0] : '' ), ( undefined !== onlyText?.[1] ? false : '' ) ] } );
} else {
setAttributes( { onlyText: [ ( undefined !== onlyText?.[0] ? onlyText?.[0] : '' ), ( undefined !== onlyText?.[1] ? true : '' ) ], onlyIcon: [ ( undefined !== onlyIcon?.[0] ? onlyIcon[0] : '' ), ( undefined !== onlyIcon?.[1] ? onlyIcon[1] : '' ), false] } );
}
setAttributes( { onlyIcon: [ ( undefined !== onlyIcon?.[0] ? onlyIcon[0] : '' ), ( undefined !== onlyIcon?.[1] ? onlyIcon[1] : '' ), newValue ] } );
}}
/>}
/>
Expand Down

0 comments on commit be825a4

Please sign in to comment.