为什么 Save() 函数中的 Extra Div 应用了 Gutenberg Wordpress Block？

问题描述

我一直在研究定制古腾堡块。该块的主要目的是简单地添加一些广告网络的“广告”代码，例如adsense、propeller ads等。

我被“块验证错误”困扰了好几天，我确实对这个问题有一些想法。

源文件代码：

// The Block for Adding the In-Article Ads on my Articles
import { RawHTML } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { disabled,SandBox } from '@wordpress/components';
import { PlainText } from '@wordpress/block-editor';
import { registerBlockType } from '@wordpress/blocks';

registerBlockType(
    'codingfero/in-article-ads-block',{
        // built in attributes 

        title : __('In-Article Ads'),description : __('Block For Adding The Inline Ads In the Articles'),icon : 'format-image',category : 'text',// custom attributes

        attributes: {
            adCode : {
                type : 'string',source : 'html',default : '<p>this is paragraph for adcode</p>',},supports : {
            customClassName : false,className: false,html: false,// built-in functions 

        edit({attributes,setAttributes}){
          
            return (
                <div style = {{margin : "2rem auto",fontFamily : "monospace sans-serif",border : "2px solid rgb(240,0)",backgroundColor : "white",padding : "1% 2%",borderRadius : "10px"}}>
                <PlainText 
                value = { attributes.adCode}
                onChange= { (ad) => {setAttributes({ adCode : ad }); console.log(ad);}}
                placeholder = { __('Enter Ad Code')}
                aria-label = { __('Block For Inserting Ad')} /></div>
            );
        },save({attributes}){
            return(
            <div style = {{margin : "2rem auto",borderRadius : "10px"}} dangerouslySetInnerHTML={{ __html:attributes.adCode}}></div>
            );
        }

    }
);

我收到此错误：

Block validation: Block validation Failed for `codingfero/in-article-ads-block` ( 
Object { name: "codingfero/in-article-ads-block",icon: {…},keywords: [],attributes: {…},providesContext: {},usesContext: [],supports: {…},styles: [],save: save(e),apiVersion: 1,… }
 ).

Content generated by `save` function:

<div style="margin:2rem auto;font-family:monospace sans-serif;border:2px solid rgb(240,0);background-color:white;padding:1% 2%;border-radius:10px"><div style="margin:2rem auto;font-family:monospace sans-serif;border:2px solid rgb(240,0);background-color:white;padding:1% 2%;border-radius:10px"><p>this is paragraph for adcode</p></div></div>

Content retrieved from post body:

<div style="margin:2rem auto;font-family:monospace sans-serif;border:2px solid rgb(240,0);background-color:white;padding:1% 2%;border-radius:10px"><p>this is paragraph for adcode</p></div> blocks.min.js:3:115544

请帮帮我。我已经被困在这个问题上好几天了。我也尝试使用，但没有用。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）