A Gutenberg implementation for Laravel

Last update: Aug 15, 2022

Latest Version License Gitter

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

Table of Contents

Installation

Install package using composer:

composer require van-ons/laraberg

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

php artisan vendor:publish --provider="VanOns\Laraberg\LarabergServiceProvider"

In order to store the data for the Gutenberg editor, Laraberg needs to run a database migration:

php artisan migrate

This will create the 'lb_contents' and 'lb_blocks' tables.

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="{{asset('vendor/laraberg/css/laraberg.css')}}">

<script src="{{ asset('vendor/laraberg/js/laraberg.js') }}">script>

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:

">
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js">script>

<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js">script>

Updating

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

php artisan vendor:publish --provider="VanOns\Laraberg\LarabergServiceProvider" --tag="public" --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.

GitHub

https://github.com/VanOns/laraberg
Comments
  • 1. laravel filemanager 6.x update breaks laraberg

    The laravel-filemanager dev-master branch seems to be changed a lot and the file/image selections don't work in laraberg, because now they pass an object instead of url/path tuple as the window.opener.setURL callback arguments.

    https://github.com/UniSharp/laravel-filemanager/blob/78aeffe12087b1ba43cdbd5e48385bb0e5221b0e/public/js/script.js#L193-L198

    and laraberg is using this line to get the images:

    https://github.com/UniSharp/laravel-filemanager/blob/78aeffe12087b1ba43cdbd5e48385bb0e5221b0e/public/js/script.js#L599

    The fix is needed for people using Laravel 6.X because the laravel-filemanager package has the change on the Laravel 6.X update. The fix should be applied here:

    https://github.com/VanOns/laraberg/blob/8709ea0e61b0fac52e29ba7257a03ed57434174b/src/resources/js/laravel-filemanager/index.js#L26-L35

    But I couldn't compile the javascript with the included webpack configuration.

    Environment

    • Laraberg Version: 1.0.3
    • OS: Windows
    • Browser: Opera (Chromium)
    • Version 63.0.33x

    Additional context Testing with Laravel 6.3 on Laragon, PHP 7.3, nginx with php-fpm running, laravel-filemanager dev-master branch

    Reviewed by tpaksu at 2019-10-23 07:57
  • 2. Drag'n'Drop doesn't work in "media" Block

    Trying to drag an image, video or audio inside the block generate api error "API handler not found. /wp/v2/media"

    Blocks involved (tested)

    • Gallery
    • Image
    • Video
    • Audio
    • Cover
    • File
    Reviewed by Sartoric at 2019-05-22 10:09
  • 3. Initialization of packages

    Describe the bug Webpack throwing errors when I'm trying to run npm run watch

    To Reproduce Steps to reproduce the behavior:

    1. Clone or download rep in any folder.
    2. Open the terminal and run npm i
    3. then npm run watch
    4. Get errors because of unknown Gutenberg packages.

    Expected behavior Run npm run watch without errors

    Screenshots One of the erorrs: Снимок экрана 2019-08-07 в 16 44 11

    Environment:

    • Laraberg Version: 1.0.0-rc.1
    • OS: macOS Mojave 10.14.5
    • Browser: –
    • Version: –
    Reviewed by FlusherDock1 at 2019-08-07 13:48
  • 4. v2 - mediaUpload

    Hi Maurice,

    Thanks so much for releasing V2 - really appreciate your work on it! It seems to be a big step forward in terms of being cleanly integrated.

    I was using Laravel File Manager with V1, and I see you have noted "This can be solved by implementing your own mediaUpload function and passing it as an editor setting." - would you be able to provide a bit more documentation there? Any suggestions on what media library / file manager to integrate with?

    Thanks, Stuart

    Reviewed by Stuart92 at 2022-05-31 01:32
  • 5. Using Laraberg in Vue

    When using Laraberg in Vue, I have the problem that each time I run init for a different field without having a completely new response, I get about 59 JavaScript errors, saying that the blocks are already registered:

    Block "core/paragraph" is already registered.
    

    Is there any way to re-init Laraberg with our doing a page refresh?

    Thanks!

    Reviewed by mikebronner at 2019-06-04 19:18
  • 6. Custom blocks

    Hello folks, first of all THANK YOU for porting the only good thing from wordpress into our favorite framework :D

    I am still testing laraberg, trying yo figure out my way through it. I managed to create a custom block but there is no any wiki info on the fields for custom block. I see that it is referring to gutemberg wiki but I quite can't figure out how should I write it. In gutemberg we use ACF to make the fields but what should we do with laraberg? Can we get a little more details about this?

    Thank you!

    Reviewed by ilic993 at 2019-05-29 19:01
  • 7. Tools > Manage All Reusable Blocks doesn't work

    Clicking the 3 dots menu > Tools > Manage All Reusable Blocks the following query string is appended to the current url "?post_type=wp_block"

    Is it somehow "expected" or can it be filed as a bug ? Tnx

    Reviewed by Sartoric at 2019-05-13 17:48
  • 8. Reusable Block Not Working Properly!

    Describe the bug I can't get a reusable block on a new page. If I create a reusable block then it will show on edit but not on create a page!

    also, I am getting this on editor load

    Uncaught (in promise) [] Uncaught (in promise) []

    Reviewed by chiragsenjaliya at 2021-04-29 07:54
  • 9. Gallery only showing one image and is not editable

    When adding a gallery block I can select multiple images from the laravel filemanager. In the editor only the first image is shown. Also the gallery is not editable so it has to be deleted and created again.

    Reviewed by basti2305 at 2020-11-04 07:35
  • 10. alert on submit & restore history bugs

    Describe the bug Bug 1. Every time you submit a new post an alert pops up warning that the data is not saved. Bug 2. Every time you load the editor (after at least one save) it shows the 'restore' from browser option

    To Reproduce Both bugs are on the demo site:

    BUG 1

    1. Create an article
    2. Click on submit Popup alert

    BUG 2

    1. Create another article Restore warning shown in large orange box

    Are there any plans to fix these two bugs? I've noticed bug 2 has been mentioned a couple of times and someone submitted a 'fix' but it isn't really useful in most cases if there is no ID until after saving

    Reviewed by deanzod at 2020-09-10 13:39
  • 11. The scroll doesn't work on a mobile phone

    Describe the bug A clear and concise description of what the bug is.

    To Reproduce When I'm on my cell phone. Can't scroll to the page if a laraberg instance is present. We can reproduce the bug with google chrome responsive mode.

    Reviewed by yoloSwagSEO at 2020-04-14 08:21
  • 12. Laraberg not loading and has Javascript error

    I am in the process of setting up a CMS with Laravel and saw about Laraberg. I have followed the instructions to integrate this into my Laravel site, however I am getting a few issues when trying to get this to work.

    When loading the page, I am getting the following errors: Screenshot 2022-08-02 at 04 40 07

    My current code is: `

    ... ...

    `

    I am running Laravel using Docker on Mac

    When I load the page, this is what is loading. Under the 'Post Content' tab, is where the textarea is placed. Screenshot 2022-08-02 at 04 43 56 .

    Reviewed by joshuacadman01 at 2022-08-02 03:44
  • 13. Color and Background issue

    first of all thanks for the great work. I am facing some issues. Text color and background are not showing even though I used the sidebar: true they are still not showing in new 2.0.

    please check and suggest to me: const options = { colors: [{ color: '#ffffff', name: "White", slug: 'white' }, { color: '#000000', name: "Black", slug: 'black' }, { color: '#ff0000', name: 'Red', slug: 'red' }, { color: '#00ff00', name: 'Green', slug: 'green' }, { color: '#0000ff', name: 'Blue', slug: 'blue' }, ], sidebar: true, } Laraberg.init('content', options)

    Reviewed by Templemitra at 2022-07-20 07:31
  • 14. Livewire integration and custom colors

    For Livewire integration, I just need to know, how do I extract the result from Laraberg, to set the livewire property to the correct value? I have tried a couple of things but it just did not want to work.

    Then I have also went through a lot of code to see how the colors should be defined, and found the following (passed the following example inside the options object):

    colors:[
        {color: '#ffffff', name: "White", slug: 'white'},
        {color: '#000000', name: "Black", slug: 'black'},
        {color: '#ff0000', name: 'Red', slug: 'red'},
        {color: '#00ff00', name: 'Green', slug: 'green'},
        {color: '#0000ff', name: 'Blue', slug: 'blue'},
    ],
    

    This gives the colors for the highlight function (but working only for background and not foreground), but not to overlays and other areas where we might like a background. I have even tried passing other options to perhaps get a color picker, but this did not do anything useful:

    customTextColor: true,
    customBackgroundColor: true,
    customGradient: true,
    
    Reviewed by Jacotheron at 2022-07-19 09:38
