2

writing my own block for a download card template is the idea.

i configured my Theme (could be in a single Plugin also) to add a new Block to the Gutenberg Editor.

i just put my save function here. because thats what it is about. It shall be a download card with image, title, text and a file downloadlink. everything is working fine:

save: ( props ) => {
            const {
                className,
                attributes: {
                    title,
                    mediaID,
                    mediaURL,
                    mediaAlt,
                    textContent,
                    fileID,
                    fileURL,
                    fileType,
                    fileDesc,
                    fileSize,
                },
            } = props;
            return (
                <div className={ className }>
                    <div className="bl-dc__image">
                        {
                            mediaURL && (
                                <img className="image" src={ mediaURL } alt={ mediaAlt ? mediaAlt : __( 'Download Image') } />
                            )
                        }
                    </div>
                    <div className="bl-dc__content">
                        <h2 className="bl-dc__title">
                            {title}
                        </h2>

                        <p className="bl-dc__text">
                            { textContent }
                        </p>

                        {
                            fileURL && (
                                <a
                                    className="bl-dc__bt btn btn--primary"
                                    href={ fileURL } title={ __( 'Download') + (fileDesc && ' '+fileDesc) + (fileSize && ' '+fileSize) }
                                >
                                    { __( 'Download') + (fileType && ' ('+fileType+')') }
                                </a>
                            )
                        }
                    </div>


                </div>
            );
        }

So when i go to just change a class. like the buttons class bl-dc__bt to bl-dc__btn. i do get a validation error. i need to mention if fields are filled! in this case the file upload.

Is this the intended behaviour? that my block falls apart in the editor even fields and everything backendish are named all the same. developing the block gets frustrating quite soon, as i have to setup and fill the block in the editor again and again if i want to try out or extend my markup while progressing my work. If my customer says: "Hey, can you add an icon field in there?" It's just not possible?

I found a discussion in github about that topic: https://github.com/WordPress/gutenberg/issues/4849

there is also some information about depreaced blocks: https://wordpress.org/gutenberg/handbook/block-api/deprecated-blocks/

i just can't figure it out.

Am i, as a Dev, not able change the template of a block without destroying the editing functionality if fields are filled?

  • The whole design of Gutenberg is that content is saved as static HTML and the editing functionality is achieved by reconstructing the block based on the saved markup. If you change that markup this will break. So no, you can't just change the markup without breaking it. The solution to this is described in your 2nd link. If something in there isn't clear you should be more specific in your question, because as far as I can tell it answers your question in quite a bit of detail. – Jacob Peattie Sep 20 '18 at 11:44
  • 1
    @JacobPeattie, mind making an answer out of the comment? – Mark Kaplun Sep 20 '18 at 12:42
3

Since Gutenberg is currently in development mode, Things will break and there won't be standard set of rules and guidelines NOT until it merges into Core. I have faced the same problem, Changing a thing here and there breaks the current block and it's frustrating as hell.

Until then devs like us have to put up with nuisance like these. If you need more example of how the Core blocks do it here's one - WordPress Core Block

  • thanks to clarify this to me. i guess this example you linked is a good start. i now do work with dynamic blocks and PHP template rendering now, which brings me back to familiar behavior. :) – André Kelling Sep 20 '18 at 13:48

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.