Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
First drawer (the one with some View panels triggered by buttons)
There is no label currently, this is leaving a weird blank space, so it would be nice to print the active panel title.
Second drawer (the one with Contextual panels triggered by instance loading)
While working on #3529049: Replace sidebars modals by drawers we removed InstanceButtons island (machine name: instance) because it was not necessary anymore.
However, we have lost the information about the current instance we are editing. We have a "Settings" title instead:
Proposed resolution
First drawer (the one with some View panels triggered by buttons)
Do we need to add event synchronize the value of the active button in .db-toolbar__start with the Drawer's label attribute?
Second drawer (the one with Contextual panels triggered by instance loading)
So, we need to find a way of updating title displaying SlotSourceProxy::getLabel() and reacting to:
public function onActive(string $builder_id, array $data): array {
return $this->reloadWithLocalData($builder_id, $data);
}
public function onDelete(string $builder_id, string $parent_id): array {
return $this->reloadWithLocalData($builder_id, []);
}
Or which is displaying SlotSourceProxy::getLabelWithSummary() (once #3529070: [1.0.0-alpha1] Use PluginSettingsInterface::settingsSummary()) and also reacting to:
public function onUpdate(string $builder_id, array $data): array {
return $this->reloadWithLocalData($builder_id, $data);
}
The main difficulty is shoelace drawer's label to be a prop (WebComponent attribute instead of a slot. Because of that, we can't add an HTML ID to drawer's label specifically and target it with an out-of-band swap.
Maybe we can place this dynamic title elsewhere and add a JS event to sync with Shoelace Drawer's label attribute?
Other tasks
This may be the opportunity to do a few related tasks:
- the drawers currently have HTML ID which may be conflicting because they don't use Builder ID:
id="db-first-drawer"andid="db-second-drawer" - in
drawer.js, istrigger.addEventListener('click', handleDrawer);is sometimes triggered? Is it useless?
| Comment | File | Size | Author |
|---|---|---|---|
| #19 | Selection_153.png | 56.05 KB | sea2709 |
Issue fork display_builder-3531253
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:
changes
Comments
Comment #2
pdureau commentedComment #3
mogtofu33 commentedComment #4
goz commentedIt's not so easy.
The twig is called when the display builder is loaded. Contextual islands are not loaded yet,and no contextual island plugin is loaded.
Islands Plugins are loaded once an instance is triggered, but only plugins are updated, not the contextual area.
Events seem to be triggered on islands plugins, not on the contextual area.
I look forward, but may be someone with more knowledge about how display_builder works has an idea ?
Comment #5
pdureau commentedyes, it is not an easy task. Your analysis is right, Goz. Let's postpone it to alpha2.
Comment #6
pdureau commentedComment #7
pdureau commentedComment #8
pdureau commentedComment #9
pdureau commentedI did the analysis and updated the issue description. Who takes the task?
Comment #10
mogtofu33 commentedAn other alternative is to do this on js as we have on the click element the html attributes of title and even index.
As the drawer title is a property set on the load of the component in the display_builder component it would avoir more php.
Comment #11
pdureau commentedComment #12
pdureau commentedWe are closing alpha4 soon
Comment #13
pdureau commentedComment #14
pdureau commentedI will give this a try
Comment #15
pdureau commentedFinally, i work on this first: #3543495: Adopt Entity API for state mgmt, part 1: Façades only
Comment #16
sea2709 commentedComment #17
pdureau commentedComment #19
sea2709 commented@pdureau:
When you have some time, can you review my MR? I found an issue when an instance for a entity field is active and the second drawer is open, then I change the field and click on Update, I expect the drawer label should be updated, but it's not.
I found this piece of code in
DisplayBuilderEventSubscriberIf I comment out this piece of code, the drawer label is updated correctly. I think when the instance form is update, the panel should be swapped.
Comment #23
sea2709 commentedComment #24
pdureau commentedI am having a first look
Comment #25
pdureau commented(This is a feature review, not a technical review)
Start (left in LTR layouts) sidebar
OK
End (right in LTR layouts) sidebar (contextuals panels)
I have a
tokenblock in aalertcomponent in agridcomponent. From Layers panel:token: ❌ I see the instance form oftokenwith the title of thegridtokenagain: ✅ I see the instance form oftokenwith the title of thetokentokenform: ❌ the title switch back to thegridoneSame for
alertcomponent:alert: ❌ I see the instance form ofalertwith the title of thegridalert: again: ✅ I see the form ofalertwith the title of thealertalertform: ❌ the title switch back to thegridoneComment #26
mogtofu33 commentedThanks for the work on that, as I mentioned on comment #10, if possible I would prefer to investigate a full js solution. Perhaps it's not possible but I see a lot of effort here and I don't want to have it wasted at the end.
Comment #27
sea2709 commentedComment #29
sea2709 commentedThanks @mogtofu33 and @pdureau,
When you have a chance, can you give it another around of review?
Comment #30
pdureau commentedI will do the functional review and let's Jean do the technical one
Comment #31
pdureau commentedNearly OK, thanks a lot for the progress.
Start (left in LTR layouts) sidebar
Still OK
End (right in LTR layouts) sidebar (contextuals panels)
I have a
tokenblock in aalertcomponent in agridcomponent. From Layers panel:token: ✅ I see the instance form oftokenwith "Token" as titletokenagain: ✅ I see the instance form oftokenwith "Token" as titletokenform: ✅ I see the instance form oftokenwith "Token" as titleSame for
alertcomponent:alert: ✅ I see the instance form ofalertwith the "Alert" as titlealert: again: ✅ I see the instance form ofalertwith the "Alert" as titlealertform: ✅ I see the instance form ofalertwith the "Alert" as titleHowever:
Comment #32
mogtofu33 commentedI didn't have time to check the code, but when I am proposing more js side, note that it's because we already have the component name in the DOM, it's the attribute `data-node-title`. I am using it to display the current component name in the right click menu. So I guess we could achieve the same for the end drawer.
Comment #33
sea2709 commentedComment #35
mogtofu33 commentedFixing the second drawer opening I realize with your
secondDrawer.label =I could simply set the title.For first sidebar as well, pretty easy to set the button label.
The difficult part was on drag, but I managed it in js as well.
Opening a branch for this js only, thanks for the work @sea2709.
Comment #36
mogtofu33 commented