Skip to content

Commit

Permalink
Merge pull request #54 from WordPress/update-readme-new-version
Browse files Browse the repository at this point in the history 
updated readme of examples and template + updated references to WordPress/block-development-examples
  • Loading branch information
@juanmaguitar
juanmaguitar authored Nov 10, 2023
2 parents ad64e29 + 2180d20 commit d481290
Show file tree
Hide file tree
Showing 25 changed files with 670 additions and 437 deletions.
60 changes: 30 additions & 30 deletions README.md
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions bin/copyGutenbergExample/constants.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
const URL_WIKI = "https://github.com/wptrainingteam/block-development-examples/wiki"
const URL_ASSETS = `https://raw.githubusercontent.com/wptrainingteam/block-development-examples/trunk/assets/`
const URL_REPO = `https://github.com/wptrainingteam/block-development-examples/tree/trunk`
const URL_WIKI = "https://github.com/WordPress/block-development-examples/wiki"
const URL_ASSETS = `https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/assets/`
const URL_REPO = `https://github.com/WordPress/block-development-examples/tree/trunk`
const WIKI_PAGE_WHY_ID = "04-Why-an-ID-for-every-example%3F"
const WIKI_PAGE_TAGS = "03-Tags"
const REPO_ORIGIN = "wptrainingteam/block-development-examples";
const REPO_ORIGIN = "WordPress/block-development-examples";
const SLUG_EXAMPLE_MARKER = "<%SLUG_EXAMPLE_MARKER%>";
const URL_EXAMPLE_ZIP = `https://raw.githubusercontent.com/${REPO_ORIGIN}/deploy/zips/${SLUG_EXAMPLE_MARKER}.zip`;
const PLAYGROUND_URL_WITH_PLUGIN = `https://playground.wordpress.net/#%7B%22landingPage%22:%22/wp-admin/plugins.php%22,%22steps%22:%5B%7B%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22%7D,%7B%22step%22:%22mkdir%22,%22path%22:%22/downloads%22%7D,%7B%22step%22:%22writeFile%22,%22path%22:%22/downloads/plugin.zip%22,%22data%22:%7B%22resource%22:%22url%22,%22url%22:%22${URL_EXAMPLE_ZIP}%22,%22caption%22:%22Downloading%20plugin...%22%7D%7D,%7B%22step%22:%22installPlugin%22,%22pluginZipFile%22:%7B%22resource%22:%22vfs%22,%22path%22:%22/downloads/plugin.zip%22%7D%7D%5D%7D`
Expand Down
4 changes: 2 additions & 2 deletions bin/copyGutenbergExample/generateExamplesTableMarkdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@ module.exports = ({ slug: slugReadme = '', readmePath = readmePathRoot } = {}) =
processedExamplesJson = examplesJson.filter(({ slug }) => slug === slugReadme);
}

const urlAssetIconWp = `https://raw.githubusercontent.com/wptrainingteam/block-development-examples/trunk/assets/icon-wp.svg`;
const urlRepo = `https://github.com/wptrainingteam/block-development-examples/tree/trunk`
const urlAssetIconWp = `https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/assets/icon-wp.svg`;
const urlRepo = `https://github.com/WordPress/block-development-examples/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);
Expand Down
50 changes: 30 additions & 20 deletions plugins/basic-block-translations-3df23d/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,40 +2,50 @@

<!-- 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/wptrainingteam/block-development-examples/wiki/04-Why-an-ID-for-every-example%3F "Why an ID for every example?")) | Download .zip | Live Demo |
| 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/wptrainingteam/block-development-examples/tree/trunk/plugins/basic-block-translations-3df23d) | Basic Block with Translations | <small><code><a href="https://github.com/wptrainingteam/block-development-examples/wiki/03-Tags#static-rendering">STATIC RENDERING</a></code></small> | `3df23d` | [📦](https://raw.githubusercontent.com/wptrainingteam/block-development-examples/deploy/zips/basic-block-translations-3df23d.zip "Install the plugin using this zip and activate it. Then use the ID of the block (3df23d) to find it and add it to a post to see it in action") | [![](https://raw.githubusercontent.com/wptrainingteam/block-development-examples/trunk/assets/icon-wp.svg)](https://playground.wordpress.net/#%7B%22landingPage%22:%22/wp-admin/plugins.php%22,%22steps%22:%5B%7B%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22%7D,%7B%22step%22:%22mkdir%22,%22path%22:%22/downloads%22%7D,%7B%22step%22:%22writeFile%22,%22path%22:%22/downloads/plugin.zip%22,%22data%22:%7B%22resource%22:%22url%22,%22url%22:%22https://raw.githubusercontent.com/wptrainingteam/block-development-examples/deploy/zips/basic-block-translations-3df23d.zip%22,%22caption%22:%22Downloading%20plugin...%22%7D%7D,%7B%22step%22:%22installPlugin%22,%22pluginZipFile%22:%7B%22resource%22:%22vfs%22,%22path%22:%22/downloads/plugin.zip%22%7D%7D%5D%7D "Use the ID of the block (3df23d) to find it and add it to a post to see it in action") |
| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/basic-block-translations-3df23d) | Basic Block with Translations | <small><code><a href="https://github.com/WordPress/block-development-examples/wiki/03-Tags#static-rendering">STATIC RENDERING</a></code></small> | `3df23d` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/basic-block-translations-3df23d.zip "Install the plugin using this zip and activate it. Then use the ID of the block (3df23d) 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:%22/wp-admin/plugins.php%22,%22steps%22:%5B%7B%22step%22:%22login%22,%22username%22:%22admin%22,%22password%22:%22password%22%7D,%7B%22step%22:%22mkdir%22,%22path%22:%22/downloads%22%7D,%7B%22step%22:%22writeFile%22,%22path%22:%22/downloads/plugin.zip%22,%22data%22:%7B%22resource%22:%22url%22,%22url%22:%22https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/basic-block-translations-3df23d.zip%22,%22caption%22:%22Downloading%20plugin...%22%7D%7D,%7B%22step%22:%22installPlugin%22,%22pluginZipFile%22:%7B%22resource%22:%22vfs%22,%22path%22:%22/downloads/plugin.zip%22%7D%7D%5D%7D "Use the ID of the block (3df23d) to find it and add it to a post to see it in action") |
<!-- @TABLE EXAMPLES END -->

Basic block that shows how to use translations in a block.

## Start Guide

#### 1. Install dependencies
The examples in this repo require these three steps to see them in action:

Check the [Repo Commands > Dependencies](../../DEVELOPMENT.md#dependencies) instructions for this repo
1. Install dependencies
2. Generate the build
3. Use it in a WordPress installation

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

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.
> **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
#### 3. Use it in a WordPress

Check the [WordPress Local Development Environment](../../DEVELOPMENT.md#wordpress-local-development-environment) instructions for this repo.
### As an example inside this monorepo

<details>
<summary><em>If you have a local WordPress installation already running, you can clone the repo inside the <code>plugins</code> folder of that installation and check the example there</em></summary>
<br>
<p>If you do that, you'll need to do the following</p>
<ul>
<li>Remove any <code>node_modules</code> folder inside this folder</li>
<li>Run <code>npm install</code> to install the dependencies</li>
<li>Run <code>npm build</code> to generate the "build" version of the blocks</li>
<li>Activate the plugin in your own WordPress installation</li>
<ul>
</details>
<br>
The quickest way to have access to all the examples is clone this repository and check out the examples locally.

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.

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.

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.


Loading

0 comments on commit d481290

Please sign in to comment.