Gutenberg: Validarea blocului a eșuat

Question

Gutenberg: Validarea blocului a eșuat

14 feb. 2020, 10:50:42

Vizualizări: 16.6K

Voturi: 10

Folosesc un bloc personalizat pentru a genera un shortcode care apoi randeză HTML-ul.

Când adaug blocul și salvez articolul, totul funcționează, blocul afișează shortcode-ul cu valorile implicite.

Când modific unele valori, articolul se salvează fără eroare și funcționează pe frontend.

Dar când reîncarc pagina de editare a articolului primesc următoarea eroare:

Validare bloc: Validarea blocului a eșuat pentru `fare/list-posts` (
Object { name: "fare/list-posts", icon: {…}, attributes: {…}, keywords: [],   save: save(t), title: "List Posts", category: "common", edit: edit(e)
 }
).

Conținut generat de funcția `save`:

[list-posts type="post" category="" count="6"][/list-posts]

Conținut preluat din corpul articolului:

[list-posts type="post" category="" count="12"][/list-posts]

Validarea așteaptă valorile implicite dar primește shortcode-ul editat cu noile valori.

Iată codul meu JavaScript:

/* Această secțiune de cod înregistrează un nou bloc, setează o pictogramă și o categorie și indică ce tip de câmpuri va include. */
wp.blocks.registerBlockType('fare/list-posts', {
  title: 'Lista Articole',
  icon: 'tickets',
  category: 'common',
  attributes: {
    posttype: {
      type: 'string',
      default: 'post'
    },
    postcategory: {
      type: 'string',
      default: ''
    },
    postcount: {
      type: 'number',
      default: 6
    },
  },

  /* Aceasta configurează modul în care vor funcționa câmpurile de conținut și culoare și setează elementele necesare */
  edit: function(props) {
    function updatePostType(event) {
      props.setAttributes({posttype: event.target.value})
    }
    function updateCategory(event) {
      props.setAttributes({postcategory: event.target.value})
    }
    function updatePostCount(event) {
      props.setAttributes({postcount: event.target.value})
    }
    return React.createElement("div",{ style: { border: '2px solid #aaaaaa', 'border-radius': '3px', padding: '12px'}},
      React.createElement( "h3", null, "Lista Articole" ),
      React.createElement( "span", { style: { margin: '0' }}, "Tip Articol" ),
      React.createElement( "input", { type: "text", value: props.attributes.posttype, onChange: updatePostType, style: {} }),
      React.createElement( "hr" ),
      React.createElement( "span", { style: { margin: '0' }}, "Categorie Articol" ),
      React.createElement( "input", { type: "text", value: props.attributes.postcategory, onChange: updateCategory, style: {} }),
      React.createElement( "hr" ),
      React.createElement( "span", { style: { margin: '0' }}, "Număr Articole" ),
      React.createElement( "input", { type: "number", value: props.attributes.postcount, onChange: updatePostCount, style: {} })
    )
  },

  save: function(props) {
    //
    return '[list-posts type="'+props.attributes.posttype+'" category="'+props.attributes.postcategory+'" count="'+props.attributes.postcount+'"][/list-posts]';
  }
})

Poate cineva să-mi spună ce greșesc?

Mulțumesc.

Vincurekf

123

editor pe blocuri

Toate răspunsurile la întrebare

Comentarii

e cam ciudat că nu aruncă o eroare în setAttributes

aaaaaa

14 feb. 2024 02:10:00

Sally CJ 39.9K · Accepted Answer · 2020-02-14T14:06:54Z

Pe scurt, când salvezi un atribut, asigură-te că tipul său se potrivește cu cel definit în opțiunea `attributes` a blocului.

Documentația spune:

În cele din urmă, asigură-te că respecți tipul de date când setezi atributele, deoarece cadrul nu efectuează automat conversia tipului pentru meta. Tipul incorect al atributelor blocului va duce la o postare care rămâne neschimbată chiar și după salvare (cf. isEditedPostDirty, hasEditedAttributes). De exemplu, dacă authorCount este un întreg, ține minte că gestionarii de evenimente pot trimite date de alt tip, așadar valoarea ar trebui să fie convertită explicit:
function onChange( event ) {
  props.setAttributes( { authorCount: Number( event.target.value ) } );
}

Deci problema este cu atributul postcount, care este definit ca un număr, dar salvat ca un șir de caractere (event.target.value, în cazul tău, este un șir de caractere).

Și cu codul tău acum, dacă setezi postcategory la foo și postcount la altceva decât 6, de exemplu 3, rezultatul HTML al blocului ar fi:

<!-- wp:fare/list-posts {"postcategory":"foo"} -->
[list-posts type="post" category="foo" count="3"][/list-posts]
<!-- /wp:fare/list-posts -->

dar ar trebui să fie de fapt — observă "postcount":3:

<!-- wp:fare/list-posts {"postcategory":"foo","postcount":3} -->
[list-posts type="post" category="foo" count="3"][/list-posts]
<!-- /wp:fare/list-posts -->

Și iată codul problematic:

// În updatePostCount()
props.setAttributes({postcount: event.target.value})

care ar trebui scris astfel:

props.setAttributes({postcount: Number( event.target.value )})

Adică trebuie să convertești explicit valoarea la un număr și nu să o transmiți așa cum este (ca șir de caractere).

Gutenberg: Validarea blocului a eșuat

Pe scurt, când salvezi un atribut, asigură-te că tipul său se potrivește cu cel definit în opțiunea attributes a blocului.

Pe scurt, când salvezi un atribut, asigură-te că tipul său se potrivește cu cel definit în opțiunea `attributes` a blocului.