Conditional statements before/on save

[alantucker]

Hi

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.

[Zac Gordon]

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

[alantucker]

Hey 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

[Zac Gordon]

Okay, I added an example block example to the repo called “11-url-input-conditional” that should give you a head start.

https://github.com/zgordon/gutenberg-course/tree/master/jsforwp-example-blocks/blocks/11-url-input-conditional

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!

[alantucker]

Thanks. 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>
            );
        },

[Zac Gordon]

Check the console log for the specific error

[alantucker]

Seems its:

TypeError: Cannot read property ‘length’ of undefined

[Zac Gordon]

Cool. If you set a default value for that attribute to be an empty string it should solve that problem 🙂

[alantucker]

Thanks, 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?

[Zac Gordon]

Yup! 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!!!

[alantucker]

Thanks, 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 🙂

[Author]

Posts