So I wrote a plugin for a custom block using create-guten-block by ahmadawais. Everything was working fine until the WP update to 5.5. Now I when I try to edit a page that has one of my custom blocks I get just a blank white screen and some console errors. (Screen shot of errors included)

So I went to the url provided in the error ".html?invariant=321"

It says it is an invalid hook call and the issue is probably one of the following

1. You might have mismatching versions of React and the rendered (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Has anyone run into this issue after updating to WP 5.5?

So Im kinda lost on that..

Im pretty new to React so I'm a tad lost on where to even start. Nothing has changed in my plugin, only Wordpress itself. I'll be happy provide more info as needed. I just don't want to overload the post with what could be un-needed info.

Any sort of direction is appreciated. Thanks All!

included is the code for the block in question...

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>
        );
    },
});

So I wrote a plugin for a custom block using create-guten-block by ahmadawais. Everything was working fine until the WP update to 5.5. Now I when I try to edit a page that has one of my custom blocks I get just a blank white screen and some console errors. (Screen shot of errors included)

So I went to the url provided in the error "https://reactjs/docs/error-decoder.html?invariant=321"

It says it is an invalid hook call and the issue is probably one of the following

1. You might have mismatching versions of React and the rendered (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Has anyone run into this issue after updating to WP 5.5?

So Im kinda lost on that..

Im pretty new to React so I'm a tad lost on where to even start. Nothing has changed in my plugin, only Wordpress itself. I'll be happy provide more info as needed. I just don't want to overload the post with what could be un-needed info.

Any sort of direction is appreciated. Thanks All!

included is the code for the block in question...

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>
        );
    },
});

• plugins
• errors
• block-editor

• Are you including a copy of React inside your blocks code? There's no code to debug in your question :( Keep in mind this isn't a discussion forum, you need a specific question stated clearly that can be factually answered – Tom J Nowell ♦ Commented Aug 24, 2020 at 22:35
• Code added above – user13989254 Commented Aug 24, 2020 at 23:28
• Why do you import the Inspector and classnames twice? Can we see the full code, maybe as a gist or repo on GitHub or somewhere else? – Sally CJ Commented Aug 25, 2020 at 2:16
• thanks for adding the main code! I see there's a mixture of WP Element direct calls, and JSX tags hmmm, How are you building this JS file? Are you using the WP Scripts package? You shouldn't include the inspector in the save function unless you wanted to save an editing UI's HTML into the database – Tom J Nowell ♦ Commented Aug 25, 2020 at 8:26
• So I'm building it using "create-guten-block" by ahmadawais. It's just a block building template including all the scripts. It was suggested by a few different places. Also, yeah I need to lose the inspector in the save function. I can provide more info just let me know and I'll include it. Also the inspector and class names twice was just a copy paste error in here. – user13989254 Commented Aug 25, 2020 at 9:26

1 Answer 1

So I finally figured out the issue. It was a combo of needing to update the NPM packages and replace a few of the packages. Also removing the inspector component did the trick.