Laraberg aims to provide an easy way to integrate the Gutenberg editor with your Laravel projects. It takes the Gutenberg editor and adds all the communication and data it needs function in a Laravel environment.

Table of Contents

• Installation
  • JavaScript and CSS files
  • Dependencies
• Updating
• Usage
  • Initializing the Editor
  • Configuration options
  • Models
  • Custom Blocks
    • Server-side blocks
  • WordPress exports

Installation

Install package using composer:

composer require evosite/laraberg

Add vendor files to your project (CSS, JS & Config):

php artisan vendor:publish --tags="laraberg-assets"

JavaScript and CSS files

The package provides a JS and CSS file that should be present on the page you want to use the editor on:

<link rel="stylesheet" href="{{ mix('/css/laraberg.css', '/vendor/laraberg') }}">
<script src="{{ mix('/js/laraberg.min.js', '/vendor/laraberg') }}"></script>

Updating

When updating Laraberg you have to publish the vendor files again by running this command:

php artisan vendor:publish --tags="laraberg-assets" --force

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.

To initialize the editor all we have to do is call the initialize function with the id of the textarea. You probably want to do this insde a DOMContentLoaded event.

And that's it! The editor will replace the textarea in the DOM and update the value on change

Laraberg.init('[id_here]')

Configuration options

The init() function takes an optional configuration object which can be used to change Laraberg's behaviour in some ways.

const options = {}
Laraberg.init('[id_here]', options)

The options object should be a EditorSettings object.

interface EditorSettings {
    height?: string;
    mediaUpload?: (upload: MediaUpload) => void;
    fetchHandler?: FetchHandler;
    disabledCoreBlocks?: string[];
    alignWide?: boolean;
    supportsLayout?: boolean;
    maxWidth?: number;
    imageEditing?: boolean;
    colors?: Color[];
    gradients?: Gradient[];
    fontSizes?: FontSize[];
}

Custom Blocks

Gutenberg allows developers to create custom blocks. For information on how to create a custom block you should read the Gutenberg documentation.

Registering custom blocks is fairly easy. A Gutenberg block requires the properties title, icon, and categories. It also needs to implement the functions edit() and save().

const myBlock =  {
  title: 'My First Block!',
  icon: 'universal-access-alt',
  category: 'my-category',

  edit() {
    return <h1>Hello editor.</h1>
  },

  save() {
    return <h1>Hello saved content.</h1>
  }
}

Laraberg.registerBlockType('my-namespace/my-block', myBlock)

Server-side blocks

Server-side blocks can be registered in Laravel. You probably want to create a ServiceProvider and register your server-side blocks in it's boot method.

class BlockServiceProvider extends ServiceProvider {
    public function boot() {
        Laraberg::registerBlockType(
          'my-namespace/my-block',
          [],
          function ($attributes, $content) {
            return view('blocks.my-block', compact('attributes', 'content'));
          }
        );
    }
}

WordPress exports

Laraberg uses the WordPress Gutenberg packages under the hood, a lot of those packages expose functionality that let's you customize the editor. You can find these packages in Javascript in the global Laraberg object.

• Laraberg.wordpress.blockEditor
• Laraberg.wordpress.blocks
• Laraberg.wordpress.components
• Laraberg.wordpress.data
• Laraberg.wordpress.element
• Laraberg.wordpress.hooks
• Laraberg.wordpress.serverSideRender