Blog

I’ll be at DrupalCon Atlanta, where my primary goal is to connect and talk to all of you in the Drupal community who have questions about Experience Builder: hopes, concerns, aspirations, ideas, insights, anything!

I won’t be talking at DrupalCon this time, but:

It’s been a while since there was a screenshotless for Experience Builder (XB) week overview, but this is one of those. Solely adding more infrastructure and evolving existing ones.

You may recall that last week, a “Publish” button was introduced that was supposed to be short-lived. It’s still around, but the server-side support for the intended UX did land this week: Ted “tedbow” Bowman and Lee “larowlan” Rowlands expanded XB’s internal HTTP API to be able to publish all auto-saved entities. In a future blog post, you’ll get to see the UX this enables!

It’s hard to imagine, but … until now, Experience Builder’s (XB) live preview of the component tree (not to be confused with XB’s chrome-free preview mode) the content creator is assembling has been very imperfect. This week Dave “longwave” Long, Ben “bnjmnm” Mullins, Jesse Baker, Felix “f.mazeikis” Mazeikis, Lauri “lauriii” Timmanee, Bálint “balintbrews” Kléri and I made it just slightly imperfect:

Experience Builder (XB) most prominent UI piece is its preview canvas, where multiple viewport widths are visible next to each other. The preview canvas is meant for placing components, modifying their inputs and moving them around. For that reason, you cannot interact with the contents of each component. What if you do want to try that?

That’s where the new Preview functionality comes in that was built by Jesse Baker, Dave “longwave” Long and Harumi “hooroomoo” Jang, which removes UI chrome and allows the content author to focus on their creation:

One of the most frequently performed actions in Experience Builder (XB) is inserting a component. That UI was moved to the sidebar last week to make it immediately available. After dragging a component onto the canvas, the most common next action is modifying the default component inputs.
So that’s precisely what Jesse Baker, Harumi “hooroomoo” Jang, Luhur Abdi “el7cosmos” Rizal and Lauri “lauriii” Timmanee iterated on this week:

A strong start of the week by Harumi “hooroomoo” Jang and Jesse Baker, to remove the “insert” panel appearing over the left sidebar, in favor of the components being listed inside the left sidebar:

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. 😜 🤓