Gutenberg: Block validation failed


I am using custom block to generate shotcode that then renders the HTML.

When I add the block and save the post, everything works, the block renders the shortcode with its default values.

When I change some values, the post saves without error and works on frontend.

But when I reload the posts edit page I get the following error:

Block validation: Block validation failed for `fare/list-posts` ( 
Object { name: "fare/list-posts", icon: {…}, attributes: {…}, keywords: [],   save: save(t), title: "List Posts", category: "common", edit: edit(e)

Content generated by `save` function:

[list-posts type="post" category="" count="6"][/list-posts]

Content retrieved from post body:

[list-posts type="post" category="" count="12"][/list-posts]

The validation expects default values but gets the new edited shortcode with new values.

Here is my JavaScript code:

/* This section of the code registers a new block, sets an icon and a category, and indicates what type of fields it'll include. */
wp.blocks.registerBlockType('fare/list-posts', {
  title: 'List Posts',
  icon: 'tickets',
  category: 'common',
  attributes: {
    posttype: {
      type: 'string',
      default: 'post'
    postcategory: {
      type: 'string',
      default: ''
    postcount: {
      type: 'number',
      default: 6

  /* This configures how the content and color fields will work, and sets up the necessary elements */
  edit: function(props) {
    function updatePostType(event) {
    function updateCategory(event) {
    function updatePostCount(event) {
    return React.createElement("div",{ style: { border: '2px solid #aaaaaa', 'border-radius': '3px', padding: '12px'}},
      React.createElement( "h3", null, "List Posts" ),
      React.createElement( "span", { style: { margin: '0' }}, "Post Type" ),
      React.createElement( "input", { type: "text", value: props.attributes.posttype, onChange: updatePostType, style: {} }),
      React.createElement( "hr" ),
      React.createElement( "span", { style: { margin: '0' }}, "Post Category" ),
      React.createElement( "input", { type: "text", value: props.attributes.postcategory, onChange: updateCategory, style: {} }),
      React.createElement( "hr" ),
      React.createElement( "span", { style: { margin: '0' }}, "Post Count" ),
      React.createElement( "input", { type: "number", value: props.attributes.postcount, onChange: updatePostCount, style: {} })

  save: function(props) {
    return '[list-posts type="'+props.attributes.posttype+'" category="'+props.attributes.postcategory+'" count="'+props.attributes.postcount+'"][/list-posts]';

Can someone please tell me what am I doing wrong?

Thank you.

Vincurekf 8 months 0 Answers 177 views 0

Leave an answer