Validierung des Gutenberg-Blocks fehlgeschlagen

Ich erstelle einen benutzerdefinierten Gutenberg-Block. Es funktioniert gut beim Speichern und erscheint im Frontend, aber sobald ich darauf zurückkomme, liest es sich.

Block enthält ungültigen oder unerwarteten Inhalt

Wenn ich hineingehe, um den Block aufzulösen, bekomme ich ein Extra figure eingefügt um mein MediaUpload Komponente.

Figur um meine MediaUpload-Komponente eingefügt.”>

Die Konsolenausgabe zeigt die Struktur des Blocks mit Ausnahme des hinzugefügten Textes.

Ich habe ein ähnliches Problem gesehen, bei dem die HTML-Knoten der Bearbeitungsfunktion nicht mit den HTML-Knoten der Speicherfunktion übereinstimmten. Nachdem ich das gesehen hatte, habe ich noch einmal überprüft, ob meine Knoten gesäumt sind und ich glaube, dass sie es tun, es sei denn, ich überspringe etwas. Hier der Code für den 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>
);
}
});

Auf der Editierfunktion du hast ein extra P Element, das in fehlt Speicherfunktion.

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

Auch der Fehler erwartet

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

aber bekommen

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

Beheben Sie diese beiden Probleme

ich hoffe das hilft