A lightway implementation of Laravel's belongs To many

A lightweigth implementation of Laravel's belongs To many relationship in cases you don't need pivot table.

Feb 8, 2022
A simple Socialite implementation for Laravel Jetstream.
A simple Socialite implementation for Laravel Jetstream.

Introduction Socialstream is a third-party package for Laravel Jetstream. It replaces the published authentication and profile scaffolding provided by

Aug 8, 2022
An easy-to-use virtual wallet implementation for Laravel

Laravel Wallet Some apps require a prepayment system like a virtual wallet where customers can recharge credits which they can then use to pay in app

Aug 3, 2022
Repository Pattern implementation for Laravel

This is a Simple Repository Pattern implementation for Laravel Projects and an easily way to build Eloquent queries from API requests.

Nov 22, 2021
Easy Laravel Server-Side implementation of PrimeVue Datatables

Laravel + PrimeVue Datatables This is a simple, clean and fluent serve-side implementation of PrimeVue Datatables in Laravel. Features Global Search i

Aug 8, 2022
Fast and simple implementation of a REST API based on the Laravel Framework, Repository Pattern, Eloquent Resources, Translatability, and Swagger.

Laravel Headless What about? This allows a fast and simple implementation of a REST API based on the Laravel Framework, Repository Pattern, Eloquent R

