Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 5 days ago
JSON representation
Practical examples for building WordPress blocks and extending the Editor.
- Host: GitHub
- URL: https://github.com/wordpress/block-development-examples
- Owner: WordPress
- License: gpl-2.0
- Created: 2023-09-01T17:01:59.000Z (over 1 year ago)
- Default Branch: trunk
- Last Pushed: 2024-10-25T17:55:46.000Z (3 months ago)
- Last Synced: 2024-10-29T14:14:11.968Z (3 months ago)
- Topics: wordpress, wordpress-development
- Language: JavaScript
- Homepage: https://wordpress.github.io/block-development-examples/
- Size: 67.9 MB
- Stars: 203
- Watchers: 9
- Forks: 31
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Block Development Examples
[](https://github.com/WordPress/block-development-examples/actions/workflows/release-zips.yml) [](https://github.com/WordPress/block-development-examples/actions/workflows/static-linting.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  of each example**
| Example | Description | Tags |Download .zip | Live Demo |
| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [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. | dynamic-rendering create-block | [📦](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://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" ) |
| [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. | static-rendering | [📦](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://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" ) |
| [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. | static-rendering create-block | [📦](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://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" ) |
| [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://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" ) |
| [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. | no-block wp-data | [📦](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://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" ) |
| [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. | minimal featured | [📦](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://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" ) |
| [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. | minimal no-build | [📦](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://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" ) |
| [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. | interactive-block multi-block | [📦](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://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" ) |
| [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. | no-block | [📦](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://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" ) |
| [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. | styles featured | [📦](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://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" ) |
| [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. | minimal | [📦](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://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" ) |
| [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. | supports featured | [📦](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://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" ) |
| [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. | dynamic-rendering | [📦](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://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" ) |
| [Interactivity API Block](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-block-833d15) | Demonstrates the usage of WordPress's Interactivity API to create blocks with enhanced interactive capabilities. | create-block-template interactive-block interactivity-api | [📦](https://github.com/WordPress/block-development-examples/releases/download/latest/interactivity-api-block-833d15.zip "Install the plugin on any WordPress site using this zip and activate it to see the example in action") | [](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/interactivity-api-block-833d15/_playground/blueprint.json "Click here to access a live demo of this example" ) |
| [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. | meta | [📦](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://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" ) |
| [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://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" ) |
| [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. | no-block slotfill | [📦](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://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" ) |
| [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. | block-toolbar | [📦](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://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" ) |
| [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://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" ) |
| [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. | slotfill meta no-block | [📦](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://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" ) |
| [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. | no-block wp-data featured | [📦](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://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" ) |
| [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. | dynamic-rendering static-rendering create-block featured | [📦](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://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" ) |
| [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. | dynamic-rendering interactive-block interactivity-api experimental block-toolbar | [📦](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://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" ) |
| [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://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" ) |
| [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. | meta no-block | [📦](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://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" ) |
| [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. | interactive-block interactivity-api | [📦](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://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" ) |
| [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. | interactivity-api interactivity-router | [📦](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://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" ) |
| [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. | server-side-rendering | [📦](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://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" ) |
## 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/Getting-Started)**
2. **[Examples](https://github.com/WordPress/block-development-examples/wiki/Examples)**
3. **[Local Development Guide](https://github.com/WordPress/block-development-examples/wiki/Local-Development-Guide)**
4. **[Conventions for examples](https://github.com/WordPress/block-development-examples/wiki/Conventions-for-examples)**
5. **[Adding new examples](https://github.com/WordPress/block-development-examples/wiki/Adding-new-examples)**