Introducing Paver

by Jeffrey van Rossum

Last weekend, I launched Paver. A drag-and-drop block editor built specifically for PHP developers.

The Why Behind Paver

I created Paver with one primary goal: to serve as a custom block editor for WordPress themes (if you don't caure about WordPress, skip to this part). If you’ve worked with the WordPress block editor (Gutenberg), you’ve probably noticed it’s aiming more and more to handle nearly the entire theme-building process within the editor itself without writing a single bit of code. Sounds pretty cool; but is it for developers?

Now, Gutenberg has a ton of options, but when you’re looking to build more advanced designs, things can get tricky. You start diving into custom blocks, trying to make them work both in the editor and on the front-end. And let’s be honest—you need to know your way around React (or at least with its concepts) to pull it off. Might be doable, but in my experience - its time consuming.

And if you add custom styling, add for example Tailwind CSS (which I'm a huge fan of) it can be a challenge not messing up the WordPress admin layout to some degree.

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 and customize their options. As a WordPress theme developer, with that ability, I have full control over the options I present to my clients. 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.

Comments

Talk about this article on X.
Did you like this post?

If you sign up for my newsletter, I can keep you up to date on more posts like this when they are published.

en nl