Overview

#3452512: Add component instance edit form to contextual panel introduced a first iteration of a form in the right sidebar to edit the props of a component instance (not to be confused with ComponentEditForm, introduced by #3444417: "Developer-created components": mark which SDCs should be exposed in XB).

It introduces a lot of infrastructure to be able to render PHP-defined widgets ("field widget plugins") using React by lifting a subset of the functionality out of https://www.drupal.org/project/jsx, thus allowing React to render Form API render arrays generated by field widget plugins! 🤯💥

But what it does not do, is generating that Form API render array using something sane/understandable: it does so by extracting a subset of the form that \Drupal\experience_builder\Plugin\Field\FieldWidget\TwoTerribleTextAreasWidget generates. But that is itself — as the name already indicates — a very temporary throw-away kind of code.
Since #3452397: Allow specifying default props values when opting an SDC in for XB, \Drupal\experience_builder\PropSource\StaticPropSource::getWidget() (and sibling methods) can be used to generate a new static prop source and a widget to accept a value, even if no host entity exists yet.

Proposed resolution

  1. Refactor the /xb-field-form route to not be powered by TwoTerribleTextAreasWidget, but by StaticPropSource::getWidget(): https://git.drupalcode.org/project/experience_builder/-/merge_requests/1...
  2. Remove \Drupal\experience_builder\Form\DummyComponentFieldForm https://git.drupalcode.org/project/experience_builder/-/merge_requests/1...
  3. Remove \Drupal\experience_builder\Controller\ExperienceBuilderController::horribleFormHack()https://git.drupalcode.org/project/experience_builder/-/merge_requests/1...

Out-of-scope:

dynamic prop sources support, and allowing the content creator to choose between dynamic vs static prop source — see the user stories in #3454094: Milestone 0.1.0: Experience Builder Demo — this is a much lower priority
When editing an already-existing entity's component prop that is populated by a DynamicPropSource, this logic should currently just fall back to using a StaticPropSource, as if it were a newly placed component.
saving
Just like #3452512: Add component instance edit form to contextual panel does not support saving the content creator's input, this won't be handling that yet either.

IOW: The sole purpose of this issue is to simplify the right sidebar.

User interface changes

Less noisy UI — it should start resembling the actual UX, and be somewhat reasonable.

HEAD
With this MR

⇒ the impact of #3462310: Component props form: map textarea, bool, and select elements to React components will be much clearer!
CommentFileSizeAuthor
#9 expected.png16.94 KBwim leers
#9 after.png114.06 KBwim leers
#9 before.png193.97 KBwim leers
Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

Wim Leers created an issue. See original summary.

wim leers’s picture

Title: Evolve component instance edit form to become simpler: generate a Field Widget directly » [PP-1] Evolve component instance edit form to become simpler: generate a Field Widget directly
Issue summary: View changes
Status: Active » Postponed
wim leers’s picture

Title: [PP-1] Evolve component instance edit form to become simpler: generate a Field Widget directly » Evolve component instance edit form to become simpler: generate a Field Widget directly
Status: Postponed » Active
wim leers’s picture

larowlan’s picture

I'm still very strongly in favor of writing actual react components for each widget with a way for people to swap them in.
We did this in decoupled LB. It's a lot less magic.

wim leers’s picture

I'm still very strongly in favor of writing actual react components for each widget with a way for people to swap them in. […] It's a lot less magic.

There's no question that there's a lot of complexity. AFAIK writing React-based widgets is intended to become possible too, eventually.

For more context, see my detailed response at #3452512-38: Add component instance edit form to contextual panel.

wim leers’s picture

wim leers’s picture

Assigned: Unassigned » bnjmnm
Issue summary: View changes
Status: Active » Needs work
StatusFileSize
new193.97 KB
new114.06 KB
new16.94 KB
HEAD
With this MR

⇒ the impact of #3462310: Component props form: map textarea, bool, and select elements to React components will be much clearer!

Note: it looks like this unveiled a minor but high-impact oversight in semi_coupled.engine: default values for forms are not rendered when using that engine (see screenshots above), but are rendered when using the default engine (reproduce by adding an early return to experience_builder_form_component_props_form_alter()):

lauriii’s picture

🤯

wim leers’s picture

+69,-210 🥳

wim leers’s picture

wim leers’s picture

Issue summary: View changes

bnjmnm made their first commit to this issue’s fork.

bnjmnm’s picture

Assigned: bnjmnm » Unassigned
Status: Needs work » Needs review
tedbow’s picture

Status: Needs review » Reviewed & tested by the community

Looks good

  • bnjmnm committed 9b971118 on 0.x authored by Wim Leers
    Issue #3461422 by Wim Leers, bnjmnm, tedbow: Evolve component instance...
bnjmnm’s picture

Status: Reviewed & tested by the community » Fixed

So much better

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.