Skip to content

Commit

Permalink
No commit message
Browse files Browse the repository at this point in the history
  • Loading branch information
juanmaguitar authored Nov 14, 2023
2 parents b4c57bf + ce24835 commit a021e40
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 46 deletions.
17 changes: 14 additions & 3 deletions bin/copyGutenbergExample/generateExamplesTableMarkdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,7 @@ module.exports = ({ slug: slugReadme = '', readmePath = readmePathRoot } = {}) =
}
else {
processedExamplesJson = examplesJson.sort(sortFeaturedFirst);
}


}

const urlAssetIconWp = `${URL_ASSETS}/icon-wp.svg`;
const markdownTableRows = processedExamplesJson.map(({ slug, description, tags }) => {
Expand All @@ -74,6 +72,19 @@ module.exports = ({ slug: slugReadme = '', readmePath = readmePathRoot } = {}) =
const urlZip = URL_EXAMPLE_ZIP.replaceAll(SLUG_EXAMPLE_MARKER,slug);
const descLinkZip = `Install the plugin using this zip and activate it. Then use the ID of the block (${id}) to find it and add it to a post to see it in action`
const descLinkPlayground = `Use the ID of the block (${id}) to find it and add it to a post to see it in action`
const pathBlueprint = `${rootPath}/plugins/${slug}/blueprint.json`;

console.log(`Checking if blueprint exists for ${slug}`);
console.log(`pathBlueprint: ${pathBlueprint}`);
if (fs.existsSync(pathBlueprint)) {
console.log(`Blueprint exists for ${slug}`);
const blueprintJson = JSON.parse(fs.readFileSync(pathBlueprint, "utf8"));
const blueprintJsonString = JSON.stringify(blueprintJson).replace(/\s/g, '');
const blueprintJsonStringEncoded = encodeURIComponent(blueprintJsonString);
console.log(`blueprintJsonStringEncoded`);
playgroundUrl = `https://playground.wordpress.net/#${blueprintJsonStringEncoded}`;
}

return [
`[📁](${URL_REPO}/plugins/${slug})`,
description,
Expand Down
6 changes: 3 additions & 3 deletions plugins/interactivity-api-block-833d15/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

<!-- 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 -->
| Folder | <span style="display: inline-block; width:250px">Short description</span> | Tags | ID ([❓](https://github.com/WordPress/block-development-examples/wiki/04-Why-an-ID-for-every-example%3F "Why an ID for every example?")) | Download .zip | Live Demo |
| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-block-833d15) | Interactivity API Block | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#create-block-template">CREATE BLOCK TEMPLATE</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#interactive-block">INTERACTIVE BLOCK</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#interactivity-api">INTERACTIVITY API</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#gutenberg-plugin">GUTENBERG PLUGIN</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#experimental">EXPERIMENTAL</a></code></small> | `833d15` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/interactivity-api-block-833d15.zip "Install the plugin using this zip and activate it. Then use the ID of the block (833d15) to find it and add it to a post to see it in action") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/assets/icon-wp.svg)](https://playground.wordpress.net/#{%22landingPage%22:%22/wp-admin/plugins.php%22,%22steps%22:[{%22step%22:%22installPlugin%22,%22pluginZipFile%22:{%22resource%22:%22url%22,%22url%22:%22https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/interactivity-api-block-833d15.zip%22}},{%22step%22:%22installPlugin%22,%22pluginZipFile%22:{%22resource%22:%22wordpress.org/plugins%22,%22slug%22:%22gutenberg%22}},{%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22}]} "Use the ID of the block (833d15) to find it and add it to a post to see it in action") |
| Folder | <span style="display: inline-block; width:250px">Short description</span> | Tags | ID ([❓](https://github.com/WordPress/block-development-examples/wiki/04-Why-an-ID-for-every-example%3F "Why an ID for every example?")) | Download .zip | Live Demo |
| --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-block-833d15) | Interactivity API Block | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#create-block-template">CREATE BLOCK TEMPLATE</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#interactive-block">INTERACTIVE BLOCK</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#interactivity-api">INTERACTIVITY API</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#gutenberg-plugin">GUTENBERG PLUGIN</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#experimental">EXPERIMENTAL</a></code></small>, <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#featured">FEATURED</a></code></small> | `833d15` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/interactivity-api-block-833d15.zip "Install the plugin using this zip and activate it. Then use the ID of the block (833d15) to find it and add it to a post to see it in action") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/assets/icon-wp.svg)](https://playground.wordpress.net/#%7B%22landingPage%22%3A%22%2F%3Fp%3D5%22%2C%22steps%22%3A%5B%7B%22step%22%3A%22installPlugin%22%2C%22pluginZipFile%22%3A%7B%22resource%22%3A%22url%22%2C%22url%22%3A%22https%3A%2F%2Fraw.githubusercontent.com%2FWordPress%2Fblock-development-examples%2Fdeploy%2Fzips%2Finteractivity-api-block-833d15.zip%22%7D%7D%2C%7B%22step%22%3A%22installPlugin%22%2C%22pluginZipFile%22%3A%7B%22resource%22%3A%22wordpress.org%2Fplugins%22%2C%22slug%22%3A%22gutenberg%22%7D%7D%2C%7B%22step%22%3A%22login%22%2C%22username%22%3A%22admin%22%2C%22password%22%3A%22password%22%7D%2C%7B%22step%22%3A%22runPHP%22%2C%22code%22%3A%22%3C%3Fphprequire'%2Fwordpress%2Fwp-load.php'%3B%24wpdb-%3Equery('deletefromwp_posts')%3B%22%7D%2C%7B%22step%22%3A%22importFile%22%2C%22file%22%3A%7B%22resource%22%3A%22url%22%2C%22url%22%3A%22https%3A%2F%2Fraw.githubusercontent.com%2FWordPress%2Fblock-development-examples%2Ftrunk%2Fplugins%2Finteractivity-api-block-833d15%2Fassets%2Fcontent-interactivity-api-example.xml%22%7D%7D%5D%7D "Use the ID of the block (833d15) to find it and add it to a post to see it in action") |
<!-- @TABLE EXAMPLES END -->

> **Warning**
Expand Down
15 changes: 10 additions & 5 deletions templates/block-examples/readmes/README-EXAMPLE.tpl.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
The goal of this example is to ...

<!-- 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 -->
<!-- @TABLE EXAMPLES END -->

The goal of this example is to showcase...
## Understanding the Example Code

> **Note**
> Check the [Start Guide for local development with the examples](https://github.com/WordPress/block-development-examples/wiki/02-Examples#start-guide-for-local-development-with-the-examples)
Overview of the code in bullet point form.

## Understanding the Example Code
## Related resources

...write description...
Bulleted list of references

----

> **Note**
> Check the [Start Guide for local development with the examples](https://github.com/WordPress/block-development-examples/wiki/02-Examples#start-guide-for-local-development-with-the-examples)
45 changes: 10 additions & 35 deletions templates/block-examples/templates/plugin/README.md.mustache
Original file line number Diff line number Diff line change
@@ -1,46 +1,21 @@
### Block Development Examples - {{title}}
# {{title}}

The goal of this example is to ...

<!-- 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 -->
<!-- @TABLE EXAMPLES END -->

## Start Guide

The examples in this repo require these three steps to see them in action:

1. Install dependencies
2. Generate the build
3. Use it in a WordPress installation

The way to manage the first two steps will be different depending on the context you're using this example.

> **Note**
> At the [WIKI of this repo](https://github.com/WordPress/block-development-examples/wiki) you have the documentation for the examples on this repo


### As an example inside this monorepo
## Understanding the Example Code

The quickest way to have access to all the examples is clone this repository and check out the examples locally.
Overview of the code in bullet point form.

Check the [05 Development > Repo Commands > Dependencies](https://github.com/WordPress/block-development-examples/wiki/05-Development#dependencies) instructions for this repo to install the dependencies of this example.
## Related resources

Once the depencies are installed (a `node_modules` folder should have been created), [launch the build process](https://github.com/WordPress/block-development-examples/wiki/05-Development#build-process) to get the final version of the block that can be used in WordPress.
Bulleted list of references

Check the [WordPress Local Development Environment](https://github.com/WordPress/block-development-examples/wiki/05-Development#wordpress-local-development-environment) to learn how to quickly get your local WordPress installation to see this example.

### As an isolated example on your own WordPress installation

If you have a local WordPress installation already running, you can also put the plugin folders of the examples you're interested in (by copying and pasting, from the zips...) inside the `plugins` folder of that installation and check the examples there.

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

- Remove any `node_modules` folder inside this folder
- Run `npm install` to install the dependencies
- Run `npm build` to generate the "build" version of the blocks
- Activate the plugin in your own WordPress installation

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.

You can also run `npm start` from this folder to generate a development mode "build" version everytime a change in the code is detected (saved) inside this folder.
----

> **Note**
> Check the [Start Guide for local development with the examples](https://github.com/WordPress/block-development-examples/wiki/02-Examples#start-guide-for-local-development-with-the-examples)

0 comments on commit a021e40

Please sign in to comment.