plugin development - Gutenberg Block Validation Failed for a custom block

admin管理员组

文章数量:1402850

I have a custom block that has been updated a couple of times now. When I try to save the post that contains the said block, it gives me the following error:

Content generated by the save function:

<div class="wp-block-spacer block-spacer block-undefined spacer"> </div>

Content retrieved from post body:

<div class="spacer"> </div>

My save.js file:

const { Component } = wp.element;
import classnames from "classnames"

export default class Save extends Component {
  constructor() {
    super(...arguments);
  }

  render() {
    const {
      block_id,
    } = this.props.attributes;

return (<div className={classnames(
  this.props.className,
  "block-spacer",
  `block-${block_id}`,
  "spacer"
)}> </div>);


}
}

My index.js file:

// Import block dependencies and components
import Edit from "./components/edit";
import Save from "./components/save";
import attributes from "./attributes";
import deprecated from "./components/deprecated";

// Import CSS
import "./styles/style.scss";
import "./styles/styles.editor.scss";

// Internationalization
const { __ } = wp.i18n;

// Register block
const { registerBlockType } = wp.blocks;

// Register the block
registerBlockType("spacer", {
  title: __("Spacer", "abc"),
  
  keywords: [
    __("spacer", "abc"),
  ],
  attributes: attributes,
  /* Render the block in the editor. */
  edit: (props) => {
    return <Edit {...props} />;
  },

  /* Save the block markup. */
  save: (props) => {
    return <Save {...props} />;
  },

  deprecated: deprecated,
});

My deprecated.js

import classnames from "classnames";
import attributes from "../attributes";
const { Component } = wp.element;

const deprecated = [
  {
    save: function (props) {
      const {
        setAttributes,
      } = props;

      return <div class="spacer"> </div>;
    },
  },
  {
    // attributes,
    attributes: attributes,
    save: function (props) {
      const { block_id } = props.attributes;
      return <div className={classnames(
        "block-spacer",
        `block-${block_id}`,
        "spacer"
      )}> </div>
    },
  },
];

export default deprecated;

From the research I have done, it is easy to know that the issue is being caused because "this.props.className" is being added to the save.js. But even though I have added the deprecated.js, why is it still giving me the error?

Any help in resolving this issue would be much appreciated. Thank you!

本文标签： plugin developmentGutenberg Block Validation Failed for a custom block