How to create custom block in wordpress

The Gutenberg editor in WordPress revolutionized content creation by introducing a block-based approach. Creating custom blocks allows you to extend this functionality, enabling you to design unique layouts and functionalities tailored to your specific needs. In this guide, we’ll walk you through the steps to create custom Gutenberg blocks.

Step 1: Set Up Your Development Environment.

First you create your block theme, inside the wp-content/themes directory.

Next, inside your theme, create a folder called blocks, where you’ll want to keep all your custom blocks.

Next you need to open a terminal in the visual code editor in the blocks folder you created and run the code below. In this code you have to add the name of your custom block like “custom-block”.

npx @wordpress/create-block@latest custom-block

Last after running this code it will set your the folder and file structure of the custom block.

Like this Ex:

custom-block

    node_modules

    src

        block.json

        edit.js

        editor.scss

        index.js

        save.js

        style.scss

        view.js

    custom-block.php

    package-lock.json

    package.json

Step 2: Define Your Block.

-> block.json file add attributes.

You will need to add the attributes used for your block in the block.json file.

Ex:

“attributes”: {

    “heading”: {

        “type”: “string”,

        “default”: “Heading”

    },

}

-> edit.js file add content for editor side.

You will need to add below code in edit.js file to display your block editor side. But this below code is only for displaying heading. If you need more fields for your block or for custom block deep info. If needed you can follow this document.Block editor handbook.

Ex:

import { useBlockProps,RichText } from ‘@wordpress/block-editor’;

const { PanelBody } = wp.components;

export default function Edit( props ) {

    const {

        attributes: { heading },

        setAttributes,

    } = props;

    const blockProps = useBlockProps();

    const onChangeHeading = (newHeading) => {

        setAttributes({ heading: newHeading });

    };
    return (

        <div class=”banner”>

            <RichText

                tagName=’h2′

                onChange={onChangeHeading}

                placeholder=’Main Title’

                value={heading}

            />

        </div>
    );
}

-> editor.scss file add editor side style for block.

You need to write the editor css of your block in the editor.scss file.

-> save.js file add content for frontend side.

To display your block frontend side you will need to add the following code to the save.js file. The save.js file renders your block frontend side in a custom block. But this below code is just to show the heading.

Ex:

import { useBlockProps, RichText } from ‘@wordpress/block-editor’;

export default function save( props ) {

    const {
        
        attributes: {},

        setAttributes,

    } = props;

    const blockProps = useBlockProps.save();

    return (

        <div class=”banner”>

            <RichText.Content

                tagName=’h2′

                value={props.attributes.heading}

            />

 
         </div>

    );
}

-> style.scss file add frontend side style for block.

You need to write your block’s frontend css in the style.scss file.

-> functions.php file import block.

functions.php file import block.

Ex:

require_once ‘blocks/custom-block/custom-block.php’;

Step 3: Customize your block.

You need to follow below steps to customize your block.

First go to your site dashboard and click pages menu and open page in which you want to display the block.

Next after your page opens you click on the plus icon and select your custom block and add it to the page.

Next, after you add a block to the page, you can customize that block and after customizing the block, click on the “update” button and the block will be saved.

Last you check the frontend side that the custom block will be displayed on the page where you have added your block.

Conclusion

With these steps, you’ve successfully created a custom Gutenberg block in WordPress without using a plugin. By harnessing the power of PHP and JavaScript, you can extend the functionality of your site, allowing for a more dynamic and engaging user experience. Experiment, iterate, and have fun building custom blocks for your WordPress theme! Happy coding!