Block Development Examples

Important

Go to the Block Development Examples Web App to navigate through the examples

 
Go to the Block Development Examples Web App
 

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

Example	Description	Tags	Download .zip	Live Demo
Basic Block with Dynamic Rendering	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	📦
Basic Block with Translations	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	📦
Block with Static Rendering	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	📦
Block Editable	Shows how to create a block with editable content using the block editor's core editing components and attributes.		📦
Non-block wp data with React	Demonstrates how to use @wordpress/data with React components outside of the block editor context, showing data management patterns.	no-block wp-data	📦
Minimal Block	A bare-bones example showing the minimum required code to create a functional WordPress block.	minimal featured	📦
Minimal Gutenberg Block (No Build)	Shows how to create a simple block without a build process, using vanilla JavaScript and WordPress's built-in scripts.	minimal no-build	📦
Interactive Blocks	Collection of examples showing how to create blocks with interactive features and client-side functionality.	interactive-block multi-block	📦
Format API	Demonstrates how to use the WordPress Format API to add custom text formatting options to the editor.	no-block	📦
Stylesheets	Shows different approaches to adding and managing styles in blocks, including editor-specific and front-end styles.	styles featured	📦
Basic ESNext	Demonstrates how to create a basic block using modern JavaScript (ESNext) and JSX syntax with a build process powered by @wordpress/scripts.	minimal	📦
Block Supports	Showcases how to use WordPress block supports to add standard features like alignment, colors, and typography to blocks.	supports featured	📦
Dynamic Block	Shows how to create blocks that render content dynamically using PHP, including data fetching and server-side rendering.	dynamic-rendering	📦
Interactivity API Block	Demonstrates the usage of WordPress's Interactivity API to create blocks with enhanced interactive capabilities.	create-block-template interactive-block interactivity-api	📦
Meta Block	Shows how to create blocks that read and save data to post meta, demonstrating integration with WordPress metadata system.	meta	📦
Inner Blocks	Demonstrates how to create blocks that can contain other blocks using InnerBlocks component.		📦
SlotFill	Shows how to use WordPress SlotFill system to extend the editor interface with custom components.	no-block slotfill	📦
Block Toolbar Controls	Demonstrates how to add custom controls to the block toolbar for enhanced block editing capabilities.	block-toolbar	📦
Recipe	A practical example showing how to create a complex block for recipe content with multiple editable fields and structured data.		📦
Plugin Sidebar	Shows how to add a custom sidebar to the editor using SlotFill and integrate it with post meta data.	slotfill meta no-block	📦
Data Basics - @wordpress/data	Introduction to using @wordpress/data for state management in WordPress, covering basic concepts and patterns.	no-block wp-data featured	📦
Copyright Date Block	Example of a block that combines both static and dynamic rendering to display copyright information.	dynamic-rendering static-rendering create-block featured	📦
Interactivity API Countdown	Advanced example showing how to create an interactive countdown timer using the WordPress Interactivity API.	dynamic-rendering interactive-block interactivity-api experimental block-toolbar	📦
Block Settings Sidebar	Demonstrates how to add custom settings panels to the block sidebar for additional block configuration options.		📦
Post Meta Modal	Shows how to create a modal interface for editing post meta data outside of the block context.	meta no-block	📦
Interactivity API Quiz	Demonstrates building an interactive quiz interface using the WordPress Interactivity API.	interactive-block interactivity-api	📦
Interactivity Router (regions) example	Shows how to implement client-side routing in blocks using the WordPress Interactivity API router functionality.	interactivity-api interactivity-router	📦
Server Side Render Block	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	📦

More info

Check the WIKI of this repo for more info about it:

1. Getting Started
2. Examples
3. Local Development Guide
4. Conventions for examples
5. Adding new examples