Performance: On-demand lazy-loading source selector

Thanks both for your feedbacks :)

We would have to define a way to display a "summary" of the existing settings but this would be way more effective for performances

We have this now #3519282: [2.0.4] Add PluginSettingsInterface::settingsSummary()

Hello,

We have 3 big opportunities to improve performance of UI Patterns 2:

• reducing the number of plugin derivatives (blocks, sources and derivable contexts): this will be one of the expected results of the current ambitious #ui_patterns-next plan
• calculating the available source for each prop in the ComponentPluginManager itself, to heavily cache them in prop annotations, but this is part of a bigger strategy challenging the PropType plugins
• the current issue, focused on component form

It's a performance solution, but, in my opinion, a bad thing for UX. The idea is still great, may be we can find something to solve UX.

So, we need to find a solution which is good both for performance and for UX. I am proposing to shamelessly copying the UX of ECA forms:

So, to replace the current clunky UX with fieldsets and always visible sources selectors:

We can do something like that:

1. At start, only the default source (so, most of a time, a "widget") in the form.
2. Button triggering a modal with the (sometimes nested) sources selector & source form
3. Once a source configured, the source settings summary is replacing the default widget.

Advantages:

• Cleaner, Drupal-level accessible, interface, based on the work of 2 UX form Drupal Core & Drupal CMS
• Performance improvements: On-demand lazy-loading sources retrieval :)
• Just a guess: the ECA implementation may be easily reusable and already HTMX friendly

This UX proposal is for props only, there is already a ticket about slots UX: #3478643: UX of source selector for slots

Test with UI Patterns Field Formatters

UI: some widget are cropped

Example: checkbox

UX: the name of the prop appears at the end of the prop form

We need to remove it.

UX: we need the source label before the settings summary

Not for the default widget.

UX proposal: move the button in the corner

Just a proposal:

.uip-prop-box summary + * {
  position: relative;
}

.uip-source-selector-toggle {
  top: 0;
  right: 0;
  position: absolute;
  margin: 0;
}

Settings summary

Maybe not necessary part of the scope of the current ticket, but we will need to add and improve the implementation of PluginSettingsInterface::settingsSummary().

For example, EntityLinksSource will need a label for the template and tell about absolute.

It is particularly important for the context switchers:

• [Entity] ➜ Referenced [Entity] (entity_reference)
• [Entity] ➜ [Field] (entity_field)
• [Field item] ➜ Referenced [Entity]

Which can display both the ::settingsSummary() of the present source and the ::settingsSummary() of the selected source, recursively.

Test with Display Builder

In progress

Test with UI Patterns UI

To check.

Test with UI Patterns Field Formatters

UI: some

widget are cropped

✅ Checkbox is not cropped anymore in the main form
❌ but it is cropped in the modal now:

And sometimes there is an horizontal scrollbar. Are the modal dimensions constrained?

UX: the name of the prop appears at the end of the prop form

✅ Ok, removed.

UX: we need the source label before the settings summary

⚠️ it is added, but we need to add markup to organize the information here (no CSS needed):

UX proposal: move the button in the corner

