必须解决古腾堡块以显示正确的编辑视图答案

【问题标题】：Gutenberg block have to be resolved to display the right editing view必须解决古腾堡块以显示正确的编辑视图
【发布时间】：2021-11-21 10:09:48
【问题描述】：

亲爱的开发者，您好，

我需要一些关于 Wordpress Gutenberg 块编辑器的帮助，因为我制作了一个运行良好的块。

缺少一件事，我决定在保存函数中的一个道具变量之间添加一个锚标记''。

我首先做的是在编辑函数中添加一个新的输入标签来更新我的锚的 href 属性。

前面一切正常。我唯一的问题是在后台 Gutenberg 文章编辑器中，我的 bloc 返回的是保存函数的 HTML，而不是编辑函数的 HTML。

所以 Wordpress 给我一个错误，我总是需要按下按钮 resolve 才能看到保存功能的 html。

我给你我的代码，我想知道你是否看到一些奇怪的东西，或者你是否知道问题：

const {registerBlockType} = wp.blocks
const {InspectorControls, MediaUpload} = wp.editor

registerBlockType('astra/ingreds', {
    title: 'Ligne d\'Ingrédient',
    category: 'widgets',
    icon: 'smiley',
    attributes: {
        ingName: {type: "string"},
        ingQtt: {type: "string"},
        mediaID: {type: "string"},
        mediaURL: {type: "string"},
        bgurl: {type: "string"},
        ingLink: {type: "string"}
    },
    edit: function(props) {
        function updateIngName(e){
            props.setAttributes({ingName : e.target.value})
        }
        function updateIngQtt(e){
            props.setAttributes({ingQtt : e.target.value})
        }
        function updateLink(e){
            props.setAttributes({ingLink : e.target.value})
        }
    return (
            <div className="anton-cont-recette" id="container-recipe">
                <div className="ing-row">
                    <input className="ing-link" type="text" placeholder="Lien du produit" onChange={updateLink} value={props.attributes.ingLink}/>
                    <div className="ing-picto" style={{backgroundImage: props.attributes.bgurl}}></div>
                    <input className="ing-name" type="text" placeholder="Ingrédient" onChange={updateIngName} value={props.attributes.ingName}/>
                    <input className="ing-qtt"  type="text" placeholder="Quantité" onChange={updateIngQtt} value={props.attributes.ingQtt}/>
                </div>
                <InspectorControls>
                    <h2>Sélectionnez une image pour l'ingrédient {props.attributes.ingName}</h2>
                    <MediaUpload
                     type="image"
                     onSelect={image => props.setAttributes({mediaID: image.id, mediaURL: image.sizes.full.url, bgurl: "url('"+image.sizes.full.url+"')"})}
                     value={ props.attributes.mediaID }
                     render={
                        ({open}) =>(
                            <button onClick={open}>Choisir une image</button>
                            )
                     }
                    />          
                </InspectorControls>
            </div>
        )
    },
    save: function (props) {
        const backgroundImg = 'background-image: url('+props.attributes.mediaURL+')'; 
        return (
                 <div className="row ing-line">
                     <div className="ing-picto" style={backgroundImg}></div>
                     <div className="ing-holder">
                         <span className="ingName"><a href={props.attributes.ingLink} target="_blank">{props.attributes.ingName}</a></span>
                         <span className="ingQtt">{props.attributes.ingQtt}</span>
                     </div>
                 </div>)
    }
})

【问题讨论】：

如果您在第一次加载帖子时在编辑器中打开控制台，它将显示保存在数据库中的 HTML 与 Gutenberg 尝试从 save 函数呈现的内容之间的不同之处.这将帮助您开始追踪问题所在。
你是对的，谢谢你的线索；）

标签： reactjs wordpress jsx wordpress-gutenberg

【解决方案1】：

根据 Phil 的建议，我在控制台中看到了这些错误：

blocks.min.js?ver=e2b6602c7ebbe8ce93832ce35d81be1c:2 Block validation: Block validation failed for `astra/ingreds` ({name: 'astra/ingreds', icon: {…}, keywords: Array(0), attributes: {…}, providesContext: {…}, …}).

Content generated by `save` function:

<div class="wp-block-astra-ingreds row ing-line"><div class="ing-picto" style="background-image: url(undefined)"></div><div class="ing-holder"><span class="ingName"><a target="_blank"></a></span><span class="ingQtt"></span></div></div>

Content retrieved from post body:

<div class="wp-block-astra-ingreds row ing-line"><div class="ing-picto" style="background-image: url(undefined)"></div><div class="ing-holder"><span class="ingName"><a target="_blank" rel="noopener"></a></span><span class="ingQtt"></span></div></div>

这两者之间唯一不同的是来自锚标记的属性 rel，我没有声明和/因此默认情况下由帖子正文创建。

所以我刚刚在我的保存函数中写了“rel = noopener”，你知道吗？成功了！

感谢 Phil 以及他对如何调试古腾堡块的知识！

祝你有美好的一天！

【讨论】：