Problem/Motivation

When using components as layouts, we can't drag and drop blocks inside a slot (layout's region) or between slots.

Similar UI Patterns 1.x issue: #3460456: Layout Builder: drag&drop of blocks inside component slots is not working

Proposed resolution

This seems to work:

--- a/modules/ui_patterns_layouts/src/Element/ComponentAlterer.php
+++ b/modules/ui_patterns_layouts/src/Element/ComponentAlterer.php
@@ -41,6 +41,12 @@ class ComponentAlterer implements TrustedCallbackInterface {
       }
       if (isset($element[$region_id]['#attributes'])) {
         $element['#region_attributes'][$region_id] = new Attribute($element[$region_id]['#attributes']);
+        $element["#slots"][$region_id] = [
+          "#type" => "html_tag",
+          "#tag" => "div",
+          "#attributes" => $element[$region_id]['#attributes'],
+          "content" => $element["#slots"][$region_id],
+        ];
       }
       unset($element[$region_id]);
     }

Remaining tasks

What about UI Styles ?

Issue fork ui_patterns-3464894

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:

About issue forks

Comments

pdureau created an issue. See original summary.

pdureau’s picture

pdureau commented

Are we sure this wrapper is added only in Layout Builder preview and not elsewhere?

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented

I will try with UI Styles Layout Builder, but I think this wrapper is needed everywhere as soon as the component is used as a layout.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Status: Active » Postponed
Related issues: +#3465497: Type error with callback

I can't test with UI Styles until #3465497: Type error with callback is fixed.

pdureau’s picture

pdureau commented

Proposal:

--- a/modules/ui_patterns_layouts/src/Element/ComponentAlterer.php
+++ b/modules/ui_patterns_layouts/src/Element/ComponentAlterer.php
@@ -39,8 +39,14 @@ class ComponentAlterer implements TrustedCallbackInterface {
       foreach (Element::children($element[$region_id]) as $block_id) {
         $element["#slots"][$region_id][$block_id] = $element[$region_id][$block_id];
       }
-      if (isset($element[$region_id]['#attributes'])) {
+      if (isset($element[$region_id]['#attributes']) && isset($element["#slots"][$region_id])) {
         $element['#region_attributes'][$region_id] = new Attribute($element[$region_id]['#attributes']);
+        $element["#slots"][$region_id] = [
+          "#type" => "html_tag",
+          "#tag" => "div",
+          "#attributes" => $element[$region_id]['#attributes'],
+          "content" => $element["#slots"][$region_id],
+        ];
       }
       unset($element[$region_id]);
     }
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Title: [2.0.0-beta2] Drag & drop in layout builder » [2.0.0-beta2] Drag & drop and UI Styles support in layout builder
Status: Postponed » Active

grimreaper opened merge request !210

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: grimreaper » pdureau
Status: Active » Needs review

pdureau’s picture

pdureau commented
Title: [2.0.0-beta2] Drag & drop and UI Styles support in layout builder » [2.0.0-beta2] Drag & drop support in layout builder
Assigned: pdureau » Unassigned
Status: Needs review » Fixed
pdureau’s picture

pdureau commented
Status: Fixed » Closed (fixed)