Skip to content

Latest commit

 

History

History
56 lines (48 loc) · 31.5 KB

README.md

File metadata and controls

56 lines (48 loc) · 31.5 KB

Block Development Examples

Release with Examples Zips 🔍 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

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