Gutenberg

crudadmin/gutenberg adds the WordPress Gutenberg block editor as the gutenberg field type. The field stores the block markup. On the website, reading the field returns rendered HTML.

Feature	Description
Field	The block editor in the forms of the administration
Rendering	Blocks rendered to HTML, with embeds of YouTube, Vimeo, Instagram and Facebook
Media	Images and videos from the file browser or uploaded in the editor
Custom blocks	Your own blocks, block styles and editor settings in JavaScript, and render filters in PHP

The package is a fork of Laraberg, licensed under GPL-3.0-or-later.

Requirements

Version	CrudAdmin
4.x	6
3.x	5
2.x	4, 5

Installation

composer require crudadmin/gutenberg

Publish the editor assets:

php artisan admin:update

admin:update publishes the editor into public/vendor/gutenberg and adds the directory to .gitignore. Publish it manually with:

php artisan vendor:publish --tag=admin_gutenberg.assets --force

The administration waits for every script it loads, so run admin:update after each update of the package, as the deploy script does. The editor is built into the package, your project needs no npm build. The administration loads its scripts and styles automatically.

Adding the field

app/Models/Page.php

public function fields()
{
    return [
        'name' => 'name:Title|required',
        'content' => 'name:Content|type:gutenberg',
    ];
}

The column is a nullable text.
Gutenberg fields are hidden in the table of rows.
Only one editor can be active on a page. Further Gutenberg fields, including other languages of a localized field, show a button which switches the editor to them.

Rendering on the website

Outside the administration, the field returns HTML. Print it unescaped, and add the styles of the blocks to the <head> with @gutenberg:

resources/views/layouts/app.blade.php

<head>
    @gutenberg
</head>

resources/views/pages/show.blade.php

<section class="container">
    {!! $page->content !!}
</section>

The content is wrapped in <div class="crudadmin-gutenberg-wrapper">, and each top-level block in <div class="g-block-wrapper" data-block="core/paragraph">. Empty content returns null. Change the classes in the config:

config/admin.php

'gutenberg_wrapper_class' => 'crudadmin-gutenberg-wrapper',
'gutenberg_box_class' => 'g-block-wrapper',

Style the content under the wrapper class in your own stylesheet.

Rendering manually

use Admin\Gutenberg\Contracts\Blocks\BlocksBuilder;

$html = (new BlocksBuilder($page->getRawOriginal('content')))->render();

// one HTML string per top-level block
$blocks = (new BlocksBuilder($page->getRawOriginal('content')))->renderBlocks();

// names of the blocks, e.g. to style a page starting with a cover
$names = collect((new \WP_Block_Parser)->parse($page->getRawOriginal('content')))->pluck('blockName');

The REST API returns Gutenberg fields as a list of rendered blocks.

Embeds

Embed blocks are rendered with the HTML of the provider, cached forever. The editor offers YouTube, Vimeo, Instagram, Facebook and the generic embed block.

Images and videos

The media button of the blocks opens the file browser of the administration. Files dropped into the editor are uploaded to uploads/editor/images/shared and compressed. Limit the accepted types in the config:

config/admin.php

'gutenberg' => [
    'media_mime_types' => ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml', 'video/mp4'],
],

Upgrading from 2.x

React 18 replaces React 16. Rebuild your own blocks against it.
CrudAdmin 5 or newer is required, which renders the field on the website.
Custom integrations switch the active editor with a window event instead of the event bus of CrudAdmin 5 resources:

window.dispatchEvent(new CustomEvent('crudadmin:disable-gutenberg-editors', {
    detail: { id: fieldId, callback: () => bootMyEditor() },
}));

Getting started

Helpers

Socialite

REST API

Website

Package development

Gutenberg

Requirements

Installation

Adding the field

Rendering on the website

Rendering manually

Embeds

Images and videos

Upgrading from 2.x

​Requirements

​Installation

​Adding the field

​Rendering on the website

​Rendering manually

​Embeds

​Images and videos

​Upgrading from 2.x

Requirements

Installation

Adding the field

Rendering on the website

Rendering manually

Embeds

Images and videos

Upgrading from 2.x