Reviewed README.md of all examples

juanma-wp · Jan 7, 2025 · 753766d · 753766d
1 parent bafd9fc
commit 753766d
Show file tree

Hide file tree

Showing 26 changed files with 261 additions and 187 deletions.
diff --git a/_data/examples.json b/_data/examples.json
@@ -394,5 +394,18 @@
 		],
 		"created": "2024-10-03T15:29:11+01:00",
 		"lastModified": "2024-12-13T06:13:26+01:00"
+	},
+	{
+		"slug": "server-side-render-block-d26119",
+		"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"
+		],
+		"contributors": [
+			"ndiego"
+		],
+		"created": "2024-12-13T06:13:26+01:00",
+		"lastModified": "2024-12-13T06:13:26+01:00"
 	}
 ]
diff --git a/plugins/basic-block-translations-3df23d/README.md b/plugins/basic-block-translations-3df23d/README.md
@@ -12,9 +12,11 @@ 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/juanma-wp/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://juanma-wp.github.io/block-development-examples/?tags=static-rendering">static-rendering</a></code></small> | [📦](https://github.com/juanma-wp/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/juanma-wp/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/juanma-wp/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/juanma-wp/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://juanma-wp.github.io/block-development-examples/?tags=static-rendering">static-rendering</a></code></small> | [📦](https://github.com/juanma-wp/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/juanma-wp/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/juanma-wp/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
@@ -98,12 +100,9 @@ Key concepts covered:
 -   Maintain context information
 -   Keep strings translatable
 
--   The [`__` function](https://developer.wordpress.org/reference/functions/__/) receives the
-    text and a namespace as parameters
--   At `index.php` we tell WordPress our JavaScript contains translations, using the
-    `wp_set_script_translations()` function.
--   At `languages/` folder there are all the translations files (the source files and the `.mo`
-    ones actually used to apply the translations)
+-   The [`__` function](https://developer.wordpress.org/reference/functions/__/) receives the text and a namespace as parameters
+-   At `index.php` we tell WordPress our JavaScript contains translations, using the `wp_set_script_translations()` function.
+-   At `languages/` folder there are all the translations files (the source files and the `.mo` ones actually used to apply the translations)
 
 ## Related Resources
 

diff --git a/plugins/basic-esnext-a2ab62/README.md b/plugins/basic-esnext-a2ab62/README.md
@@ -12,9 +12,11 @@ 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/juanma-wp/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://juanma-wp.github.io/block-development-examples/?tags=minimal">minimal</a></code></small> | [📦](https://github.com/juanma-wp/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/juanma-wp/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/juanma-wp/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/juanma-wp/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://juanma-wp.github.io/block-development-examples/?tags=minimal">minimal</a></code></small> | [📦](https://github.com/juanma-wp/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/juanma-wp/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/juanma-wp/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
@@ -59,14 +61,6 @@ src/
 └── index.js     # Block registration
 ```
 
-### Best Practices
-
--   Use ESNext features appropriately
--   Follow WordPress coding standards
--   Implement proper error handling
--   Add meaningful comments
--   Keep components modular
-
 ## Related Resources
 
 -   [Block Editor Handbook - Getting Started](https://developer.wordpress.org/block-editor/getting-started/)

diff --git a/plugins/block-dynamic-rendering-64756b/README.md b/plugins/block-dynamic-rendering-64756b/README.md
@@ -12,9 +12,11 @@ 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/juanma-wp/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://juanma-wp.github.io/block-development-examples/?tags=dynamic-rendering">dynamic-rendering</a></code></small> <small><code><a href="https://juanma-wp.github.io/block-development-examples/?tags=create-block">create-block</a></code></small> | [📦](https://github.com/juanma-wp/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/juanma-wp/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/juanma-wp/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/juanma-wp/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://juanma-wp.github.io/block-development-examples/?tags=dynamic-rendering">dynamic-rendering</a></code></small> <small><code><a href="https://juanma-wp.github.io/block-development-examples/?tags=create-block">create-block</a></code></small> | [📦](https://github.com/juanma-wp/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/juanma-wp/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/juanma-wp/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
@@ -90,4 +92,4 @@ add_action( 'init', 'block_dynamic_rendering_64756b___register_block' );
 ---
 
 > **Note**
-> Check the [Start Guide for local development with the examples](https://github.com/juanma-wp/block-development-examples/wiki/Examples#start-guide-for-local-development-with-the-examples) >
+> Check the [Start Guide for local development with the examples](https://github.com/juanma-wp/block-development-examples/wiki/Examples#start-guide-for-local-development-with-the-examples)