Introducing Laraberg Beta, a Gutenberg implementation for Laravel.
Those who are familiar with Wordpress have probably heard of this new editor called Gutenberg. If you have no idea what I am talking about, don’t worry. Gutenberg is a new editor that uses the idea of “blocks” to build your website’s articles and pages.
The last couple months we’ve seen the official release of Gutenberg and also a release of Gutenberg for Drupal. This last one got us excited over at Van Ons in Amsterdam. If it is possible to use the Gutenberg editor in Drupal, it must be possible to run it anywhere, right? So that’s how this project got started.
GutenbergJS
By looking at Drupal’s implementation of Gutenberg we realised that the company behind the Drupal plugin, Frontkom, are also the creators of GutenbergJS. This JavaScript-only version of Gutenberg gets rid of all Wordpress dependencies so you can use the Gutenberg editor in any one of your apps. However, by getting rid of the Wordpress dependencies you are also getting rid of all the datasources that Gutenberg relies on. In order to get a working Gutenberg editor you have to implement those datasources yourself.
Laraberg
This is where our Laravel plugin, Laraberg, comes in. It takes all the configuration you would have to do to get GutenbergJS running in your Laravel application, and puts it into an easy to install package. After installing you’re free to use to Gutenberg editor in any way you see fit, from entire pages for your website to small sections on your webshop’s product detail page.
What does Laraberg do for you?
The goal for Laraberg is to give developers the ability to add the Gutenberg editor to any page they like in a way that is as easy as possible, but at the same time it has to prove enough options to tailor the editor so it can fit into any Laravel project out there. To make this possible there were a few problems to solve.
Since GutenbergJS is ‘only’ a standalone version of Gutenberg, it does not implement any of the Wordpress functionality that the editor needs. This means that Laraberg has to come with its own implementations for some of those.
- API endpoints. Some of Gutenberg’s blocks are dynamic, those are the reusable blocks, and the embed blocks. For those blocks Laraberg provides API endpoints that retrieve the necessary data to render those blocks inside the editor. And, in the case of reusable blocks, Laraberg also provides the endpoints to create, update and delete those blocks.
- Mock data. A lot of data that Gutenberg requests from Wordpress is irrelevant for Laraberg, and because of that we can send standard mock data whenever the editor requests this information. This includes requests like the theme’s capabilities, the available taxonomies and the different post types.
- Content rendering. When a page made with Gutenberg gets submitted, the resulting content is not always fully functional HTML. When a page has any dynamic blocks inside of it, there is some processing that has to be done before the content will show correctly.
Besides those points there were some more problems to solve, like replacing the Wordpress media library, making Gutenberg’s content easily accessible and providing configuration options for the API endpoints. But I will not bother you with the technical details of those problems.
Try Laraberg
If you would like to give Laraberg a try, the beta release is available on Github and Packagist. Since it is a beta there are still some improvements to be made, and because of that any feedback will be really helpful, so feel free to reach out to us through Gitter or Github!
