new design proposal for blocks form widget

[kubamarkiewicz]

I have an idea for a new design for blocks form widget.
What do you think about it?
Would it be possible to implement?

[LukeTowers]

This vaguely reminds me of October's newer design for the Repeater FormWidget (which is what the Blocks FormWidget is built on):

How would you propose handling nested blocks with this design though?

I've also toyed around with the idea of using an existing block editor interface (like EditorJS or Gutenburg) to manage the block data; any thoughts on those?

[kubamarkiewicz]

Indeed, October's newer design for the Repeater FormWidget is quite similar, however I was not aware of it.
One difference is that I would like to include block's content preview.

You can see my proposition for handling nested blocks on images 4 i 5 that I have attached.

I am not familiar with EditorJS or Gutenburg, I will have a look at it.

[kubamarkiewicz]

I have taken a quick look at EditorJS and Gutenburg and here is what I've found.

EditorJS is simple, it stores data in JSON so it look more suitable for blocks plugin. However it seems that is does not support nested blocks:

Hello! I'm a maintainer of Editor.js.
Regarding to your questions:
Editor.js doesn't support nested blocks. We keep structure flat and want Tools API to be as simple as possible for new developers. The target audience of the Editor.js is media and blogs, usually you don't need complex structure there. However, you can implement some complex plugins for your needs, nested lists as example.

https://news.ycombinator.com/item?id=19555633

Here is the OctoberCMS inplementation: https://octobercms.com/plugin/reazzon-editor

Gutenberg on the other hand is more mature and powerful. It supports nested block by something called "Inner blocks":
https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/
It is also more complex. Blocks are built in React, so I don't see how it could be used with block definitions in json. It is also heavily coupled with wordpress.

Here is comment from author of Gutenberg for OctoberCMS inplementation:

Due of massive WP hardcode inside Gutenberg JS core, I must admit that Gutenberg will stay forever buggy and not extendable as community wants. Please, try using Editor.JS instead, it has RainLab.Translate and StaticPages support out of a box.

https://octobercms.com/plugin/reazzon-gutenberg

[LukeTowers]

@wintercms/maintainers any thoughts?

[jaxwilko]

Looks nice, probably needs to be optional though :)

[damsfx]

I'm not a Winter maintainer but I'll give my opinion ...
I think this type of interface should either be part of the Blocks plugin (with a new formwidget type: blocksBuilder, blocksEditor) or a separate plugin.

Either way, it should remain optional.

[damsfx]

@LukeTowers @kubamarkiewicz

Another reference to consider: Offline.Boxes.

integration_1_.webm

You can start a demo from the dedicated website and the free version of the plugin can be seen here : OFFLINE.Boxes (Free Version)

[LukeTowers]

@damsfx I really like the approach that the boxes plugin takes

[kubamarkiewicz]

@damsfx good reference, this direction is definitely worth considering

[damsfx]

@LukeTowers @kubamarkiewicz What I really like (and I think my clients too), is the "WYSIWYG" view.
It's a real visual builder.