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 doesn'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 doesn't use ESNext or JSX Syntax so they don't need to run any build process. These examples are labeled with the tag NO-BUILD

Start Guide for each example

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 you have the documentation for the examples on this repo

As an example inside this monorepo

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 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 to get the final version of the block that can be used in WordPress.

Check the 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.