The block.js file (which you may see as index.js elsewhere) within your block folder is where you’ll be modifying the block’s JavaScript registration. The top of the JavaScript file might look something like this:

Note: this render callback is intentionally different than the Gutenberg block’s edit callback. Our preference is to use GitHub’s provided JavaScript embed code because this lets GitHub change the embed’s behavior at a future date without requiring a developer to make changes.

Just the Beginning

Congrats, you did it! If you’ve made it this far, you’re either on top of your game or completely baffled. Here are some concepts we’ve touched on:

Dynamic blocks are advantageous over standard blocks because they let you render different output based on context (frontend vs. RSS vs. AMP) and change the output at a future date without updating all stored references.

Gutenberg blocks can be registered with both JavaScript and PHP. JavaScript registration gives you control over the editing interface, the block preview, and what ends up stored in post content. PHP registration enables you to dynamically handle rendering with a PHP callback.

Even when you’re building a dynamic block, you’ll want to save some fallback HTML in the post content for when the plugin isn’t active, etc. For the GitHub Gist block, this is a View Gist on GitHub link.