如何防止块编辑器在SAVE函数中为块标记添加ID？

我正在扩展核心WP块(core/group), 因此，它添加了一些div\'s 使我能够在前端显示所需的块。

除了显示自定义（单独使用样式属性是不可能的，因此添加了标记），我用添加的标记扩展块的目的是为了在前端可以根据id 我正在添加到container div, 以及创建一个动态导航菜单，其中包含基于我的扩展块的存在而指向块的锚定链接。

首先，我要说的是，在前端，所有东西都已经按照我想要的方式工作了，在块编辑器中，所有东西似乎都工作得很好，除了一个验证问题，它似乎不是一个表演的障碍，但尽管如此，我想消除验证错误。

我注意到Wordpress会自动添加id 至核心/集团外部部门：<div class="wp-block-group" id="an-exercise-111"></div>. 这导致了验证错误，我不知道如何阻止它这样做。

在我的代码中，我看不到任何可以添加此id的地方。

以下是生成自定义块标记的代码：

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);

如果我在开发人员工具中查看控制台，以下是我在管理面板中收到的消息：

<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>

我看到了问题的本质-Wordpress块编辑器save, 正在创建此元素：

div class="wp-block-group" id="an-exercise-111"></div>

此元素在标记函数中显示为{element} 包含块的内容。我不需要它来id. 也许Wordpress要求其块具有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, 我在哪里<div id="an-exercise-111" class="contenttype-wrapper...

有什么想法吗？

谢谢

NOTE如果我不使用id 自定义中的属性div 然后一切都验证了。例如，如果我使用someid 那么一切都好了。但我需要使用id 就是让锚链按我想要的方式工作。所以这又回到了最初的问题——为什么WP还要添加id 至div<div class="wp-block-group" id="an-exercise-111">? 在块编辑器中，我不会向核心/组块添加id，在过滤器中，我也不会设置id。真的，这是个谜。即使我可以以不同的方式执行此操作（我可能会切换到render\\u block并执行服务器端渲染），我仍然希望了解WP为什么要执行它正在执行的操作。。。

相关推荐