Site icon Hip-Hop Website Design and Development

Block filter that works on one site causing block validation fail on another

This block filter code works fine on one site, but when I use it on another site I get errors in the console saying block validation failed for the blocks I’m using the filter on.

But the filter works! I’m just getting console errors. Any idea what could be causing it?

Here’s my block filter code

import { __ } from "@wordpress/i18n";
import { addFilter } from "@wordpress/hooks";
import { createHigherOrderComponent } from "@wordpress/compose";
import { Fragment } from "@wordpress/element";
import { InspectorControls } from "@wordpress/block-editor";
import { PanelBody, ToggleControl, RangeControl } from "@wordpress/components";
import classnames from "classnames";

const { assign, merge } = lodash;

const allowedBlocks = ["core/paragraph", "core/heading", "core/group"];

/**
 * RegisterBlockType
 */
function testing_width(settings, name) {
    if (allowedBlocks.indexOf(name) === -1) return settings;

    return assign({}, settings, {
        attributes: merge(settings.attributes, {
            align100: {
                type: "boolean",
                default: false,
            },
            hasMaxWidth: {
                type: "number",
            },
        }),
    });
}

addFilter("blocks.registerBlockType", "testing/width", testing_width);

/**
 * BlockEdit
 */
const addInspectorControl = createHigherOrderComponent((BlockEdit) => {
    return (props) => {
        const {
            attributes: { align100, hasMaxWidth },
            setAttributes,
            name,
        } = props;

        if (allowedBlocks.indexOf(name) === -1) {
            return <BlockEdit {...props} />;
        }
        return (
            <Fragment>
                <BlockEdit {...props} />
                <InspectorControls>
                    <PanelBody title={__("Max Width", "testing")} initialOpen={false}>
                        <ToggleControl
                            label={__("Constrain", "testing")}
                            checked={align100}
                            help={__(
                                "This will make the block full width, but it leaves margins on the sides so the edges line up with the width of the header. Full width... but not quite.",
                                "testing"
                            )}
                            onChange={(align100) => setAttributes({ align100 })}
                        />
                        <RangeControl
                            label={__("Max Width", "testing")}
                            value={hasMaxWidth}
                            onChange={(hasMaxWidth) => setAttributes({ hasMaxWidth })}
                            min={1}
                            max={120}
                            allowReset={true}
                            resetFallbackValue={false}
                        />
                    </PanelBody>
                </InspectorControls>
            </Fragment>
        );
    };
}, "withInspectorControl");

addFilter(
    "editor.BlockEdit",
    "testing/width-add-inspector-controls",
    addInspectorControl
);

/**
 * Add class to block in editor
 */
const addClassEditor = createHigherOrderComponent((BlockListBlock) => {
    return (props) => {
        const {
            attributes: { align100, hasMaxWidth },
            className,
            name,
        } = props;

        if (allowedBlocks.indexOf(name) === -1) {
            return <BlockListBlock {...props} />;
        }

        const maxWidth = hasMaxWidth ? hasMaxWidth + "em" : undefined;

        return (
            <BlockListBlock
                {...props}
                wrapperProps={{ style: { maxWidth } }}
                className={classnames(
                    className,
                    align100 ? `align100` : "",
                    hasMaxWidth ? `has-max-width` : ""
                )}
            />
        );
    };
}, "withClientIdClassName");

addFilter(
    "editor.BlockListBlock",
    "testing/width-add-editor-class",
    addClassEditor
);

/**
 * Add class to the block on the front end
 *
 * @param  {Object} props      Additional props applied to save element.
 * @param  {Object} block      Block type.
 * @param  {Object} attributes Current block attributes.
 * @return {Object}            Filtered props applied to save element.
 */
function addClassFrontEnd(props, block, attributes) {
    if (allowedBlocks.indexOf(block.name) === -1) {
        return props;
    }

    const { className } = props;
    const { align100, hasMaxWidth } = attributes;

    const maxWidth = hasMaxWidth ? hasMaxWidth + "em" : undefined;

    return assign({}, props, {
        className: classnames(
            className,
            align100 ? `align100` : "",
            hasMaxWidth ? `has-max-width` : ""
        ),
        style: { maxWidth },
    });
}

addFilter(
    "blocks.getSaveContent.extraProps",
    "testing/width-add-front-end-class",
    addClassFrontEnd
);

The error I’m getting in the console

react_devtools_backend.js:4045 Block validation: Block validation failed for `core/paragraph` ({name: 'core/paragraph', icon: {…}, keywords: Array(1), providesContext: {…}, usesContext: Array(0), …}).

Content generated by `save` function:

<p class="has-text-color has-extra-small-font-size">No darkness would ever settle upon those lamps, as no darkness had settled upon them for hundreds of years. It seemed dreadful that the town should blaze for ever in the same spot; dreadful at least to people going away to adventure upon the sea, and beholding it as a circumscribed mound, eternally burnt, eternally scarred. From the deck of the ship the great city appeared a crouched and cowardly figure, a sedentary miser.</p>

Content retrieved from post body:

<p class="has-text-color has-extra-small-font-size" style="color:#000000">No darkness would ever settle upon those lamps, as no darkness had settled upon them for hundreds of years. It seemed dreadful that the town should blaze for ever in the same spot; dreadful at least to people going away to adventure upon the sea, and beholding it as a circumscribed mound, eternally burnt, eternally scarred. From the deck of the ship the great city appeared a crouched and cowardly figure, a sedentary miser.</p>