Introducción

En Wagtail un Streamfield es un campo que permite representar una secuencia de estructuras llamadas “bloques”. Estos bloques son personalizables, reutilizables y flexibles a la hora de llevar a cabo su creación y utilización. Estos bloques pueden ser tanto campos nativos de Wagtail como nuevas estructuras creadas ad-hoc.

Uno de los atributos del Streamfield es “collapsed“ que si tiene el valor True, al acceder a la página, las secciones pertenecientes al Streamfield se deberían mostrar inicialmente plegadas.

Dada la siguiente página:

class BlogPage(Page):
  body = StreamField([
    ('heading', blocks.CharBlock()),
    ('paragraph', blocks.RichTextBlock()),
    ('image', ImageChooserBlock()),
  ],
    use_json_field=True,
    collapsed=True
  )
  content_panels = Page.content_panels + [
    FieldPanel('body'),
  ]

Como se ve en la imagen al darle al botón de submit, se ha producido un error de validación dentro del heading del body. Al estar plegada, parece que no hubiera error, cosa que puede llevar a confusión al editor del contenido.

Este comportamiento se ha reportado en Wagtail (Github) y se está trabajando en ello. Mientras tanto, se puede usar este pequeño truco:

Solución planteada

Lo que proponemos es registrar el siguiente hook en su correspondiente archivo llamado “wagtail_hooks.py”:

@hooks.register("insert_editor_js")
def editor_js():
  return mark_safe(
    """
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const blocks = document.querySelectorAll('div.c-sf-block__content[aria-hidden="true"]');
            blocks.forEach(function(block) {
                if (block.querySelectorAll('div.error').length > 0) {
                    block.parentNode.querySelector('.c-sf-block__header').click();
                }
            });
        });
    </script>
    """
  )

Después de registrar este hook, al reiniciar el proyecto comprobaremos que al usar el botón de submit, se ha aplicado la mejora. Ahora las secciones con errores de validación dentro del body se despliegan automáticamente mostrando el campo erróneo, como se puede comprobar en la siguiente imagen.

Conclusión

En esta entrada hemos planteado una alternativa para aquellos usuarios de Wagtail que quieran mostrar los errores de validación dentro de un Streamfield de forma más visual, facilitando la edición de los contenidos. Esta mejora puede ser útil mientras no se publique una alternativa o en el caso de no poder actualizar a una nueva versión de Wagtail.