PHPackages babyandy0111/laraberg - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. babyandy0111/laraberg ActiveLibrary babyandy0111/laraberg ===================== A Gutenberg implementation for Laravel v2.0.0(3y ago)05GPL-3.0-or-laterPHP Since Apr 3Pushed 3y agoCompare [ Source](https://github.com/babyandy0111/laraberg)[ Packagist](https://packagist.org/packages/babyandy0111/laraberg)[ RSS](/packages/babyandy0111-laraberg/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (3)Versions (30)Used By (0) [![](./logo-text.svg)](./logo-text.svg) ======================================== [](#-) [![Latest Version](https://camo.githubusercontent.com/22ef728d1d8839cac106073d85c11c6c4a9083839efb7f832ab06db423634a61/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f76616e2d6f6e732f6c61726162657267)](https://packagist.org/packages/van-ons/laraberg)[![License](https://camo.githubusercontent.com/0269e966c77d50943d5505aa072082e1fe01d2c8af2757ce3c06b27f1f37abd9/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f42616279616e6479303131312f6c617261626572672e737667)](https://camo.githubusercontent.com/0269e966c77d50943d5505aa072082e1fe01d2c8af2757ce3c06b27f1f37abd9/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f42616279616e6479303131312f6c617261626572672e737667) 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 ================== [](#table-of-contents-) - [Installation](#installation) - [JavaScript and CSS files](#javascript-and-css-files) - [Dependencies](#dependencies) - [Updating](#updating) - [Usage](#usage) - [Initializing the Editor](#initializing-the-editor) - [Configuration options](#configuration-options) - [Models](#models) - [Custom Blocks](#custom-blocks) - [Server-side blocks](#server-side-blocks) - [WordPress exports](#wordpress-exports) Installation ============ [](#installation) Install package using composer: ``` composer require van-ons/laraberg ``` Add vendor files to your project (CSS, JS & Config): ``` php artisan vendor:publish --provider="Babyandy0111\Laraberg\LarabergServiceProvider" ``` JavaScript and CSS files ------------------------ [](#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: ``` ``` Dependencies ------------ [](#dependencies) The Gutenberg editor expects React, ReactDOM, Moment and JQuery to be in the environment it runs in. An easy way to do this would be to add the following lines to your page: ``` ``` Updating ======== [](#updating) When updating Laraberg you have to publish the vendor files again by running this command: ``` php artisan vendor:publish --provider="Babyandy0111\Laraberg\LarabergServiceProvider" --tag="public" --force ``` Usage ===== [](#usage) Initializing the Editor ----------------------- [](#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. ``` ``` 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. ``` {{ $model->content }} ``` 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 on a form submit the editor content will be available in the textarea's value attribute. ``` Laraberg.init('[id_here]') ``` Configuration options --------------------- [](#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[]; } ``` Models ------ [](#models) In order to add the editor content to a model Laraberg provides the 'RendersContent' trait. ``` use Babyandy0111\Laraberg\Traits\RendersContent; class MyModel extends Model { use RendersContent; } ``` This adds the `render` method to your model which takes care of rendering the raw editor content. By default the `render` methods renders the content in the `content` column, the column can be changed by changing the `$contentColumn` property on your model to the column that you want to use instead. ``` use Babyandy0111\Laraberg\Traits\RendersContent; class MyModel extends Model { use RendersContent; protected $contentColumn = 'my_column'; } ``` Or by passing the column name to the render method. ``` $model->render('my_column'); ``` Custom Blocks ------------- [](#custom-blocks) Gutenberg allows developers to create custom blocks. For information on how to create a custom block you should read the [Gutenberg documentation.](https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/writing-your-first-block-type/) 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 Hello editor. }, save() { return Hello saved content. } } Laraberg.registerBlockType('my-namespace/my-block', myBlock) ``` ### Server-side blocks [](#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 ----------------- [](#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` [ ![](https://camo.githubusercontent.com/905d275d1c87197cba442af139245c6964dc6856748d3fec1b79f5f33bb7cb8c/68747470733a2f2f76616e2d6f6e732e6e6c2f6173736574732f6d61696c2f6c6f676f2d766f2d67726f656e2d323031392d6d61696c2e706e67) ](https://van-ons.nl) ### Health Score 29 — LowBetter than 60% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity4 Limited adoption so far Community12 Small or concentrated contributor base Maturity70 Established project with proven stability Bus Factor1 Top contributor holds 96.4% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~42 days Recently: every ~33 days Total 28 Last Release 1447d ago Major Versions v0.0.7-beta → v1.0.0-rc2019-07-30 v1.1.1 → v2.0.0-rc12021-12-01 v1.x-dev → v2.0.02022-05-24 ### Community Maintainers ![](https://www.gravatar.com/avatar/b7b90bdd1b10bd86e9f0d2522375080f95f289aa58e6df52a7a63f699c5fbbd2?d=identicon)[babyandy](/maintainers/babyandy) --- Top Contributors [![mauricewijnia](https://avatars.githubusercontent.com/u/8679682?v=4)](https://github.com/mauricewijnia "mauricewijnia (270 commits)")[![IsraelOrtuno](https://avatars.githubusercontent.com/u/1769417?v=4)](https://github.com/IsraelOrtuno "IsraelOrtuno (4 commits)")[![babyandy0111](https://avatars.githubusercontent.com/u/8206379?v=4)](https://github.com/babyandy0111 "babyandy0111 (3 commits)")[![AlexVanderbist](https://avatars.githubusercontent.com/u/6287961?v=4)](https://github.com/AlexVanderbist "AlexVanderbist (1 commits)")[![dnwjn](https://avatars.githubusercontent.com/u/57711725?v=4)](https://github.com/dnwjn "dnwjn (1 commits)")[![mikebronner](https://avatars.githubusercontent.com/u/1791050?v=4)](https://github.com/mikebronner "mikebronner (1 commits)") ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/babyandy0111-laraberg/health.svg) ``` [![Health](https://phpackages.com/badges/babyandy0111-laraberg/health.svg)](https://phpackages.com/packages/babyandy0111-laraberg) ``` ### Alternatives [silverstripe/framework The SilverStripe framework 7213.5M2.5k](/packages/silverstripe-framework)[van-ons/laraberg A Gutenberg implementation for Laravel 1.4k394.0k15](/packages/van-ons-laraberg)[bolt/core 🧿 Bolt Core 585142.5k54](/packages/bolt-core)[spicyweb/craft-embedded-assets Manage YouTube videos, Instagram photos and more as first class assets 172435.6k9](/packages/spicyweb-craft-embedded-assets)[craftcms/ckeditor Edit rich text content in Craft CMS using CKEditor. 48359.1k52](/packages/craftcms-ckeditor)[riclep/laravel-storyblok A Laravel wrapper around the Storyblok API to provide a familiar experience for Laravel devs 6272.7k4](/packages/riclep-laravel-storyblok) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)