Any div tag inside columns will be upcasted into a bsGridCol model, and it will therefore be moved up to be a child of the row.
This is resulting in an unexpected structure when switching from source editing to wysiwyg.
<div class="ck-widget bs_grid" contenteditable="false">
<div class="ck-widget row" data-row-none="12_12" data-row-sm="none"
data-row-md="equal_equal" data-row-lg="none" data-row-xl="none"
data-row-xxl="none" contenteditable="false">
<div class="col-12 col-md">
<p>
Column 1 content
</p>
</div>
<div class="col-12 col-md">
<p>
Column 2 content
</p>
<div>
<p>
Should appear inside the second column
</p>
</div>
</div>
</div>
</div>
<div class="ck-widget ck-widget bs_grid" contenteditable="false">
<div class="ck-widget ck-widget row" data-row-none="12_12"
data-row-sm="none" data-row-md="equal_equal" data-row-lg="none"
data-row-xl="none" data-row-xxl="none" contenteditable="false">
<div class="col-12 col-md">
<p>
Column 1 content
</p>
</div>
<div class="col-12 col-md">
<p>
Column 2 content
</p>
</div>
<div class="col-12 col-md">
<p>
Should appear inside the second column
</p>
</div>
</div>
</div>
The root cause of the issue is targeting all div tags without specifying a specific class for example while upcasting.
To fix this we can add bs_grid_col class when creating a grid as well as when upcasting to ensure we don't upcast other elements into bsGridCol unintentionally.
After fix:
We also need to consider existing content that doesn't have bs_grid_col class, not sure how to cover that without updating the database.
Needs work
2.0
Code
Redwan Jamous → changed the visibility of the branch 2.0.x to hidden.
Attaching a patch to use with composer...
Marking the issue as needs work since we still need to figure out how to handle existing content...