Jestem bardzo nowy w WordPress i jestem bardzo nowy w Gutenberg Blocks. Stworzyłem kilka prostych bloków za pomocą generatora npm Gutenburg. W moim pliku package.json utworzyłem następujące atrybuty w moim pliku package.json

"attributes": {
    "quote": {
      "type": "string"
    },
    "source": {
      "type": "string"
    }
  }

W moim pliku edit.js mam następującą strukturę bloków

export default function Edit(props) {
    return (
            <div { ...useBlockProps() } className="testimonial">
                <div className="testimonial__wrapper">
                    <div className="testimonial__header">
                        <i className="testimonial__quote__left"></i>
                            <RichText
                                tagName="blockquote"
                                value={props.attributes.quote}
                                onChange={(content) => props.setAttributes({ quote: content })}
                                placeholder="Enter Quote"
                                keepPlaceholderOnFocus={true}
                            />
                        <i className="testimonial__quote__right"></i>
                            <RichText
                                tagName="figcaption"
                                value={props.attributes.source}
                                onChange={(content) => props.setAttributes({source: content })}
                                placeholder="Enter Quotee / Source"
                                keepPlaceholderOnFocus={true}
                            />
                    </div>
                </div>
            </div>
    );
}

a to jest moja funkcja zapisu w pliku save.js

export default function save(props) {
    return (
        <div className="testimonial">
            <div className="testimonial__wrapper">
                <div className="testimonial__header">
                    <i className="testimonial__quote__left"></i>
                    <RichText.Content tagName="blockquote" value={ props.attributes.quote } />
                    <i className="testimonial__quote__right"></i>
                    <RichText.Content tagName="figcaption" value={ props.attributes.source } />
                </div>
            </div>
        </div>
    );
}

Kiedy dodaję mój niestandardowy blok do edytora, działa świetnie. Czy powinienem zaktualizować, a następnie wyświetlić moją stronę zawierającą blok, który działa! Jeśli jednak odświeżę lub przeładuję edytor zawierający mój blok, pojawi się następujący błąd:

Block validation: Block validation failed for `create-block/einzweidinge-testimonial` ({name: 'create-block/einzweidinge-testimonial', icon: {…}, keywords: Array(0), attributes: {…}, providesContext: {…}, …}).

Content generated by `save` function:

<div class="testimonial"><div class="testimonial__wrapper"><div class="testimonial__header"><i class="testimonial__quote__left"></i><blockquote></blockquote><i class="testimonial__quote__right"></i><figcaption></figcaption></div></div></div>

Content retrieved from post body:

<div class="testimonial"><div class="testimonial__wrapper"><div class="testimonial__header"><i class="testimonial__quote__left"></i><blockquote>ffff</blockquote><i class="testimonial__quote__right"></i><figcaption>fffff</figcaption></div></div></div>

Zauważyłem, że jeśli dodam blok i nie wprowadzę żadnych danych do komponentów RichText, błąd sprawdzania poprawności nie zostanie zgłoszony! Nie jestem pewien, czy to pomoże rozwiązać problem, ale widzę też następujące ostrzeżenie w konsoli.

blocks.min.js?ver=69022aed79bfd45b3b1d:10 Block validation: Expected token of type `EndTag` ({type: 'EndTag', tagName: 'blockquote'}), instead saw `Chars` ({type: 'Chars', chars: 'ffff'}).

Jestem tu zakłopotany i nie jestem pewien, co robię źle? Zaglądam do tego od kilku godzin! Każda pomoc lub wskazówki będą mile widziane.