diff --git a/README.md b/README.md index ef620fda..872cb301 100644 --- a/README.md +++ b/README.md @@ -72,17 +72,17 @@ The examples in this repo are listed in the following table: -| | ID | Short description | Tags | Download .zip | Live Demo | -| --------------------------------------------- | --------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| ![](https://placehold.co/15x15/64756b/64756b) | [64756b](./plugins/block-dynamic-rendering-64756b) | Basic Block with Dynamic Rendering | [`DYNAMIC RENDERING`](#dynamic-rendering), [`CREATE BLOCK`](#create-block) | 📦 | | -| ![](https://placehold.co/15x15/3df23d/3df23d) | [3df23d](./plugins/basic-block-translations-3df23d) | Basic Block with Translations | [`STATIC RENDERING`](#static-rendering) | 📦 | | -| ![](https://placehold.co/15x15/833d15/833d15) | [833d15](./plugins/interactivity-api-block-833d15) | Interactivity API Block | [`CREATE BLOCK TEMPLATE`](#create-block-template), [`INTERACTIVE BLOCK`](#interactive-block), [`INTERACTIVITY API`](#interactivity-api), [`GUTENBERG PLUGIN`](#gutenberg-plugin), [`EXPERIMENTAL`](#experimental) | 📦 | | -| ![](https://placehold.co/15x15/b16608/b16608) | [b16608](./plugins/block-static-rendering-b16608) | Block with Static Rendering | [`STATIC RENDERING`](#static-rendering), [`CREATE BLOCK`](#create-block) | 📦 | | -| ![](https://placehold.co/15x15/1b8c51/1b8c51) | [1b8c51](./plugins/editable-block-1b8c51) | Block Editable | | 📦 | | -| ![](https://placehold.co/15x15/56d6f3/56d6f3) | [56d6f3](./plugins/non-block-react-wp-data-56d6f3) | Non-block wp data with React | [`NO BLOCK`](#no-block), [`WP DATA`](#wp-data) | 📦 | | -| ![](https://placehold.co/15x15/ca6eda/ca6eda) | [ca6eda](./plugins/minimal-block-ca6eda) | Minimal Block | [`MINIMAL`](#minimal) | 📦 | | -| ![](https://placehold.co/15x15/e621a6/e621a6) | [e621a6](./plugins/minimal-block-no-build-e621a6) | Minimal Gutenberg Block (No Build) | [`MINIMAL`](#minimal), [`NO BUILD`](#no-build) | 📦 | | -| ![](https://placehold.co/15x15/99def1/99def1) | [99def1](./plugins/interactive-blocks-demos-99def1) | Interactive Blocks | [`INTERACTIVE BLOCK`](#interactive-block), [`MULTI BLOCK`](#multi-block) | 📦 | | +| | ID | Short description | Tags | Download .zip | Live Demo | +| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ![](https://placehold.co/15x15/64756b/64756b) | [64756b](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk/plugins/block-dynamic-rendering-64756b) | Basic Block with Dynamic Rendering | [`DYNAMIC RENDERING`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#dynamic-rendering), [`CREATE BLOCK`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#create-block) | 📦 | | +| ![](https://placehold.co/15x15/3df23d/3df23d) | [3df23d](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk/plugins/basic-block-translations-3df23d) | Basic Block with Translations | [`STATIC RENDERING`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#static-rendering) | 📦 | | +| ![](https://placehold.co/15x15/833d15/833d15) | [833d15](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk/plugins/interactivity-api-block-833d15) | Interactivity API Block | [`CREATE BLOCK TEMPLATE`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#create-block-template), [`INTERACTIVE BLOCK`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#interactive-block), [`INTERACTIVITY API`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#interactivity-api), [`GUTENBERG PLUGIN`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#gutenberg-plugin), [`EXPERIMENTAL`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#experimental) | 📦 | | +| ![](https://placehold.co/15x15/b16608/b16608) | [b16608](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk/plugins/block-static-rendering-b16608) | Block with Static Rendering | [`STATIC RENDERING`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#static-rendering), [`CREATE BLOCK`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#create-block) | 📦 | | +| ![](https://placehold.co/15x15/1b8c51/1b8c51) | [1b8c51](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk/plugins/editable-block-1b8c51) | Block Editable | | 📦 | | +| ![](https://placehold.co/15x15/56d6f3/56d6f3) | [56d6f3](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk/plugins/non-block-react-wp-data-56d6f3) | Non-block wp data with React | [`NO BLOCK`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#no-block), [`WP DATA`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#wp-data) | 📦 | | +| ![](https://placehold.co/15x15/ca6eda/ca6eda) | [ca6eda](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk/plugins/minimal-block-ca6eda) | Minimal Block | [`MINIMAL`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#minimal) | 📦 | | +| ![](https://placehold.co/15x15/e621a6/e621a6) | [e621a6](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk/plugins/minimal-block-no-build-e621a6) | Minimal Gutenberg Block (No Build) | [`MINIMAL`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#minimal), [`NO BUILD`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#no-build) | 📦 | | +| ![](https://placehold.co/15x15/99def1/99def1) | [99def1](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk/plugins/interactive-blocks-demos-99def1) | Interactive Blocks | [`INTERACTIVE BLOCK`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#interactive-block), [`MULTI BLOCK`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#multi-block) | 📦 | | ### Tags diff --git a/bin/README.md b/bin/README.md deleted file mode 100644 index 165bc256..00000000 --- a/bin/README.md +++ /dev/null @@ -1,11 +0,0 @@ -# TO-DO: - -## createGutenbergExample.js - -- [ ] Get data from user for the example - - [ ] Get plugin slug - - [ ] Add unique ID to the slug - - [ ] Get keywords - - [ ] Research best way to add keywords to the template - - [ ] Add keywords to the template -- [ ] Launch `create-block` with internal template and custom data from user \ No newline at end of file diff --git a/bin/createGutenbergExample/generateExamplesTableMarkdown.js b/bin/createGutenbergExample/generateExamplesTableMarkdown.js index b04cbae2..8a8a61fb 100644 --- a/bin/createGutenbergExample/generateExamplesTableMarkdown.js +++ b/bin/createGutenbergExample/generateExamplesTableMarkdown.js @@ -4,7 +4,7 @@ const toMarkdownTable = require("markdown-table"); const { info, error } = require("../log"); const rootPath = process.cwd(); -const readmePath = join(rootPath, "README.md"); +const readmePathRoot = join(rootPath, "README.md"); const examplesJsonPath = join(rootPath, "data/examples.json"); const tagsJsonPath = join(rootPath, "data/tags.json"); @@ -18,16 +18,10 @@ const { const startMarker = ""; const endMarker = ""; -module.exports = ({ slug: slugLastAdded }) => { +module.exports = ({ slug: slugReadme, readmePath = readmePathRoot }) => { const examplesJson = JSON.parse(fs.readFileSync(examplesJsonPath, "utf8")); const tagsJson = JSON.parse(fs.readFileSync(tagsJsonPath, "utf8")); - - const readmePathDisplay = readmePath.split("/gutenberg-examples-2023/")[1]; - let messageUpdate = `Updating ${readmePathDisplay}` - if (slugLastAdded) messageUpdate += ` with example ${slugLastAdded}` - info(messageUpdate) - const markdownContent = fs.readFileSync(readmePath, "utf8"); const regex = new RegExp( @@ -43,8 +37,14 @@ module.exports = ({ slug: slugLastAdded }) => { (acc, { slug, name }) => ({ ...acc, [slug]: name }), {} ); + let processedExamplesJson = examplesJson; + if (slugReadme) { + processedExamplesJson = examplesJson.filter(({ slug }) => slug === slugReadme); + } - const markdownTableRows = examplesJson.map(({ slug, description, tags }) => { + const urlAssetIconWp = `https://raw.githubusercontent.com/wordpress-juanmaguitar/gutenberg-examples-2023/trunk/assets/icon-wp.svg`; + const urlRepo = `https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk` + const markdownTableRows = processedExamplesJson.map(({ slug, description, tags }) => { const id = slug.split("-").pop(); let playgroundUrl = PLAYGROUND_URL_WITH_PLUGIN.replaceAll(SLUG_EXAMPLE_MARKER,slug); if (tags.includes('gutenberg-plugin')) playgroundUrl = PLAYGROUND_URL_WITH_PLUGIN_AND_GUTENBERG.replaceAll(SLUG_EXAMPLE_MARKER,slug); @@ -52,13 +52,13 @@ module.exports = ({ slug: slugLastAdded }) => { return [ `![](https://placehold.co/15x15/${id}/${id})`, - `[${id}](./plugins/${slug})`, + `[${id}](${urlRepo}/plugins/${slug})`, description, tags - .map((tagSlug) => `[\`${processedTags[tagSlug]}\`](#${tagSlug})`) + .map((tagSlug) => `[\`${processedTags[tagSlug]}\`](${urlRepo}#${tagSlug})`) .join(", "), `📦`, - `` + `` ]; }); const markdownTable = toMarkdownTable([ @@ -73,7 +73,7 @@ module.exports = ({ slug: slugLastAdded }) => { try { fs.writeFileSync(readmePath, markdownContentWithUpdatedTable); - info(`${readmePathDisplay} was updated!`); + info(`README.md was updated!`); } catch (err) { error(`An error has ocurred when saving the file ${readmePath}`); error(err); diff --git a/bin/createGutenbergExample/initCreateExample.js b/bin/createGutenbergExample/initCreateExample.js index b954dadf..392367ec 100644 --- a/bin/createGutenbergExample/initCreateExample.js +++ b/bin/createGutenbergExample/initCreateExample.js @@ -12,6 +12,7 @@ const generateExamplesTableMarkdown = require("./generateExamplesTableMarkdown") module.exports = async (promptObject) => { const { name, id, slug, keywords, description, source } = promptObject; const rootPath = process.cwd(); + const readmePath = join(rootPath, "README.md"); const pluginsFolderPath = join(rootPath, "plugins"); const sourceFolderPath = join(pluginsFolderPath, source); const exampleFolderPath = join(pluginsFolderPath, slug); @@ -108,7 +109,9 @@ module.exports = async (promptObject) => { const exampleObject = { slug, tags: keywords.slice(1), description }; addExamplesJson({ exampleObject }); - generateExamplesTableMarkdown({ slug,}); + const readmePathDisplay = readmePath.split("/gutenberg-examples-2023/")[1]; + info(`Updating ${readmePathDisplay} with example ${slug}`); + generateExamplesTableMarkdown(); info(`Installing dependencies...`); execa.sync("pnpm i", { shell: true, all: true, cwd: rootPath }); diff --git a/bin/updateTableMarkdown.js b/bin/updateTableMarkdown.js index da67b6c0..99ba0f09 100644 --- a/bin/updateTableMarkdown.js +++ b/bin/updateTableMarkdown.js @@ -1,3 +1,16 @@ +const { join } = require("path"); +const fs = require('fs'); + const generateExamplesTableMarkdown = require("./createGutenbergExample/generateExamplesTableMarkdown.js"); const slug = process.argv[2]; -generateExamplesTableMarkdown({slug}); +const rootPath = process.cwd(); +let readmePath; + +if (slug) { + const pluginPath = join(rootPath, "plugins", slug); + if (!fs.existsSync(pluginPath)) throw `plugin path doesn't exist: ${pluginPath}`; + readmePath = join(pluginPath, "README.md"); + console.log({slug, readmePath}) +} + +generateExamplesTableMarkdown({slug, readmePath}); diff --git a/plugins/basic-block-translations-3df23d/README.md b/plugins/basic-block-translations-3df23d/README.md index 6d56ad0e..74427a42 100644 --- a/plugins/basic-block-translations-3df23d/README.md +++ b/plugins/basic-block-translations-3df23d/README.md @@ -1,7 +1,13 @@ # Basic Block Translation 3df23d -Basic block that shows how to use translations in a block. + + +| | ID | Short description | Tags | Download .zip | Live Demo | +| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ----------------------------- | ------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ![](https://placehold.co/15x15/3df23d/3df23d) | [3df23d](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk/plugins/basic-block-translations-3df23d) | Basic Block with Translations | [`STATIC RENDERING`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#static-rendering) | 📦 | | + +Basic block that shows how to use translations in a block. ## Start Guide diff --git a/plugins/block-dynamic-rendering-64756b/README.md b/plugins/block-dynamic-rendering-64756b/README.md index 71a7b7f3..433fde5c 100644 --- a/plugins/block-dynamic-rendering-64756b/README.md +++ b/plugins/block-dynamic-rendering-64756b/README.md @@ -1,7 +1,15 @@ # Block Dynamic Rendering 64756b + + +| | ID | Short description | Tags | Download .zip | Live Demo | +| --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ![](https://placehold.co/15x15/64756b/64756b) | [64756b](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk/plugins/block-dynamic-rendering-64756b) | Basic Block with Dynamic Rendering | [`DYNAMIC RENDERING`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#dynamic-rendering), [`CREATE BLOCK`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#create-block) | 📦 | | + + Basic block that shows how to use of dynamic rendering in a block. + ## Start Guide #### 1. Install dependencies diff --git a/plugins/block-static-rendering-b16608/README.md b/plugins/block-static-rendering-b16608/README.md index 252c9904..4c0acb1a 100644 --- a/plugins/block-static-rendering-b16608/README.md +++ b/plugins/block-static-rendering-b16608/README.md @@ -1,7 +1,15 @@ # Block Static Rendering b16608 + + +| | ID | Short description | Tags | Download .zip | Live Demo | +| --------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| ![](https://placehold.co/15x15/b16608/b16608) | [b16608](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk/plugins/block-static-rendering-b16608) | Block with Static Rendering | [`STATIC RENDERING`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#static-rendering), [`CREATE BLOCK`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#create-block) | 📦 | | + + Basic block that shows how to use of static rendering in a block. + ## Start Guide #### 1. Install dependencies diff --git a/plugins/editable-block-1b8c51/README.md b/plugins/editable-block-1b8c51/README.md index bde6807d..0378df92 100644 --- a/plugins/editable-block-1b8c51/README.md +++ b/plugins/editable-block-1b8c51/README.md @@ -1,7 +1,15 @@ # Block Static Rendering b16608 + + +| | ID | Short description | Tags | Download .zip | Live Demo | +| --------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ----------------- | ---- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ![](https://placehold.co/15x15/1b8c51/1b8c51) | [1b8c51](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk/plugins/editable-block-1b8c51) | Block Editable | | 📦 | | + + Basic block that shows how to create a block that is editable. This block also show the use of e2e testing for a block. + ## Start Guide #### 1. Install dependencies diff --git a/plugins/interactive-blocks-demos-99def1/README.md b/plugins/interactive-blocks-demos-99def1/README.md index 42a48274..9a4b29bf 100644 --- a/plugins/interactive-blocks-demos-99def1/README.md +++ b/plugins/interactive-blocks-demos-99def1/README.md @@ -1,7 +1,15 @@ # Interactive Blocks Demos 99def1 + + +| | ID | Short description | Tags | Download .zip | Live Demo | +| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ![](https://placehold.co/15x15/99def1/99def1) | [99def1](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk/plugins/interactive-blocks-demos-99def1) | Interactive Blocks | [`INTERACTIVE BLOCK`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#interactive-block), [`MULTI BLOCK`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#multi-block) | 📦 | | + + An exploratory plugin for using different ways of creating interactive blocks in [Gutenberg](https://github.com/WordPress/gutenberg). + This example shows how to add interactivity to a block using: - Alpine - jQuery diff --git a/plugins/interactivity-api-block-833d15/README.md b/plugins/interactivity-api-block-833d15/README.md index 4bcdb147..05a01c5b 100644 --- a/plugins/interactivity-api-block-833d15/README.md +++ b/plugins/interactivity-api-block-833d15/README.md @@ -1,5 +1,12 @@ # Interactive Block 833d15 + + +| | ID | Short description | Tags | Download .zip | Live Demo | +| --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ![](https://placehold.co/15x15/833d15/833d15) | [833d15](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk/plugins/interactivity-api-block-833d15) | Interactivity API Block | [`CREATE BLOCK TEMPLATE`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#create-block-template), [`INTERACTIVE BLOCK`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#interactive-block), [`INTERACTIVITY API`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#interactivity-api), [`GUTENBERG PLUGIN`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#gutenberg-plugin), [`EXPERIMENTAL`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#experimental) | 📦 | | + + > **Warning** > **This block requires Gutenberg 16.2 or superior to work**. The Interactivity API is, at the moment, not part of WordPress Core as it is still very experimental, and very likely to change. @@ -8,6 +15,7 @@ This block has been created with the `create-block-interactive-template` and shows a basic structure of an interactive block that uses the Interactivity API. + Check the following resources for more info about the Interactivity API: - [`@wordpress/interactivity` package](https://github.com/WordPress/gutenberg/blob/trunk/packages/interactivity/README.md) - [Proposal: The Interactivity API – A better developer experience in building interactive blocks](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/) diff --git a/plugins/minimal-block-ca6eda/README.md b/plugins/minimal-block-ca6eda/README.md index e858a553..c03ffb3d 100644 --- a/plugins/minimal-block-ca6eda/README.md +++ b/plugins/minimal-block-ca6eda/README.md @@ -1,8 +1,15 @@ # Minimal Gutenberg Block + + +| | ID | Short description | Tags | Download .zip | Live Demo | +| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ![](https://placehold.co/15x15/ca6eda/ca6eda) | [ca6eda](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk/plugins/minimal-block-ca6eda) | Minimal Block | [`MINIMAL`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#minimal) | 📦 | | + + This example contains a plugin that register a minimal block that has been defined using JSX so it needs a `build` process to convert the JSX syntax into JS code that browsers can understand (ES5). -> [See diagram](https://excalidraw.com/#json=EMvbHZvzmuMGZUOuXj8FE,Llk4sac-Q3TP88V07hWYqA) +> [See diagram](https://excalidraw.com/#json=p5GXuqsMjZe7pEJ99-6EM,OuVzzTujO91JYnCSNVwEBg) ## Table of Contents diff --git a/plugins/minimal-block-no-build-e621a6/README.md b/plugins/minimal-block-no-build-e621a6/README.md index d22e3bf0..f4129d69 100644 --- a/plugins/minimal-block-no-build-e621a6/README.md +++ b/plugins/minimal-block-no-build-e621a6/README.md @@ -2,6 +2,13 @@ This example contains a plugin that register a minimal block that has been defined using plain javascript so it doesn't needs a `build` process (to convert the JSX syntax into JS code that browsers can understand). + + +| | ID | Short description | Tags | Download .zip | Live Demo | +| --------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| ![](https://placehold.co/15x15/e621a6/e621a6) | [e621a6](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk/plugins/minimal-block-no-build-e621a6) | Minimal Gutenberg Block (No Build) | [`MINIMAL`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#minimal), [`NO BUILD`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#no-build) | 📦 | | + + ## Start Guide #### 1. Install dependencies diff --git a/plugins/non-block-react-wp-data-56d6f3/README.md b/plugins/non-block-react-wp-data-56d6f3/README.md index af5a4367..83579f48 100644 --- a/plugins/non-block-react-wp-data-56d6f3/README.md +++ b/plugins/non-block-react-wp-data-56d6f3/README.md @@ -1,7 +1,15 @@ # Non block React wp-data 56d6f3 + + +| | ID | Short description | Tags | Download .zip | Live Demo | +| --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ![](https://placehold.co/15x15/56d6f3/56d6f3) | [56d6f3](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk/plugins/non-block-react-wp-data-56d6f3) | Non-block wp data with React | [`NO BLOCK`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#no-block), [`WP DATA`](https://github.com/wordpress-juanmaguitar/gutenberg-examples-2023/tree/trunk#wp-data) | 📦 | | + + This example contains a plugin that extendes the dashboard with a mini React app that shows the use of wp-data + ## Start Guide #### 1. Install dependencies diff --git a/templates/create-block-template/readmes/README-EXAMPLE.tpl.md b/templates/create-block-template/readmes/README-EXAMPLE.tpl.md new file mode 100644 index 00000000..679c66ae --- /dev/null +++ b/templates/create-block-template/readmes/README-EXAMPLE.tpl.md @@ -0,0 +1,35 @@ + + + + + +## Start Guide + +#### 1. Install dependencies + +Check the [Repo Commands > Dependencies](../../DEVELOPMENT.md#dependencies) instructions for this repo + +#### 2. Generate the build + +Once the depencies are installed (a `node_modules` folder should have been created), we should [launch the build process](../../DEVELOPMENT.md#build-process) to get the final version of the block that can be used from WordPress. + +#### 3. Use it in a WordPress + +Check the [WordPress Local Development Environment](../../DEVELOPMENT.md#wordpress-local-development-environment) instructions for this repo. + +
+ If you have a local WordPress installation already running, you can clone the repo inside the plugins folder of that installation and check the example there +
+

If you do that, you'll need to do the following

+
+
+ +At this point you should be able to insert the custom blocks into any post (after activating the plugin) of your WordPress installation, and see how it behaves in the frontend when published. + +