admin管理员组文章数量:1303404
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 } = wpponents;
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
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 } = wpponents;
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 Answer
Reset to default 1You 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.
本文标签： javascriptConditional save return on Gutenberg Block
版权声明：本文标题：javascript - Conditional save return on Gutenberg Block 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741723695a2394522.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论