02 Examples

Important

Share your ideas for examples that should be on this repo or directly open a PR with your new example taking into account the conventions used in this repo.

The folder plugins contains all the plugins that register each one of the WP Block Development Examples (block and non-block examples). Each example has a unique ID that can be used to filter or find them.

The examples in this repo are listed in the following table:

• Each one the tags assigned to each example, links to their description in the Tags section below.

Most of the examples in this repo are blocks for the Block Editor and their code use ESNext + JSX Syntax (as it's a general recommendation)

Most of the examples in this repo showcase a specific type of block that can be used in the Block Editor. Those examples that don't specifically register a block for the Block Editor are labelled with the tag NO-BLOCK.

The examples using ESNext or JSX need to run a Build process to get the final version of the block ready to use.

There are some examples in this repo that do not use ESNext or JSX Syntax and ergo don't need to run any build process. These examples are labeled with the tag NO-BUILD

Start Guide for local development with the examples

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 depend on the context in which you use this example.

As an example inside this monorepo

The quickest way to have access to all the examples is to clone this repository and check out the examples locally.

Warning

Check out first the Prerequisites of this repo

Check the 05 Development > Repo Commands > Dependencies instructions for this repo to install the dependencies of this example.

Once the dependencies are installed (a node_modules folder should have been created), launch the build process to get the final version of the block that can be used in WordPress.

At WordPress Local Development Environment, you can learn how to quickly get your local WordPress installation to see this example.

Note

Get more tips for working locally with the examples within this repo at the Development section in the Wiki.

As an isolated example on your own WordPress installation

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

For 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 every time a change in the code is detected (saved) inside this folder.