WordPress / block-development-examples

Practical examples for building WordPress blocks and extending the Editor.
https://wordpress.github.io/block-development-examples/
GNU General Public License v2.0
213 stars 32 forks source link
wordpress wordpress-development

Block Development Examples

zips on deploy branch Static Linting

[!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 (plugin)

Folder Short description Tags ID (❓) Download .zip Live Demo
πŸ“ Minimal Block MINIMAL, FEATURED ca6eda πŸ“¦
πŸ“ Stylesheets STYLES, FEATURED 79a4c3 πŸ“¦
πŸ“ Block Supports SUPPORTS, FEATURED 6aa4dd πŸ“¦
πŸ“ Data Basics - @wordpress/data NO BLOCK, WP DATA, FEATURED 59c8f8 πŸ“¦
πŸ“ Copyright Date Block DYNAMIC RENDERING, STATIC RENDERING, CREATE BLOCK, FEATURED 09aac3 πŸ“¦
πŸ“ Basic Block with Dynamic Rendering DYNAMIC RENDERING, CREATE BLOCK 64756b πŸ“¦
πŸ“ Basic Block with Translations STATIC RENDERING 3df23d πŸ“¦
πŸ“ Block with Static Rendering STATIC RENDERING, CREATE BLOCK b16608 πŸ“¦
πŸ“ Block Editable 1b8c51 πŸ“¦
πŸ“ Non-block wp data with React NO BLOCK, WP DATA 56d6f3 πŸ“¦
πŸ“ Minimal Gutenberg Block (No Build) MINIMAL, NO BUILD e621a6 πŸ“¦
πŸ“ Interactive Blocks INTERACTIVE BLOCK, MULTI BLOCK 99def1 πŸ“¦
πŸ“ Format API NO BLOCK f14b86 πŸ“¦
πŸ“ Basic ESNext MINIMAL a2ab62 πŸ“¦
πŸ“ Dynamic Block DYNAMIC RENDERING b0bce7 πŸ“¦
πŸ“ Interactivity API Block CREATE BLOCK TEMPLATE, INTERACTIVE BLOCK, INTERACTIVITY API 833d15 πŸ“¦
πŸ“ Meta Block META bb1e55 πŸ“¦
πŸ“ Inner Blocks dcd824 πŸ“¦
πŸ“ SlotFill NO BLOCK, SLOTFILL 2fb190 πŸ“¦
πŸ“ Block Toolbar Controls BLOCK TOOLBAR ab967f πŸ“¦
πŸ“ Recipe 744e8a πŸ“¦
πŸ“ Plugin Sidebar SLOTFILL, META, NO BLOCK 9ee4a6 πŸ“¦
πŸ“ Interactivity API Countdown DYNAMIC RENDERING, INTERACTIVE BLOCK, INTERACTIVITY API, undefined, BLOCK TOOLBAR 3cd73e πŸ“¦
πŸ“ Block Settings Sidebar 82c525 πŸ“¦
πŸ“ Post Meta Modal META, NO BLOCK 2502fb πŸ“¦
πŸ“ Interactivity API Quiz INTERACTIVE BLOCK, INTERACTIVITY API 1835fa πŸ“¦
πŸ“ Interactivity Router (regions) example INTERACTIVITY API, INTERACTIVITY ROUTER 2f43f8 πŸ“¦

More info

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

  1. Getting Started
  2. Examples
  3. Tags
  4. Why an ID for every example?
  5. Local Development Guide
  6. Conventions for examples
  7. Adding new examples