PHPackages raffaelj/cockpit-blockeditor - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. raffaelj/cockpit-blockeditor ActiveCockpit-module[Utility & Helpers](/categories/utility) raffaelj/cockpit-blockeditor ============================ A visual block editor for Cockpit CMS 68[3 issues](https://github.com/raffaelj/cockpit_BlockEditor/issues)Hack Since Oct 2Pushed 3y ago3 watchersCompare [ Source](https://github.com/raffaelj/cockpit_BlockEditor)[ Packagist](https://packagist.org/packages/raffaelj/cockpit-blockeditor)[ RSS](/packages/raffaelj-cockpit-blockeditor/feed)WikiDiscussions master Synced 2d ago READMEChangelogDependenciesVersions (1)Used By (0) Block editor addon for Cockpit CMS ================================== [](#block-editor-addon-for-cockpit-cms) **This addon is not compatible with Cockpit CMS v2.** See also [Cockpit CMS v1 docs](https://v1.getcockpit.com/documentation), [Cockpit CMS v1 repo](https://github.com/agentejo/cockpit) and [Cockpit CMS v2 docs](https://getcockpit.com/documentation/), [Cockpit CMS v2 repo](https://github.com/Cockpit-HQ/Cockpit). --- This addon replaces the layout and the layout-grid fields of [Cockpit CMS](https://github.com/agentejo/cockpit) 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](https://wordpress.org/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](https://github.com/agentejo/LayoutComponents) - [CustomComponents](https://github.com/pauloamgomes/Cockpit-CustomComponents) (obsolete since Cockpit 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 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](https://github.com/raffaelj/cockpit_BlockEditor/issues) or in the [Cockpit community forum](https://discourse.getcockpit.com/t/new-addon-blockeditor-layout-field-with-visual-block-editor-draft-experimental/1639). Installation ------------ [](#installation) Copy this repository into `/addons` and name it `BlockEditor` or use the cli. ### via git [](#via-git) ``` cd path/to/cockpit git clone https://github.com/raffaelj/cockpit_BlockEditor.git addons/BlockEditor ``` ### via cp cli [](#via-cp-cli) ``` cd path/to/cockpit ./cp install/addon --name BlockEditor --url https://github.com/raffaelj/cockpit_BlockEditor/archive/master.zip ``` ### via composer [](#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 ------------------------- [](#overwrite-block-templates) Create your own blocks in `path/to/cockpit/config/tags` with the file naming schema `block-.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): ``` ``` After (dashed 2px line with scissors on the left side): ``` hr { width: 100%; margin: .5em 0.2em 0; border-top: 2px dashed #ccc; } ``` Use existing block templates with a custom component ---------------------------------------------------- [](#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-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](https://github.com/agentejo/cockpit/blob/next/modules/Cockpit/assets/components/field-layout.tag) from Cockit CMS, author: Artur Heinze, MIT licensed - [layout-grid field](https://github.com/agentejo/cockpit/blob/next/modules/Cockpit/assets/components/field-layout.tag) from Cockit CMS, author: Artur Heinze, MIT licensed - settings page from [LayoutComponents addon](https://github.com/agentejo/LayoutComponents), author: Artur Heinze, MIT licensed ### Health Score 14 — LowBetter than 2% of packages Maintenance10 Infrequent updates — may be unmaintained Popularity10 Limited adoption so far Community8 Small or concentrated contributor base Maturity24 Early-stage or recently created project Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Community Maintainers ![](https://www.gravatar.com/avatar/ef4edcadbb34e2b59a6e5320ea13b3e53b8c9d3ba08f4387f479f11cfa7d950b?d=identicon)[raffaelj](/maintainers/raffaelj) --- Top Contributors [![raffaelj](https://avatars.githubusercontent.com/u/13042193?v=4)](https://github.com/raffaelj "raffaelj (41 commits)") ### Embed Badge ![Health badge](/badges/raffaelj-cockpit-blockeditor/health.svg) ``` [![Health](https://phpackages.com/badges/raffaelj-cockpit-blockeditor/health.svg)](https://phpackages.com/packages/raffaelj-cockpit-blockeditor) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)