Gutenberg: Validazione del blocco fallita - Come risolvere

Question

Gutenberg: Validazione del blocco fallita - Come risolvere

14 feb 2020, 10:50:42

Visualizzazioni: 16.6K

Voti: 10

Sto utilizzando un blocco personalizzato per generare uno shortcode che poi renderizza l'HTML.

Quando aggiungo il blocco e salvo il post, tutto funziona, il blocco renderizza lo shortcode con i suoi valori predefiniti.

Quando modifico alcuni valori, il post viene salvato senza errori e funziona in frontend.

Ma quando ricarico la pagina di modifica del post ottengo il seguente errore:

Validazione del blocco: Validazione del blocco fallita per `fare/list-posts` ( 
Object { name: "fare/list-posts", icon: {…}, attributes: {…}, keywords: [],   save: save(t), title: "List Posts", category: "common", edit: edit(e)
 }
).

Contenuto generato dalla funzione `save`:

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

Contenuto recuperato dal corpo del post:

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

La validazione si aspetta i valori predefiniti ma riceve invece lo shortcode modificato con i nuovi valori.

Ecco il mio codice JavaScript:

/* Questa sezione del codice registra un nuovo blocco, imposta un'icona e una categoria, e indica quali campi includerà. */
wp.blocks.registerBlockType('fare/list-posts', {
  title: 'Lista Post',
  icon: 'tickets',
  category: 'common',
  attributes: {
    posttype: {
      type: 'string',
      default: 'post'
    },
    postcategory: {
      type: 'string',
      default: ''
    },
    postcount: {
      type: 'number',
      default: 6
    },
  },

  /* Questa configurazione definisce come funzioneranno i campi del contenuto e del colore, e imposta gli elementi necessari */
  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 Post" ),
      React.createElement( "span", { style: { margin: '0' }}, "Tipo di Post" ),
      React.createElement( "input", { type: "text", value: props.attributes.posttype, onChange: updatePostType, style: {} }),
      React.createElement( "hr" ),
      React.createElement( "span", { style: { margin: '0' }}, "Categoria Post" ),
      React.createElement( "input", { type: "text", value: props.attributes.postcategory, onChange: updateCategory, style: {} }),
      React.createElement( "hr" ),
      React.createElement( "span", { style: { margin: '0' }}, "Numero di Post" ),
      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]';
  }
})

Qualcuno può dirmi cosa sto sbagliando?

Grazie.

Vincurekf

123

editor di blocks

Tutte le risposte alla domanda

Commenti

un po' folle che questo non generi un errore in setAttributes

aaaaaa

14 feb 2024 02:10:00

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

In sintesi, quando salvi un attributo, assicurati che il suo tipo corrisponda a quello definito nell'opzione `attributes` del blocco.

La documentazione afferma:

Infine, assicurati di rispettare il tipo di dati quando imposti gli attributi, poiché il framework non esegue automaticamente il type casting dei meta. Un tipo errato negli attributi del blocco comporterà che un post rimanga sporco anche dopo il salvataggio (cfr. isEditedPostDirty, hasEditedAttributes). Ad esempio, se authorCount è un intero, ricorda che i gestori di eventi potrebbero passare un tipo di dato diverso, quindi il valore dovrebbe essere convertito esplicitamente:
function onChange( event ) {
  props.setAttributes( { authorCount: Number( event.target.value ) } );
}

Quindi il problema è con l'attributo postcount, che è definito come numero ma viene salvato come stringa (event.target.value, nel tuo caso, è una stringa).

E con il tuo codice attuale, se imposti postcategory a foo e postcount a un valore diverso da 6, ad esempio 3, l'output HTML del blocco sarebbe:

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

ma in realtà dovrebbe essere — nota il "postcount":3:

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

Ed ecco il codice problematico:

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

che dovrebbe essere scritto come:

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

Ovvero, devi convertire esplicitamente il valore in un numero e non passare il valore così com'è (una stringa).

Gutenberg: Validazione del blocco fallita - Come risolvere

In sintesi, quando salvi un attributo, assicurati che il suo tipo corrisponda a quello definito nell'opzione attributes del blocco.

In sintesi, quando salvi un attributo, assicurati che il suo tipo corrisponda a quello definito nell'opzione `attributes` del blocco.