I am noticing that WordPress is automatically adding an id to a block, and can’t figure out how to stop it from doing so.
Here is my code that generates the block markup:
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) {
var post_id = wp.data.select("core/editor").getCurrentPostId();
var title_slug = attributes.contenttitle.trim().split(/s+/).join('-');
var anchorid = title_slug+'-'+attributes.contentid;
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 = {`${anchorid}`} className = {`contenttype-wrapper sometopictype-${attributes.contenttype} navanchor`} data-id = {`${attributes.blockId}`}>
<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;
}
};
addFilter( 'blocks.getSaveElement', 'my-blockmods/add-content-type-markup', addContentTypeMarkup);
Here is the message I get in admin panel, if I view console in Developer Tools:
<div id="an-exercise-111" class="contenttype-wrapper sometopictype-exercise navanchor" data-id="be3d05d6-a048-41c9-8dcf-5fcf121dd4a8"><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><div class="wp-block-group" id="an-exercise-111"></div></div>
Content retrieved from post body:
<div id="an-exercise-111" class="contenttype-wrapper sometopictype-exercise navanchor" data-id="be3d05d6-a048-41c9-8dcf-5fcf121dd4a8"><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><div class="wp-block-group"></div></div>
I see the nature of the problem – WordPress Block Editor, upon save
, is creating this element:
div class="wp-block-group" id="an-exercise-111"></div>
This element, shown above in the markup function simply as {element}
contains the content of the block. I don’t need it to have an id
. Maybe WordPress requires its blocks to have an id
? So it seems the block editor is automatically setting it with an id
that is the same as the id
I set manually in the block markup function, where I have <div id="an-exercise-111" class="contenttype-wrapper...
Any ideas?
thanks!