Problem/Motivation

#3526637: Make webform blocks fully validatable and thus show as as dynamic component in Experience Builder is the first step to make Webforms XB compatible, but not enough. However we should keep scope there.

The problems after that issue lands are as follows (see #3526644-14: Make basic webform experience work with Drupal Canvas for recording):

  1. Webforms are added as a generic dynamic component. There is no preview. Either one component should be available per webform or a generic preview would ideally be added. I don't think this is a must have for the first version, but the empty preview looks odd.
  2. The autocomplete widget to enter the form name did not work at all in XB. The autocomplete itself finds the form but the value is not persisted when I click away from the component and also not saved to the XB entity when I save the page. If I switch to a select box, the value is at least saved. It is still not persisted when I click away and is not properly loaded back to the prop form when editing the XB page.
  3. The webform appears properly on the page but submission does not work. I assume some render array / submit handler propagation does not happen that normally webform blocks expect when added on random Drupal pages.
  4. There is the problem that this issue was originally opened for that the default values is a YAML blob instead of useful form elements. I don't think that is a requirement for an initial working version though. However we have a bunch of related info in this issue so would carry on here rather than opening a whole new one.

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

None.

Introduced terminology

None.

API changes

None.

Data model changes

TBD

Release notes snippet

TBD

Comments

gábor hojtsy created an issue. See original summary.

gábor hojtsy’s picture

Issue summary: View changes
gábor hojtsy’s picture

gábor hojtsy’s picture

Issue summary: View changes
StatusFileSize
new24.34 KB

@penyaskito tricked XB to allowing the block with the following:

block.settings.webform_block:
  type: block_settings
  label: 'Webforms block'
  constraints:
    FullyValidatable: ~

Which is how the block config showed up in XB and the YAML default values storage appeared. Also adding to issue summary.

gábor hojtsy’s picture

Issue summary: View changes

Added reference to xb transform docs thanks @penyaskito.

penyaskito’s picture

gábor hojtsy’s picture

How would that be a blocker?

wim leers’s picture

Added reference to xb transform docs thanks @penyaskito.

That's for Redux-integrated field widgets. See docs/redux-integrated-field-widgets.md.

XB's block ComponentSource doesn't use field widgets for their input UX; it uses block plugins' existing \Drupal\Core\Block\BlockPluginInterface::blockForm().

AFAICT this should not need anything else. What exactly is not working?

wim leers’s picture

Note; there are lots of remaining @todos for block-sourced components — gathered this list by grepping https://www.drupal.org/project/experience_builder/issues/3520484#stable for "block":

(all stable blockers, not beta blockers).

Generally speaking, we've only scratched the surface with block plugins, because so few are fully validatable in core. You're likely to run into problems unless the block forms are simple at this time.

gábor hojtsy’s picture

@wimleers: the webform block is a generic block. You configure it by setting the webform name in the autocomplete (where the screenshot says "Contact"). Unfortunately while this autocomplete itself works in XB, the data is not stored. If you click away to a different component, click back, it does not persist. Also, the block is not rendered with the webform name picked, so you still have a component that you can only pick out from the layers tab.

I'll try to create a gif or video but while updating to xb 0.4.0, somehow the webform schema fixes do not seem to apply.

gábor hojtsy’s picture

StatusFileSize
new32.88 MB

@wimleers: video attached. Only schema fixes are applied are #3526637: Make webform blocks fully validatable and thus show as as dynamic component in Experience Builder from the current MR.

gábor hojtsy’s picture

StatusFileSize
new70.71 KB

BTW did not include in the video, but when trying to save the page, there is an error with the "Contact" machine name. So looks like the title is not translated to the machine name with the autocomplete. Why would that be a problem?

gábor hojtsy’s picture

StatusFileSize
new12.94 MB

@gxleano suggested to change the widget to a dropdown instead of an autocomplete. That behaves the same. I can even save it but then it says the tree is broken (and even the undo in the dialog does not work).

gábor hojtsy’s picture

Woah I figured out that the error in layout was due to the demo design system attempting to use Paragraphs even if its not even installed on the site ONLY if there was a webform :D

It does render now! BUT the selected webform value still does not persist.

However the form does not save any values just redirects to the form's own page. Still the display is a good step :D

gábor hojtsy’s picture

Fixing the demo design system bug at #3532358: Webform handling has implicit dependency on paragraphs, whitescreens to make the webform show up at least :)

gábor hojtsy’s picture

Title: Add xb transform to webform block storage so that it works with Experience Builder » Make basic webform experience work with Experience Builder
Issue summary: View changes

Updated issue summary with current problem list and made title more generic given that we have shifted the scope a bit in this issue already :D

bkosborne’s picture

Title: Make basic webform experience work with Experience Builder » Make basic webform experience work with Drupal Canvas