Skip to content

Adding new examples

JuanMa Garrido edited this page Jan 7, 2025 · 4 revisions

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:

  1. static - scaffolds a plugin with a single block that renders statically by saving its markup to the database (default)
  2. dynamic - scaffolds a plugin with a single block that renders dynamically on the front end via PHP
  3. 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

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