JavaScript for WordPress › Forums › Gutenberg Development › Conditional statements before/on save
- This topic has 10 replies, 2 voices, and was last updated 6 years, 10 months ago by
alantucker.
-
AuthorPosts
-
April 11, 2018 at 10:14 am #44903
alantucker
ParticipantHi
So I have a Link control which is optional but I am running into an issue where when saving if its empty it produces a blank href. How do I structure a conditional that ignores the empty link when saving?
Thanks in advance.
April 11, 2018 at 10:31 am #44913Zac Gordon
KeymasterTry taking a look at the URL Input example as a possible guide? You can see if that type of conditional statement could also be used in the save function.
April 11, 2018 at 10:37 am #44915alantucker
ParticipantHey Zac
Not sure what you mean, I have been looking at https://github.com/zgordon/gutenberg-course/blob/master/jsforwp-example-blocks/blocks/11-url-input/index.js and their is no if/else conditional statements.
Thanks
April 11, 2018 at 1:15 pm #44925Zac Gordon
KeymasterOkay, I added an example block example to the repo called “11-url-input-conditional” that should give you a head start.
Might also want to explore this page a little bit on conditional logic in JSX 🙂
https://reactjs.org/docs/conditional-rendering.html
Hope that helps!
April 11, 2018 at 1:41 pm #44929alantucker
ParticipantThanks. I have added said code but something strange is going on. After creating my block and adding the content (minus the link) I have noticed that the block is not not showing on the post page, then when I swap back to edit the page it get a “The editor has encountered an unexpected error.”.
Here is my save props code:
save: props => { const { attributes: { title, message, text, url, colorPaletteControl } } = props; const isEmpty = text.length > 0 ? false : true; return ( <div style={ { backgroundColor: colorPaletteControl } } > <h3 class="subtitle">{ title }</h3> <div class="message-body"> { message } </div> <p> { isEmpty ? ( __( 'No link', 'makeblocks' ) ) : ( <a href={ url }> { text } </a> ) } </p> </div> ); },
April 11, 2018 at 1:43 pm #44931Zac Gordon
KeymasterCheck the console log for the specific error
April 11, 2018 at 1:45 pm #44933alantucker
ParticipantSeems its:
TypeError: Cannot read property ‘length’ of undefined
April 11, 2018 at 2:14 pm #44937Zac Gordon
KeymasterCool. If you set a default value for that attribute to be an empty string it should solve that problem 🙂
April 11, 2018 at 2:33 pm #44939alantucker
ParticipantThanks, I used const { attributes: { title, message, text=”, url, colorPaletteControl } } = props; which seems to have done the trick. As I dont really need “No link” to be saved is there a tidier way of doing the const and the conditional?
Thanks for all your help?
April 11, 2018 at 4:14 pm #44946Zac Gordon
KeymasterYup! Checkout that link on JSX conditionals for how to code without an else statement.
Looks something like this (untested but something like this)
{ !isEmpty && ( <a href={ url }> { text } </a> ) }
Hope that helps!!!
April 12, 2018 at 8:26 am #45003alantucker
ParticipantThanks, I opted for the following in the end…
const isTextEmpty = text.length > 0 ? false : true;
const isUrlEmpty = url.length > 0 ? false : true;{ (isTextEmpty || isUrlEmpty) ? ({}) : ( { text } ) }
Thanks again for all your help 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.