A Gutenberg implementation for Laravel

Related tags

Laravel laravel gutenberg
Overview

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.

Comments
  • Drag'n'Drop doesn't work in

    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
    opened by Sartoric 14
  • laravel filemanager 6.x update breaks laraberg

    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

    opened by tpaksu 13
  • Initialization of packages

    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: –
    opened by FlusherDock1 11
  • v2 - mediaUpload

    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

    opened by Stuart92 10
  • Gallery only showing one image and is not editable

    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.

    no-issue-activity 
    opened by basti2305 9
  • Using Laraberg in Vue

    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!

    opened by mikebronner 9
  • Custom blocks

    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!

    opened by ilic993 9
  • Tools > Manage All Reusable Blocks doesn't work

    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

    opened by Sartoric 9
  • Reusable Block Not Working Properly!

    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) []

    no-issue-activity 
    opened by chiragsenjaliya 8
  • alert on submit & restore history bugs

    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

    no-issue-activity 
    opened by deanzod 8
  • The scroll doesn't work on a mobile phone

    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.

    no-issue-activity 
    opened by yoloSwagSEO 7
  • Embeds doesn't work on frontend

    Embeds doesn't work on frontend

    I have recently tried laraberg as my editor and everything works like a charm in backend. No Issues. But I tired embedding youtube videos or vimeo or twitter or any other kind of embeds and it works in backend but in frontend it just doesn't render anything except the URL I just embeded.

    You can easily reproduce this by embedding anything like a youtube video or twitter post on your backend and in frontend it doesn't render.

    This is the backend of the laraberg editor where youtube and twitter posts are embeded and it works. Screen Shot 2023-01-04 at 16 34 35

    And this is the frontend where it just shows the link. Screen Shot 2023-01-04 at 16 34 42

    This is how the html code looks when you inspect it: Screen Shot 2023-01-04 at 16 37 37

    Any help?

    opened by anmolko 0
  • Patterns and translations

    Patterns and translations

    Hi, I have a question about how to use patterns from wordpress (Call to Action, Pricing Table, etc.) in Laraberg and also how to add translations (German, Czech, ...)? Maybe just a example would be enough. Thank you Pavel Kaspar

    opened by xpalko 0
  • [Fix] Prevent fetching if endpoint was not found

    [Fix] Prevent fetching if endpoint was not found

    Implemented a fix for the following exception:

    VanOns\Laraberg\Services\OEmbedService::fetch(): Argument #1 ($url) must be of type string, null given, called in /<redacted>/vendor/van-ons/laraberg/src/Services/OEmbedService.php on line 32
    bug php 
    opened by dnwjn 0
  • Is laraberg support laravel 9?

    Is laraberg support laravel 9?

    i have a laravel project that is running on 5.7 version. i want to update it into laravel 9. i have used laraberg v 1.0. i want to use current v 2.0.1 with laravel 9. is this possible?

    opened by mdtanjilhasan 2
