Problem/Motivation
Using layout_paragraphs and mercury editor, i found out that #attributes passed to regions do not display. In this case, we cannot use bootstrap grid layouts because some required classes are missing.
Here is the context of component_id ui_suite_bootstrap:grid_row_2
{
"attributes": [],
"container_attributes": [],
"container_wrapper_attributes": [],
"col_xs": [
"",
""
],
"col_sm": [
"",
""
],
"col_md": [
"",
""
],
"col_lg": [
"",
""
],
"col_xl": [
"",
""
],
"col_xxl": [
"",
""
],
"col_offset": [
"",
""
],
"col_1_attributes": [],
"col_2_attributes": [],
"col_1_content": {
"#attributes": {
"class": [
"js-lpb-region"
],
"data-region": "col_1_content",
"data-region-uuid": "29dce290-8b92-4a65-b474-411d340891a5-col_1_content",
"data-lpb-ui-id": "29dce290-8b92-4a65-b474-411d340891a5-col_1_content",
"data-has-js-ui-element": true
},
"#attached": {
"drupalSettings": {
"lpBuilder": {
"uiElements": {
"29dce290-8b92-4a65-b474-411d340891a5-col_1_content": {
"insert": {
"element": "\n\n<!-- THEME DEBUG -->\n<!-- THEME HOOK: 'layout_paragraphs_insert_component_btn' -->\n<!-- BEGIN OUTPUT from 'modules\/contrib\/layout_paragraphs\/templates\/layout-paragraphs-insert-component-btn.html.twig' -->\n<a class=\"lpb-btn--add use-ajax center\" data-dialog-type=\"dialog\" data-dialog-options=\"{"target":"lpb-dialog-25cdfce06bafb980a112bee55d295399","width":"fit-content","height":"fit-content","drupalAutoButtons":false,"dialogClass":"lpb-dialog","resizable":true}\" href=\"\/mercury-editor\/25cdfce06bafb980a112bee55d295399\/choose-component?parent_uuid=29dce290-8b92-4a65-b474-411d340891a5&region=col_1_content&me_id=bbec6e2f-62e6-4f32-ac24-1352e9c64cf7\"><span class=\"visually-hidden\">Choose component<\/span><\/a>\n\n<!-- END OUTPUT from 'modules\/contrib\/layout_paragraphs\/templates\/layout-paragraphs-insert-component-btn.html.twig' -->\n\n",
"method": "append"
}
}
}
}
}
}
},
"col_2_content": {
"#attributes": {
"class": [
"js-lpb-region"
],
"data-region": "col_2_content",
"data-region-uuid": "29dce290-8b92-4a65-b474-411d340891a5-col_2_content",
"data-lpb-ui-id": "29dce290-8b92-4a65-b474-411d340891a5-col_2_content",
"data-has-js-ui-element": true
},
"#attached": {
"drupalSettings": {
"lpBuilder": {
"uiElements": {
"29dce290-8b92-4a65-b474-411d340891a5-col_2_content": {
"insert": {
"element": "\n\n<!-- THEME DEBUG -->\n<!-- THEME HOOK: 'layout_paragraphs_insert_component_btn' -->\n<!-- BEGIN OUTPUT from 'modules\/contrib\/layout_paragraphs\/templates\/layout-paragraphs-insert-component-btn.html.twig' -->\n<a class=\"lpb-btn--add use-ajax center\" data-dialog-type=\"dialog\" data-dialog-options=\"{"target":"lpb-dialog-25cdfce06bafb980a112bee55d295399","width":"fit-content","height":"fit-content","drupalAutoButtons":false,"dialogClass":"lpb-dialog","resizable":true}\" href=\"\/mercury-editor\/25cdfce06bafb980a112bee55d295399\/choose-component?parent_uuid=29dce290-8b92-4a65-b474-411d340891a5&region=col_2_content&me_id=bbec6e2f-62e6-4f32-ac24-1352e9c64cf7\"><span class=\"visually-hidden\">Choose component<\/span><\/a>\n\n<!-- END OUTPUT from 'modules\/contrib\/layout_paragraphs\/templates\/layout-paragraphs-insert-component-btn.html.twig' -->\n\n",
"method": "append"
}
}
}
}
}
}
}
}
We can see there is no col_1_attributes and there is #attributes in col_1_content.
How to move col_1_content#attributes to col_1_attributes ?
Here is a solution in grid_row_2.twig
{% set col_attributes = [
create_attribute(col_1_attributes|default({})|merge(col_1_content['#attributes']|default({}))),
create_attribute(col_2_attributes|default({})|merge(col_2_content['#attributes']|default({}))),
] %}
But i guess there is a better solution where #attributes could be passed to attributes props instead of doing this in twig, so it can works in any cases.
Maybe a relation with #3316325: Missing region classes
Issue fork ui_patterns-3504637
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
Comment #2
goz commentedComment #3
goz commentedComment #4
pdureau commentedMoved to UI Patterns 2.x
We may need a new Source plugin in
ui_patterns_layoutsto retrieve the attributes value from the Layout plugin, which knows which regions has which attributesCareful, it may not be that easy, and maybe tricky
Comment #5
g4mbiniI confirm I have same issues with layouts used from UI Suite DaisyUI ...
Plus I have get error when I want to switch from a Layout to another one in the form widget provided by Layout Paragraphs :
Uncaught PHP Exception TypeError: "Drupal\ui_patterns\Element\ComponentFormBase::getSources(): Argument #2 ($definition) must be of type array, null given, called in /Users/michaelfanini/Drupal/daisyui_parag/web/modules/contrib/ui_patterns/src/Element/ComponentPropForm.php on line 88" at /Users/michaelfanini/Drupal/daisyui_parag/web/modules/contrib/ui_patterns/src/Element/ComponentFormBase.phpBut maybe this one would need another issue ... ?
Comment #6
pdureau commentedSo, someone want to do the source plugin type for
attributesprop types? Only available in a Layout API context. Committed inui_patterns_layouts.Comment #7
liam morlandComment #8
just_like_good_vibesi give a try on this one
Comment #10
just_like_good_vibessorry i move back, layout will disappear from drupal soon, so i let someone more concerned about this to take it and propose something :)