Introducing DropBlockEditor · vanrossum.dev    

       vanrossum.dev 

 Article

Introducing DropBlockEditor
===========================

 ![](https://vanrossum.dev/images/jeffrey-portrait.webp) By Jeffrey van Rossum

  vanrossum.dev  

  [      vanrossum.dev ](https://vanrossum.dev)                      

  [ ← Writing ](https://vanrossum.dev/posts)   [ ← Writing ](https://vanrossum.dev/posts) [ Why another editor? ](#why-another-editor) [ How to use the editor ](#how-to-use-the-editor) [ How blocks work ](#how-blocks-work) [ Adding a save button ](#adding-a-save-button) [ What about inline editing? ](#what-about-inline-editing) [ MJML's performance ](#mjmls-performance) [ Mailcoach ](#mailcoach) [ In closing ](#in-closing) 

About a month ago, I tweeted that I was working on a drag and drop editor for Laravel and showed a little demo video.

> 🤠 I have been working on a [@LaravelLivewire](https://twitter.com/LaravelLivewire?ref_src=twsrc%5Etfw) powered block editor for Laravel. Might be interesting to use in tools such as [@getmailcoach](https://twitter.com/getmailcoach?ref_src=twsrc%5Etfw). Quick little demo 📺 [pic.twitter.com/nAAXSsI0V0](https://t.co/nAAXSsI0V0)
> 
> , Jeffrey van Rossum (@jeffreyrossum) [April 11, 2023](https://twitter.com/jeffreyrossum/status/1645921627912253440?ref_src=twsrc%5Etfw)

Last week, I released version 0.1.0 (pre-release) of what is now called [DropBlockEditor](https://dropblockeditor.com). In this article I would like to tell you more about it and give you an idea of how you could use it yourself.

![DropBlockEditor demo screenshot](https://i.ibb.co/QDS0BSg/Screenshot-2023-05-13-at-15-15-11.png)Why another editor?
-------------------

There are quite some editors around, so why build a new one - you might ask. There are a couple of reasons.

### Newsletter templates

The editor is mainly created to work well for newsletter templates. To create more advanced newsletter templates, one might use tools like [MJML](https://mjml.io). MJML is a framework that provides you with clean HTML-like syntax, but generates the complex HTML and CSS needed for email clients. And it's responsive.

That being said, you can also just use regular HTML. And using the editor is not necessarily limited to newsletters.

### The TALL-stack

I love working with Livewire, Alpine.js and Tailwind CSS. I really liked the idea of being able to create custom blocks for an editor, with the power of Livewire at my disposal.

How to use the editor
---------------------

It is quite easy to setup. You install the package in your Laravel app and in a blade view, you render the editor through a Livewire component.

```php
@livewire('dropblockeditor', [
    'title' => 'Your example campaign',
])

```

If you already use Alpine in your app, the editor should already be working. If not, simply add Alpine.

By default, an example block is added to the editor - as well as an example save button (topbar on the right).

Both of course can be removed through the `config/dropblockeditor.php` file. This is also where you can register your own blocks and buttons.

Alternatively, you can also define those, by passing them to the component.

The base html that you drop your blocks in, can be set by either providing the name of a blade template or a string.

```php
@livewire('dropblockeditor', [
    'title' => 'Your example campaign',
  	'blocks' => [
        Jeffreyvr\DropBlockEditor\Blocks\Example::class,
    ],
  	'buttons' => [
        'example-button'
    ],
  	'base' => 'your-base-blade-template'
])

```

How blocks work
---------------

A block has a visual part (which is the `Block` class) and an optional, modified Livewire component (`BlockEditComponent`) to make it editable.

Let's say we are creating a very simple article block. This might look like this:

```php
namespace App\DropBlockEditor\Blocks;

use Jeffreyvr\DropBlockEditor\Blocks\Block;

class Article extends Block
{
    public $title = 'Article';

    public $data = [
        'title' => 'Hi!',
        'content' => 'This is just a very basic example of an article block.'
    ];

    public $blockEditComponent = 'article';

    public function render()
    {
        return