WordPress how to make a dynamic block renderer by PHP for custom gutenberg block

• Dynamic Gutenberg block in WordPress
• Benefits of Dynamic Gutenberg block
• Create Dynamic block
• Call render_callback() hook
• Dynamic render part
• Handle data in dynamic PHP file

¶Dynamic Gutenberg block in WordPress

In WordPress, a block is a piece of content that can be added to a post or page using the Gutenberg editor. There are two types of blocks: static blocks and dynamic blocks.
Static blocks are blocks that do not change or update automatically. They are essentially “static” pieces of content that are added to a post or page and remain unchanged unless they are manually edited. Examples of static blocks might include text blocks, image blocks, or video blocks.
Dynamic blocks, on the other hand, are blocks that can change or update automatically based on certain conditions. For example, a dynamic block might display the latest posts from a particular category, or a block that displays the current date and time. Dynamic blocks allow for more flexibility and interactivity in a WordPress site, as they can display up-to-date content without the need for manual updates.
It’s important to note that both static and dynamic blocks can be customized and styled using the Gutenberg editor and WordPress themes. The choice between using a static or dynamic block will depend on the specific needs of your site and the type of content you want to display.

¶Benefits of Dynamic Gutenberg block

1. Dynamic blocks can display up-to-date content automatically, which means you don’t have to manually update the content of the block. This can save time and effort, especially if you have a lot of content on your site.
2. Dynamic blocks can add interactivity to your site, as they can change or update based on certain conditions. This can make your site more engaging for visitors and encourage them to stay longer.
3. Dynamic blocks can be used to display personalized content based on the visitor’s location, interests, or other factors. This can help improve the user experience and increase the relevance of the content displayed.
4. Dynamic blocks can be used to display real-time information, such as stock prices or weather updates. This can make your site more useful and relevant for visitors.
5. Dynamic blocks can be easily customized and styled using the Gutenberg editor and WordPress themes, so you can create a unique and professional-looking site.

¶Create Dynamic block

To create a custom Gutenberg block that utilizes a dynamic markup PHP file, you will need to follow these steps:

¶Call render_callback() hook

1. Create a new plugin or add the block to an existing plugin.
2. Create a new PHP file for your block, and use the register_block_type function to register your block with WordPress. You will need to specify the name of your block and the PHP file that will be used to render the block’s front-end markup.

function my_custom_block_init() {
  register_block_type( 'my-plugin/my-custom-block', array(
    'render_callback' => 'my_custom_block_render',
  ) );
}
add_action( 'init', 'my_custom_block_init' );

¶Dynamic render part

In your PHP file, create a function that will be used to render the block’s front-end markup. This function should accept an array of attributes as an argument, and it should return the HTML markup for the block.

function my_custom_block_render( $attributes ) {
  return '<div class="my-custom-block">' . $attributes['content'] . '</div>';
}

¶Handle data in dynamic PHP file

To make your block dynamic, you can use the $attributes array to pass data from the block’s settings to the front-end.

For example, if your block has a setting for a background color, you can pass the selected color to the front-end using the $attributes array and then use it to set the background color of your block’s HTML element.

function my_custom_block_render( $attributes ) {
  return '<div class="my-custom-block" style="background-color: ' . $attributes['color'] . '">' . $attributes['content'] . '</div>';
}

Save your PHP file and activate your plugin. Your custom block should now be available in the Gutenberg editor, and it should be able to utilize a dynamic markup PHP file to render the front-end markup for your block.