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:
â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:
- Felix âf.mazeikisâ Mazeikis, Dave âlongwaveâ Long and I enabled the thorough validation that landed 4 weeks earlier for Block-sourced components, and given it was now thoroughly validated, it became possible to reliably enable support for rendering entire pages using XBâs page variant!1
Interesting tidbit: to avoid changes elsewhere in the XB codebase, we had to use PHP Fibers â available since PHP 8.1 â to achieve this. đ€ - Dave and I added support for derived block plugins, which means that for example one âmenu blockâ per menu is also available in XB, as youâd expect
Grab bag
- Dave, Jesse and Ted fixed a pretty silly bug: it became impossible to drag a component in between two other components! đ
- Jesse tightened TypeScript definitions (discovered last week while working on section saving). This helps keep out development pace high.
- Also to keep the pace high: our end-to-end test suite always started with the same single article
node
with a prepopulated XB component tree. This made sense originally, because it literally was first possible to have a server-side-stored component tree and render it, and only then was the UI built to allow a Content Creator to build such a component tree.
Weâve long since reached that point, so it was about time we added an end-to-end test that starts with an empty canvas. Thanks, Ted & Ben! - Issue #3484671 by longwave, wim leers: Add support for block derivatives â https://git.drupalcode.org/project/experience_builder/-/commit/fdbbd78d9b6e4f8de0b650fc46643fc5bbc57d6b
Week 27 was November 11âNovember 17, 2024.
- 1
That means it can now render the âmain contentâ, âpage titleâ and âmessagesâ blocks!