Aug 4, 2022
🍩 SweetAlert 2 Implementation for Laravel
🍩 SweetAlert 2 Implementation for Laravel

?? SweetAlert2 Support for Laravel Add beautiful alerts by SweetAlert directly into your Laravel application, with a simple setup, and handly helpers.

Jun 29, 2022
An easy-to-use virtual wallet implementation for Laravel.

Laravel Wallet Some apps require a prepayment system like a virtual wallet where customers can recharge credits which they can then use to pay in app

Feb 6, 2022
A straightforward implementation of the Circuit Breaker pattern for Laravel 9

Laravel Circuit Breaker A straightforward implementation of the Circuit Breaker pattern for Laravel Framework 9 (using Memcached). Installation You ca

Mar 22, 2022
A simple wallet implementation for Laravel

Laravel Wallet A simple wallet implementation for Laravel. Installation You can install the package via composer: composer require stephenjude/laravel

Aug 4, 2022
This is a solution implementation for the coderbyte question, CLEAN GET REQUEST RESULT.

This is a solution implementation for the coderbyte question, CLEAN GET REQUEST RESULT. Two solutions are proposed, the first is a brute force approach while the other is an improved time complexity solution.

May 23, 2022
Composer repository implementation for ZIPs.

Release Belt — Composer repo for ZIPs Release Belt is a Composer repository, which serves to quickly integrate third–party non–Composer releases into

Jul 20, 2022
A lightweight domain event pattern implementation for Doctrine2.
A lightweight domain event pattern implementation for Doctrine2.

Knp Rad Domain Event A lightweight domain event pattern implementation for Doctrine2. Official maintainers: @Einenlum Installation With composer : $ c

Aug 23, 2018
PHP implementation of Nanoid, secure URL-friendly unique ID generator

Nanoid-php A tiny (179 bytes), secure URL-friendly unique string ID generator for JavaScript Safe. It uses cryptographically strong random APIs and gu

Aug 7, 2022
List of 77 languages for Laravel Framework 4, 5, 6, 7 and 8, Laravel Jetstream , Laravel Fortify, Laravel Breeze, Laravel Cashier, Laravel Nova and Laravel Spark.

Laravel Lang In this repository, you can find the lang files for the Laravel Framework 4/5/6/7/8, Laravel Jetstream , Laravel Fortify, Laravel Cashier

Aug 10, 2022
⚡ Laravel Charts — Build charts using laravel. The laravel adapter for Chartisan.
⚡ Laravel Charts — Build charts using laravel. The laravel adapter for Chartisan.

What is laravel charts? Charts is a Laravel library used to create Charts using Chartisan. Chartisan does already have a PHP adapter. However, this li

Aug 11, 2022
Laravel Kickstart is a Laravel starter configuration that helps you build Laravel websites faster.

Laravel Kickstart What is Laravel Kickstart? Laravel Kickstart is a Laravel starter configuration that helps you build Laravel websites faster. It com

Jan 8, 2022
Laravel User Activity Log - a package for Laravel 8.x that provides easy to use features to log the activities of the users of your Laravel app
Laravel User Activity Log - a package for Laravel 8.x that provides easy to use features to log the activities of the users of your Laravel app

Laravel User Activity Log - a package for Laravel 8.x that provides easy to use features to log the activities of the users of your Laravel app

Jul 7, 2022
Laravel Segment is an opinionated, approach to integrating Segment into your Laravel application.

Laravel Segment Laravel Segment is an opinionated, approach to integrating Segment into your Laravel application. Installation You can install the pac

May 16, 2022