⚠️ done (in the bottom end, instead of top end, but that's OK)
But:

• why .uip-prop-box summary + * .uip-source-selector-toggle--open instead of .uip-prop-box summary + * .uip-source-selector-toggle?
• This selector don't work in Display Builder anyway, so we need .uip-prop-box .uip-source-selector-toggle instead.

Settings summary

Maybe not necessary part of the scope of the current ticket, but we will need to add and improve the implementation of PluginSettingsInterface::settingsSummary().

It is particularly important for the context switcher which can display both the ::settingsSummary() of the present source and the ::settingsSummary() of the selected source, recursively.

✅ Some changes have already be done, but we can do a follow-up for more.

Modal title

Instead of "Source of {{ prop }}" (Example: "Source of URL"), can we have just "{{ Prop }}"? Because:

• We already know it is about source
• The next information (the prop description) below is about the prop, not the source
• We have the "Source" literal just after

Test with Layout Builder

TODO

Test with Display Builder

In progress

Test with UI Patterns UI

To check.

Test with UI Patterns Field Formatters

UI: some widget are cropped

✅ Checkbox is not cropped anymore in the main form
✅ Checkbox is not cropped anymore in the modal now
✅ No more horizontal bar

Maybe because we are nwo using the Core Modal API.

UX: we need the source label before the settings summary

✅ added

UX proposal: move the button in the corner

✅ moved in the details summary HTML element

⚠️ Too much spacing. Proposal

.uip-prop-box summary .uip-source-selector-toggle--open {
  margin: 0;
}

⚠️ You can use /core/misc/icons/787878/cog.svg instead, like Field UI does.

Settings summary

Implementation of PluginSettingsInterface::settingsSummary() has been improved but not reviewed yet.

It is particularly important for the context switcher which can display both the ::settingsSummary() of the present source and the ::settingsSummary() of the selected source, recursively.

Modal title

✅ Only the prop label

Test with Layout Builder

❌ the modal is not opening, the HTTP response look legit:

POST /layout_builder/update/block/defaults/node.article.default/0/actions/95012d30-2dba-4711-974d-ca69f65d8fe0?destination=/admin/structure/types/manage/article/display/default/layout&_wrapper_format=drupal_dialog.off_canvas&ajax_form=1&_wrapper_format=drupal_ajax

[{"command":"update_build_id","old":"form-tUuLq36VEzCdYjwQFyQvI6NhWiQa5F0422_OId6xbiE","new":"form-q0uc-FFmm5BcAl7aTK8U-V6JX8Jhw-6NTHs-S8KjtUM"},{"command":"insert","method":"html","selector":"#settings-formatter-settings-wrapper-settings-ui-patterns-variant-id-ui-patterns-prop-row-variant","data":"","settings":null}]

No JS error.

Test with Display Builder

❌ it opens a new page instead of a modal

Test with UI Patterns UI

To check.

(previous comment has been updated with the Layout Builder fail)

Look & feel

⚠️ Nearly perfect, we just need to add this in order to avoid some misalignment:

:is(.uip-prop-box, 
#drupal-off-canvas-wrapper .uip-prop-box) summary .uip-source-selector-toggle--open {
  height: auto;
}

Settings summary

Implementation of PluginSettingsInterface::settingsSummary() has been improved but not full reviewed. Let's merge like that and do some follow-ups if needed.

Test with UI Patterns Field Formatters

✅ OK, works well.

Test with Layout Builder

• In layouts: ✅ OK, works well.
• In blocks: ✅ OK, works well.
• In field formatters (in blocks): ❌ I still have the same error

The modal is not opening, the HTTP response look legit:

POST /layout_builder/update/block/defaults/node.article.default/0/actions/95012d30-2dba-4711-974d-ca69f65d8fe0?destination=/admin/structure/types/manage/article/display/default/layout&_wrapper_format=drupal_dialog.off_canvas&ajax_form=1&_wrapper_format=drupal_ajax

[{"command":"update_build_id","old":"form-tUuLq36VEzCdYjwQFyQvI6NhWiQa5F0422_OId6xbiE","new":"form-q0uc-FFmm5BcAl7aTK8U-V6JX8Jhw-6NTHs-S8KjtUM"},{"command":"insert","method":"html","selector":"#settings-formatter-settings-wrapper-settings-ui-patterns-variant-id-ui-patterns-prop-row-variant","data":"","settings":null}]

No JS error.

Weird: the prop disappear on click.

Test with Display Builder

Tested with #3622023: Behaviors are not attached on htmx swaps outside the builder root (side panels).

It is not always working:

• Page Layout: ✅ it is OK
• Other buildables: ❌ it opens a new page instead of a modal
• Other buildables, after clicking on a form element inside a widget (like select): ✅ it works

Test with UI Patterns UI

To check.