New StreamField & InlinePanel UIs

Wagtail’s first hatch, the first Wagtail crowdfunding campaign, is a success! 🎉

The current issue covers the work for the main goal: rebuilding the StreamField & InlinePanel user interfaces. Please discuss here if you have some ideas on how that work could be improved compared to the mockups below. Another issue will be opened later for the second goal, the new form builder!

I’m starting working full time on it in two weeks!

StreamField mockups

InlinePanel mockup, like StreamField, but no types/icons

Fixed issues

This whole work will implement solutions for all these issues: #1033, #1336, #1532, #2123, #2264, #2325, #4179, #4215.

[stuaxo]

Hi, Sorry to hijack this thread, please ignore this message if you EW not one of the original kickstarters.

I donated to the wagtails-first-hatch and would consider similar in future, but please consider not using kickstarter in future. Staff at kickstarter were sacked for trying to start a union, and the boss recently doubled down, neither of which should be acceptable.

Cheers + thanks for making wagail better, even beyond the goals of the original fundraiser. S

[BertrandBordage]

Great news everyone! You can test the new StreamField right now! See what it looks like in these demo videos: https://youtu.be/OyPCdqBO4y0 https://youtu.be/ZLIwkfZtTno

Please install wagtail-react-streamfield, it’s a super-easy two-steps setup. You can also check out react-streamfield, which is the actual project doing 95% of the work.

Note that the team and I decided last week that releasing a third-party package was the best solution for people to start testing and using the new StreamField without having to wait for all the review time.

Now that it’s released, I’ll keep updating it to simplify some parts and work on the few missing features:

• two remaining issues when adding/duplicating ChooserPanels & RichTexts
• min_num/max_num/block_counts support
• the new SIMPLE layout
• the new label_position bonus feature
• InlinePanel support
• design improvements

Good news as well, it’s very fast. With a 1000 blocks I still get 60 FPS when dragging blocks. I took a lot of time rethinking the JavaScript data structure to be able to use efficient algorithms. At first I had awful results, and I had to change 5 times the data structure to finally find an optimal solution! The final structure is inspired by database indices.

Another good news is also that a lot of the current StreamField logic can be removed, but it will have to be gradually done, like what we’re doing with the new RichTextField. So in the end, Wagtail should have less code, with better StreamField & InlinePanel 😄

I have to say, it has been a very intense summer for me! I will probably take one or two weeks off in September to compensate.