我正在创建非常简单的文本块。当我第一次添加它时,该块正常工作。如果我刷新页面并尝试编辑块,则会向我显示"此块包含意外或无效的内容"的消息。我试图禁用HTMLValidation检查,但这无济于事。另外,在我单击"解决方案:当前块"和转换块后包含相同的代码后。
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>
要诊断这些错误,打开浏览器控制台( cmd opt opt i i in Chrome in Chrome在Mac上,然后选择"控制台"选项卡),然后查找"块验证"。错误,应该看起来像这样:
blocks.js?ver = 6.2.5:8545块验证:
块验证失败avorg/block-rss
({name:;&quot; avorg/block-rss&quot&quort; title:'rss link&quot&quot; icon:{…},caterory:&quort; widgets; widgets;属性:{…},…},…})。
save
函数生成的内容:
<div class="wp-block-avorg-block-rss"><a href="http://google.com" target="_blank"><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"><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"></path></svg></a></div>
从邮政正文中检索的内容:
<div class="wp-block-avorg-block-rss"><a href="http://google.com" target="_blank" rel="noopener noreferrer"><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"><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"></path></svg></a></div>
发生错误是因为save
函数生成的已检索的HTML和HTML不匹配。这可能是当WordPress注入属性(上述屏幕截图中的rel
)或自使用块的定义发生更改时引起的。
要解决这个问题,您可能需要做以下操作之一:
- 单击 resolve 在编辑器接口中以更新块实例以匹配块的修改定义。
- 如果构建了块,则可能需要编辑
save
函数,以使其返回的HTML与最终被持续到数据库的HTML相同。
就我而言,我必须确保我的save
功能在生成的<a>
标签中包含rel="noopener noreferrer"
,以便WordPress的注入此属性不会导致块实例的HTML与我的save
生成的HTML之间的不匹配功能。
您会遇到错误
on 编辑功能您拥有 -
<div id="small-text" className={className}>
<div>
<p></p>
</div>
</div>
on 保存功能您有一个额外的div -
<div>
<div class="commute text-center">
<div>
<p></p>
</div>
</div>
</div>
我也有类似的问题,这是由于我错误地设置了属性定义。
在这种情况下,您应该将message
属性类型定义为string
,IT源应在使用RichText
组件时为html
,并将#small-text
用作Selector:
...
attributes: {
message: {
type: 'string',
source: 'html',
selector: '#small-text',
}
},
通常,请小心定义属性正确设置类型,源和选择器。检查官方文档以获取更多信息。