[alantucker]

🙂 i know its an enhancement but people are still gonna try and make it act like a complete page builder.

[alantucker]

still trying to get my head around things, seems a bit of a long winded way of doing things with all these files. i am a diehard ACF user 😉

[alantucker]

ah well that sucks, guess gutenberg still has a long way to go but would have expected a simple thing like this to be already included.

[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 🙂

[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?

[alantucker]

Seems its:

TypeError: Cannot read property ‘length’ of undefined

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

[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

[alantucker]

Using style={ { backgroundColor: colorPaletteControl } } seemed to work 😉

[alantucker]

Don’t worry I have figured it out 🙂

[alantucker]

Awesome would like to see more examples 🙂

I am using ACF to create some really flexible layouts, a bit like a page builder but with all the options it can get a bit messy from a UI point of view. Gutenberg definitely has a smart UI.

Keep up the good work.

[alantucker]

Thanks, will you be updating/adding videos as more Gutenberg info gets released? I am still yet to play around with Gutenberg as I use ACF to create blocks in all my builds 😉

Thanks again.

[alantucker]

Hey Zac

Thanks for the reply. The video seems to be working now and I have completed the course 🙂

Alan

[Author]

Posts