Skip to content
Gutenberg for OctoberCMS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets Laraberg public assets, readme correction. Apr 26, 2019
behaviors
classes 1.1.2 Lovata.GoodNews integration May 14, 2019
events
formwidgets Update gutenberg.js May 11, 2019
helpers Initial commit Apr 24, 2019
lang 1.1.2 Lovata.GoodNews integration May 14, 2019
models
updates 1.1.2 Lovata.GoodNews integration May 14, 2019
.gitattributes Initial commit Apr 24, 2019
.gitignore add node_modules to gitignore May 4, 2019
Plugin.php Lovata.GoodNews integration beta May 13, 2019
composer.json Removed unnecessary composer requirement May 4, 2019
license.md Create license.md May 8, 2019
readme.md Update readme.md May 14, 2019
routes.php

readme.md

Gutenberg for OctoberCMS

MEDIAUPLOADER AND REUSABLE BLOCKS UPDATES IS LIVE

RAINLAB.BLOG INTEGRATION SUPPORT READY

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 .

PLUGIN CURRENTLY IN BETA ALSO AS LARABERG.

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

All current block are from standart Gutenberg.js package. None of them are custom or from Laraberg. You can find all this blocks at Gutenberg playground and test them there.

Working integrations:

Coming Soon integrations:

Working:

  • Code preview and all standart features such as: custom styles, block settings, reusable blocks.
  • Common blocks
    • Paragraph - (All text formating 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

Not working:

  • Inline elements
    • Inline image (Because of gutenberg.js bug, currently in work)

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
  • 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.


Installation

Install plugin by OctoberCMS plugin updater.

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

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.

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 add some features you can work with source react files in /formwidgets/gutenberg/assets/resources folder run following commands:

npm i
npm run watch

Devloped by reazzon.ru.

You can’t perform that action at this time.