Featured image of post How to register dynamic Gutenberg block in WordPress ?

How to register dynamic Gutenberg block in WordPress ?

This tutorial will show how to register dynamic Gutenberg block in WordPress

Introduction

πŸ‘‹ Hello friend, πŸ“œ πŸ™‚ 🏠

I was working on Gutenberg Side from a large amount of time. ⏲️. If you comfortable with the WordPress development blog you can ues the docs itself πŸ‘‰ Official Handbook.

In this tutorial you will learn how to make dynamic block using Gutenberg.

Setup

  • Any local development system with node.js and NPM/Yarn installed.
  • Run command in plugin folder’s via terminal
1
$ npx @wordpress/create-block demo-test --variant dynamic

πŸ˜„ That’s it all setup is done now.

  • After running command you will see that plugin is created with name demo-test.
  • Activate Demo Test Plugin from the dashboard, you will see hello world block in the Post or Page Editor with πŸ˜„ emoji.

The Change

Please check and see whole file structure in the plugin. You will find all block related code done in the src folder πŸ“‚.

Now You will not need to change the dynamic call back from the main plugin file by adding filter.

You can start code in edit.js.

in src folder you will see template.php which is preconfigured by command.

You can write your code in the tempate and see more here πŸ‘‰ Official NPM Package.



If it is helpfulΒ and saves your valuable Time ⏱ please show your support πŸ‘‡. Buy Me A Coffee
Buy me A Coffee, Thank you and canva ( For Beautiful designs ). Thanks for the reading πŸ‘.
Built with Hugo
Theme Stack designed by Jimmy