Gutenberg: Falló la validación del bloque

Question

Gutenberg: Falló la validación del bloque

14 feb 2020, 10:50:42

Vistas: 16.6K

Votos: 10

Estoy usando un bloque personalizado para generar un shortcode que luego renderiza el HTML.

Cuando agrego el bloque y guardo la publicación, todo funciona correctamente, el bloque renderiza el shortcode con sus valores por defecto.

Cuando cambio algunos valores, la publicación se guarda sin errores y funciona en el frontend.

Pero cuando recargo la página de edición de la publicación, obtengo el siguiente error:

Validación de bloque: Falló la validación del bloque para `fare/list-posts` (
Object { name: "fare/list-posts", icon: {…}, attributes: {…}, keywords: [],   save: save(t), title: "List Posts", category: "common", edit: edit(e)
 }
).

Contenido generado por la función `save`:

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

Contenido recuperado del cuerpo de la publicación:

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

La validación espera los valores por defecto pero recibe el shortcode editado con los nuevos valores.

Aquí está mi código JavaScript:

/* Esta sección del código registra un nuevo bloque, establece un ícono y una categoría, e indica qué tipo de campos incluirá. */
wp.blocks.registerBlockType('fare/list-posts', {
  title: 'Listar Publicaciones',
  icon: 'tickets',
  category: 'common',
  attributes: {
    posttype: {
      type: 'string',
      default: 'post'
    },
    postcategory: {
      type: 'string',
      default: ''
    },
    postcount: {
      type: 'number',
      default: 6
    },
  },

  /* Esto configura cómo funcionarán los campos de contenido y color, y establece los elementos necesarios */
  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, "Listar Publicaciones" ),
      React.createElement( "span", { style: { margin: '0' }}, "Tipo de Publicación" ),
      React.createElement( "input", { type: "text", value: props.attributes.posttype, onChange: updatePostType, style: {} }),
      React.createElement( "hr" ),
      React.createElement( "span", { style: { margin: '0' }}, "Categoría" ),
      React.createElement( "input", { type: "text", value: props.attributes.postcategory, onChange: updateCategory, style: {} }),
      React.createElement( "hr" ),
      React.createElement( "span", { style: { margin: '0' }}, "Cantidad" ),
      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]';
  }
})

¿Alguien puede decirme qué estoy haciendo mal?

Gracias.

Vincurekf

123

block editor

Todas las respuestas a la pregunta

Comentarios

es un poco loco que esto no lance un error en setAttributes

aaaaaa

14 feb 2024 02:10:00

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

En resumen, al guardar un atributo, asegúrate de que su tipo coincida con el que definiste en la opción `attributes` del bloque.

La documentación dice:

Por último, asegúrate de respetar el tipo de datos al establecer atributos, ya que el framework no realiza automáticamente la conversión de tipos para los metadatos. Tipos incorrectos en los atributos del bloque resultarán en que una publicación permanezca como modificada incluso después de guardar (cf. isEditedPostDirty, hasEditedAttributes). Por ejemplo, si authorCount es un entero, recuerda que los manejadores de eventos pueden pasar un tipo de dato diferente, por lo que el valor debe convertirse explícitamente:
function onChange( event ) {
  props.setAttributes( { authorCount: Number( event.target.value ) } );
}

Entonces el problema está con el atributo postcount, que está definido como un número pero se guarda como una cadena (event.target.value, en tu caso, es una cadena).

Y con tu código actual, si estableces postcategory a foo y postcount a algo distinto de 6, por ejemplo 3, el resultado HTML del bloque sería:

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

pero en realidad debería ser — nota el "postcount":3:

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

Y aquí está el código problemático:

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

que debería escribirse como:

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

Es decir, necesitas convertir explícitamente el valor a número y no pasar el valor tal cual (como cadena).

Gutenberg: Falló la validación del bloque

En resumen, al guardar un atributo, asegúrate de que su tipo coincida con el que definiste en la opción attributes del bloque.

En resumen, al guardar un atributo, asegúrate de que su tipo coincida con el que definiste en la opción `attributes` del bloque.