Gutenberg Custom Block Not Validating - Ideas?

admin管理员组

文章数量:1287784

I added a Custom Block in Gutenberg (which basically customizes the Gutenberg Section block type that is made available by Ultimate Addons for Gutenberg), in Wordpress 5.7. It is a block I call let's call exercise. In admin I can add the block fine, and on front end it seems to display fine, but in admin I get this block validation error:

blocks.min.js?ver=7ed7fe32dad771c4e0af4f56539ff156:2 Block validation: Block validation failed for `uagb/section` ({name: 'uagb/section', icon: {…}, keywords: Array(3), providesContext: {…}, usesContext: Array(0), …}).

Content generated by `save` function:

<div id="an-exercise" class="contenttype-wrapper sometopictype-exercise" content-id="" data-id="5830199b"><div class="heading d-flex flex-row"><i class="contenticon fas fa-guitar fa-7x"></i><div class="col"><div class="row"><span class="content-name">Exercise</span></div><div class="row"><h3 class="topictype-title">an exercise</h3></div></div></div><section class="wp-block-uagb-section uagb-section__wrap uagb-section__background-undefined" id="uagb-section-5830199b"><div class="uagb-section__overlay"></div><div class="uagb-section__inner-wrap"></div></section></div>

Content retrieved from post body:

<div id="an-exercise" class="contenttype-wrapper sometopictype-exercise" content-id="" data-id="5830199b"><div class="heading d-flex flex-row"><i class="contenticon fas fa-guitar fa-7x"></i><div class="col"><div class="row"><span class="content-name">Exercise</span></div><div class="row"><h3 class="topictype-title">an exercise</h3></div></div></div><section class="wp-block-uagb-section uagb-section__wrap uagb-section__background-undefined uagb-block-5830199b"><div class="uagb-section__overlay"></div><div class="uagb-section__inner-wrap"></div></section></div>

Now, I can see the essence of the error, since the code generated by save function contains id="uagb-section-5830199b whereas retrieved from body there is uagb-block-5830199b.

I just can't figure out why there would be this discrepancy.

So I thought I would share my code here and see if anyone sees anything obviously wrong.

First, here is the block code in javascript which is included in my plugin that I use to create the block:

const { assign } = lodash;
const { addFilter } = wp.hooks;
const { __ } = wp.i18n;

// Enable spacing control on the following blocks
const enableBlockContentTypeAttribute = [
    'uagb/section',
];

// Available spacing control options
const contenttypeControlOptions = [
    {
        label: __( 'None' ),
        value: '',
    },
    {
        label: __( 'Exercise' ),
        value: 'exercise',
    },
    {
        label: __( 'Concept' ),
        value: 'concept',
    },
    {
        label: __( 'Something' ),
        value: 'something',
    },
];

/**
 * Add spacing control attribute to block.
 *
 * @param {object} settings Current block settings.
 * @param {string} name Name of block.
 *
 * @returns {object} Modified block settings.
 */
const addBlockContentTypeAttribute = ( settings, name ) => {
    // Do nothing if it's another block than our defined ones.

    if ( ! enableBlockContentTypeAttribute.includes( name ) ) {
        return settings;
    }
    //console.log('Add content type option');
    // Use Lodash's assign to gracefully handle if attributes are undefined
    settings.attributes = assign( settings.attributes, {
        contenttype: {
            type: 'string',
            default: contenttypeControlOptions[ 0 ].value,
        },
        contenttitle: {
            type: 'string',
            default: '',
        },
        contentname: {
            type: 'string',
            default: contenttypeControlOptions[ 0 ].label,
        },
        contentid: {
            type: 'string',
            default: '',
        },

    } );

    return settings;
};

addFilter( 'blocks.registerBlockType', 'my-mods/attribute/contenttype', addBlockContentTypeAttribute );

const { createHigherOrderComponent } = wppose;
const { Fragment } = wp.element;
const { InspectorControls, InnerBlocks } = wp.blockEditor;
const { PanelBody, PanelRow, SelectControl, TextControl } = wpponents;

/**
 * Create HOC to add content type control to inspector controls of block.
 */
const withContentTypeControl = createHigherOrderComponent( ( BlockEdit ) => {
    return ( props ) => {
    // Do nothing if it's another block than our defined ones.
    if ( ! enableBlockContentTypeAttribute.includes( props.name ) ) {
        return (
            <BlockEdit { ...props } />
    );
    }
    //console.log(props.attributes);
    const { contenttype } = props.attributes;
    const { contenttitle } = props.attributes;
    const { contentname } = props.attributes;

    function getContentTitle ( content ) {
        props.setAttributes({contenttitle: content});
    }

    return (
        <Fragment>
        <BlockEdit { ...props } />
<InspectorControls>
    <PanelBody
    title={ __( 'Choose Content Type' ) }
    initialOpen={ true }
        >
        <SelectControl
    label={ __( 'Content Type' ) }
    value={ contenttype }
    options={ contenttypeControlOptions }
    onChange={ ( selectedContentTypeOption ) => {
        var name = contenttypeControlOptions.filter(obj => {
                return obj.value === selectedContentTypeOption
            });
        //console.log(name);
        name = name[0].label;
        //console.log(name);
        props.setAttributes( {
            contenttype: selectedContentTypeOption,
            contentname: name,
        } );
    } }
/>

<TextControl
    label={ __( 'Content Title' ) }
    value={ contenttitle }
    onChange={ ( getContentTitle ) => {
        props.setAttributes( {
            contenttitle: getContentTitle,
        });
    }}
/>

</PanelBody>
    </InspectorControls>
    </Fragment>
);
};
}, 'withSpacingControl' );

