Block validation: Block validation failed for `my-block`

Question

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?

Answer 1

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