Gutenberg for OctoberCMS

PLUGIN CURRENTLY IN BETA. AND IT WILL STAY IN BETA MAYBE FOREVER.

Gutenberg is a rich-text visual editor from WordPress, with the features of bulidng content with blocks. With Gutenberg, you can create truly unique content for your website by simply dragging and dropping blocks.

You can test it online here Gutenberg playground.

This plugin allows you to embed Gutenberg in the backend form of your own model by creating Polymorph relation .

Integration of Laraberg by VanOns\Laraberg for OctoberCMS. All credits goes to VanOns.

Working integrations:

Coming Soon integrations:

RainLab.StaticPages

Available blocks:

Code preview and all standard features such as: custom styles, block settings, reusable blocks.
Common blocks
- Paragraph - (All text formatting also works).
- Image
- Heading
- Audio
- Gallery
- Cover
- File
- List
- Quote
- Video
Formatting
- Code
- Preformatted
- Pull quote
- Classic
- Custom HTML
- Table
- Verse
Layout elements
- Media & text
- Columns
- Button
- Separator
- Spacer
Embeds
- All embeds

In work:

~~Mediauploader with native OctoberCMS Medialibrary~~ DONE in 1.0.7 update
~~Reusable blocks aren't working~~ DONE in 1.0.8 update
~~Removing WP widgets~~ DONE in 1.0.9 update
~~RainLab.Blog integration~~ DONE in 1.1.0 update
~~Lovata.GoodNews integration~~ DONE in 1.1.2 update
~~Migration to release version of Laraberg~~ DONE in 1.2.0 update
~~Indikator.News integration~~ DONE in 1.2.5 update
RainLab.StaticPages integration

Later work:

Inline image incorrect behavior (Gutenberg.js bug, need updates from them)
Multiple instances of Gutenberg on one page (Gutenberg.js bug, need updates from them)

I will be happy if you help me with any form of custom functions implementation.

Please sumbit your PR in plugin Github Repository.

Notes

As we now on Laraberg 1.0.0-rc.1, i will investigate more about creating multiple instances of Gutenberg on one page.

Installation

Install plugin by OctoberCMS plugin updater.

Go to Settings –> Updates&Plugins find Gutenberg in plugin search. Click on icon and install it.

or via Composer

composer require reazzon/gutenberg

Usage

This plugin works only by implementing Gutenberg behavior in your model. It will create morphOne relation with Gutenberg\Content model.

Go to your model and add behavior in $implement array:

public $implement = ['ReaZzon.Gutenberg.Behaviors.Gutenbergable'];

After you need to add behavior to $implement array in your model controller.

public $implement = ['ReaZzon.Gutenberg.Behaviors.GutenbergController'];

Done. Your model now has morphOne with Gutenberg\Content Model by content field that renders only on created model page.

Rendering

Rendering examples below.

{{ post.content.render }}

$post->content->render();

In order to correctly display Gutenberg styles. You must add laraberg public styles to your page:

<link href="/plugins/reazzon/gutenberg/assets/laraberg.min.css" rel="stylesheet">

Working with source js code

If you want to add some features you can work with source files of Laraberg in /plugins/reazzon/gutenberg/formwidgets/gutenberg/assets/resources, to set up all environment follow these steps:

Clone Gutenberg rep.: git clone https://github.com/WordPress/gutenberg.git gutenberg

After cloning execute these commands:

cd gutenberg           // go to Gutenberg folder
npm i                  // install all dependencies
npm run build          // Build Gutenberg
sudo npm link          // Link it to your global node_modules 
cd ..                  // Go back to Laraberg root
npm i                  // install all dependencies
npm link gutenberg     // Link Gutenberg package to Laraberg

Now you set up.

Developed by reazzon.ru

Russian OctoberCMS developer community OctoClub.ru

FlusherDock1 / Gutenberg