I am creating a “Trigger Button” or CTA button if you want to call it that way. The user can choose if it should be a download or a normal redirect. If it is a download, I want the block to add a download at the end of the anchor tag
<a href="#" download>foo</a>
How would I let the save return check if the user choose btntype download and change the anchor tag based on that?
basically what I need is a working version of this logic: if btntype === download { <a href="#" download>foo</a> } else { <a href="#">foo</a> };
Here is my full block code for the trigger button
/**
* WP Dependency
*/
import { URLInput } from '@wordpress/block-editor';
const { registerBlockType } = wp.blocks;
const { __ } = wp.i18n;
const RichText = wp.editor.RichText;
const { PanelBody, PanelRow, SelectControl } = wp.components;
const {
InspectorControls,
URLinput,
} = wp.editor;
/**
* Internal dependencies
*/
import './style.scss';
/**
* Register block
*/
registerBlockType( 're-blockz/btn',
{
title: wp.i18n.__( 'Trigger Button', 're-blockz' ),
category: 're-blockz',
icon: 'button',
attributes: {
btntitle: {
type: 'string',
source: 'html',
selector: '.btntitle',
},
btntext: {
type: 'string',
source: 'html',
selector: '.btntext',
},
icontype: {
type: 'string',
default: 'chevron_right',
},
btntype: {
type: 'string',
default: 'rel',
},
btncolor: {
type: 'string',
default: 'blue',
},
btnurl: {
type: 'string',
}
},
supports: {
html: false,
},
edit( props ) {
const {
attributes,
className,
setAttributes,
} = props;
const {
btntitle,
btntext,
btnurl,
btncolor,
btntype,
icontype,
} = attributes;
return (
<div className={className}>
<InspectorControls>
<PanelBody
title="Button Einstellungen"
initialOpen={true}
>
<PanelRow>
<URLInput
label="Link auswählen:"
className={ className }
value={ btnurl }
onChange={ ( btnurl, post ) => setAttributes( { btnurl, btntext: (post && post.title) || 'Link hinzufügen' } ) }
/>
</PanelRow>
<PanelRow>
<SelectControl
label="Link-typ wählen"
value={attributes.icontype}
options={[
{label: "Weiterleitung", value: 'chevron_right'},
{label: "Beitrag", value: 'notes'},
{label: "Hervorhebung", value: 'star_rate'},
{label: "Touch", value: 'touch_app'},
{label: "Download", value: 'get_app'}
]}
onChange={(newval) => setAttributes({ icontype: newval })}
/>
<SelectControl
label="Klick-Verhalten"
value={attributes.btntype}
options={[
{label: "Verlinkung", value: 'rel'},
{label: "Download", value: 'download'}
]}
onChange={(newval) => setAttributes({ btntype: newval })}
/>
<SelectControl
label="Button Farbe"
value={attributes.btncolor}
options={[
{label: "Blau", value: 'c_blue'},
{label: "Gelb", value: 'c_yellow'}
]}
onChange={(newval) => setAttributes({ btncolor: newval })}
/>
</PanelRow>
</PanelBody>
</InspectorControls>
<div class="btn-trigger">
<div class="btninner">
<div class="btnleft">
<RichText
tagName="h3"
value={ btntitle }
className="btntitle"
onChange={ ( value ) => setAttributes( { btntitle: value } ) }
placeholder={ __( 'Titel des Button ...', 're-blockz' ) }
keepPlaceholderOnFocus
/>
<RichText
tagName="p"
value={ btntext }
className="btntext"
onChange={ ( value ) => setAttributes( { btntext: value } ) }
placeholder={ __( 'Text des Button ...', 're-blockz' ) }
keepPlaceholderOnFocus
/>
</div>
<div class="btnright">
<div class="icon">
<span class="material-icons">{ icontype }</span>
</div>
</div>
</div>
</div>
</div>
);
},
save( { attributes } ) {
const {
btntitle,
btntext,
btnurl,
icontype,
btncolor,
btntype,
} = attributes;
return (
<a href={ btnurl } class="btn-trigger" { btntype }>
<div class="btninner">
<div class="btnleft">
<RichText.Content
tagName="h3"
className="btntitle"
value={ btntitle }
/>
<RichText.Content
tagName="p"
className="btntext"
value={ btntext }
/>
</div>
<div className={ btncolor }>
<div class="icon">
<span class="material-icons">{ icontype }</span>
</div>
</div>
</div>
</a>
);
},
}
);
in this code btntype at the end of the anchor tag throws me a expectation error, tho, just to mention, this was my try to do a working rough and dirty quick fix for the problem until I would have more time to read into the topic.
Syntax error: C:/0-dev/xxx/re/blocks/src/button/index.js: Unexpected token, expected ... (163:45)
161 | } = attributes;
162 | return (
> 163 | <a href={ btnurl } class="btn-trigger" { btntype }>
| ^
164 | <div class="btninner">
165 | <div class="btnleft">
166 | <RichText.Content
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
You should define your btntype attribute as type boolean and set its default to false (maybe better rename it to download then ;). And change it to true when the user selects the download option.
If you want to conditionally add the download attribute in your save functions’ JSX use this syntax: <a href={ btnurl } className="btn-trigger" download={ btntype }> and it will only add the download attribute when the condition is truthy.
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0