From aec203371eb574f24133d19b940b4f1efe408d36 Mon Sep 17 00:00:00 2001 From: JuanMa Garrido Date: Tue, 7 Jan 2025 18:20:46 +0100 Subject: [PATCH] README updated --- README.md | 62 +++++++++---------- _app/README.md | 42 ++++++++----- _data/examples.json | 5 +- _data/tags.json | 5 ++ .../basic-block-translations-3df23d/README.md | 8 +-- plugins/basic-esnext-a2ab62/README.md | 8 +-- .../block-dynamic-rendering-64756b/README.md | 8 +-- .../block-static-rendering-b16608/README.md | 8 +-- plugins/block-supports-6aa4dd/README.md | 8 +-- plugins/block-toolbar-ab967f/README.md | 8 +-- plugins/copyright-date-block-09aac3/README.md | 8 +-- plugins/data-basics-59c8f8/README.md | 8 +-- plugins/dynamic-block-b0bce7/README.md | 8 +-- plugins/editable-block-1b8c51/README.md | 8 +-- plugins/format-api-f14b86/README.md | 8 +-- plugins/inner-blocks-dcd824/README.md | 8 +-- .../interactive-blocks-demos-99def1/README.md | 8 +-- .../README.md | 8 +-- .../interactivity-api-quiz-1835fa/README.md | 8 +-- plugins/interactivity-router-2f43f8/README.md | 8 +-- plugins/meta-block-bb1e55/README.md | 8 +-- plugins/minimal-block-ca6eda/README.md | 8 +-- .../minimal-block-no-build-e621a6/README.md | 8 +-- .../non-block-react-wp-data-56d6f3/README.md | 8 +-- plugins/plugin-sidebar-9ee4a6/README.md | 8 +-- plugins/post-meta-modal-2502fb/README.md | 8 +-- plugins/recipe-card-744e8a/README.md | 8 +-- .../server-side-render-block-d26119/README.md | 8 +-- plugins/settings-sidebar-82c525/README.md | 8 +-- plugins/slotfill-2fb190/README.md | 8 +-- plugins/stylesheets-79a4c3/README.md | 8 +-- 31 files changed, 147 insertions(+), 183 deletions(-) diff --git a/README.md b/README.md index 39b44159..8b2abe71 100644 --- a/README.md +++ b/README.md @@ -13,38 +13,36 @@ Welcome to the `block-development-examples` repo on GitHub. Here you can find a - -| 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://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') | -| [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://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') | -| [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://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') | -| [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') | -| [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://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') | -| [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://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') | -| [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://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') | -| [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://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') | -| [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://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') | -| [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://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') | -| [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://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') | -| [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://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') | -| [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://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') | -| [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://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-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://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') | -| [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') | -| [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://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') | -| [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://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') | -| [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') | -| [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://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') | -| [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://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') | -| [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://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') | -| [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://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') | -| [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') | -| [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://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') | -| [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://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') | -| [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://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') | -| [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. | dynamic-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://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') | - +| 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://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" ) | +| [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://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" ) | +| [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://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" ) | +| [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" ) | +| [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://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" ) | +| [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://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" ) | +| [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://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" ) | +| [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://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" ) | +| [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://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" ) | +| [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://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" ) | +| [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://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" ) | +| [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://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" ) | +| [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://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" ) | +| [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://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-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://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" ) | +| [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" ) | +| [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://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" ) | +| [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://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" ) | +| [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" ) | +| [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://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" ) | +| [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://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" ) | +| [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://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" ) | +| [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://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" ) | +| [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" ) | +| [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://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" ) | +| [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://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" ) | +| [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://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" ) | +| [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://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" ) | ## More info diff --git a/_app/README.md b/_app/README.md index 9562c662..b902ca81 100644 --- a/_app/README.md +++ b/_app/README.md @@ -4,15 +4,15 @@ A modern web application built with React, TypeScript, and Tailwind CSS that sho ## Features -- 🔍 Search functionality across all examples -- 🏷️ Filter by multiple tags -- 📱 Responsive design -- 🔗 URL-based filtering (shareable filtered views) -- 📅 Automatic sorting by last update date -- 📄 Pagination support -- Built with Vite for fast development experience -- Uses TypeScript for type safety -- Styled with Tailwind CSS +- 🔍 Search functionality across all examples +- 🏷️ Filter by multiple tags +- 📱 Responsive design +- 🔗 URL-based filtering (shareable filtered views) +- 📅 Automatic sorting by last update date +- 📄 Pagination support +- Built with Vite for fast development experience +- Uses TypeScript for type safety +- Styled with Tailwind CSS ## Project Structure @@ -39,29 +39,43 @@ src/ ### Prerequisites -- Node.js 16.x or later -- npm 7.x or later +- Node.js 16.x or later +- npm 7.x or later ### Installation -- Install dependencies: +- Install dependencies: ```bash npm install ``` -- Start the development server: +- Start the development server: ```bash npm run dev ``` -- Open your browser and visit: +- Open your browser and visit: ``` http://localhost:5173 ``` +### Production + +To generate a production build we do from `/_app` + +```bash +npm run build +``` + +To deployy the production build we do from the root of the project `/` + +```bash +npm run gh:deploy +``` + ## License This project is licensed under the MIT License - see the LICENSE file for details. diff --git a/_data/examples.json b/_data/examples.json index c17c1c07..0327d3da 100644 --- a/_data/examples.json +++ b/_data/examples.json @@ -400,10 +400,11 @@ "description": "This example demonstrates how to build a simple block that is rendered on the server and displayed in the Editor using the `ServerSideRender` component.", "name": "Server Side Render Block", "tags": [ - "dynamic-rendering" + "server-side-rendering" ], "contributors": [ - "ndiego" + "ndiego", + "juanmaguitar" ], "created": "2024-12-13T06:13:26+01:00", "lastModified": "2024-12-13T06:13:26+01:00" diff --git a/_data/tags.json b/_data/tags.json index f1bf3e33..cba3cc3d 100644 --- a/_data/tags.json +++ b/_data/tags.json @@ -93,5 +93,10 @@ "slug": "interactivity-router", "name": "INTERACTIVITY ROUTER", "description": "These examples demonstrate how to implement client-side routing using the WordPress Interactivity API's router functionality." + }, + { + "slug": "server-side-rendering", + "name": "SERVER SIDE RENDERING", + "description": "These examples demonstrate how to build a simple block that is rendered on the server and displayed in the Editor using the [`ServerSideRender` component](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-server-side-render/)." } ] diff --git a/plugins/basic-block-translations-3df23d/README.md b/plugins/basic-block-translations-3df23d/README.md index f742396b..39a244b8 100644 --- a/plugins/basic-block-translations-3df23d/README.md +++ b/plugins/basic-block-translations-3df23d/README.md @@ -12,11 +12,9 @@ Key concepts covered: - -| Example | Description | Tags | Download .zip | Live Demo | -| ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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://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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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://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" ) | ## Understanding the Example Code diff --git a/plugins/basic-esnext-a2ab62/README.md b/plugins/basic-esnext-a2ab62/README.md index b3e6e4d9..b7993bbf 100644 --- a/plugins/basic-esnext-a2ab62/README.md +++ b/plugins/basic-esnext-a2ab62/README.md @@ -12,11 +12,9 @@ Key concepts covered: - -| Example | Description | Tags | Download .zip | Live Demo | -| -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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://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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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://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" ) | ## Understanding the Example Code diff --git a/plugins/block-dynamic-rendering-64756b/README.md b/plugins/block-dynamic-rendering-64756b/README.md index 7f4417a4..d97c182e 100644 --- a/plugins/block-dynamic-rendering-64756b/README.md +++ b/plugins/block-dynamic-rendering-64756b/README.md @@ -12,11 +12,9 @@ Key concepts covered: - -| 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://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') | - +| 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://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" ) | ## Understanding the Example Code diff --git a/plugins/block-static-rendering-b16608/README.md b/plugins/block-static-rendering-b16608/README.md index 76c655b3..1deda67a 100644 --- a/plugins/block-static-rendering-b16608/README.md +++ b/plugins/block-static-rendering-b16608/README.md @@ -12,11 +12,9 @@ Key concepts covered: - -| Example | Description | Tags | Download .zip | Live Demo | -| --------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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://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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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://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" ) | ## Understanding the Example Code diff --git a/plugins/block-supports-6aa4dd/README.md b/plugins/block-supports-6aa4dd/README.md index 21d443ae..fd2a209d 100644 --- a/plugins/block-supports-6aa4dd/README.md +++ b/plugins/block-supports-6aa4dd/README.md @@ -12,11 +12,9 @@ Key concepts covered: - -| Example | Description | Tags | Download .zip | Live Demo | -| ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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://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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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://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" ) | ## Understanding the Example Code diff --git a/plugins/block-toolbar-ab967f/README.md b/plugins/block-toolbar-ab967f/README.md index b17da0cc..eb91142d 100644 --- a/plugins/block-toolbar-ab967f/README.md +++ b/plugins/block-toolbar-ab967f/README.md @@ -6,11 +6,9 @@ The goal of this example is to show how to implement custom "Block Toolbar" cont - -| Example | Description | Tags | Download .zip | Live Demo | -| ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| [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://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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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://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" ) | ## Understanding the Example Code diff --git a/plugins/copyright-date-block-09aac3/README.md b/plugins/copyright-date-block-09aac3/README.md index 94f5cda0..8f69d125 100644 --- a/plugins/copyright-date-block-09aac3/README.md +++ b/plugins/copyright-date-block-09aac3/README.md @@ -10,11 +10,9 @@ npx @wordpress/create-block copyright-date-block --template @wordpress/create-bl - -| Example | Description | Tags | Download .zip | Live Demo | -| ------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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://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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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://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" ) | ## Understanding the Example Code diff --git a/plugins/data-basics-59c8f8/README.md b/plugins/data-basics-59c8f8/README.md index 833f769a..c82952c0 100644 --- a/plugins/data-basics-59c8f8/README.md +++ b/plugins/data-basics-59c8f8/README.md @@ -4,11 +4,9 @@ This example shows how to create a React app in a WordPress admin page. A detail - -| Example | Description | Tags | Download .zip | Live Demo | -| ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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://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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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://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" ) | ## Understanding the Example Code diff --git a/plugins/dynamic-block-b0bce7/README.md b/plugins/dynamic-block-b0bce7/README.md index 2576abe8..f4c053c6 100644 --- a/plugins/dynamic-block-b0bce7/README.md +++ b/plugins/dynamic-block-b0bce7/README.md @@ -11,11 +11,9 @@ Key concepts covered: - -| Example | Description | Tags | Download .zip | Live Demo | -| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| [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://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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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://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" ) | ## Understanding the Example Code diff --git a/plugins/editable-block-1b8c51/README.md b/plugins/editable-block-1b8c51/README.md index a2615ed1..13563702 100644 --- a/plugins/editable-block-1b8c51/README.md +++ b/plugins/editable-block-1b8c51/README.md @@ -6,11 +6,9 @@ This block also show the use of e2e testing for a block. - -| Example | Description | Tags | Download .zip | Live Demo | -| ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ | ---- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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" ) | ## Understanding the Example Code diff --git a/plugins/format-api-f14b86/README.md b/plugins/format-api-f14b86/README.md index d8bb4f26..5462b591 100644 --- a/plugins/format-api-f14b86/README.md +++ b/plugins/format-api-f14b86/README.md @@ -14,11 +14,9 @@ Key concepts covered: - -| Example | Description | Tags | Download .zip | Live Demo | -| ---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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://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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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://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" ) | ## Understanding the Example Code diff --git a/plugins/inner-blocks-dcd824/README.md b/plugins/inner-blocks-dcd824/README.md index 27caf860..9a7be109 100644 --- a/plugins/inner-blocks-dcd824/README.md +++ b/plugins/inner-blocks-dcd824/README.md @@ -4,11 +4,9 @@ The goal of this example is to show how the component `InnerBlocks` allows to cr - -| Example | Description | Tags | Download .zip | Live Demo | -| -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ---- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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" ) | ## Understanding the Example Code diff --git a/plugins/interactive-blocks-demos-99def1/README.md b/plugins/interactive-blocks-demos-99def1/README.md index 51ef79ad..0a81f2cd 100644 --- a/plugins/interactive-blocks-demos-99def1/README.md +++ b/plugins/interactive-blocks-demos-99def1/README.md @@ -14,11 +14,9 @@ _This example has been adapted from [the original one](https://github.com/wptrai - -| Example | Description | Tags | Download .zip | Live Demo | -| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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://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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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://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" ) | ## Understanding the Example Code diff --git a/plugins/interactivity-api-countdown-3cd73e/README.md b/plugins/interactivity-api-countdown-3cd73e/README.md index f39d8db5..ba15b4e6 100644 --- a/plugins/interactivity-api-countdown-3cd73e/README.md +++ b/plugins/interactivity-api-countdown-3cd73e/README.md @@ -7,11 +7,9 @@ - -| Example | Description | Tags | Download .zip | Live Demo | -| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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://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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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://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" ) | ## Understanding the Example Code diff --git a/plugins/interactivity-api-quiz-1835fa/README.md b/plugins/interactivity-api-quiz-1835fa/README.md index b74d6412..0fed1b52 100644 --- a/plugins/interactivity-api-quiz-1835fa/README.md +++ b/plugins/interactivity-api-quiz-1835fa/README.md @@ -6,11 +6,9 @@ This example has been adapted (to use the latest API of the Interactivity API) f - -| Example | Description | Tags | Download .zip | Live Demo | -| ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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://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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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://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" ) | ## Understanding the Example Code diff --git a/plugins/interactivity-router-2f43f8/README.md b/plugins/interactivity-router-2f43f8/README.md index 5ee2d496..9e3b5df2 100644 --- a/plugins/interactivity-router-2f43f8/README.md +++ b/plugins/interactivity-router-2f43f8/README.md @@ -4,11 +4,9 @@ This example demonstrates how to use regions with the `@wordpress/interactivity- - -| Example | Description | Tags | Download .zip | Live Demo | -| ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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://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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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://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" ) | ## Understanding the Example Code diff --git a/plugins/meta-block-bb1e55/README.md b/plugins/meta-block-bb1e55/README.md index b112318b..dcb77f79 100644 --- a/plugins/meta-block-bb1e55/README.md +++ b/plugins/meta-block-bb1e55/README.md @@ -12,11 +12,9 @@ Key concepts covered: - -| Example | Description | Tags | Download .zip | Live Demo | -| ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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://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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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://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" ) | ## Understanding the Example Code diff --git a/plugins/minimal-block-ca6eda/README.md b/plugins/minimal-block-ca6eda/README.md index fcb388e1..87bf2992 100644 --- a/plugins/minimal-block-ca6eda/README.md +++ b/plugins/minimal-block-ca6eda/README.md @@ -6,11 +6,9 @@ This example contains a plugin that register a minimal block that has been defin - -| Example | Description | Tags | Download .zip | Live Demo | -| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| [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://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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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://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" ) | ## Understanding the Example Code diff --git a/plugins/minimal-block-no-build-e621a6/README.md b/plugins/minimal-block-no-build-e621a6/README.md index 06dc34c8..b9ef471c 100644 --- a/plugins/minimal-block-no-build-e621a6/README.md +++ b/plugins/minimal-block-no-build-e621a6/README.md @@ -4,11 +4,9 @@ This example demonstrates how to create a basic Gutenberg block without requirin - -| Example | Description | Tags | Download .zip | Live Demo | -| ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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://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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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://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" ) | ## Understanding the Example Code diff --git a/plugins/non-block-react-wp-data-56d6f3/README.md b/plugins/non-block-react-wp-data-56d6f3/README.md index fbf928dc..a9ece749 100644 --- a/plugins/non-block-react-wp-data-56d6f3/README.md +++ b/plugins/non-block-react-wp-data-56d6f3/README.md @@ -4,11 +4,9 @@ This example demonstrates how to create a React application within the WordPress - -| Example | Description | Tags | Download .zip | Live Demo | -| ----------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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://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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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://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" ) | ## Understanding the Example Code diff --git a/plugins/plugin-sidebar-9ee4a6/README.md b/plugins/plugin-sidebar-9ee4a6/README.md index c15d3e74..6feee4ff 100644 --- a/plugins/plugin-sidebar-9ee4a6/README.md +++ b/plugins/plugin-sidebar-9ee4a6/README.md @@ -14,11 +14,9 @@ Key concepts covered: - -| Example | Description | Tags | Download .zip | Live Demo | -| ------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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://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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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://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" ) | ## Understanding the Example Code diff --git a/plugins/post-meta-modal-2502fb/README.md b/plugins/post-meta-modal-2502fb/README.md index 9656bdd2..99e073c2 100644 --- a/plugins/post-meta-modal-2502fb/README.md +++ b/plugins/post-meta-modal-2502fb/README.md @@ -6,11 +6,9 @@ This example adds a modal in the Post Editor that allows users to define custom - -| Example | Description | Tags | Download .zip | Live Demo | -| -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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://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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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://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" ) | ## Overview diff --git a/plugins/recipe-card-744e8a/README.md b/plugins/recipe-card-744e8a/README.md index 42c121d7..a76b952d 100644 --- a/plugins/recipe-card-744e8a/README.md +++ b/plugins/recipe-card-744e8a/README.md @@ -4,11 +4,9 @@ This example demonstrates how to create a feature-rich custom block for recipe c - -| Example | Description | Tags | Download .zip | Live Demo | -| ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ---- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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" ) | ## Understanding the Example Code diff --git a/plugins/server-side-render-block-d26119/README.md b/plugins/server-side-render-block-d26119/README.md index e30c41c1..0897e104 100644 --- a/plugins/server-side-render-block-d26119/README.md +++ b/plugins/server-side-render-block-d26119/README.md @@ -4,11 +4,9 @@ This example demonstrates how to build a simple block that is rendered on the se - -| Example | Description | Tags | Download .zip | Live Demo | -| -------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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. | dynamic-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://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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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://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" ) | ## Understanding the Example Code diff --git a/plugins/settings-sidebar-82c525/README.md b/plugins/settings-sidebar-82c525/README.md index 202c8845..c608cfcd 100644 --- a/plugins/settings-sidebar-82c525/README.md +++ b/plugins/settings-sidebar-82c525/README.md @@ -12,11 +12,9 @@ Key concepts covered: - -| Example | Description | Tags | Download .zip | Live Demo | -| ---------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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" ) | ## Understanding the Example Code diff --git a/plugins/slotfill-2fb190/README.md b/plugins/slotfill-2fb190/README.md index 2777beae..c752629f 100644 --- a/plugins/slotfill-2fb190/README.md +++ b/plugins/slotfill-2fb190/README.md @@ -7,11 +7,9 @@ This example demonstrates how to use WordPress SlotFill system to extend the edi - -| Example | Description | Tags | Download .zip | Live Demo | -| ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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://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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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://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" ) | See Individual Examples: diff --git a/plugins/stylesheets-79a4c3/README.md b/plugins/stylesheets-79a4c3/README.md index 08823c95..62b2da4b 100644 --- a/plugins/stylesheets-79a4c3/README.md +++ b/plugins/stylesheets-79a4c3/README.md @@ -12,11 +12,9 @@ Key concepts covered: - -| Example | Description | Tags | Download .zip | Live Demo | -| ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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://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') | - +| Example | Description | Tags |Download .zip | Live Demo | +| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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://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" ) | ## Understanding the Example Code