0

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
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.

6
  • 2
    Although React now accepts class as attribute, it would be more correctly to write className instead of class stackoverflow.com/questions/46989454/…
    – Lovor
    Feb 24 at 21:34
  • 1
    You're absolutely right. I was too focused on the problem in question. I corrected my answer accordingly.
    – Vortac
    Feb 25 at 8:09
  • 2
    How about using download= { 'download' === btntype } without changing the type of the btntype attribute?..
    – Sally CJ
    Feb 25 at 9:05
  • 1
    @Sally CJs solution is even smarter as it needs no refactoring (and as you're using a select control for the attribute). Switching to a boolean might be more convenient if you would use a toggle switch for the download attribute. In the end you need an expression that resolves to true or false and the download attribute will be conditionally added or not.
    – Vortac
    Feb 25 at 9:18
  • 1
    small correction: [...] if you would use a toggle switch for the btntype attribute [...]
    – Vortac
    Feb 25 at 9:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.