问题描述
正如标题所述,我正在自学如何为 wordpress 开发创建自定义古腾堡块,我编写了以下代码。保存时它可以正常工作,但是当您重新加载保存的页面时,您会收到控制台错误并显示
此块包含意外或无效的内容。
// Import CSS.
import './editor.scss';
import './style.scss';
const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
const { RichText } = wp.blockEditor
const { withColors } = wp.blockEditor
const { PanelColorSettings} = wp.blockEditor;
const { InspectorControls } = wp.blockEditor;
const { PanelBody } = wp.components;
registerBlockType( 'cgb/block-my-block',{
title: __( 'my-block - CGB Block' ),icon: 'shield',category: 'common',keywords: [
__( 'my-block — CGB Block' ),__( 'CGB Example' ),__( 'create-guten-block' ),],attributes: {
align: {
type: 'string',default: 'full',},link_text: {
selector: 'a',source: 'children',link_url: {
selector: 'a',source: 'attribute',attribute: 'href',txtColor: {
type: 'string'
},bgcolor: {
type: 'string'
},supports: {
align:true,//align: ['wide','full'],// limit only to these
},getEditWrapperProps() {
return {
'data-align': 'full',};
},edit: ( props ) => {
let link_text = props.attributes.link_text
let link_url = props.attributes.link_url
let txtColor = props.attributes.txtColor
let bgColor = props.attributes.bgColor
function onChangeContentURL ( content ) {
props.setAttributes({link_url: content})
}
function onChangeContentName ( content ) {
props.setAttributes({link_text: content})
}
function onChangeBGColor ( content ) {
props.setAttributes({bgColor: content})
}
function onChangeColor ( content ) {
props.setAttributes({txtColor: content})
}
return (
<div className={ props.className } style={{ backgroundColor:bgColor,color: txtColor }}>
<InspectorControls key= { 'inspector' } >
<PanelBody>
<PanelColorSettings
title={ __('Title Color','tar') }
colorSettings= { [
{
value: txtColor,onChange: (colorValue) => onChangeColor ( colorValue ),label: __('Color','tar'),] }
/>
<PanelColorSettings
title={ __('Background Color','tar') }
colorSettings= { [
{
value: bgColor,onChange: (colorValue) => onChangeBGColor ( colorValue ),] }
/>
</PanelBody>
</InspectorControls>
<p>Sample Link Block</p>
<label>Name:</label>
<RichText
className={props.className} // Automatic class: gutenberg-blocks-sample-block-editable
onChange={onChangeContentName} // onChange event callback
value={link_text} // Binding
placeholder="Name of the link"
/>
<label>URL:</label>
<RichText
format="string" // Default is 'element'. Wouldn't work for a tag attribute
className={props.className} // Automatic class: gutenberg-blocks-sample-block-editable
onChange={onChangeContentURL} // onChange event callback
value={link_url} // Binding
placeholder="URL of the link"
/>
<p>— Hello from the backend.!!</p>
</div>
);
},/**
* The save function defines the way in which the different attributes should be combined
* into the final markup,which is then serialized by Gutenberg into post_content.
*
* The "save" property must be specified and must be a valid function.
*
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
*
* @param {Object} props Props.
* @returns {Mixed} JSX Frontend HTML.
*/
save: ( props ) => {
let txtColor = props.attributes.txtColor
let bgColor = props.attributes.bgColor
return (
<div className={ props.className } style={{ backgroundColor:bgColor,color:txtColor }} >
<p>— Hello from the frontend.</p>
<a href={props.attributes.link_url}>{props.attributes.link_text}</a>
</div>
);
},} );
控制台错误看起来像 POST 和 SAVE 数据不同导致错误。
消息是:
Block validation: Block validation Failed for `cgb/block-my-block` ({name: "cgb/block-my-block",icon: {…},attributes: {…},keywords: Array(3),save: ƒ, …}).
Content generated by `save` function:
<div class="wp-block-cgb-block-my-block alignfull" style="color:#000000"><p>— Hello from the frontend.</p><a></a></div>
Content retrieved from post body:
<div class="wp-block-cgb-block-my-block alignfull" style="background-color:#cd2653;color:#000000"><p>— Hello from the frontend.</p><a></a></div>
<div className={ props.className } style={{ backgroundColor:bgColor,color:txtColor }} >
我删除了一种样式,只留下另一种样式,并且它有效。把另一个放回去,它坏了。我是否错误地包含了这种多种样式?如果是这样,添加多个保存在根元素上的样式的约定是什么?我也是新手,正在从教程中学习并阅读 Gutenburg github 文档。如果我做错了一些基本的事情,请告诉我。
解决方法
块验证问题是由一个小错误引起的,其中您的属性 __round()__
(区分大小写)在 edit() 和 save() 中被称为 bgcolor
。
您的代码表明您在创建自己的自定义 Gutenberg 块方面走在正确的道路上,因此我想分享一个建议,将 array destructuring 与 bgColor
一起使用,使您的代码更易于阅读和维护。您也可以删除仅调用 props
的自定义 onChange
函数,转而直接调用 setAttributes,这会减少您需要编写的代码量并减少拼写错误的可能性。
例如:
setAttributes()