Alternative way to insert blocks

[lofcz]

Currently inserting a block requires switching to blocks tab resulting in an unnecessary click every so often.
I've recorded a short overview of how this is solved in another web builder: https://www.youtube.com/watch?v=A2PfRPRDT5E

A similar feature could be a good fit for GrapeJS and also a first step to enable layouts in which sidemenu (style & layer managers, blocks) can be hidden and pages designed (more) fluently.

• this feature can be toggled.
• which blocks are shown after + button is clicked should be configurable at the block definition level (if nothing is provided all blocks are shown).
• having the ability to override this setting with a callback function f(currentBlock) returns blocksToOffer[] would be nice. If a block is in certain state it might make sense to offer a different set of blocks to insert.
• I really like the touch of expanding stub section (black rectangle) when + is clicked. This adds so much clarity of where the section / block will be added after I select it.

@artf what do you think about this?

[Ju99ernaut]

I believe you can implement the first three features with the current API, not too sure about the last one but it could be possible, some APIs could certainly be provided to make this easier. Anyways I doubt this would be added by default since the goal now is to make the core behave more headless.

[lofcz]

@Ju99ernaut thanks for the reply, could you point me to the relevant APIs?
This feature could be also disabled by default to prevent breaking changes.

[Ju99ernaut]

Just the block manager and canvas APIs, mostly you'll need to build a custom UI system from scratch. I currently have a paneless UI setup and was planning to implement something similar so I'll share the code if I'm successful.

[lofcz]

That would be amazing, thanks! Is your paneless UI setup open source? Even if not if you could send me a preview (video / screens) of how it works we may be interested in getting a license. Currently we are in a rush to implement this and anything that would give us a headstart would be appreciated. In case you have a lot of work to do and sponsoring would speed this up we are also open to do this.
We can discuss the details via e-mail - [email protected]

[ronaldohoch]

I think you can do it in a ugly way, by setting up the toolbar in every component.select and add 2 more buttons, insert before/after, with this, you can open a modal with blocks and on click, drop it on selected model position +1 or -1.
Never tried this 🤔

[artf]

Yeah, as mentioned by @Ju99ernaut the long-term goal is to make the core more headless so it would be possible to create the editor with your UI framework/components of choice.
The block manager could already be replaced and customized but what about editor elements on the canvas, we're still behind.
You can think about extending the view on all component types and placing there your "Plus" buttons (in the view you can edit the components DOM without altering their model). Or maybe you can get directly the inner DOM of the iframe (eg. editor.Canvas.getWindow()), where all the components are rendered, and implement there whatever you need on top of your components.

One thing I'm planning for the Canvas API is to allow an easier approach for stuff like:

• Adding custom elements inside selected component rects. This would allow indeed to render global stuff like "Plus" button on any desired component selection.
• Adding custom elements on top of the Component/pointer/canvas position. This would allow placing your UI without any manual coordinate calculations.