Validation errors

[Rodrigo Barriuso]

I’m continually getting all kind of validation errors saying that the saved and post content don’t match. I’m getting the same error for multiple blocks, and I think the code is ok. Am I missing anything?
Here the example for the URL Input block:

 attributes: {
    text: {
      type: "string",
      selectpr: "a",
      source: "text"
    },
    url: {
      type: "string",
      selector: "a",
      source: "attribute",
      attributes: "href"
    }
  },
save: props => {
    const {
      attributes: { url, text }
    } = props;
    return (
      <p>
        <a href={url}>{text}</a>
      </p>
    );
  }

Error:

blocks.min.js?ver=6.7.2:2 Block validation: Block validation failed for <code>rbs-blocks/url-input</code> ({name: "rbs-blocks/url-input", icon: {…}, attributes: {…}, keywords: Array(3), save: ƒ, …}name: "rbs-blocks/url-input"icon: {src: "wordpress"}attributes: {text: {…}, url: {…}, className: {…}}keywords: (3) ["Banner", "CTA", "Shout Out"]save: ƒ save(props)arguments: (...)caller: (...)length: 1name: "save"prototype: {constructor: ƒ}__proto__: ƒ ()[[FunctionLocation]]: index.js:80[[Scopes]]: Scopes[2]title: "URL Input"description: "URL Input"category: "rbs-categories"edit: ƒ edit(props)__proto__: Object).

Content generated by <code>save</code> function:

<p class="wp-block-rbs-blocks-url-input"><a>Google</a></p>

Content retrieved from post body:

<p class="wp-block-rbs-blocks-url-input"><a href="http://google.com">Google</a></p>

[Zac Gordon]

Just want to double check first you understand from the course why this happens. It is generally bc we have made changes to the block code. When testing blocks it is easiest to delete the block and re add it.

For updating existing blocks, either use dynamic blocks or the deprecated feature.

Hope this helps in the right direction!

[Rodrigo Barriuso]

I’ve double-checked the code and it was a problem with the attribute definition.
In general I’ve seen very few explanations (on the web) about how to work with attributes for more advanced projects. I think it would be an interesting addition for future courses you might create.

[Zac Gordon]

Glad you figured it out!

Yes, advanced examples do not exist too much. If you have specific questions please ask, but basically whatever data type you need, you can set an attribute for just as you would a normal variable in JS.

[Author]

Posts