XB week 11: live updates

published on August 9, 2024

This week started with undoing the horrors that y’all were subjected to last week: TwoTerribleTextAreasWidget featured prominently. The follow-up that I mentioned landed (Ben “bnjmnm” Mullins and I collaborated on it), which with a +110,-245 diff resulted in something that still is nowhere near a final UX, but is starting to look reasonable.

The evolved component instance props form: much simpler, by using the appropriate field widgets directly.
The evolved component instance props form: much simpler (it looked Frankensteinish a week ago!), by using the appropriate field widgets directly. Issue #3461422.

(Next up on that front: #3462310: Component props form: make form elements match design.)

That right sidebar is overlaid on top of the canvas, which also saw a big leap forward this week — thanks to Jesse “jessebaker” Baker, Harumi “hooroomoo” Jang, Ben “bnjmnm” Mullins and Lauri — a true team effort:

Component states in action: hover and active/focus.
Component states in action: hover and active/focus. Issue #3460783, image by Jesse.

The images you saw last week showed actual component previews … but we cheated by using inline styles :P.
This week, Ben rectified that: CSS/JS assets are now loaded inside the preview <iframe>s.

But I saved the best for last: the last MR to land this week was Ben’s Redux integration issue, which brought live updates of the edited component’s preview:

Live updating of component previews while the props are edited in the right sidebar!
Live updating of component previews while the props are edited in the right sidebar! Issue #3462441, image by Ben.

This currently always requires a round trip to the server, but in many cases we’d actually be able to update the preview without a round trip (better for UX obviously!). See #3453690: [META] Real-time preview: supporting back-end infrastructure, where Lee “larowlan” Rowlands intends to work on parsing a Single-Directory Component’s Twig template into an abstract syntax tree (AST), which would allow eliminating that round trip in typical cases.1

There’s one more issue that landed deserving of a mention: Ted “tedbow” Bowman and Ben landed CI: use a snapshot of core’s phpcs rules as changes in Drupal core will break MRs with limited benefit to module development, which was a very welcome addition: recently, Drupal 11 development has picked up steam … and hence several coding standards were added to Drupal core. Result: XBs phpcs CI job started failing overnight, with zero changes on our end. Doing the right thing can be painful! So, Ted and Ben changed that so we’d be notified instead: far less disruptive.

In progress/where to contribute

P.S.: issues that were picked up by somebody do not exclude you from contributing too — as you can see above, almost every issue is a multi-person effort!

Week 11 was July 22–28, 2024.


  1. If the SDC prop value is rendered as-is, with no transformations applied, then no round trip is necessary. Otherwise, that might be needed. ↩︎