WordPress Gutenberg: este bloque contiene contenido inesperado o no válido

5 minutos de lectura

avatar de usuario
Imtiaz Shamim

Estoy creando un bloque de texto muy simple. El bloque funciona bien cuando agrego esto por primera vez. Si actualizo la página e intento editar el bloque, me muestra el mensaje “Este bloque contiene contenido inesperado o no válido”. He intentado deshabilitar la verificación de validación de html, pero eso no ayuda. Además, después de hacer clic en resolver: el bloque actual y después del bloque de conversión contienen el mismo código.

http://prntscr.com/lwv18b
http://prntscr.com/lwv1e1

Este es mi código de archivo index.js

<pre>
/**
 * Block dependencies
 */
import icon from './icon';
import './style.css';

/**
 * Internal block libraries
 */
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;




/**
 * Register block
 */
export default registerBlockType(
    'jsforwpblocks/richtext',
    {
        title: __('Bizbike Small Description', 'jsforwpblocks'),
        description: __('Default title', 'jsforwpblocks'),
        category: 'common',
        icon: 'text',
        keywords: [
            __('Text', 'jsforwpblocks'),
            __('Call to Action', 'jsforwpblocks'),
            __('Message', 'jsforwpblocks'),
        ],
        attributes: {
            message: {
                type: 'array',
                source: 'children',
                selector: '.message-body',
            }
        },
        supports: {
            // html: false,
            className: false,
            customClassName: false,
            html: false,
            htmlValidation: false,
        },
        edit: props => {
            const { attributes: { message }, className, setAttributes } = props;
            const onChangeMessage = message => { setAttributes({ message }) };
            return (
                <div id="small-text" className={className}>
                    <RichText
                        tagName="div"
                        multiline="p"
                        placeholder={__('Place the title', 'jsforwpblocks')}
                        onChange={onChangeMessage}
                        value={message}
                    />
                </div>
            );
        },
        save: props => {
            const { attributes: { message } } = props;
            return (
                <div>
                    <div class="commute text-center">
                        {message}
                    </div>
                </div>
            );
        },
    },
);

</pre>

avatar de usuario
nathan arturo

Para diagnosticar estos errores, abra una consola del navegador (cmd+optar+i en Chrome en Mac, luego seleccione la pestaña Consola) y busque un error de “validación de bloque”que debería verse algo como esto:

blocks.js?ver=6.2.5:8545 Validación de bloque: Falló la validación de bloque para avorg/block-rss

({nombre: “avorg/block-rss”, título: “Enlace RSS”, icono: {…}, categoría: “widgets”, atributos: {…},…}).

Contenido generado por save función:

<div class="wp-block-avorg-block-rss"><a href="http://google.com" target="_blank"><svg aria-hidden="true" role="img" focusable="false" class="dashicon dashicons-rss" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M14.92 18H18C18 9.32 10.82 2.25 2 2.25v3.02c7.12 0 12.92 5.71 12.92 12.73zm-5.44 0h3.08C12.56 12.27 7.82 7.6 2 7.6v3.02c2 0 3.87.77 5.29 2.16C8.7 14.17 9.48 16.03 9.48 18zm-5.35-.02c1.17 0 2.13-.93 2.13-2.09 0-1.15-.96-2.09-2.13-2.09-1.18 0-2.13.94-2.13 2.09 0 1.16.95 2.09 2.13 2.09z"></path></svg></a></div>

Contenido recuperado del cuerpo de la publicación:

<div class="wp-block-avorg-block-rss"><a href="http://google.com" target="_blank" rel="noopener noreferrer"><svg aria-hidden="true" role="img" focusable="false" class="dashicon dashicons-rss" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M14.92 18H18C18 9.32 10.82 2.25 2 2.25v3.02c7.12 0 12.92 5.71 12.92 12.73zm-5.44 0h3.08C12.56 12.27 7.82 7.6 2 7.6v3.02c2 0 3.87.77 5.29 2.16C8.7 14.17 9.48 16.03 9.48 18zm-5.35-.02c1.17 0 2.13-.93 2.13-2.09 0-1.15-.96-2.09-2.13-2.09-1.18 0-2.13.94-2.13 2.09 0 1.16.95 2.09 2.13 2.09z"></path></svg></a></div>

El error ocurre porque el HTML recuperado y el HTML generado por el save la función no coincide. Esto puede ocurrir cuando WordPress inyecta una propiedad (rel en la captura de pantalla anterior) o cuando la definición de un bloque ha cambiado desde que se usó el bloque.

Para resolver el problema, es posible que deba hacer una de las siguientes cosas:

  1. Hacer clic Resolver en la interfaz del editor para actualizar la instancia del bloque para que coincida con la definición modificada del bloque.
  2. Si construyó el bloque, es posible que deba editar el save función tal que el HTML que devuelve es idéntico al HTML que termina siendo persistente en la base de datos.

En mi caso, tenía que asegurarme de que mi save función incluida rel="noopener noreferrer" en lo generado <a> etiqueta para que la inyección de WordPress de esta propiedad no resulte en una falta de coincidencia entre el HTML de la instancia de bloque y el HTML generado por mi save función.

Recibe un error porque los nodos HTML de la función de edición no coinciden con los nodos HTML de la función de guardado.

en editar función que tiene –

<div id="small-text" className={className}>
  <div>
    <p></p>
  </div>
</div>

en ahorrar función tienes una extra división

<div>
  <div class="commute text-center">
    <div>
      <p></p>
    </div>
  </div>
</div>

  • Sin embargo, se supone que Edit devuelve la pantalla de edición y, de hecho, puedo agregar elementos allí y está bien, aún es editable. Creo que debe mirar en la consola las líneas antes y después de “esperado” y “real” que son idénticos, hay otra propiedad interna que no se configura correctamente.

    – Sin errores

    27 de febrero de 2019 a las 19:30

Tengo un problema similar y se debió a que estaba configurando mal la definición de los atributos.

En este caso, debe definir el message tipo de atributo como stringsu fuente debe ser html como estás usando el RichText componente y uso #small-text como seleccionador:

    ...
    attributes: {
        message: {
            type: 'string',
            source: 'html',
            selector: '#small-text',
        }
    },

En general, tenga cuidado al definir los atributos configurando correctamente el tipo, la fuente y el selector. Comprobar el documentos oficiales para más información.

¿Ha sido útil esta solución?