WordPress Gutenberg:此块包含意外或无效内容

Posted

技术标签:

【中文标题】WordPress Gutenberg:此块包含意外或无效内容【英文标题】:WordPress Gutenberg: This block contains unexpected or invalid content 【发布时间】:2019-05-19 17:04:14 【问题描述】:

我正在创建非常简单的文本块。当我第一次添加它时,该块工作正常。如果我刷新页面并尝试编辑块,它会显示消息“此块包含意外或无效内容。”。我试图禁用 htmlvalidation 检查,但这没有帮助。另外,在我点击resolve后:当前块和转换后块包含相同的代码。

http://prntscr.com/lwv18b http://prntscr.com/lwv1e1

这是我的 index.js 文件代码

<pre>
/**
 * Block dependencies
 */
import icon from './icon';
import './style.css';

/**
 * Internal block libraries
 */
const  __  = wp.i18n;
const  registerBlockType  = wp.blocks;
const  RichText  = wp.editor;




/**
 * Register block
 */
export default registerBlockType(
    'jsforwpblocks/richtext',
    
        title: __('Bizbike Small Description', 'jsforwpblocks'),
        description: __('Default title', 'jsforwpblocks'),
        category: 'common',
        icon: 'text',
        keywords: [
            __('Text', 'jsforwpblocks'),
            __('Call to Action', 'jsforwpblocks'),
            __('Message', 'jsforwpblocks'),
        ],
        attributes: 
            message: 
                type: 'array',
                source: 'children',
                selector: '.message-body',
            
        ,
        supports: 
            // html: false,
            className: false,
            customClassName: false,
            html: false,
            htmlValidation: false,
        ,
        edit: props => 
            const  attributes:  message , className, setAttributes  = props;
            const onChangeMessage = message =>  setAttributes( message ) ;
            return (
                <div id="small-text" className=className>
                    <RichText
                        tagName="div"
                        multiline="p"
                        placeholder=__('Place the title', 'jsforwpblocks')
                        onChange=onChangeMessage
                        value=message
                    />
                </div>
            );
        ,
        save: props => 
            const  attributes:  message   = props;
            return (
                <div>
                    <div class="commute text-center">
                        message
                    </div>
                </div>
            );
        ,
    ,
);

</pre>

【问题讨论】:

【参考方案1】:

要诊断这些错误,请打开浏览器控制台(在 Mac 上的 Chrome 中为 cmd+opt+i,然后选择“控制台”选项卡)并寻找a "Block validation" error,它应该看起来像这样:

blocks.js?ver=6.2.5:8545 块验证:avorg/block-rss 的块验证失败

(name: "avorg/block-rss", title: "RSS Link", icon: …, category: "widgets", attributes: …, …)。

save函数生成的内容:

&lt;div class="wp-block-avorg-block-rss"&gt;&lt;a href="http://google.com" target="_blank"&gt;&lt;svg aria-hidden="true" role="img" focusable="false" class="dashicon dashicons-rss" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"&gt;&lt;path d="M14.92 18H18C18 9.32 10.82 2.25 2 2.25v3.02c7.12 0 12.92 5.71 12.92 12.73zm-5.44 0h3.08C12.56 12.27 7.82 7.6 2 7.6v3.02c2 0 3.87.77 5.29 2.16C8.7 14.17 9.48 16.03 9.48 18zm-5.35-.02c1.17 0 2.13-.93 2.13-2.09 0-1.15-.96-2.09-2.13-2.09-1.18 0-2.13.94-2.13 2.09 0 1.16.95 2.09 2.13 2.09z"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;/div&gt;

从帖子正文中检索到的内容:

&lt;div class="wp-block-avorg-block-rss"&gt;&lt;a href="http://google.com" target="_blank" rel="noopener noreferrer"&gt;&lt;svg aria-hidden="true" role="img" focusable="false" class="dashicon dashicons-rss" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"&gt;&lt;path d="M14.92 18H18C18 9.32 10.82 2.25 2 2.25v3.02c7.12 0 12.92 5.71 12.92 12.73zm-5.44 0h3.08C12.56 12.27 7.82 7.6 2 7.6v3.02c2 0 3.87.77 5.29 2.16C8.7 14.17 9.48 16.03 9.48 18zm-5.35-.02c1.17 0 2.13-.93 2.13-2.09 0-1.15-.96-2.09-2.13-2.09-1.18 0-2.13.94-2.13 2.09 0 1.16.95 2.09 2.13 2.09z"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;/div&gt;

由于检索到的 HTML 与 save 函数生成的 HTML 不匹配,因此发生错误。这可能是由于 WordPress 注入属性(上面屏幕截图中的rel)或在使用块后块的定义发生更改时引起的。

要解决此问题,您可能需要执行以下操作之一:

    在编辑器界面点击Resolve,更新块实例以匹配修改后的块定义。 如果您构建了块,您可能需要编辑 save 函数,使其返回的 HTML 与最终保存到数据库中的 HTML 相同。

就我而言,我必须确保我的save 函数在生成的&lt;a&gt; 标记中包含rel="noopener noreferrer",以便WordPress 注入此属性不会导致块实例的HTML 与我的save 函数正在生成 HTML。

【讨论】:

【参考方案2】:

您收到错误是因为您的编辑功能的 HTML 节点与保存功能的 HTML 节点不匹配。

关于你拥有的编辑功能 -

<div id="small-text" className=className>
  <div>
    <p></p>
  </div>
</div>

save功能上你多了一个div-

<div>
  <div class="commute text-center">
    <div>
      <p></p>
    </div>
  </div>
</div>

【讨论】:

Edit 应该返回编辑显示,实际上我可以在那里添加元素,没关系,仍然可以编辑。我认为您需要在控制台中查看相同的“预期”和“实际”之前和之后的行,内部还有另一个属性设置不正确。

以上是关于WordPress Gutenberg:此块包含意外或无效内容的主要内容,如果未能解决你的问题,请参考以下文章

scss WordPress Gutenberg专栏SCSS样式

如何在 Wordpress 中列出和重新排列或操作 Gutenberg 块类别

php WordPress - 禁用Gutenberg而不使用插件。

以编程方式触发 Wordpress Gutenberg “转换为块”

Wordpress Gutenberg 自定义列块

如何强制WordPress Gutenberg刷新特色图片?