How to create custom dynamic block in wordpress

Gutenberg, WordPress’ block editor, offers a powerful way to create dynamic content. By building custom dynamic blocks, you can provide users with more flexibility and interactivity. In this guide, we’ll walk through the steps to create custom dynamic Gutenberg blocks without relying on plugins.

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-dynamic-block”.

npx @wordpress/create-block custom-dynamic-block –variant dynamic

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

Like this Ex:

custom-dynamic-block

    node_modules

    src

        block.json

        edit.js

        editor.scss

        index.js

        render.php

        style.scss

    package-lock.json

    package.json

    custom-dynamic-block.php

Step 2: Define Your Dynamic Block.

-> block.json file add attributes.

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

Ex:

“attributes”: {

    “Title”: {

        “type”: “string”,

        “default”: “”

    }

}

-> 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 handhook.

Ex:

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

export default function Edit( { attributes, setAttributes } ) {

    const { Title } = attributes;

    const onChangeTitle = (newTitle) => {

        setAttributes({ Title: newTitle });

    }

    return (

        <>

            <div class=”banner”>

                <RichText

                    tagName=”h2″

                    value={Title}

                    onChange={onChangeTitle}

                    placeholder={__(“Enter title…”)}

                />

            </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.

-> custom-dynamic-block.php file render block frontend side.

Follow the below steps how to display data from frontand side of block in dynamic block.

First you will need to create a function in the custom-dynamic-block.php file.

Next you need to get your dynamic data in the function that you added to the edit.js file.

Ex:

function custom_dynamic_block_render_data( $attributes ) {

    $title = isset( $attributes[‘Title’] ) ? esc_html( $attributes[‘Title’] ) : ”;

    echo ‘<div class=”banner”>’;

    echo ‘<h2>’ . esc_html( $title ) . ‘</h2>’;

    echo ‘</div>’;

}

Next in the custom-dynamic-block.php file there will be a default function to render your custom function which is code given below.

Ex:

function create_block_custom_dynamic_block_block_init() {

    register_block_type(

        __DIR__ . ‘/build’,

        array(

            ‘render_callback’ => ‘custom_dynamic_block_render_data’,

        )

    );

}

add_action( ‘init’, ‘create_block_custom_dynamic_block_block_init’ );

Next in this custom-dynamic-block.php file you can get any data by running php code. Like this post, pages etc. Below is an example of the data of the post.

Ex:

ob_start();

    $id = get_the_ID();

    $categories = get_the_category( $id );

    $post_args = array(

        ‘post_type’ => ‘post’,

        ‘category__in’ => $categories_ids,

        ‘post__not_in’ => array( $id ),

        ‘posts_per_page’ => 2,

    );

    $get_posts = new WP_Query( $post_args );

    if ( $get_posts->have_posts() ) :

    echo ‘<div class=”posts”>’;

        while ( $get_posts->have_posts() ) :

            <a href=”‘ . get_the_permalink() . ‘”>’ . get_the_post_thumbnail() . ‘</a>

            <a href=”‘ . get_the_permalink() . ‘”>’ . get_the_title() . ‘</a>

            <p>’ . get_the_excerpt() . ‘</p>

        endwhile;

    echo ‘</div>’;

endif;

return ob_get_clean();

-> 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.

Ex:

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

Step 3: Customize your dynamic 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

We have reached the end of this long journey through Gutenberg custom dynamic block development.

This article covered some of the steps on how to create a custom dynamic block, but hopefully, you should now have a good understanding of custom dynamic block development in general.