Edit

[WIP] The future of (rich text) authoring experiences in Wagtail

Here is a talk I gave at Wagtail Space 2019. The video recording is available on YouTube. The talk was 90% demos so the purpose of this presentation is to share the links.

👉 Wagtail Space Storybook demos

[WIP] The future of (rich text) authoring experiences in Wagtail

Hi 👋, I’m Thibaud! Web developer @Torchbox since 2 weeks ago. Member of Wagtail’s core dev team since 2 years ago.

Today’s talk covers what I did before joining Torchbox. Some context:

  • Draftail started in 2016 @Springload
    • We were frustrated with the previous editor’s UI, and lack of extensibility
    • We wanted guarantees that rich text content is free of unwanted “copy-paste” formatting
    • We needed to introduce new, custom formats to support our client’s sites.
  • Draftail got integrated into Wagtail core a year ago, february 2018
  • All of what we will look at as part of this talk was done over the last year, made possible thanks to the people who supported me on Patreon
  • Last year’s talk: Introducing Draft.js in Wagtail – Wagtail Space 2018
  • Today’s talk: the missing “UI/UX blog post” that was supposed to be on its way a year ago.

Why this matters

More context - motivations:

  • IMO, If your site’s content sucks, the whole site suffers. No matter how good the design or features are.
  • To me, this makes the content authoring UI the most important feature of a CMS.
  • If the UI is lacking, content authors will work outside of the CMS and only reluctantly use it for publication.
    • “Copy-paste from Word” workflow is a symptom (but should be supported nonetheless).
  • Other tools are innovating a lot with authoring experiences – Dropbox Paper, Slack, Notion

Demos! 🌈

  • Demoing things outside of Wagtail, but all of those examples can also work within Wagtail *
    • * As soon as my PR is merged and released 😅
  • Proof-of-concepts meant to demonstrate the capabilities of Draftail, and stress test its APIs. Not refined designs.

👉 Wagtail Space Storybook demos

  • Linkify for intuitively creating links
  • Single-line inputs for headings
  • Markdown shortcuts for power users
  • Emojis!
  • Action lists as an example of a custom block
  • Slash commands for editing actions beyond rich text
  • Custom toolbars, blurring the line with StreamField

What next

  • Polish and integrate some or all of those changes in Wagtail, out of the box or as plug and play extensions
  • Do more documentation, tutorials, so people can leverage those APIs to experiment with their own UIs

How you can help:

  • Talk to your content editors, do UX research with them, pass on the feedback
    • Have them try out those features, inside and outside of Wagtail
  • Try out the APIs to build your own extensions, and share pain points / missed opportunities
  • Get involved with a future rich text task force?

Thank you!