README updated

juanma-wp · Jan 7, 2025 · aec2033 · aec2033
1 parent ac94335
commit aec2033
Show file tree

Hide file tree

Showing 31 changed files with 147 additions and 183 deletions.
diff --git a/README.md b/README.md
diff --git 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
@@ -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
@@ -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
@@ -12,11 +12,9 @@ Key concepts covered:
 
 <!-- Please, do not remove these @TABLE EXAMPLES BEGIN and @TABLE EXAMPLES END comments or modify the table inside. This table is automatically generated from the data at _data/examples.json and _data/tags.json -->
 <!-- @TABLE EXAMPLES BEGIN -->
-
-| Example                                                                                                                                     | <span style="display: inline-block; width:250px">Description</span>                                                                                                                | 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. | <small><code><a href="https://WordPress.github.io/block-development-examples/?tags=static-rendering">static-rendering</a></code></small> | [📦](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 | <span style="display: inline-block; width:250px">Description</span> | 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. | <small><code><a href="https://WordPress.github.io/block-development-examples/?tags=static-rendering">static-rendering</a></code></small> | [📦](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" ) |
 <!-- @TABLE EXAMPLES END -->
 
 ## Understanding the Example Code

diff --git a/plugins/basic-esnext-a2ab62/README.md b/plugins/basic-esnext-a2ab62/README.md
@@ -12,11 +12,9 @@ Key concepts covered:
 
 <!-- Please, do not remove these @TABLE EXAMPLES BEGIN and @TABLE EXAMPLES END comments or modify the table inside. This table is automatically generated from the data at _data/examples.json and _data/tags.json -->
 <!-- @TABLE EXAMPLES BEGIN -->
-
-| Example                                                                                                        | <span style="display: inline-block; width:250px">Description</span>                                                                          | 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. | <small><code><a href="https://WordPress.github.io/block-development-examples/?tags=minimal">minimal</a></code></small> | [📦](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 | <span style="display: inline-block; width:250px">Description</span> | 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. | <small><code><a href="https://WordPress.github.io/block-development-examples/?tags=minimal">minimal</a></code></small> | [📦](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" ) |
 <!-- @TABLE EXAMPLES END -->
 
 ## Understanding the Example Code

diff --git a/plugins/block-dynamic-rendering-64756b/README.md b/plugins/block-dynamic-rendering-64756b/README.md
@@ -12,11 +12,9 @@ Key concepts covered:
 
 <!-- Please, do not remove these @TABLE EXAMPLES BEGIN and @TABLE EXAMPLES END comments or modify the table inside. This table is automatically generated from the data at _data/examples.json and _data/tags.json -->
 <!-- @TABLE EXAMPLES BEGIN -->
-
-| Example                                                                                                                                         | <span style="display: inline-block; width:250px">Description</span>                                                                               | 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. | <small><code><a href="https://WordPress.github.io/block-development-examples/?tags=dynamic-rendering">dynamic-rendering</a></code></small> <small><code><a href="https://WordPress.github.io/block-development-examples/?tags=create-block">create-block</a></code></small> | [📦](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 | <span style="display: inline-block; width:250px">Description</span> | 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. | <small><code><a href="https://WordPress.github.io/block-development-examples/?tags=dynamic-rendering">dynamic-rendering</a></code></small> <small><code><a href="https://WordPress.github.io/block-development-examples/?tags=create-block">create-block</a></code></small> | [📦](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" ) |
 <!-- @TABLE EXAMPLES END -->
 
 ## Understanding the Example Code