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

**URL:** <https://discourse.getcockpit.com/t/new-addon-blockeditor-layout-field-with-visual-block-editor-draft-experimental/1639>\
**Category:** Addons\
**Created:** [September 19, 2020, 1:56pm UTC](https://discourse.getcockpit.com/t/new-addon-blockeditor-layout-field-with-visual-block-editor-draft-experimental/1639 "2020-09-19T13:56:18Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![raffaelj](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/raffaelj/32/331_2.png) [@raffaelj](https://discourse.getcockpit.com/u/raffaelj)\
**Post date:** [September 19, 2020, 1:56pm UTC](https://discourse.getcockpit.com/t/new-addon-blockeditor-layout-field-with-visual-block-editor-draft-experimental/1639/1 "2020-09-19T13:56:18Z")

</div>

This addon replaces the layout and the layout-grid fields of [Cockpit CMS](https://github.com/agentejo/cockpit) 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](https://wordpress.org/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:

- [LayoutComponents](https://github.com/agentejo/LayoutComponents)
- [CustomComponents](https://github.com/pauloamgomes/Cockpit-CustomComponents) (obsolete since version 0.11.0 - [commit](https://github.com/agentejo/cockpit/commit/d440ae7b5344d5eb24987f2391a84529224528c2))
- [EditorFormats](https://github.com/pauloamgomes/CockpitCms-EditorFormats)

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.

> **[GitHub - raffaelj/cockpit\_BlockEditor: Visual block editor addon for Cockpit CMS...](https://github.com/raffaelj/cockpit_BlockEditor)**
>
> Visual block editor addon for Cockpit CMS (draft/experimental)

## 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 😉

## Demo

[![](https://canada1.discourse-cdn.com/flex030/uploads/getcockpit/original/1X/ea7387c985df04256e60922191b4b7d6b9ab1339.jpeg "Block editor for Cockpit CMS - first demo") ](https://www.youtube.com/watch?v=WTgRdloIDKQ)

## Screenshots

 ![cp_blockeditor_Screenshot_20200919_154424](https://canada1.discourse-cdn.com/flex030/uploads/getcockpit/original/1X/d25d950ea5577b256eebafa8f3e91c91839556e6.png)

 ![cp_blockeditor_Screenshot_20200919_154551](https://canada1.discourse-cdn.com/flex030/uploads/getcockpit/original/1X/600393058c2d48a1f007275bf4d0d1169d5d9aba.png)

 ![cp_blockeditor_Screenshot_20200919_154837](https://canada1.discourse-cdn.com/flex030/uploads/getcockpit/original/1X/be456a9efcdda7242606af8a10ebe5da3798e953.png)

## Related discussions

- [Layout field type](https://discourse.getcockpit.com/t/layout-field-type/303)

---

<div class="post-metadata">

**Author:** ![fschuermeyer](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/fschuermeyer/32/216_2.png) [@fschuermeyer](https://discourse.getcockpit.com/u/fschuermeyer)\
**Post date:** [September 25, 2020, 12:42pm UTC](https://discourse.getcockpit.com/t/new-addon-blockeditor-layout-field-with-visual-block-editor-draft-experimental/1639/2 "2020-09-25T12:42:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![flommy](https://avatars.discourse-cdn.com/v4/letter/f/8dc957/32.png) [@flommy](https://discourse.getcockpit.com/u/flommy)\
**Post date:** [October 2, 2020, 10:00am UTC](https://discourse.getcockpit.com/t/new-addon-blockeditor-layout-field-with-visual-block-editor-draft-experimental/1639/3 "2020-10-02T10:00:57Z")

</div>

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:

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/getcockpit/original/1X/88a49586760d63b69ef06aa8047f1173e287f64a.png)

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!

---

<div class="post-metadata">

**Author:** ![raffaelj](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/raffaelj/32/331_2.png) [@raffaelj](https://discourse.getcockpit.com/u/raffaelj)\
**Post date:** [October 7, 2020, 3:58pm UTC](https://discourse.getcockpit.com/t/new-addon-blockeditor-layout-field-with-visual-block-editor-draft-experimental/1639/5 "2020-10-07T15:58:03Z")

</div>

> [@flommy](#):
>
> The menubar of the wysiwyg element covers the field above

I fixed that [a few commits ago](https://github.com/raffaelj/cockpit_BlockEditor/commit/55064626f32de32b66cc711acaec70d72d3eead2).

> [@flommy](#):
>
> Also, a feature suggestion. When texts/components gets long it would be nice to be able to condence them to easier change their order.

Good point. I opened an [issue as a reminder](https://github.com/raffaelj/cockpit_BlockEditor/issues/1). I had to focus on fixing a lot of bugs with nested components in the last days.

---

<div class="post-metadata">

**Author:** ![flommy](https://avatars.discourse-cdn.com/v4/letter/f/8dc957/32.png) [@flommy](https://discourse.getcockpit.com/u/flommy)\
**Post date:** [October 8, 2020, 2:10pm UTC](https://discourse.getcockpit.com/t/new-addon-blockeditor-layout-field-with-visual-block-editor-draft-experimental/1639/6 "2020-10-08T14:10:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rohagihu](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/rohagihu/32/696_2.png) [@rohagihu](https://discourse.getcockpit.com/u/rohagihu)\
**Post date:** [October 24, 2020, 3:04pm UTC](https://discourse.getcockpit.com/t/new-addon-blockeditor-layout-field-with-visual-block-editor-draft-experimental/1639/7 "2020-10-24T15:04:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![raffaelj](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/raffaelj/32/331_2.png) [@raffaelj](https://discourse.getcockpit.com/u/raffaelj)\
**Post date:** [October 24, 2020, 6:00pm UTC](https://discourse.getcockpit.com/t/new-addon-blockeditor-layout-field-with-visual-block-editor-draft-experimental/1639/8 "2020-10-24T18:00:29Z")

</div>

> [@rohagihu](#):
>
> 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’m not sure, what you mean. Could you eleborate on it?

> [@rohagihu](#):
>
> 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”?

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…

> [@rohagihu](#):
>
> For better visibility reasons I would preferr to see small seperators/dividers in the view

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.

> [@rohagihu](#):
>
> I hope it will become part of native CockpitCMS.

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.