New addon BlockEditor - layout field with visual block editor (draft/experimental)

This addon replaces the layout and the layout-grid fields of Cockpit CMS with a visual block editor.

I always liked the data structure of the core layout field, but the visual experience wasn’t very intuitive. Also editing everything in modals didn’t feel right and after each try I stopped using it.

So, with the Gutenberg block editor from WordPress in mind, I started to rewrite the layout field and it worked pretty well in my first tests.

It should be compatible with these addons:

It shares nearly the same data structure with the core layout field. So if you don’t like the block editor, just remove this addon and continue working with the core field.

The current development state is a draft and you will see some console.log() output in your browser console.

I need feedback

Because I don’t like editing content in modals, I never used the layout field before and I’m not familiar with all possible use cases. So please report bugs and send feedback in the addons issues section or here in the forum.

How do you use the layout field?

e. g. as single content field or nested in a set or in a repeater…

Which custom components do you use?

e. g. markdown, other code editors…

Do you miss an essential feature in the block editor?

Well… I don’t know, yet. That’s, why I’m asking :wink:

Demo

Screenshots

Related discussions

4 Likes

It would be nice - if this variant would become a core feature. Thanks for your work.

I will definitely test it and give feedback. The video already looks very good.

This looks really good Raffael! We have a setup with custom layout components and the only thing not working as expected is that the wysiwyg is out of place. See picture:

The menubar of the wysiwyg element covers the field above and the “lip” at the bottom is outside. Guess this is due to the wysiwyg being positioned absolutely when doing inline-edit and when in a custom layout component it is always visible.

Also, a feature suggestion. When texts/components gets long it would be nice to be able to condence them to easier change their order.

Otherwise, great job!

I fixed that a few commits ago.

Good point. I opened an issue as a reminder. I had to focus on fixing a lot of bugs with nested components in the last days.

Nice! I will try it out again and see how it works out! Great job!

Hey, I currently test your new BlockEditor.

  • I am missing in the current view to toggle between my defined field-group-tabs of my custom layout components. It’s possible in the opening modal by clicking on the gear icon, but instant to see my custom defined tabs would be nice.

  • I find it hard to sort my layout-elements in the BlockEditor by dragging and dropping. I think it would by a great benefit if there is an option to also sort those elements by clicking on two arrow-up/down icons which pulls the element down or up. Maybe also “one layout element up/down” and “to the start/end”?

  • For better visibility reasons I would preferr to see small seperators/dividers in the view (full width divider like html-hr-tag with layout component name in it?)

But I want to thank you for this very nice addon. It makes much sense when using layout-fields and I hope it will become part of native CockpitCMS.

I’m not sure, what you mean. Could you eleborate on it?

Good point in general, but I have to think about it.

  1. I don’t want to add too much icons/buttons, because it would become messy very soon. I already struggle with overlays from the wysiwyg and the html field and the amount of “important” icons (also with not yet implemented icons to “edit/preview”, “resize” in mind).
  2. What about nested components? While working with Gutenberg (WordPress), adding a wrapper like section (group) or grid (columns) was very common, but moving a text or heading block up and down moves it above/below that section. From a programmers perspective, this is clear, stucturead and hierarchical data. If I switch to an editors perspective, I would expect to move wrapper components different, than single text/heading components…

This sounds useful, but I would make it optional - either via field options or via boolean toggle (maybe in the sidebar). I put a lot of effort in keeping the spaces between the components as small as possible, because I get distracted if there are random spaces and lines between my text blocks. Eventually I’ll combine it with the request from @flommy to collapse the components for reordering.

I don’t think, that it will become a core component soon. The current solution is simple and it works across browsers. The BlockEditor has to take care about a lot of possible/unknown edges cases with wysiwyg, html, object, markdown and custom fields… and the main problem with core components is: Who is responsible for bugfixes? But yeah, I would like to see it in the core at some point in the future, too.