I added a Customized Block in Gutenberg (which principally customizes the Gutenberg Part block kind that’s made accessible by Final Addons for Gutenberg), in WordPress 5.7. It’s a block I name let’s name train. In admin I can add the block effective, and on entrance finish it appears to show effective, however in admin I get this block validation error:
blocks.min.js?ver=7ed7fe32dad771c4e0af4f56539ff156:2 Block validation: Block validation failed for `uagb/part` ({identify: 'uagb/part', icon: {…}, key phrases: Array(3), providesContext: {…}, usesContext: Array(0), …}).
Content material generated by `save` perform:
<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">Train</span></div><div class="row"><h3 class="topictype-title">an train</h3></div></div></div><part 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></part></div>
Content material retrieved from submit physique:
<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">Train</span></div><div class="row"><h3 class="topictype-title">an train</h3></div></div></div><part 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></part></div>
Now, I can see the essence of the error, because the code generated by save perform comprises id="uagb-section-5830199b whereas retrieved from physique there’s uagb-block-5830199b.
I simply cannot work out why there can be this discrepancy.
So I believed I’d share my code right here and see if anybody sees something clearly improper.
First, right here is the block code in javascript which is included in my plugin that I take advantage of to create the block:
const { assign } = lodash;
const { addFilter } = wp.hooks;
const { __ } = wp.i18n;
// Allow spacing management on the next blocks
const enableBlockContentTypeAttribute = [
'uagb/section',
];
// Accessible spacing management choices
const contenttypeControlOptions = [
{
label: __( 'None' ),
value: '',
},
{
label: __( 'Exercise' ),
value: 'exercise',
},
{
label: __( 'Concept' ),
value: 'concept',
},
{
label: __( 'Something' ),
value: 'something',
},
];
/**
* Add spacing management attribute to dam.
*
* @param {object} settings Present block settings.
* @param {string} identify Identify of block.
*
* @returns {object} Modified block settings.
*/
const addBlockContentTypeAttribute = ( settings, identify ) => {
// Do nothing if it is one other block than our outlined ones.
if ( ! enableBlockContentTypeAttribute.contains( identify ) ) {
return settings;
}
//console.log('Add content material kind possibility');
// Use Lodash's assign to gracefully deal with if attributes are undefined
settings.attributes = assign( settings.attributes, {
contenttype: {
kind: 'string',
default: contenttypeControlOptions[ 0 ].worth,
},
contenttitle: {
kind: 'string',
default: '',
},
contentname: {
kind: 'string',
default: contenttypeControlOptions[ 0 ].label,
},
contentid: {
kind: 'string',
default: '',
},
} );
return settings;
};
addFilter( 'blocks.registerBlockType', 'my-mods/attribute/contenttype', addBlockContentTypeAttribute );
const { createHigherOrderComponent } = wp.compose;
const { Fragment } = wp.ingredient;
const { InspectorControls, InnerBlocks } = wp.blockEditor;
const { PanelBody, PanelRow, SelectControl, TextControl } = wp.parts;
/**
* Create HOC so as to add content material kind management to inspector controls of block.
*/
const withContentTypeControl = createHigherOrderComponent( ( BlockEdit ) => {
return ( props ) => {
// Do nothing if it is one other block than our outlined ones.
if ( ! enableBlockContentTypeAttribute.contains( props.identify ) ) {
return (
<BlockEdit { ...props } />
);
}
//console.log(props.attributes);
const { contenttype } = props.attributes;
const { contenttitle } = props.attributes;
const { contentname } = props.attributes;
perform getContentTitle ( content material ) {
props.setAttributes({contenttitle: content material});
}
return (
<Fragment>
<BlockEdit { ...props } />
<InspectorControls>
<PanelBody
title={ __( 'Select Content material Sort' ) }
initialOpen={ true }
>
<SelectControl
label={ __( 'Content material Sort' ) }
worth={ contenttype }
choices={ contenttypeControlOptions }
onChange={ ( selectedContentTypeOption ) => {
var identify = contenttypeControlOptions.filter(obj => {
return obj.worth === selectedContentTypeOption
});
//console.log(identify);
identify = identify[0].label;
//console.log(identify);
props.setAttributes( {
contenttype: selectedContentTypeOption,
contentname: identify,
} );
} }
/>
<TextControl
label={ __( 'Content material Title' ) }
worth={ contenttitle }
onChange={ ( getContentTitle ) => {
props.setAttributes( {
contenttitle: getContentTitle,
});
}}
/>
</PanelBody>
</InspectorControls>
</Fragment>
);
};
}, 'withSpacingControl' );
addFilter( 'editor.BlockEdit', 'my-mods/with-contenttype-control', withContentTypeControl );
// do one thing with these attributes - add header to part if train kind block
const addContentTypeMarkup = ( ingredient, blockType, attributes ) => {
// Do nothing if it is one other block than our outlined ones.
if ( ! enableBlockContentTypeAttribute.contains( blockType.identify ) ) {
return ingredient;
}
if ( attributes.contenttitle) {
// add header with anchor hyperlink and sophistication identify
var title_slug = attributes.contenttitle.trim().break up(/s+/).be a part of('-');
var iconclassbase='contenticon ';
var iconclass='';
swap(attributes.contenttype) {
case 'train':
iconclass = 'fas fa-guitar';
break;
case 'idea':
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>
{ingredient}
</div>
</React.Fragment>
)
} else {
return ingredient;
}
//return saveElementProps;
};
addFilter( 'blocks.getSaveElement', 'my-mods/add-content-type-markup', addContentTypeMarkup);
And right here is the php code for the plugin that I made to create my customized block:
/ that is to change uagb-section block
perform my_block_mods_backend_enqueue() {
wp_enqueue_script(
'my-block-mods', // Distinctive deal with.
plugins_url( 'blocks/js/dest/block.bundle.js', __FILE__ ), // block.js: We register the block right here.
array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-hooks', 'lodash', 'wp-editor' ) // Dependencies, outlined above.
);
}
add_action( 'enqueue_block_editor_assets', 'my_block_mods_backend_enqueue' );
Possibly it has to do with the truth that I initially labored on this a pair years in the past with WordPress 5.1, and now utilizing 5.7, and maybe there are some nuanced modifications?
Additionally, for what it’s value, I discovered the code within the Final Gutenberg Addons plugin that’s accountable for creating the part markup. specifically,
perform (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.part,
class: uagb_blocks_info.class,
key phrases: [u("section"), u("wrapper"), u("uag")],
attributes: c.a,
edit: s.a,
getEditWrapperProps: perform (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: perform (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.ingredient.createElement(p, {
className: l()(t, "uagb-section__wrap", "uagb-section__background-" + i, u),
id: "uagb-section-" + a
}, wp.ingredient.createElement("div", {className: "uagb-section__overlay"}), "video" == i && wp.ingredient.createElement("div", {className: "uagb-section__video-wrap"}, o && wp.ingredient.createElement("video", {
autoplay: !0,
loop: !0,
muted: !0,
playsinline: !0
}, wp.ingredient.createElement("source", {
src: o.url,
kind: "video/mp4"
}))), wp.ingredient.createElement("div", {className: "uagb-section__inner-wrap"}, wp.ingredient.createElement(m.Content material, 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’s a matter of determining why that markup is being altered and the place/why?
Thanks!