README.md

Laraberg aims to provide an easy way to integrate the Gutenberg editor with your Laravel projects. It is built on top of the GutenbergJS project, implements all the necessary communication and adds an easy to use API. A demo can be found at demo.laraberg.io. If you would like to see an example of how to implement Laraberg you can take a look at the code from the demo over here.

API Routes

After publishing the vendor files you can find the 'laraberg.php' file in your config folder. This file allows you to configure the API Routes. Here you can change the URL prefix and the middleware for the routes.

When you change the route prefix you also have to provide the prefix when you initialize the editor like this:

Laraberg.init('[id_here]', { prefix:'/[prefix_here]' })

If you wish to define the routes yourself you can do that by setting 'use_package_routes' to 'false' in the config. Then you can take the following routes and make changes as you see fit:

Laravel File Manager

Laraberg supports Laravel File Manager for uploading files. To enable uploading media through Laravel File Manager the laravelFilemanager field should be set to true. This will add a 'File Manager' button to the Gutenberg media blocks that will open Laravel File Manager for uploading and selecting media files.

Laraberg.init('[id_here]', { laravelFilemanager:true })

If you are not using the default routes for Laravel File Manager you can provide the location of your Laravel File Manager endpoints in the options object like this:

Note: Laraberg does not do any configuration on your Laravel File Manager setup. By default a lot of media filetypes can not be uploaded unless they are whitelisted in the Laravel File Manager configuration file. For more information on this you can check the Laravel File Manager documentation.

Usage

Initializing the Editor

The Gutenberg editor should replace an existing textarea in a form. On submit the raw content from the editor will be put in the 'value' attribute of this textarea.

<textareaid="[id_here]"name="[name_here]"hidden></textarea>

In order to edit content on an already existing model we have to set the value of the textarea to the raw content that the Gutenberg editor provided.

Models

This adds multiple attributes to your model that will help you with creating/updating/rendering the Gutenberg content.

$content// This is the raw content from the Gutenberg editor$model=newMyModel;// The model has to exist or else the link between your model and the content can't be made$model->save();// Add or update the content$model->lb_content=$content;// Get the rendered HTML$model->lb_content;// Get the raw Gutenberg output, this should be in the target textarea when updating content$model->lb_raw_content;

Note: The old renderContent, getRawContent, getRenderedContent and setContent methods from v0.0.4-beta and lower are deprecated and will be removed in a future release.

Renaming Gutenbergable method names

There is always the possibility that your model already implements a method with the same name as one of the Gutenbergable methods. Luckily PHP Traits provide an easy way to rename the methods from a trait:

Registering Categories

Events

Laraberg implements Laravel events that you can use to implement your own listeners. The events contain a 'content' attribute that contains the relevant Content object. For information on how Laravel events work you can read the Laravel documentation.

VanOns\Laraberg\Events\ContentCreated

VanOns\Laraberg\Events\ContentRendered

VanOns\Laraberg\Events\ContentUpdated

Sidebar

Laraberg provides a way to put your form fields in a seperate sidebar in the Gutenberg editor. This way you can let the editor take the entire screen while still having a place for your form fields. This is done by putting the input element in a parent element with the .laraberg-sidebar class. This is currently supported for the following input types:

Checkbox

Radio

Select

Text

Textarea

For the labels Laraberg first checks if there is a label assigned to the element and will try to use that. If there is no label assigned it will check if there is a placeholder and use that as the label.

To enable the sidebar set the sidebar option to true when initializing Laraberg:

Textarea

Search Callback

The button block has a field that searches for pages or aritcles. In order to use this functionality you can pass a
callback function when initializing Laraberg. This callback functions will receive a search, perPage and type parameter. The callback should return an array of objects that contain a title and an URL or a promise that resolves to such an array.

Missing Blocks

Since we have disabled direct file uploading, some of the media blocks require a media library to operate.
This means that the following blocks will only be enabled when you're using Laravel Filemanager for now:

Cover

Gallery

Media & Text

Updating from 0.0.1 to 0.0.2-or-later

In beta version 0.0.1 we used JSON column types for block titles. This was not supported by MariaDB, so we had to change that.
In the releasenotes for beta version 0.0.2 you can find how to deal with this problem if you do not want to lose your data from version 0.0.1.