README

This addon is not compatible with Cockpit CMS v2.

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

draft/experimental

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 works pretty well in my first tests.

It should be compatible with these addons:

LayoutComponents
CustomComponents (obsolete since Cockpit version 0.11.0 - commit)
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~~ might see some console.log() output in your browser console. To see all debug output, set {"debug":true"} in the field options of your layout field.

Please report bugs and send feedback in the issues section or in the Cockpit community forum.

Installation

Copy this repository into /addons and name it BlockEditor or use the cli.

via git

cd path/to/cockpit
git clone https://github.com/raffaelj/cockpit_BlockEditor.git addons/BlockEditor

via cp cli

cd path/to/cockpit
./cp install/addon --name BlockEditor --url https://github.com/raffaelj/cockpit_BlockEditor/archive/master.zip

via composer

Make sure, that the path to cockpit addons is defined in your projects' composer.json file.

{
    "name": "my/cockpit-project",
    "extra": {
        "installer-paths": {
            "addons/{$name}": ["type:cockpit-module"]
        }
    }
}

cd path/to/cockpit-root
composer create-project --ignore-platform-reqs aheinze/cockpit .
composer config extra.installer-paths.addons/{\$name} "type:cockpit-module"

composer require --ignore-platform-reqs raffaelj/cockpit-blockeditor

Overwrite block templates

Create your own blocks in path/to/cockpit/config/tags with the file naming schema block-<block name>.tag.

Example for divider block:

Copy addons/BlockEditor/assets/components/block-divider.tag to config/tags/block-divider.tag and modify it.

Before (grey, solid 1px line):

<block-divider>
    <hr>
</block-divider>

After (dashed 2px line with scissors on the left side):

<block-divider class="uk-flex">
    <style>
        hr {
            width: 100%;
            margin: .5em 0.2em 0;
            border-top: 2px dashed #ccc;
        }
    </style>

    <i class="uk-icon-scissors uk-text-muted"></i>
    <hr>
</block-divider>

Use existing block templates with a custom component

~~This doesn't work with the LayoutComponents addon, because it doesn't provide the option to create custom block options.~~

I wrote an improved settings page for the LayoutComponents addon in which you can set the block key.

You can define your custom components in the field options instead with the key "block": "text". Now the component will use the text block template.

In the following example I also used the EditorFormats addon to define a wysiwyg field with minimal editing options.

field type: layout

options:

{
  "components": {
    "textminimal": {
      "label": "Text (minimal)",
      "block": "text",
      "fields": [
        {
          "name": "text",
          "type": "wysiwyg",
          "options": {
            "editor": {
              "format": "Minimal"
            }
          }
        }
      ]
    }
  }
}

License, credits and third party resources

License: MIT, author: Raffael Jesche

I used the following codes as a base and changed a lot of the code inside them:

layout field from Cockit CMS, author: Artur Heinze, MIT licensed
layout-grid field from Cockit CMS, author: Artur Heinze, MIT licensed
settings page from LayoutComponents addon, author: Artur Heinze, MIT licensed

raffaelj / cockpit-blockeditor

Maintainers

Details