Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/wordpress/block-development-examples

Practical examples for building WordPress blocks and extending the Editor.
https://github.com/wordpress/block-development-examples

wordpress wordpress-development

Last synced: 1 day ago
JSON representation

Practical examples for building WordPress blocks and extending the Editor.

Awesome Lists containing this project

README

        

# Block Development Examples

[![zips on deploy branch](https://github.com/WordPress/block-development-examples/actions/workflows/main.yml/badge.svg)](https://github.com/WordPress/block-development-examples/actions/workflows/main.yml) [![Static Linting](https://github.com/WordPress/block-development-examples/actions/workflows/pull-request-actions.yml/badge.svg)](https://github.com/WordPress/block-development-examples/actions/workflows/pull-request-actions.yml)

> [!IMPORTANT]
> Go to the Block Development Examples Web App to navigate through the examples
>
> [
Go to the Block Development Examples Web App
](https://wordpress.github.io/block-development-examples)

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](https://developer.wordpress.org/playground/)-powered live demo ![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg) of each example (plugin)**

| Folder | Short description | Tags | ID ([❓](https://github.com/WordPress/block-development-examples/wiki/04-Why-an-ID-for-every-example%3F "Why an ID for every example?")) | Download .zip | Live Demo |
| ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/minimal-block-ca6eda) | Minimal Block | MINIMAL, FEATURED | `ca6eda` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/minimal-block-ca6eda.zip "Install the plugin using this zip and activate it. Then use the ID of the block (ca6eda) to find it and add it to a post to see it in action") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/minimal-block-ca6eda/_playground/blueprint.json "Use the ID of the block (ca6eda) to find it and add it to a post to see it in action") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/stylesheets-79a4c3) | Stylesheets | STYLES, FEATURED | `79a4c3` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/stylesheets-79a4c3.zip "Install the plugin using this zip and activate it. Then use the ID of the block (79a4c3) to find it and add it to a post to see it in action") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/stylesheets-79a4c3/_playground/blueprint.json "Use the ID of the block (79a4c3) to find it and add it to a post to see it in action") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/block-supports-6aa4dd) | Block Supports | SUPPORTS, FEATURED | `6aa4dd` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/block-supports-6aa4dd.zip "Install the plugin using this zip and activate it. Then use the ID of the block (6aa4dd) to find it and add it to a post to see it in action") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/block-supports-6aa4dd/_playground/blueprint.json "Use the ID of the block (6aa4dd) to find it and add it to a post to see it in action") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) | Data Basics - @wordpress/data | NO BLOCK, WP DATA, FEATURED | `59c8f8` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/data-basics-59c8f8.zip "") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/data-basics-59c8f8/_playground/blueprint.json "") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/copyright-date-block-09aac3) | Copyright Date Block | DYNAMIC RENDERING, STATIC RENDERING, CREATE BLOCK, FEATURED | `09aac3` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/copyright-date-block-09aac3.zip "Install the plugin using this zip and activate it. Then use the ID of the block (09aac3) to find it and add it to a post to see it in action") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/copyright-date-block-09aac3/_playground/blueprint.json "Use the ID of the block (09aac3) to find it and add it to a post to see it in action") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/block-dynamic-rendering-64756b) | Basic Block with Dynamic Rendering | DYNAMIC RENDERING, CREATE BLOCK | `64756b` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/block-dynamic-rendering-64756b.zip "Install the plugin using this zip and activate it. Then use the ID of the block (64756b) to find it and add it to a post to see it in action") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/block-dynamic-rendering-64756b/_playground/blueprint.json "Use the ID of the block (64756b) to find it and add it to a post to see it in action") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/basic-block-translations-3df23d) | Basic Block with Translations | STATIC RENDERING | `3df23d` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/basic-block-translations-3df23d.zip "Install the plugin using this zip and activate it. Then use the ID of the block (3df23d) to find it and add it to a post to see it in action") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/basic-block-translations-3df23d/_playground/blueprint.json "Use the ID of the block (3df23d) to find it and add it to a post to see it in action") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/block-static-rendering-b16608) | Block with Static Rendering | STATIC RENDERING, CREATE BLOCK | `b16608` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/block-static-rendering-b16608.zip "Install the plugin using this zip and activate it. Then use the ID of the block (b16608) to find it and add it to a post to see it in action") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/block-static-rendering-b16608/_playground/blueprint.json "Use the ID of the block (b16608) to find it and add it to a post to see it in action") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/editable-block-1b8c51) | Block Editable | | `1b8c51` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/editable-block-1b8c51.zip "Install the plugin using this zip and activate it. Then use the ID of the block (1b8c51) to find it and add it to a post to see it in action") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/editable-block-1b8c51/_playground/blueprint.json "Use the ID of the block (1b8c51) to find it and add it to a post to see it in action") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/non-block-react-wp-data-56d6f3) | Non-block wp data with React | NO BLOCK, WP DATA | `56d6f3` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/non-block-react-wp-data-56d6f3.zip "") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/non-block-react-wp-data-56d6f3/_playground/blueprint.json "") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/minimal-block-no-build-e621a6) | Minimal Gutenberg Block (No Build) | MINIMAL, NO BUILD | `e621a6` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/minimal-block-no-build-e621a6.zip "Install the plugin using this zip and activate it. Then use the ID of the block (e621a6) to find it and add it to a post to see it in action") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/minimal-block-no-build-e621a6/_playground/blueprint.json "Use the ID of the block (e621a6) to find it and add it to a post to see it in action") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactive-blocks-demos-99def1) | Interactive Blocks | INTERACTIVE BLOCK, MULTI BLOCK | `99def1` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/interactive-blocks-demos-99def1.zip "Install the plugin using this zip and activate it. Then use the ID of the block (99def1) to find it and add it to a post to see it in action") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/interactive-blocks-demos-99def1/_playground/blueprint.json "Use the ID of the block (99def1) to find it and add it to a post to see it in action") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/format-api-f14b86) | Format API | NO BLOCK | `f14b86` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/format-api-f14b86.zip "") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/format-api-f14b86/_playground/blueprint.json "") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/basic-esnext-a2ab62) | Basic ESNext | MINIMAL | `a2ab62` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/basic-esnext-a2ab62.zip "Install the plugin using this zip and activate it. Then use the ID of the block (a2ab62) to find it and add it to a post to see it in action") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/basic-esnext-a2ab62/_playground/blueprint.json "Use the ID of the block (a2ab62) to find it and add it to a post to see it in action") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/dynamic-block-b0bce7) | Dynamic Block | DYNAMIC RENDERING | `b0bce7` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/dynamic-block-b0bce7.zip "Install the plugin using this zip and activate it. Then use the ID of the block (b0bce7) to find it and add it to a post to see it in action") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/dynamic-block-b0bce7/_playground/blueprint.json "Use the ID of the block (b0bce7) to find it and add it to a post to see it in action") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-block-833d15) | Interactivity API Block | CREATE BLOCK TEMPLATE, INTERACTIVE BLOCK, INTERACTIVITY API | `833d15` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/interactivity-api-block-833d15.zip "Install the plugin using this zip and activate it. Then use the ID of the block (833d15) to find it and add it to a post to see it in action") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/interactivity-api-block-833d15/_playground/blueprint.json "Use the ID of the block (833d15) to find it and add it to a post to see it in action") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/meta-block-bb1e55) | Meta Block | META | `bb1e55` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/meta-block-bb1e55.zip "Install the plugin using this zip and activate it. Then use the ID of the block (bb1e55) to find it and add it to a post to see it in action") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/meta-block-bb1e55/_playground/blueprint.json "Use the ID of the block (bb1e55) to find it and add it to a post to see it in action") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/inner-blocks-dcd824) | Inner Blocks | | `dcd824` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/inner-blocks-dcd824.zip "Install the plugin using this zip and activate it. Then use the ID of the block (dcd824) to find it and add it to a post to see it in action") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/inner-blocks-dcd824/_playground/blueprint.json "Use the ID of the block (dcd824) to find it and add it to a post to see it in action") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/slotfill-2fb190) | SlotFill | NO BLOCK, SLOTFILL | `2fb190` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/slotfill-2fb190.zip "") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/slotfill-2fb190/_playground/blueprint.json "") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/block-toolbar-ab967f) | Block Toolbar Controls | BLOCK TOOLBAR | `ab967f` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/block-toolbar-ab967f.zip "Install the plugin using this zip and activate it. Then use the ID of the block (ab967f) to find it and add it to a post to see it in action") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/block-toolbar-ab967f/_playground/blueprint.json "Use the ID of the block (ab967f) to find it and add it to a post to see it in action") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/recipe-card-744e8a) | Recipe | | `744e8a` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/recipe-card-744e8a.zip "Install the plugin using this zip and activate it. Then use the ID of the block (744e8a) to find it and add it to a post to see it in action") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/recipe-card-744e8a/_playground/blueprint.json "Use the ID of the block (744e8a) to find it and add it to a post to see it in action") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/plugin-sidebar-9ee4a6) | Plugin Sidebar | SLOTFILL, META, NO BLOCK | `9ee4a6` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/plugin-sidebar-9ee4a6.zip "") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/plugin-sidebar-9ee4a6/_playground/blueprint.json "") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-countdown-3cd73e) | Interactivity API Countdown | DYNAMIC RENDERING, INTERACTIVE BLOCK, INTERACTIVITY API, undefined, BLOCK TOOLBAR | `3cd73e` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/interactivity-api-countdown-3cd73e.zip "Install the plugin using this zip and activate it. Then use the ID of the block (3cd73e) to find it and add it to a post to see it in action") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/interactivity-api-countdown-3cd73e/_playground/blueprint.json "Use the ID of the block (3cd73e) to find it and add it to a post to see it in action") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/settings-sidebar-82c525) | Block Settings Sidebar | | `82c525` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/settings-sidebar-82c525.zip "Install the plugin using this zip and activate it. Then use the ID of the block (82c525) to find it and add it to a post to see it in action") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/settings-sidebar-82c525/_playground/blueprint.json "Use the ID of the block (82c525) to find it and add it to a post to see it in action") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/post-meta-modal-2502fb) | Post Meta Modal | META, NO BLOCK | `2502fb` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/post-meta-modal-2502fb.zip "") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/post-meta-modal-2502fb/_playground/blueprint.json "") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-quiz-1835fa) | Interactivity API Quiz | INTERACTIVE BLOCK, INTERACTIVITY API | `1835fa` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/interactivity-api-quiz-1835fa.zip "Install the plugin using this zip and activate it. Then use the ID of the block (1835fa) to find it and add it to a post to see it in action") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/interactivity-api-quiz-1835fa/_playground/blueprint.json "Use the ID of the block (1835fa) to find it and add it to a post to see it in action") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-router-2f43f8) | Interactivity Router (regions) example | INTERACTIVITY API, INTERACTIVITY ROUTER | `2f43f8` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/interactivity-router-2f43f8.zip "Install the plugin using this zip and activate it. Then use the ID of the block (2f43f8) to find it and add it to a post to see it in action") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/interactivity-router-2f43f8/_playground/blueprint.json "Use the ID of the block (2f43f8) to find it and add it to a post to see it in action") |

## More info

Check the [WIKI](https://github.com/WordPress/block-development-examples/wiki) of this repo for more info about it:

1. **[Getting Started](https://github.com/WordPress/block-development-examples/wiki/01-Getting-Started)**
2. **[Examples](https://github.com/WordPress/block-development-examples/wiki/02-Examples)**
3. **[Tags](https://github.com/WordPress/block-development-examples/wiki/03-Tags)**
4. **[Why an ID for every example?](https://github.com/WordPress/block-development-examples/wiki/04-Why-an-ID-for-every-example%3F)**
5. **[Local Development Guide](https://github.com/WordPress/block-development-examples/wiki/05-Local-Development-Guide)**
6. **[Conventions for examples](https://github.com/WordPress/block-development-examples/wiki/06-Conventions-for-examples)**
7. **[Adding new examples](https://github.com/WordPress/block-development-examples/wiki/07-Adding-new-examples)**