Awesome
Block Development Examples
[!IMPORTANT]
Go to the Block Development Examples Web App to navigate through the examples<kbd> <br>Go to the Block Development Examples Web App<br> </kbd>
Welcome to the block-development-examples repo on GitHub. Here you can find a bunch of block-related examples for WordPress that you can use to learn about Block Development.
Check the code 📁, download the plugin zip 📦 or see a playground-powered live demo 
of each example (plugin)
| Folder | <span style="display: inline-block; width:250px">Short description</span> | Tags | ID (❓) | Download .zip | Live Demo |
|---|---|---|---|---|---|
| 📁 | Minimal Block | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#minimal">MINIMAL</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#featured">FEATURED</a></code></small> | ca6eda | 📦 | |
| 📁 | Stylesheets | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#styles">STYLES</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#featured">FEATURED</a></code></small> | 79a4c3 | 📦 | |
| 📁 | Block Supports | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#supports">SUPPORTS</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#featured">FEATURED</a></code></small> | 6aa4dd | 📦 | |
| 📁 | Data Basics - @wordpress/data | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#no-block">NO BLOCK</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#wp-data">WP DATA</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#featured">FEATURED</a></code></small> | 59c8f8 | 📦 | |
| 📁 | Copyright Date Block | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#dynamic-rendering">DYNAMIC RENDERING</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#static-rendering">STATIC RENDERING</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#create-block">CREATE BLOCK</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#featured">FEATURED</a></code></small> | 09aac3 | 📦 | |
| 📁 | Basic Block with Dynamic Rendering | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#dynamic-rendering">DYNAMIC RENDERING</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#create-block">CREATE BLOCK</a></code></small> | 64756b | 📦 | |
| 📁 | Basic Block with Translations | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#static-rendering">STATIC RENDERING</a></code></small> | 3df23d | 📦 | |
| 📁 | Block with Static Rendering | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#static-rendering">STATIC RENDERING</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#create-block">CREATE BLOCK</a></code></small> | b16608 | 📦 | |
| 📁 | Block Editable | 1b8c51 | 📦 | | |
| 📁 | Non-block wp data with React | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#no-block">NO BLOCK</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#wp-data">WP DATA</a></code></small> | 56d6f3 | 📦 | |
| 📁 | Minimal Gutenberg Block (No Build) | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#minimal">MINIMAL</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#no-build">NO BUILD</a></code></small> | e621a6 | 📦 | |
| 📁 | Interactive Blocks | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#interactive-block">INTERACTIVE BLOCK</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#multi-block">MULTI BLOCK</a></code></small> | 99def1 | 📦 | |
| 📁 | Format API | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#no-block">NO BLOCK</a></code></small> | f14b86 | 📦 | |
| 📁 | Basic ESNext | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#minimal">MINIMAL</a></code></small> | a2ab62 | 📦 | |
| 📁 | Dynamic Block | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#dynamic-rendering">DYNAMIC RENDERING</a></code></small> | b0bce7 | 📦 | |
| 📁 | Interactivity API Block | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#create-block-template">CREATE BLOCK TEMPLATE</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#interactive-block">INTERACTIVE BLOCK</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#interactivity-api">INTERACTIVITY API</a></code></small> | 833d15 | 📦 | |
| 📁 | Meta Block | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#meta">META</a></code></small> | bb1e55 | 📦 | |
| 📁 | Inner Blocks | dcd824 | 📦 | | |
| 📁 | SlotFill | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#no-block">NO BLOCK</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#slotfill">SLOTFILL</a></code></small> | 2fb190 | 📦 | |
| 📁 | Block Toolbar Controls | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#block-toolbar">BLOCK TOOLBAR</a></code></small> | ab967f | 📦 | |
| 📁 | Recipe | 744e8a | 📦 | | |
| 📁 | Plugin Sidebar | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#slotfill">SLOTFILL</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#meta">META</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#no-block">NO BLOCK</a></code></small> | 9ee4a6 | 📦 | |
| 📁 | Interactivity API Countdown | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#dynamic-rendering">DYNAMIC RENDERING</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#interactive-block">INTERACTIVE BLOCK</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#interactivity-api">INTERACTIVITY API</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#experimental">undefined</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#block-toolbar">BLOCK TOOLBAR</a></code></small> | 3cd73e | 📦 | |
| 📁 | Block Settings Sidebar | 82c525 | 📦 | | |
| 📁 | Post Meta Modal | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#meta">META</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#no-block">NO BLOCK</a></code></small> | 2502fb | 📦 | |
| 📁 | Interactivity API Quiz | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#interactive-block">INTERACTIVE BLOCK</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#interactivity-api">INTERACTIVITY API</a></code></small> | 1835fa | 📦 | |
| 📁 | Interactivity Router (regions) example | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#interactivity-api">INTERACTIVITY API</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#interactivity-router">INTERACTIVITY ROUTER</a></code></small> | 2f43f8 | 📦 | |
More info
Check the WIKI of this repo for more info about it: