XB week 27: UX improvements for populating component instances

Published on 23 February, 2025

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:

After dragging a component from the left sidebar’s “Library” tab onto XB’s canvas (with a live preview), the “Settings” tab in the right sidebar now automatically appears, making it a smooth experience to modify the component from its default inputs.
“Incredibly obvious 🙄”, I hear you think! You’re not wrong. But please remember we’re building all of this from scratch, based on incomplete designs. We’re iterating, and we’re getting somewhere! 😄
Issue #3485383, video by Luhur.

Robust component previews

While modifying a component’s inputs (in the “Settings” tab in the right sidebar you can see above), the preview updates live. This is a crucial part of the XB user experience.
However 
 Single Directory Components (SDC) can completely fail to render if/when the values assigned to an SDC’s props (i.e. what you typed into that “Settings” tab) are not yet valid. For example: if you managed to type “http” but not the rest of a URL, then that is not a valid URL.
It’s up to XB to not attempt to not update the preview as long as the Content Creator-entered values for a component (currently only SDCs, more later) are not yet valid.

This is the problem Ben “bnjmnm” Mullins, Ted “tedbow” Bowman, Jesse and I fixed after Travis Carden first noticed this. Ben led the development of the solution: performing client-side validation, using both HTML5 client-side validation (used by some Drupal field widgets) and JSON schema validation (which is possible for all SDC props). Once that infrastructure is present, it’s quite simple: don’t update the preview until the input is valid.
Fun fact: XB was using the uri field widget, which uses <input type="url">. That comes with automatic strict absolute URL client-side validation. We had to switch to the link field widget instead.

An obvious consequence: sometimes the preview doesn’t update as fast anymore. So far we’ve found this to not be really noticeable, for two reasons. First, the used field widgets are shaped to disallow invalid values as much as possible (for a type: string, enum: [
], you’ll see radio buttons, for example, eliminating the possibility of invalid values altogether). Second, the inputs whose values are “most difficult” to be valid tends to be URLs, and either those URLs aren’t directly visible (in links), or they’re highly visible (images, videos) and it intuitively makes sense those can’t appear until the full, valid value is present anyway.

Blocks, continued

Last week, initial support for Blocks landed, so this week two continuations of that initial support landed:

Grab bag

Week 27 was November 11–November 17, 2024.

  • 1

    That means it can now render the “main content”, “page title” and “messages” blocks!