React Plugin Validation Failed

Hi, running a local 6.4.3 version of wordpress through docker and trying to develop a custom block. I’ve stripped back the functionality to the barest of minimums to try and get something that will point me in the right direction.

The project itself is using a design library that exports tsx components. This may be a cause but unsure of how to remedy from the wp side of things.

The code for index.js is as follows

import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";
import { Button } from "design-library";
import { useBlockProps } from "@wordpress/block-editor";

const edit = () => (
  <div {...useBlockProps()}>
    <p>Hello World - Block Editor</p>
    <Button
      onClick={() => {
        alert("asdf");
      }}
    >
      Hello World
    </Button>
  </div>
);
const save = ({ attributes }) => (
  <p {...useBlockProps.save()}>
    {attributes.message}
    <Button
      onClick={() => {
        alert("asdf");
      }}
    >
      Hello World
    </Button>
  </p>
);

registerBlockType(metadata.name, {
  edit,
  save,
});

When it is added to the page in the editor, the edit version shows as expected, but it doesnt show on the front end, additionally when reloading the page editor it has the following error in the console:

<span class="message-body-wrapper"><span class="message-flex-body"><span class="message-body devtools-monospace"><span class="objectBox objectBox-string">Block validation: Block validation failed for ia-cst/my-custom-block (</span> 
<span data-link-actor-id="server0.conn30.windowGlobal146028888195/obj22" class="objectBox objectBox-object"><span class="objectTitle">Object { name: "</span></span>
</span></span></span>block<span class="message-body-wrapper"><span class="message-flex-body"><span class="message-body devtools-monospace">
<span data-link-actor-id="server0.conn30.windowGlobal146028888195/obj22" class="objectBox objectBox-object"><span class="objectBox objectBox-string">/my-custom-block"</span>, <span class="nodeName">icon: <span class="objectLeftBrace">{…}</span></span>, <span class="nodeName">keywords: <span class="arrayLeftBracket">[]</span></span>, <span class="nodeName">attributes: <span class="objectLeftBrace">{…}</span></span>, <span class="nodeName">providesContext: <span class="objectLeftBrace">{}</span></span>, <span class="nodeName">usesContext: <span class="arrayLeftBracket">[]</span></span>, <span class="nodeName">selectors: <span class="arrayLeftBracket">[]</span></span>, <span class="nodeName">supports: <span class="objectLeftBrace">{}</span></span>, <span class="nodeName">styles: <span class="arrayLeftBracket">[]</span></span>, <span class="nodeName">variations: <span class="arrayLeftBracket">[]</span></span>, <span class="more-ellipsis">… }</span></span>
 <span class="objectBox objectBox-string">).

Content generated by save function:

<p class="wp-block-ia-cst-my-custom-block">Hello World - Frontend <button target="" type="button" class="ant-btn ant-btn-default"><span>Hello World</span></button></p>

Content retrieved from post body:
</span></span></span></span>

and the following shows twice:

TypeError: n is undefined

Other than that the block.json is as follows:

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "block/my-custom-block",
  "title": "Hello World",
  "category": "widgets",
  "icon": "smiley",
  "textdomain": "helloworld",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "viewScript": "file:./view.js",
  "description": "Blah blah blah, this is a test",
  "attributes": {
    "message": {
      "type": "string",
      "source": "text",
      "selector": "div",
      "default": "Hello World"
    }
  }
}

Any advise is greatly appreciated ??

• This topic was modified 7 months, 3 weeks ago by lachlhat.