古腾堡块验证失败 [英] Gutenberg Block validation failed

问题描述

我正在创建一个自定义的Gutenberg块.保存时它可以正常工作，并显示在前端，但是一旦我回到它，它就会显示出来.

I'm creating a custom Gutenberg block. It works fine on save and appears on the front end, but as soon I come back to it it reads.

块包含无效或意外的内容

Block contains invalid or unexpected content

当我解决该块时，在我的MediaUpload组件周围插入了一个额外的figure.

When I go in to resolve the block, I get an extra figure inserted around my MediaUpload component.

控制台输出显示了块的结构，除了添加了文本.

The console output shows the structure of block except with the text added in.

我看到了类似的问题，其中编辑功能的HTML节点与保存功能的HTML节点不匹配.看到这一点之后，我仔细检查了一下以确保节点排成一行，并且我相信它们会对齐，除非我跳过了某些内容.这是该代码块的代码:

I saw a similar issue where the HTML nodes of edit function didn't match up with save function HTML nodes. After seeing that, I doubled check to make sure my nodes lined and I believe they do, unless I'm skipping over something. Here is the code for the block:

const { RichText, MediaUpload, PlainText } = wp.editor;
const { registerBlockType } = wp.blocks;
const { Button } = wp.components;

import './style.scss';
import './editor.scss';

registerBlockType('stackoverflow/image-card', {
  title: "Image Card",
  icon: 'feedback',
  category: 'common',
  attributes: {
    title: {
      source: 'text',
      selector: '.imageCard__title'
    },
    body: {
      type: 'string',
      source: 'children',
      selector: '.imageCard__body'
    },
    imageAlt: {
      attribute: 'alt',
      selector: '.imageCard__image'
    },
    imageUrl: {
      attribute: 'src',
      selector: '.imageCard__image'
    }
  },



edit({ attributes, className, setAttributes }) {

    const getImageButton = (openEvent) => {
      if(attributes.imageUrl) {
        return (
          <img 
            src={ attributes.imageUrl }
            onClick={ openEvent }
            className="image"
          />
        );
      }
      else {
        return (
          <div className="button-container">
            <Button 
              onClick={ openEvent }
              className="button button-large"
            >
              Pick an image
            </Button>
          </div>
        );
      }
    };

    return (
      <div className="container">
        <MediaUpload
          onSelect={ media => { setAttributes({ imageAlt: media.alt, imageUrl: media.url }); } }
          type="image"
          value={ attributes.imageID }
          render={ ({ open }) => getImageButton(open) }
        />
        <h3>
          <PlainText
            onChange={ content => setAttributes({ title: content }) }
            value={ attributes.title }
            placeholder="Your card title"
            className="heading"
          />
        </h3>
        <div className={className}>
          <RichText
            onChange={ content => setAttributes({ body: content }) }
            value={ attributes.body }
            multiline="p"
            placeholder="Your card text"
          />
        </div>
      </div>
    );
    },

save({ attributes }) {

const cardImage = (src, alt) => {
  if(!src) return null;

  if(alt) {
    return (
      <img 
        className="card__image" 
        src={ src }
        alt={ alt }
      /> 
    );
  }

  // No alt set, so let's hide it from screen readers
  return (
    <img 
      className="card__image" 
      src={ src }
      alt=""
      aria-hidden="true"
    /> 
  );
};

return (
  <div className="container">
    <img 
        className="card__image" 
        src={ attributes.imageUrl }
        alt={ attributes.imageAlt }
      /> 
    <h3 className="card__title">{ attributes.title }</h3>
    <div className="card__body">
      { attributes.body }
    </div>
  </div>
);
}
});

推荐答案

在 edit函数上，您还有一个 P 元素，而 save函数却不存在.

On the edit function you have an extra P element which is absent in save function.

<RichText
    onChange={ content => setAttributes({ body: content }) }
    value={ attributes.body }
    multiline="p"
    placeholder="Your card text"
/>

错误也在预期中

<div class="wp-block-uwec-image-card container card>

但得到

<div class="wp-block-uwec-image-card card>

解决这两个问题

我希望这对您有帮助

这篇关于古腾堡块验证失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！