Problem/Motivation

In Layout Builder when placing a block field, I want the to use component as field formatter.

When settings the slots in my component, I choose "Field formatter", then Ajax request and I am redirected on the block configuration URL instead of refreshing the form.

The problem was not present on 2.0.0-beta6.

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

grimreaper created an issue. See original summary.

just_like_good_vibes’s picture

Please note, it seems it is not happening with theme ui_suite_dsfr for example.

just_like_good_vibes’s picture

just a question, i am not sure about it : would it be related to how dropdown buttons are managed in bootstrap?

just_like_good_vibes’s picture

Yes, because in fact, no matter which block is used in Layout builder, as soon as we have a slot (for example in a component block in LB), and the dropdown button to add a source, it does not work anymore.
If i desactiveate the dropdown button, and repace it to a list of buttons, then ajax works again.

so the problem you encountered is clearly related to how dropdown are handled here in ui_suite_bootstrap.
Maybe we are not constructing well the dropdown ? i don't have the final answer yet

just_like_good_vibes’s picture

Assigned: Unassigned » grimreaper
Status: Active » Postponed (maintainer needs more info)

would you have some feedbacks about dropdowns please :) ?

grimreaper’s picture

I will recheck, but the problem did not occur on 2.0.0-beta6, so something changed between 2.0.0-beta6 and 2.0.0-rc1, I would guess related to link prop type normalization.

grimreaper’s picture

Assigned: grimreaper » Unassigned
Status: Postponed (maintainer needs more info) » Active

Nope, not there.

I compared the HTML in both cases of the button:

beta6:
<button type="submit" id="settings-formatter-settings-wrapper-settings-ui-patterns-slots-items-itemssettings-formatter-settings-wrapper-settings-ui-patterns-slots-items-field-formatternodewebsitefield-website-types-add-more" name="itemssettings_formatter_settings_wrapper_settings_ui_patterns_slots_items_field_formatternodewebsitefield_website_types_add_more" value="Mise en forme de champ" class="button js-form-submit form-submit btn-outline-dark btn" data-once="drupal-ajax">Mise en forme de champ</button>

rc1:
<button type="submit" id="settings-formatter-settings-wrapper-settings-ui-patterns-slots-items-itemssettings-formatter-settings-wrapper-settings-ui-patterns-slots-items-field-formatternodewebsitefield-website-types-add-more" name="itemssettings_formatter_settings_wrapper_settings_ui_patterns_slots_items_field_formatternodewebsitefield_website_types_add_more" value="Mise en forme de champ" class="button js-form-submit form-submit btn-outline-dark btn">Mise en forme de champ</button>

So the problem is that some JS behavior is no more attached in rc1.

I checked, "drupal-ajax" is put by app/core/misc/ajax.js, in the attach method (which is not overridden by UI Suite Bootstrap by the way)

So I put a console.log just before once('drupal-ajax', $(elementSettings.selector)):

beta6: I have plenty of debug in browser console.
rc1: 0 console.log.

So it means that in the case of rc1 Drupal ajax settings are not present or erased or not correctly built.

I searched in UI Patterns history in the diff between beta6 and rc1 and I have no idea where it is coming from.

pdureau’s picture

Title: Configuring a slot on Layout Builder make the page to redirect on the block form » [2.0.0-rc2] Configuring a slot on Layout Builder make the page to redirect on the block form
Assigned: Unassigned » just_like_good_vibes
just_like_good_vibes’s picture

@grimreaper, would you try something for me ?

in the src/Element/ComponentSlotForm.php, in function buildComponentDropbutton (around line 400),
add a first line return $elements;.

Then it seems everythings works, could you confirm please?

just_like_good_vibes’s picture

grimreaper’s picture

Ok, thanks.

I am testing.

Also during the night, I need to check if it is a side effect of pwa:pwa_service_worker which potentially has an extremely aggressive cache and that some Layout Builder endpoints should be excluded from the cache.

grimreaper’s picture

So, not PWA, as Layout Builder path starts with admin and admin path is excluded from cache.

So I tried like you asked:

protected static function buildComponentDropbutton(array $elements = []): array {
    return $elements;
    $build = [
      '#type' => 'dropbutton',
      '#dropbutton_type' => 'small',
      '#links' => [],
    ];

Then I have:

And yes, then it works.

Strange because in the diff https://git.drupalcode.org/project/ui_patterns/-/compare/2.0.0-beta6...2... I don't see change on this method or class.

grimreaper’s picture

Hello,

I think it would be better to convert the source dropdown into a select.

1: it will ensure the theming is easier/out-of-the-box.
2: I think it will solve this ajax bug
3: personally, when I see the arrow of the dropdown, I click on it and then I forget that there is the "Add component" option first.

just_like_good_vibes’s picture

Assigned: just_like_good_vibes » grimreaper
Status: Active » Needs review
grimreaper’s picture

Assigned: grimreaper » just_like_good_vibes
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new23.6 KB

Thanks!

I confirm the fix. RTBC.

I let you merge if you want.

pdureau’s picture

OK for me because:

  • The new UI is good enough for me
  • It is the same data structure

Christian, if you are OK too, we merge:

                component_id: null
                variant_id:
                  source_id: select
                  source:
                    value: ''
                slots:
                  title:
                    sources:
                      -
                        source:
                          component:
                            component_id: 'ui_suite_dsfr:button'
                            variant_id:
                              source_id: select
                              source:
                                value: ''
                            props:
                              attributes:
                                source_id: attributes
                                source:
                                  value: ''
                              title:
                                source_id: textfield
                                source:
                                  value: ''
                              url:
                                source_id: url
                                source:
                                  value: ''
                              target:
                                source_id: select
                                source:
                                  value: ''
                              external:
                                source_id: checkbox
                              disabled:
                                source_id: checkbox
                              icon_position:
                                source_id: select
                                source:
                                  value: ''
                              tooltip:
                                source_id: textfield
                                source:
                                  value: ''
                              id:
                                source_id: textfield
                                source:
                                  value: ''
                              social:
                                source_id: select
                                source:
                                  value: ''
                              icon:
                                source_id: icon
                                source:
                                  value: null
                            slots:
                              slots: {  }
                        source_id: component
                        _weight: '0'
                props:
                  attributes:
                    source_id: attributes
                    source:
                      value: ''
                  dismissible:
                    source_id: select
                    source:
                      value: ''
                  close_title:
                    source_id: textfield
                    source:
                      value: ''
                  title_tag:
                    source_id: select
                    source:
                      value: ''
pdureau’s picture

Assigned: christian.wiedemann » just_like_good_vibes
Status: Reviewed & tested by the community » Needs work

Decided collectively during the weekly.

Instead of a list of buttons inside a fieldset, let's try with a select form element with:

  • - Select a source to add - as empty option of the form element
  • An AJAX mechanism (using the Druapl Form State API) to submit on change
just_like_good_vibes’s picture

Assigned: just_like_good_vibes » christian.wiedemann
Status: Needs work » Needs review
christian.wiedemann’s picture

Status: Needs review » Reviewed & tested by the community
christian.wiedemann’s picture

Assigned: christian.wiedemann » Unassigned
Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

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