How to develop custom blocks without triggering validation errors

admin管理员组

文章数量:1386581

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?

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?

• block-editor

Share Improve this question edited Apr 28, 2020 at 11:23 Matt Rek asked Apr 24, 2020 at 15:02 Matt RekMatt Rek 13377 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 5

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.

After reading through the WP Handbook guide, I found out that the better solution might be using dynamic blocks, at least in the development stage.

[...] Blocks where updates to the code (HTML, CSS, JS) should be immediately shown on the front end of the website. For example, if you update the structure of a block by adding a new class, adding an HTML element, or changing the layout in any other way, using a dynamic block ensures those changes are applied immediately on all occurrences of that block across the site.[...]

https://developer.wordpress/block-editor/tutorials/block-tutorial/creating-dynamic-blocks/

本文标签： How to develop custom blocks without triggering validation errors