Introducing Paver

Last weekend, I launched Paver. A drag-and-drop block editor built specifically for PHP developers. Currently it's in the pre-release stage.

The Why Behind Paver

Imagine a designer hands you over a design that needs to be turned into a WordPress theme. Well, since the introduction of Gutenberg (or the Block Editor) users expect a WYSIWYG experience while making and editing their pages. And that is certainly something you can achieve with Gutenberg, but what if the design is a little more complicated?

Quick side note: if you're not into WordPress but you're still interested in a PHP based block editor, skip to this part.

Gutenberg has a ton of options and is actively developed still, but when you’re looking to build more advanced designs, things can get tricky. Once you discover things can't be done within the editor itself, you would probably need to create custom blocks. Well creating custom Gutenberg blocks is a whole new craft in itself. You basically leave the PHP world and enter the JavaScript one.

Say you need to create a carousel block based on your custom design. consider this block needs to be: editable in the editor, look WYSIWYG-ish in the editor and needs to look good on the front-end of your site. Three states to develop. This can become quite time consuming.

I have no shame in admitting I like PHP. No problem to dip my toes a bit into the JavaScript world, but I'd much rather do that while using some basic vanilla JavaScript or a lightweight framework like Alpine.js. In addition, I really like Tailwind CSS - but it can be challenging to not mess up the WordPress admin layout to some degree when you use it within Gutenberg.

But don’t get me wrong—this isn’t a knock on Gutenberg. For my particular use case, I just felt that an alternative like Paver could fill a gap.

What’s Paver All About?

Paver is a drag-and-drop block editor that lets you create your own blocks, with good 'ol PHP, and customize their options. As a WordPress theme developer, with that ability, I have full control over the options I present to the user. Which results in a more controlled, and less error-prone experience.

You can make those options with simple HTML and Alpine.js. Here’s a quick example of what a block might look like:

class Example extends Block
{
    public string $name = 'Example';

    public static string $reference = 'your_prefix.example';

    public array $data = [
        'title' => 'A default title'
    ];

    function options()
    {
        return <<<HTML
            <div class="option">
                <label>Title</label>
                <input type="text" x-model="title">
            </div>
        HTML;
    }

    function render()
    {
        extract($this->data);

        return <<<HTML
            <div>{$title}</div>
        HTML;
    }
}

As you might have noticed, through Alpine, you bind the values in your data array - with the x-model directive. This way, anytime you make a change, the block gets re-rendered with its new data.

To save you from having to write out options like the one above, Paver comes with some pre-made options ready to go. You can check them out in the docs.

Also, if you prefer not to embed your HTML directly in the class, you can use views instead. More on that here.

Beyond WordPress: Laravel, and More

As I was building Paver, it hit me—why stop at WordPress? It would be pretty cool to make this work with Laravel too. So, I decided to make Paver framework-agnostic. That means you can use it in any PHP project that can use Composer.

Getting Started with Paver

Whether you’re looking to integrate Paver with Laravel, WordPress, or another PHP project, all the details you need are covered in the Paver docs.

I’d love for you to give Paver a try and share your feedback. It’s still in pre-release, so I’m actively working on tweaks and improvements. A stable version is on the horizon.

Built With

Paver is powered by Alpine.js, SortableJS, and Tippy. A big shoutout to the developers behind these tools, and the ones behind the tools they used!

Videos

During its development I published two short videos on X, to demo how you can create blocks.

It's hot and yet I have a cold. So my voice sounds suboptimal #understatement. 🤧

That being said, here's a quick demo of the block editor I've been working on for WordPress pic.twitter.com/fXC0WafryA
— Jeffrey van Rossum (@jeffreyrossum) August 13, 2024

And here's a bit more about block options pic.twitter.com/BPcYyjCodP
— Jeffrey van Rossum (@jeffreyrossum) August 13, 2024

Navigation