drag and drop one block to another block container

[ilyago]

Great project!

[block slug=someblock] works, and blocks appear in view.php block.

I can't drop blocks one to another using browser. The following code renders dashed boxes but doesn't accept the drop.

<div class="container">
    <div class="col-md-6" phpb-blocks-container></div>
</div>

<div class="container">
    [blocks-container]
</div>

[HansSchouten]

Are you adding this to a .html or a .php block?

I just checked and see this does not work in a .php block, but it does in a .html block.
Will check later why exactly. However, as a workaround this is what I am using at the moment in php blocks:

[block slug="layout-blocks-container"]

which refers to the simple html block layout-blocks-container/view.html:

<div phpb-blocks-container></div>

[mouse0270]

Have you found an update to this? Or is there a way to hide the layout-blocks-container/view.html from showing up as an element to be dragged onto the screen?

[mouse0270]

So I am not sure if this is the issue or not, but just incase it helps. If you create two blocks and one has a view.php and the other is view.html and they both contain just <div phpb-blocks-container></div>

When you drag them onto the page builder. The php one is a nested element that looks like this:

<div data-gjs-type="default" draggable="true" id="icm2u" class="IDKU5N4AKU4P39V7" data-cursor="default">
	<div data-gjs-type="default" draggable="true" phpb-blocks-container="" id="i8odo"></div>
</div>

Where the HTML one isn't nested and looks like

<div data-gjs-type="default" draggable="true" phpb-blocks-container="" id="iap68" class="IDKU5N4CKX79L6U9 gjs-hovered"></div>

I am not quite sure if its GrapesJS or soemthing you are doing causing this cause you don't have an unminfied version of your scripts available for me to easily debug the issue.

[HansSchouten]

The unminified scripts are located here: https://github.com/HansSchouten/PHPageBuilder/tree/master/src/Modules/GrapesJS/resources/assets/js

[HansSchouten]

Have you found an update to this? Or is there a way to hide the layout-blocks-container/view.html from showing up as an element to be dragged onto the screen?

It is possible to hide a block from the blocks sidebar using the setting: 'hidden' => true in the block's config file.

[mouse0270]

The unminified scripts are located here: https://github.com/HansSchouten/PHPageBuilder/tree/master/src/Modules/GrapesJS/resources/assets/js

I am still not sure if its something in the PHP or the javascript that causing the wrapping, but its really the only difference I can find. I haven't found anything in the PHP classes that seems to be causing this. So I will look through the javascript. Being able to see the compiled version should help a lot. Thanks.

Have you found an update to this? Or is there a way to hide the layout-blocks-container/view.html from showing up as an element to be dragged onto the screen?

It is possible to hide a block from the blocks sidebar using the setting: 'hidden' => true in the block's config file.

Yeah I kinda figured that out while trying to figure out how to solve this issue. As I'd prefer to use php files to have settings.

[mouse0270]

All I can tell is it has something to do with the is-html check. If you set this to true in the BlockRenderer file you can drag and drop elements into the container with the attribute phpb-blocks-container however you're unable to save the data.

This is kinda a frustrating bug and I wish I could figure out whats causing it cause the workaround causes a lot of issues with my css. I am going to try and fine the problem again today, but If I am unable to I'll just have to wait for you to fix it. LOL

[khristoff]

Any update about this bug?

I tried <div phpb-blocks-container></div>, [blocks-container], [block slug="layout-blocks-partners"], even renaming the extension for php/html view files, but without success, on save and refresh the page in the page builder the draggable area for that component basically disappear, the draggable area is only for use it only one time before save changes?

[JBtje]

Anyone able to figure this out? It's quit annoying that the block is draggable initially, but after a save no longer is.

[HansSchouten]

Hi everyone, I guess the main issue is in using containers inside .html blocks. I personally use more and more .php blocks, which has the benefit of customizing the block with settings. Then to allow editable texts I include html blocks inside the code of the .php block (my paragraph block is html, all wrappers are php and include the paragraph using [block slug="paragraph"]).
Important note: when including multiple blocks in the source code of a block, use [block slug="paragraph" id="p1"] and [block slug="paragraph" id="p2"] to prevent glitches on save, see an example in the gist below.

In this specific use-case of creating a layout I have a folder layout which contains the following code to create Bootstrap 5 layouts: https://gist.github.com/HansSchouten/3adb9725f312fe8ed6d665982f381181
As you can see using a .php block allows for great customizations. Maybe this is of help for anyone, or inspiration for your own blocks.