{"id":15677960,"url":"https://wordpress.github.io/block-development-examples/","last_synced_at":"2025-10-14T08:31:19.596Z","repository":{"id":192113862,"uuid":"686068927","full_name":"WordPress/block-development-examples","owner":"WordPress","description":"Practical examples for building WordPress blocks and extending the Editor.","archived":false,"fork":false,"pushed_at":"2025-04-22T16:23:09.000Z","size":72240,"stargazers_count":293,"open_issues_count":10,"forks_count":44,"subscribers_count":13,"default_branch":"trunk","last_synced_at":"2025-10-11T05:22:33.510Z","etag":null,"topics":["wordpress","wordpress-development"],"latest_commit_sha":null,"homepage":"https://wordpress.github.io/block-development-examples/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WordPress.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-09-01T17:01:59.000Z","updated_at":"2025-10-07T02:40:51.000Z","dependencies_parsed_at":"2023-09-02T17:16:39.353Z","dependency_job_id":"672519fc-7f4f-456a-a46d-da139bfec61c","html_url":"https://github.com/WordPress/block-development-examples","commit_stats":{"total_commits":539,"total_committers":8,"mean_commits":67.375,"dds":"0.18367346938775508","last_synced_commit":"ac55fc419ec7ad4f6b0f40bcd51d1dcd6ddd68f5"},"previous_names":["wordpress-juanmaguitar/wp-blocks-examples","wordpress-juanmaguitar/wp-block-development-examples","wptrainingteam/wp-block-development-examples","wptrainingteam/block-development-examples","wordpress/block-development-examples"],"tags_count":24,"template":false,"template_full_name":null,"purl":"pkg:github/WordPress/block-development-examples","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WordPress%2Fblock-development-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WordPress%2Fblock-development-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WordPress%2Fblock-development-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WordPress%2Fblock-development-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WordPress","download_url":"https://codeload.github.com/WordPress/block-development-examples/tar.gz/refs/heads/trunk","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WordPress%2Fblock-development-examples/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279018313,"owners_count":26086342,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["wordpress","wordpress-development"],"created_at":"2024-10-03T16:14:38.719Z","updated_at":"2025-10-14T08:31:19.589Z","avatar_url":"https://github.com/WordPress.png","language":"JavaScript","readme":"# Block Development Examples\n\n[![Release with Examples Zips](https://github.com/WordPress/block-development-examples/actions/workflows/release-zips.yml/badge.svg)](https://github.com/WordPress/block-development-examples/actions/workflows/release-zips.yml) [![šŸ” Static Linting](https://github.com/WordPress/block-development-examples/actions/workflows/static-linting.yml/badge.svg)](https://github.com/WordPress/block-development-examples/actions/workflows/static-linting.yml)\n\n\u003e [!IMPORTANT] \n\u003e Go to the Block Development Examples Web App to navigate through the examples\n\u003e\n\u003e [\u003ckbd\u003eā€ƒ\u003cbr\u003eGo to the Block Development Examples Web App\u003cbr\u003eā€ƒ\u003c/kbd\u003e](https://WordPress.github.io/block-development-examples)\n\nWelcome 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.\n\n**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**\n\n\u003c!-- Please, do not remove these @TABLE EXAMPLES BEGIN and @TABLE EXAMPLES END comments or modify the table inside. This table is automatically generated from the data at _data/examples.json and _data/tags.json --\u003e\n\u003c!-- @TABLE EXAMPLES BEGIN --\u003e\n\n| Example | \u003cspan style=\"display: inline-block; width:250px\"\u003eDescription\u003c/span\u003e | Tags | Download .zip | Live Demo |\n| ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [Basic Block with Dynamic Rendering](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/block-dynamic-rendering-64756b) | Demonstrates how to create a block that renders its content dynamically on the server side rather than saving static content in the post content. | \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=dynamic-rendering\"\u003edynamic-rendering\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=create-block\"\u003ecreate-block\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/block-dynamic-rendering-64756b.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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 'Click here to access a live demo of this example') |\n| [Basic Block with Translations](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/basic-block-translations-3df23d) | Shows how to implement internationalization (i18n) in a WordPress block using both PHP and JavaScript translations, demonstrating proper setup of translation files and functions. | \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=static-rendering\"\u003estatic-rendering\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/basic-block-translations-3df23d.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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 'Click here to access a live demo of this example') |\n| [Block with Static Rendering](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/block-static-rendering-b16608) | Illustrates how to create a block that saves its content as static HTML in the post content, showing the basic pattern for static block rendering. | \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=static-rendering\"\u003estatic-rendering\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=create-block\"\u003ecreate-block\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/block-static-rendering-b16608.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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 'Click here to access a live demo of this example') |\n| [Block Editable](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/editable-block-1b8c51) | Shows how to create a block with editable content using the block editor's core editing components and attributes. | | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/editable-block-1b8c51.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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 'Click here to access a live demo of this example') |\n| [Non-block wp data with React](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/non-block-react-wp-data-56d6f3) | Demonstrates how to use @wordpress/data with React components outside of the block editor context, showing data management patterns. | \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=no-block\"\u003eno-block\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=wp-data\"\u003ewp-data\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/non-block-react-wp-data-56d6f3.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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/non-block-react-wp-data-56d6f3/_playground/blueprint.json 'Click here to access a live demo of this example') |\n| [Minimal Block](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/minimal-block-ca6eda) | A bare-bones example showing the minimum required code to create a functional WordPress block. | \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=minimal\"\u003eminimal\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=featured\"\u003efeatured\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/minimal-block-ca6eda.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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 'Click here to access a live demo of this example') |\n| [Minimal Gutenberg Block (No Build)](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/minimal-block-no-build-e621a6) | Shows how to create a simple block without a build process, using vanilla JavaScript and WordPress's built-in scripts. | \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=minimal\"\u003eminimal\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=no-build\"\u003eno-build\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/minimal-block-no-build-e621a6.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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 'Click here to access a live demo of this example') |\n| [Interactive Blocks](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactive-blocks-demos-99def1) | Collection of examples showing how to create blocks with interactive features and client-side functionality. | \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=interactive-block\"\u003einteractive-block\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=multi-block\"\u003emulti-block\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/interactive-blocks-demos-99def1.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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 'Click here to access a live demo of this example') |\n| [Format API](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/format-api-f14b86) | Demonstrates how to use the WordPress Format API to add custom text formatting options to the editor. | \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=no-block\"\u003eno-block\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/format-api-f14b86.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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/format-api-f14b86/_playground/blueprint.json 'Click here to access a live demo of this example') |\n| [Stylesheets](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/stylesheets-79a4c3) | Shows different approaches to adding and managing styles in blocks, including editor-specific and front-end styles. | \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=styles\"\u003estyles\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=featured\"\u003efeatured\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/stylesheets-79a4c3.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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 'Click here to access a live demo of this example') |\n| [Basic ESNext](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/basic-esnext-a2ab62) | Demonstrates how to create a basic block using modern JavaScript (ESNext) and JSX syntax with a build process powered by @wordpress/scripts. | \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=minimal\"\u003eminimal\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/basic-esnext-a2ab62.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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 'Click here to access a live demo of this example') |\n| [Block Supports](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/block-supports-6aa4dd) | Showcases how to use WordPress block supports to add standard features like alignment, colors, and typography to blocks. | \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=supports\"\u003esupports\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=featured\"\u003efeatured\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/block-supports-6aa4dd.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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 'Click here to access a live demo of this example') |\n| [Dynamic Block](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/dynamic-block-b0bce7) | Shows how to create blocks that render content dynamically using PHP, including data fetching and server-side rendering. | \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=dynamic-rendering\"\u003edynamic-rendering\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/dynamic-block-b0bce7.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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 'Click here to access a live demo of this example') |\n| [Interactivity API Block](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/my-first-interactive-block) | Demonstrates the usage of WordPress's Interactivity API to create blocks with enhanced interactive capabilities. | \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=create-block-template\"\u003ecreate-block-template\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=interactive-block\"\u003einteractive-block\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=interactivity-api\"\u003einteractivity-api\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/my-first-interactive-block.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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/my-first-interactive-block/_playground/blueprint.json 'Click here to access a live demo of this example') |\n| [Meta Block](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/meta-block-bb1e55) | Shows how to create blocks that read and save data to post meta, demonstrating integration with WordPress metadata system. | \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=meta\"\u003emeta\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/meta-block-bb1e55.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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 'Click here to access a live demo of this example') |\n| [Inner Blocks](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/inner-blocks-dcd824) | Demonstrates how to create blocks that can contain other blocks using InnerBlocks component. | | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/inner-blocks-dcd824.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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 'Click here to access a live demo of this example') |\n| [SlotFill](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/slotfill-2fb190) | Shows how to use WordPress SlotFill system to extend the editor interface with custom components. | \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=no-block\"\u003eno-block\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=slotfill\"\u003eslotfill\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/slotfill-2fb190.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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/slotfill-2fb190/_playground/blueprint.json 'Click here to access a live demo of this example') |\n| [Block Toolbar Controls](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/block-toolbar-ab967f) | Demonstrates how to add custom controls to the block toolbar for enhanced block editing capabilities. | \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=block-toolbar\"\u003eblock-toolbar\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/block-toolbar-ab967f.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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 'Click here to access a live demo of this example') |\n| [Recipe](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/recipe-card-744e8a) | A practical example showing how to create a complex block for recipe content with multiple editable fields and structured data. | | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/recipe-card-744e8a.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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 'Click here to access a live demo of this example') |\n| [Plugin Sidebar](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/plugin-sidebar-9ee4a6) | Shows how to add a custom sidebar to the editor using SlotFill and integrate it with post meta data. | \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=slotfill\"\u003eslotfill\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=meta\"\u003emeta\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=no-block\"\u003eno-block\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/plugin-sidebar-9ee4a6.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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/plugin-sidebar-9ee4a6/_playground/blueprint.json 'Click here to access a live demo of this example') |\n| [Data Basics - @wordpress/data](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) | Introduction to using @wordpress/data for state management in WordPress, covering basic concepts and patterns. | \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=no-block\"\u003eno-block\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=wp-data\"\u003ewp-data\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=featured\"\u003efeatured\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/data-basics-59c8f8.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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/data-basics-59c8f8/_playground/blueprint.json 'Click here to access a live demo of this example') |\n| [Copyright Date Block](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/copyright-date-block-09aac3) | Example of a block that combines both static and dynamic rendering to display copyright information. | \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=dynamic-rendering\"\u003edynamic-rendering\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=static-rendering\"\u003estatic-rendering\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=create-block\"\u003ecreate-block\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=featured\"\u003efeatured\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/copyright-date-block-09aac3.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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 'Click here to access a live demo of this example') |\n| [Interactivity API Countdown](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-countdown-3cd73e) | Advanced example showing how to create an interactive countdown timer using the WordPress Interactivity API. | \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=dynamic-rendering\"\u003edynamic-rendering\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=interactive-block\"\u003einteractive-block\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=interactivity-api\"\u003einteractivity-api\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=experimental\"\u003eexperimental\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=block-toolbar\"\u003eblock-toolbar\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/interactivity-api-countdown-3cd73e.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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 'Click here to access a live demo of this example') |\n| [Block Settings Sidebar](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/settings-sidebar-82c525) | Demonstrates how to add custom settings panels to the block sidebar for additional block configuration options. | | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/settings-sidebar-82c525.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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 'Click here to access a live demo of this example') |\n| [Post Meta Modal](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/post-meta-modal-2502fb) | Shows how to create a modal interface for editing post meta data outside of the block context. | \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=meta\"\u003emeta\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=no-block\"\u003eno-block\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/post-meta-modal-2502fb.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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/post-meta-modal-2502fb/_playground/blueprint.json 'Click here to access a live demo of this example') |\n| [Interactivity API Quiz](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-quiz-1835fa) | Demonstrates building an interactive quiz interface using the WordPress Interactivity API. | \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=interactive-block\"\u003einteractive-block\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=interactivity-api\"\u003einteractivity-api\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/interactivity-api-quiz-1835fa.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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 'Click here to access a live demo of this example') |\n| [Interactivity Router (regions) example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-router-2f43f8) | Shows how to implement client-side routing in blocks using the WordPress Interactivity API router functionality. | \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=interactivity-api\"\u003einteractivity-api\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=interactivity-router\"\u003einteractivity-router\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/interactivity-router-2f43f8.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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 'Click here to access a live demo of this example') |\n| [Server Side Render Block](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/server-side-render-block-d26119) | This example demonstrates how to build a simple block that is rendered on the server and displayed in the Editor using the `ServerSideRender` component. | \u003csmall\u003e\u003ccode\u003e\u003ca href=\"https://WordPress.github.io/block-development-examples/?tags=server-side-rendering\"\u003eserver-side-rendering\u003c/a\u003e\u003c/code\u003e\u003c/small\u003e | [šŸ“¦](https://github.com/WordPress/block-development-examples/releases/download/latest/server-side-render-block-d26119.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example 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/server-side-render-block-d26119/_playground/blueprint.json 'Click here to access a live demo of this example') |\n\n\u003c!-- @TABLE EXAMPLES END --\u003e\n\n## More info\n\nCheck the [WIKI](https://github.com/WordPress/block-development-examples/wiki) of this repo for more info about it:\n\n1. **[Getting Started](https://github.com/WordPress/block-development-examples/wiki/Getting-Started)**\n2. **[Examples](https://github.com/WordPress/block-development-examples/wiki/Examples)**\n3. **[Local Development Guide](https://github.com/WordPress/block-development-examples/wiki/Local-Development-Guide)**\n4. **[Conventions for examples](https://github.com/WordPress/block-development-examples/wiki/Conventions-for-examples)**\n5. **[Adding new examples](https://github.com/WordPress/block-development-examples/wiki/Adding-new-examples)**\n","funding_links":[],"categories":["Applications"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/wordpress.github.io%2Fblock-development-examples%2F","html_url":"https://awesome.ecosyste.ms/projects/wordpress.github.io%2Fblock-development-examples%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/wordpress.github.io%2Fblock-development-examples%2F/lists"}