Introduction

In Wagtail a Streamfield is a field that allows us to represent a sequence of structures called “blocks”. When creating and using them the blocks are customisable, recyclable and flexible. The blocks can be either native Wagtail fields or new structures created ad-hoc.

One of the Streamfield attributes is "collapsed" which if it has the value True, when accessing the page, the sections belonging to the Streamfield should initially be shown collapsed.

We can see this in the following page:

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'),
  ]

As seen in the image when clicking on the submit button, a validation error has occurred within the body's heading. Because it is folded, it seems that there was no error, which can lead to confusion for the content editor.

This behavior has been reported on Wagtail (Github) and is being worked on. In the meantime you can use this little trick:

Proposed solution

What we propose is to register the following hook in its corresponding file called “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>
    """
  )

After registering this hook, when restarting the project we will check that when using the submit button, the improvement has been applied. Now the sections with validation errors within the body are automatically displayed showing the wrong field, as can be seen in the following image.

Conclusion

In this post we have proposed an alternative for those Wagtail users who want to show validation errors within a StreamField in a more visual way, facilitating content editing. This improvement can be useful until an alternative is released or in the case of not being able to update to a new version of Wagtail.