addFilter( 'editor.BlockEdit', 'my-mods/with-contenttype-control', withContentTypeControl );



// do something with these attributes - add header to section if exercise type block
const addContentTypeMarkup = ( element, blockType, attributes ) => {
    // Do nothing if it's another block than our defined ones.
    if ( ! enableBlockContentTypeAttribute.includes( blockType.name ) ) {
        return element;
    }
    if ( attributes.contenttitle) {

        // add header with anchor link and class name
        var title_slug = attributes.contenttitle.trim().split(/\s+/).join('-');

        var iconclassbase='contenticon ';
        var iconclass='';
        switch(attributes.contenttype) {
            case 'exercise':
                iconclass =  'fas fa-guitar';
                break;
            case 'concept':
                iconclass = 'fas fa-atom';
                break;
            default:
                iconclass = 'fas fa-atom';
        }
        iconclass = iconclassbase + iconclass;

        return (
            <React.Fragment>
            <div id = {`${title_slug}`} className = {`contenttype-wrapper sometopictype-${attributes.contenttype}`} content-id="" data-id = {`${attributes.block_id}`}>
                <div className = "heading d-flex flex-row">
                    <i className={`${iconclass} fa-7x`}></i>
                    <div className = "col">
                       <div className = "row"><span className="content-name">{attributes.contentname}</span></div>
                       <div className = "row"><h3 className="topictype-title" dangerouslySetInnerHTML={ { __html: attributes.contenttitle } }></h3></div>
                    </div>
                </div>
                {element}
            </div>
        </React.Fragment>
    )
    } else {
        return element;
    }
    //return saveElementProps;
};

addFilter( 'blocks.getSaveElement', 'my-mods/add-content-type-markup', addContentTypeMarkup);

And here is the php code for the plugin that I made to create my custom block:

/ this is to alter uagb-section block
function my_block_mods_backend_enqueue() {
    wp_enqueue_script(
        'my-block-mods', // Unique handle.
        plugins_url( 'blocks/js/dest/block.bundle.js', __FILE__ ), // block.js: We register the block here.
        array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-hooks', 'lodash', 'wp-editor' ) // Dependencies, defined above.
    );
}
add_action( 'enqueue_block_editor_assets', 'my_block_mods_backend_enqueue' );

Maybe it has to do with the fact that I originally worked on this a couple years ago with Wordpress 5.1, and now using 5.7, and perhaps there are some nuanced changes?

Also, for what it is worth, I found the code in the Ultimate Gutenberg Addons plugin that is responsible for creating the section markup. namely,

function (e, t, n) {
    "use strict";
    var a = n(0), l = n.n(a), r = n(1), i = n(364), o = (n.n(i), n(365)), c = (n.n(o), n(366)), s = n(367), u = (n(118), wp.i18n.__), p = wp.blocks.registerBlockType, m = wp.editor.InnerBlocks;
    p("uagb/section", {
        title: uagb_blocks_info.blocks["uagb/section"].title,
        description: uagb_blocks_info.blocks["uagb/section"].description,
        icon: r.a.section,
        category: uagb_blocks_info.category,
        keywords: [u("section"), u("wrapper"), u("uag")],
        attributes: c.a,
        edit: s.a,
        getEditWrapperProps: function (e) {
            var t = e.align, n = e.contentWidth;
            if (("left" === t || "right" === t || "wide" === t || "full" === t) && "full_width" == n)return {"data-align": t}
        },
        save: function (e) {
            var t = (e.attributes, e.className), n = e.attributes, a = n.block_id, r = n.tag, i = n.backgroundType, o = n.backgroundVideo, c = n.contentWidth, s = n.align, u = "";
            "full_width" == c && ("wide" != s && "full" != s || (u = "align" + s));
            var p = "" + r;
            return wp.element.createElement(p, {
                className: l()(t, "uagb-section__wrap", "uagb-section__background-" + i, u),
                id: "uagb-section-" + a
            }, wp.element.createElement("div", {className: "uagb-section__overlay"}), "video" == i && wp.element.createElement("div", {className: "uagb-section__video-wrap"}, o && wp.element.createElement("video", {
                        autoplay: !0,
                        loop: !0,
                        muted: !0,
                        playsinline: !0
                    }, wp.element.createElement("source", {
                        src: o.url,
                        type: "video/mp4"
                    }))), wp.element.createElement("div", {className: "uagb-section__inner-wrap"}, wp.element.createElement(m.Content, null)))
        },
        deprecated: [{
            attributes: c.a, save: function (e) {
                var t = (e.attributes, e.className), n = e.attributes, a = n.block_id, r = n.tag, i = n.backgroundType, o = n.backgroundVideo, c = n.contentWidth, s = n.align, u = "";
                "full_width" == c && ("wide" != s && "full" != s || (u = "align" + s));
                var p = "" + r;
                return wp.element.createElement(p, {
                    className: l()(t, "uagb-section__wrap", "uagb-section__background-" + i, u),
                    id: "uagb-section-" + a
                }, wp.element.createElement("div", {className: "uagb-section__overlay"}), "video" == i && wp.element.createElement("div", {className: "uagb-section__video-wrap"}, o && wp.element.createElement("video", {
                            src: o.url,
                            autoPlay: !0,
                            loop: !0,
                            muted: !0
                        })), wp.element.createElement("div", {className: "uagb-section__inner-wrap"}, wp.element.createElement(m.Content, null)))
            }
        }]
    })

So it is a matter of figuring out why that markup is being altered and where/why?

Thanks!

本文标签： Gutenberg Custom Block Not ValidatingIdeas