Custom block library : component CSS selector (for drag & drop)

Blocks
1

Hello,

I created my own block library.

But I can’t get the right configuration combination for component CSS selector (for drag & drop).

selector1
selector1992×428 63.4 KB

The problem is that in your logic: the selector places it on the same div that will be dragged and dropped, and this is not a very practical situation: because the div itself is dragged and dropped.
Imagine if you have multi-div content, or want to customize the block container with a border distinction, …
It would make more sense to drag and drop the contents of the div.

Solution: add a checkbox in the “edit page library” configuration, to indicate that you have to drag the content and not the div itself :slight_smile:

As you can see in this example: it makes no sense to create a special div for the drag-and-drop, and it makes no sense to embed the container div

container2
container2903×146 47.5 KB

Thank you
I wish you a good day

2

Hi @JoseFR,
The components selector is able to take more complicated selectors. So for example, if you wanted the green section outlined above you could use the selector .components-selector > *. This is saying all the children of the element with the components-selector class. You can also use attributes if you don’t like using classes, but I don’t think the child combinator works with them.
Cheers,
Bob

3

Thank you @RobM for your feedback, sorry I hadn’t thought of the child selector, thank you Bob it works