How to Create a Laraberg Custom block?

Laraberg is a Laravel package to use wordpress gutenberg editor with Laravel Framework. Today we are going to learn how we can create a laraberg custom block.

So, let’s dive into the code to initialize the laraberg.

Initialize the Laraberg

document.addEventListener('DOMContentLoaded', function () {

    (function () {
        if (typeof Laraberg == 'undefined') {
            console.warning('Laraberg not found!');
            return;
        }

        registerPostTitleBlock();

        Laraberg.init('post-editor', {
            mediaUpload: mediaUploaded
        });
})

As you can see, I have used mediaUpload while init the laraberg for this check my media upload related article.

Register a custom block to the Laraberg

After init the laraberg, we need to create the function for the custom block like given below.

function registerPostTitleBlock() {

    (function (blocks, blockEditor, element, components) {

        var el = element.createElement;
        var RichText = blockEditor.RichText;
        var useBlockProps = blockEditor.useBlockProps;
        var InspectorControls = blockEditor.InspectorControls;

        const icon = el("svg", {
            viewBox: "0 0 24 24",
            xmlns: "http://www.w3.org/2000/svg"
        }, el("path", {
            d: "M6.2 5.2v13.4l5.8-4.8 5.8 4.8V5.2z"
        }));

        const block = blocks.registerBlockType('sbt-block/post-title', {
            apiVersion: 2,
            title: 'Post title',
            icon: icon,
            category: 'text',
            attributes: {
                content: {
                    type: 'string',
                    selector: 'h1.post-title',
                    source: 'text',
                }
            },
            supports: {
                customClassName: false,
            },
            edit: function (props) {
                var blockProps = useBlockProps();

                return [
                    el(
                        InspectorControls,
                        { key: 'l8' }
                    ),
                    el(RichText, {
                        tagName: 'h1',
                        key: 'lx4',
                        value: props.attributes.content,
                        preserveWhiteSpace: true,
                        __unstablePastePlainText: true,
                        onChange: content => props.setAttributes({
                            content: content
                        }),
                        placeholder: "Enter title..",
                    })
                ]
            },
            save: function (props) {
                var blockProps = useBlockProps.save();

                return el(RichText.Content,
                    Object.assign(blockProps, {
                        tagName: 'h1',
                        className: 'post-title',
                        value: props.attributes.content
                    }),
                );
            },
        })

    })(Laraberg.wordpress.blocks,
        Laraberg.wordpress.blockEditor,
        Laraberg.wordpress.element,
        Laraberg.wordpress.components);
}

That’s it. It’s simple to create a custom block in laraberg.

Hope you find this article useful.