Site icon Hip-Hop Website Design and Development

How to prevent Block Editor from adding id to block markup in save function?

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!