How to develop custom blocks without triggering validation errors

I am trying to create a custom block for text input field.

I managed to create a simple block that produces the <p> tag. When I change it to produce the <input> tag and refresh I am getting Block validation failed and the only solution is to remove the block and re-insert it.

It is ok if you have few blocks on a page but I am wondering what if I want to update a whole theme with existing content. Seems like even changing a trivial property as colour results in validation error.

  // existing
  save: (props) ->
     el RichText.Content,
        tagName: 'p'
        value: props.attributes.content

  // updated
  save: (props) ->
     el RichText.Content,
        tagName: 'input'
        value: props.attributes.content

What is the correct way of amending and updating existing Gutenberg blocks?

You have two choices.

The first one you’ve discovered: change the block’s underlying code, and you will trigger validation errors. The benefit is, you’re only including the JS currently required for your block – so it keeps the code as lightweight as possible.

The second option: add deprecated code into your block. In this case, you define not only the block as you want it to be now, but also past (deprecated) versions of the block, so WP recognizes the old and can transform it to the new version every time you edit a post. The benefit is, this won’t trigger validation errors (and potentially blank blocks) whenever you update the save() output. The downside is, the more times you change the output and keep the “deprecated” code available, the heavier your plugin gets.