因此，我使用ahmadawais的create guten block为自定义块编写了一个插件。在WP更新到5.5之前，一切正常。现在，当我试图编辑一个包含自定义块的页面时，我只会看到一个空白的白色屏幕和一些控制台错误。（包括错误的屏幕截图）

因此，我转到错误中提供的url；https://reactjs.org/docs/error-decoder.html?invariant=321"；

它说这是一个无效的钩子调用，问题可能是以下之一

您可能有不匹配的React版本和渲染版本（如React DOM）

更新到WP 5.5后是否有人遇到此问题？

所以我有点迷路了。。

我还没有反应过来，所以我有点不知道从哪里开始。我的插件没有任何变化，只有Wordpress本身。我很乐意根据需要提供更多信息。我只是不想在这篇文章中添加一些可能不需要的信息。

任何形式的指导都是值得赞赏的。谢谢大家！



包括所讨论的块的代码。。。

import Inspector from "./inspector";
import classnames from "classnames";

import Inspector from "./inspector";
import classnames from "classnames";

const { __ } = wp.i18n;
const { Fragment, createElement } = wp.element;
const { registerBlockType } = wp.blocks;
const { InnerBlocks } = wp.blockEditor;

const blockAttributes = {
    align: {
        type: "string",
        default: "full",
    },
    fullWidthBackground: {
        type: "bool",
        default: true,
    },
    contentWidth: {
        type: "string",
        default: "Inner-width--default",
    },
    backgroundColor: {
        type: "string",
        default: "#ffffff",
    },
    backgroundClass: {
        type: "string",
        default: "white",
    },
    backgroundImage: {
        type: "string",
    },
    backgroundImageSize: {
        type: "string",
        default: "cover",
    },
    backgroundImageX: {
        type: "number",
        default: 50,
    },
    backgroundImageY: {
        type: "number",
        default: 50,
    },
    backgroundOpacity: {
        type: "number",
        default: 100,
    },
    paddingTop: {
        type: "string",
        default: "Wrapper-padding-top--default",
    },

    paddingBottom: {
        type: "string",
        default: "Wrapper-padding-bottom--default",
    },

    className: {
        type: "string",
        default: "",
    },
};

registerBlockType("myblock/block-wrap", {
    title: __("Page Section"),
    icon: "welcome-widgets-menus",
    category: "common",
    keywords: [__("page section"), __("container"), __("wrap"), __("wrapper")],
    attributes: blockAttributes,

    getEditWrapperProps() {
        return { "data-align": "full" };
    },
    edit: (props) => {
        const { attributes, className } = props;
        const wrapperStyle = {
            backgroundImage:
                attributes.backgroundImage && "url(" + attributes.backgroundImage + ")",
        };

        const backgrounRepeat = () => {
            if (
                attributes.backgroundImage !== undefined &&
                attributes.backgroundImageSize !== "auto"
            ) {
                wrapperStyle.backgroundRepeat = "no-repeat";
            }
        };

        backgrounRepeat();

        const hasValue = () => {
            if (attributes.backgroundImage !== undefined) {
                wrapperStyle.backgroundSize = attributes.backgroundImageSize;
                wrapperStyle.backgroundPosition =
                    attributes.backgroundImageX +
                    "% " +
                    attributes.backgroundImageY +
                    "%";
                wrapperStyle.opacity = attributes.backgroundOpacity / 100;
            }
        };
        hasValue();

        const addTheBG = () => {
            if (attributes.backgroundImage !== undefined) {
                return createElement(
                    "div", // Tag type.
                    {
                        className: "Wrapper-BG-img",
                        style: wrapperStyle,
                    },
                    " " // Block content
                );
            }
        };

        const classes = classnames(
            className,
            attributes.paddingTop,
            attributes.paddingBottom,
            `has-${attributes.backgroundClass}-background-color`,
            "myblock-wrapper",
            {
                [`align${attributes.align}`]:
                    attributes.align && attributes.fullWidthBackground,
            }
        );
        createElement;

        return (
            <Fragment>
                <Inspector {...props} />
                <div className={classes}>
                    {addTheBG()}
                    <div className={`Section-inner-width ${attributes.contentWidth}`}>
                        <InnerBlocks
                            renderAppender={() => <InnerBlocks.ButtonBlockAppender />}
                        />
                    </div>
                </div>
            </Fragment>
        );
    },

    save: (props) => {
        const { attributes } = props;
        const wrapperStyle = {
            backgroundColor: attributes.backgroundColor,

            backgroundImage:
                attributes.backgroundImage && "url(" + attributes.backgroundImage + ")",
            backgroundSize: "cover",
        };

        const backgrounRepeat = () => {
            if (
                attributes.backgroundImage !== undefined &&
                attributes.backgroundImageSize !== "auto"
            ) {
                wrapperStyle.backgroundRepeat = "no-repeat";
            }
        };

        backgrounRepeat();

        const hasValue = () => {
            if (attributes.backgroundImage !== undefined) {
                wrapperStyle.backgroundSize = attributes.backgroundImageSize;
                wrapperStyle.backgroundPosition =
                    attributes.backgroundImageX +
                    "% " +
                    attributes.backgroundImageY +
                    "%";
                wrapperStyle.opacity = attributes.backgroundOpacity / 100;
            }
        };
        hasValue();

        const addTheBG = () => {
            if (attributes.backgroundImage !== undefined) {
                return createElement(
                    "div", // Tag type.
                    {
                        className: "Wrapper-BG-img",
                        style: wrapperStyle,
                    },
                    " " // Block content
                );
            }
        };

        const classes = classnames(
            attributes.className,
            attributes.paddingTop,
            attributes.paddingBottom,
            `has-${attributes.backgroundClass}-background-color`,
            "myblock-wrapper",
            {
                [`align${attributes.align}`]:
                    attributes.align && attributes.fullWidthBackground,
            }
        );

        return (
            <Fragment>
                <Inspector {...props} />
                <div className={classes}>
                    {addTheBG()}
                    <div className={`Section-inner-width ${attributes.contentWidth}`}>
                        <InnerBlocks.Content />
                    </div>
                </div>
            </Fragment>
        );
    },
});