07 Adding new examples

This guide will show you how to add new block development examples. There are several different ways to accomplish this. You can create a brand new example, copy an existing one in this repository, or clone an example from an external repository.

Use npm run create-example:new to scaffold a new blank example

This repo can create a new, blank example using the @wordpress/create-block package and a custom external template provided by this repository.

1. Run npm run create-example:new -- example-slug changing example-slug to the name of the plugin you wish to create.
2. Add any additional flags that are supported by the @wordpress/create-block package after the --

There are currently 3 variations supported by the custom template:

2. static - scaffolds a plugin with a single block that renders statically by saving its markup to the database (default)
3. dynamic - scaffolds a plugin with a single block that renders dynamically on the front end via PHP
4. non-block - scaffolds a plugin that loads a single JavaScript file. Use this variant, for example, such as block variations or SlotFill.

Example

This example will create a plugin called my-great-example-{generated-hex-code} with a single block that renders dynamically.

npm run create-example:new -- my-great-example --variant dynamic

Use npm run create-example:copy to use another example as a template

This repository offers a script to create a new example using any existing example as a template.

1. Run npm run create-example:copy
2. Choose the example you want to use as a template for your new example
3. Add a meaningful name for your example
4. Add a description for your example
5. Add tags for your example

The script will handle most of the necessary modifications, so your new example follows the conventions of this repository.

See an example of running npm run create-example:copy

Cloning an example from an external repository

If you have another repo containing a plugin with an example you'd like to add as new example of this repo:

1. Go to the plugins folder and git clone your repo with your example there
2. Go inside your project's folder
3. Delete the .git folder
4. Do the proper changes to adapt your plugin to follow the conventions of this repository