Releases(v2.0.3)

  • v2.0.3(Jan 3, 2023)

    What's Changed

    • Debug - fix #174 by @arman-arif in https://github.com/VanOns/laraberg/pull/177

    New Contributors

    • @arman-arif made their first contribution in https://github.com/VanOns/laraberg/pull/177

    Full Changelog: https://github.com/VanOns/laraberg/compare/v2.0.2...v2.0.3

    Source code(tar.gz)
    Source code(zip)

  • v2.0.2(Oct 25, 2022)

    What's Changed

    • Fix embed by @winkelco in https://github.com/VanOns/laraberg/pull/173

    New Contributors

    • @winkelco made their first contribution in https://github.com/VanOns/laraberg/pull/173

    Full Changelog: https://github.com/VanOns/laraberg/compare/v2.0.1...v2.0.2

    Source code(tar.gz)
    Source code(zip)

  • v2.0.1(Jul 28, 2022)

    What's Changed

    • Bug Fix for Embed by @shaunluedeke in https://github.com/VanOns/laraberg/pull/163

    New Contributors

    • @shaunluedeke made their first contribution in https://github.com/VanOns/laraberg/pull/163

    Full Changelog: https://github.com/VanOns/laraberg/compare/v2.0.0...v2.0.1

    Source code(tar.gz)
    Source code(zip)

  • v2.0.0(May 24, 2022)

    Updating from v1 to v2

    There are some big changes in Laraberg v2.

    • Content is now stored in a column of the model's table
    • WordPress packages are available in Javascript, this means we can use a lot of the functionality, like hooks, that's already available in Gutenberg.
    • @van-ons/block-editor is used to render the editor, this makes it a lot easier to keep up with the latest Gutenberg versions.
    • Server side rendered blocks are now supported

    Unfortunately this means that updating to v2 is not a straight-forward as we would like it to be.

    • Gutenbergable is no longer used, instead use RendersContent.
      • Rendered content is no longer stored in a table, so to migrate to v2 you have to move all content from the raw_content column in the lb_contents table to a column on your model's table.
    • Laraberg.registerBlock was renamed to Laraberg.registerBlockType
    • Laraberg.registerCategory was removed, you can use the wordpress exports to register categories.
    • The configurable sidebar was removed.
    • Laravel File Manager is no longer supported.
      • This can be solved by implementing your own mediaUpload function and passing it as an editor setting.
    Source code(tar.gz)
    Source code(zip)

  • v1.1.1(May 27, 2020)

  • v1.1.0(Mar 25, 2020)

  • v1.0.3(Oct 14, 2019)

    In this release:

    • Update Gutenberg to v6.6.0
    • Fix bug where reusable blocks were not showing anymore
    • Implement a temporary fix for the image block crashing when editing a page that got saved without an image selected
    Source code(tar.gz)
    Source code(zip)

  • v1.0.2(Sep 30, 2019)

    In this release:

    • Update Gutenberg to v6.5.0
    • More future-proof fix for certain Gutenberg button's missing the button type 'button' (Fixes #53)
    Source code(tar.gz)
    Source code(zip)

  • v1.0.1(Aug 19, 2019)

    In this release:

    • IMPORTANT: laraberg_content now gets saved when it's parent model gets saved, this means we have to set the the lb_content attribute BEFORE saving the parent model.
    • Fix issue where the laraberg_content wasn't deleted when the parent model was
    • Refactored method names to follow the Laravel convention names.

    Big thanks to @IsraelOrtuno !

    Source code(tar.gz)
    Source code(zip)

  • v1.0.0(Aug 13, 2019)

    The first stable Laraberg release is here!

    Changes since v1.0.0-rc:

    • Update Gutenberg to v6.2.0
    • Fix bug where some buttons would not respond because of a missing 'submit' type
    • Remove external jQuery and moment dependencies
    • Remove options menu since none of the options here were serving any purpose
    Source code(tar.gz)
    Source code(zip)

  • v1.0.0-rc(Jul 30, 2019)

    Now that Laraberg is no longer dependent on GutenbergJS it's starting to look and feel good enough for a v1 release. We'll use this release candidate to do some final checks and tests before the official release, so let us know if anything is wrong!

    In this release:

    • Rename Gutenbergable->content() function to laraberg_content() to prevent name conflicts.
    • Fix accessor methods not checking of laraberg_content object exists before returning their value.
    • Fix bug where some buttons (HTML-block preview) would submit the form.
    • Add message explaining drag & drop is not supported yet.
    • More bufixes & cleanup
    Source code(tar.gz)
    Source code(zip)

  • v0.0.7-beta(Jul 29, 2019)

    Laraberg was dependent on the GutenbergJS package, and since that package did no longer receive any updates Laraberg was stuck on Gutenberg v4.8. This release removes the GutenbergJS dependency and instead directly uses WordPress' Gutenberg package. This also means that Laraberg is now using the latest Gutenberg version (6.1.1)!

    More in this release:

    • Allow overriding of models - thanks to @mikebronner
    • Add ability to set the editor content from JS
    • Sidebar fixes
    Source code(tar.gz)
    Source code(zip)

  • v0.0.6-beta(May 21, 2019)

  • v0.0.5-beta(May 21, 2019)

    In this release:

    • Use laravel attribute accessors instead of methods for getting and setting content. The methods used for this previously are deprecated and will be removed in a future version. Check the README for more information.
    • Delete content when the parent model gets deleted.
    • Rework css overrides so huge wordpress css file could be removed from the project.
    • Add ability to set a custom callback for search calls (only used in Button block as far as I'm aware).
    • Remove links to reusable blocks management page.
    • Add more inline documentation.
    Source code(tar.gz)
    Source code(zip)

  • v0.0.4-beta(May 13, 2019)

    In this release:

    • Add ability to add form fields to a sidebar
    • Add asset publish groups to prevent overwriting config when updating Laraberg
    • Remove padding from .gutenberg__content
    Source code(tar.gz)
    Source code(zip)

  • v0.0.3-beta(May 1, 2019)

    Changes in this release:

    • Implement custom API prefixes
    • Add init alias for initGutenberg
    • Notices now stick to the top, even when scrolling down
    • Bugfixes
    Source code(tar.gz)
    Source code(zip)

  • v0.0.2-beta(Apr 30, 2019)

    The first beta release saw problems for some users. There are some important breaking changes, so to keep using your current install there are some things you may have to do.

    In order to support MariaDB we had to stop using the JSON column type. This means that there are some changes to the database structure. The easiest way to get around this if you've already used Laraberg is to do a database rollback and then migrate again. For those of you who do not want to do that I have attached a migration file to this release that you can use to update your database. I'm sorry for this trouble, but since it is still only a beta release, it's better to fix these issues right now rather than later.

    Other changes in this release:

    1. Reworked Laravel Filemanager implementation. Fixes #4 & #8
    2. Use Gutenberg notices for error handling.
    3. Update JS file structure.
    Source code(tar.gz)
    Source code(zip)
    2019_04_30_143632_update_blocks_title.php(1.11 KB)

  • v0.0.1-beta(Apr 3, 2019)

Owner
Van Ons Internet Agency
WordPress, Laravel and ReactNative development
Van Ons Internet Agency
GitHub
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.

Inani El Houssain 24 Nov 2, 2022
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

Joel Butcher 334 Jan 2, 2023
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

Muath Assawadi 6 Sep 28, 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.

Ephraïm SEDDOR 1 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

Savannabits 11 Dec 29, 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

Julien SCHMITT 6 Dec 30, 2022
🍩 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.

Wavey 38 Dec 12, 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

Muathye 1 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

Leonardo Vieira 2 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

Stephen Jude 216 Dec 29, 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.

null 3 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

Andrey Savchenko 151 Oct 17, 2022
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

KNP Labs 5 Sep 23, 2022
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

__hidehalo 548 Jan 4, 2023
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

Laravel Lang 6.9k Jan 2, 2023
⚡ 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

Erik C. Forés 31 Dec 18, 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

Sam Rapaport 46 Oct 1, 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

null 9 Dec 14, 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

Octohook 13 May 16, 2022