Acquia

This was a with few user-facing changes in Experience Builder (XB). But some of the invisible changes are crucial for XB’s future though.

Last week was quiet on the front end. This week there’s two big leaps forward!

Leap #1

Experience Builder’s (XB) right sidebar has two tabs:

1. “Settings” (for the per-component “settings”), which for Single Directory Components (SDCs) shows a form to populate its props
2. “Page data”, intended to allow modifying the the page you’re looking at if it’s a content entity. In other words: it should show the typical Drupal node form to edit the content entity’s structured data. But with a major twist: all field widgets must be rendered using React, and their values synced with Redux, to allow live updates in XB’s preview.

So, this week’s first leap is Bálint “balintbrews” Kléri and Ben “bnjmnm” Mullins having made that second point a reality:

Bálint “balintbrews” Kléri and Jesse Baker fixed a funny bug: the component inputs form was unscrollable, which meant that using Experience Builder (XB) in small viewports (or with complex components that have many inputs), you just couldn’t reach them 😅🙈

Dave “longwave” Long and I simplified the way XB represents Component config entity IDs, a small next step towards supporting multiple component types. It will now feel more familiar for anybody used to dealing with Drupal’s configuration.

Ted “tedbow” Bowman and Dave introduced basic auto-saving (much future work left to be done):

After a 105-day hiatus — because I became a dad ☺️ — time to catch up! It’s the last day of January and I’m writing about week 22, while in week 34! I intend to catch up by the end of February and that of course happens to be week 42. 😜 🤓

The typical post-DrupalCon slow week — from travel woes to taking some time off, to passing on learnings to the rest of the team. But there’s still some interesting things to note this week 😊

The funny bug fixed with one line of HTML

During DrupalCon, Chris “cosmicdreams” Weber spotted a funny edge case we somehow hadn’t triggered during development: after placing a component using Experience Builder (XB), using the component props form to specify values and pressing Enter, no it actually submits the form, because that’s what forms do! But in this case, it is not meant to be submitted: the preview is updated live and saving will (eventually) happen automatically.

DrupalCon week! On Monday, we landed the last issue to achieve the 0.1 milestone: The XB annotations and labels should not change size when zooming — thanks Utkarsh “utkarsh_33”, Atul “soaratul” Dubey and Bálint “balintbrews” Kléri for guiding it across the finish line!

That was the only noteworthy commit of the week, because of Acquia’s team working full-time on Experience Builder (XB), Ben “bnjmnm” Mullins, Jesse “jessebaker” Baker, Lauri “lauriii” Timmanee and Bálint (he helped us achieve 0.1 on Monday and traveled on Tuesday!) were attending DrupalCon. Also at DrupalCon was Dave “longwave” Long, who we’re sponsoring part time.

So it was with a lot of satisfaction that I tagged the 0.1.0-alpha1 release on the morning of the DriesNote :)

Last week ended with 12 remaining issues. Did we make it? 😅

Major loose ends

Like last week, I’m starting with the major loose ends.Thanks to the impressive work by Dang “sea2709” Tran and the reviews and guidance from Jesse “jessebaker” Baker as well as many others, Experience Builder (XB) now has a robust solution for previewing components when hovering them in the “insert” menu. It required both server-side changes (global theme asset libraries were missing previously) and client-side changes (shadow DOM didn’t offer sufficient isolation; we needed <iframe>). 
The result is so nice that I almost spat out my coffee because of a deep, unavoidable “OOOOOHHHHHHHHHHHHHHHHHHHHHHHH!!!!!” when reviewing it! 😁

With DrupalCon Barcelona 2024 only two weeks later, the focus this week is on tying up loose ends. That already started last week, but of the milestone 0.1.0 priorities that product lead Lauri “lauriii” Timmanee identified, 15 are still left after last week: we need to fix 1.5/day to get to zero.

Major loose ends

I titled last week’s update drag and drop party because there were so many improvements on that front. But one critical piece was still missing: it was painful to drag components into locations that are difficult to visualize: top and bottom of slots, even more so for adjacent slots. Bálint “balintbrews” Kléri brought one additional improvement:

We matched last week’s record: again 26 MRs merged! 🚀

Experience Builder (XB) already had a hierarchy view for a while. Lauri “lauriii” Timmanee worked with the Acquia UX team to change that to match the more common “layers” pattern (used in Photoshop and Figma). Harumi “hooroomoo” Jang made that a reality:

A new record week: 26 MRs merged! :D Too much to cover, so going forward, I will only write about the most notable changes.

The simplified zoom interface landed thanks to Jesse “jessebaker” Baker and Gaurav “gauravvvv” — with not only better controls, but also a much smoother UX:

Bálint “balintbrews” Kléri, Jesse and Ben “bnjmnm” Mullins integrated the existing “undo” functionality with the component props form, resulting in the UX you’d hope: