Welcome to the gutenberg-examples-2023 repo on GitHub. Here you can find a bunch of block and non-block examples for Gutenberg that you can use to learn about Block Development and other related Gutenberg topics.
Every example is contained in a plugin so to see an example in action the related plugin needs to be installed and activated in a WordPress installation.
This gutenberg-examples-2023 repo is a monorepo multipackage because it contains several packages (plugins) and is prepared to manage them collectively. To get up and running with it, you will need to make sure that you have installed the prerequisites.
- NVM - While you can always install Node through other means, we recommend using NVM to ensure you're aligned with the version used by our development teams. Our repository contains an
.nvmrcfile which helps ensure you are using the correct version of Node. - PNPM - This monorepo utilizes PNPM to manage project dependencies and run various scripts involved in building and testing projects. You can easily install it with
npm i -g pnpm.
After cloning this repo and entering into this projects's folder (cd gutenberg-examples-2023), do the following from the root of the project:
# Set your Node version to the right one for this project (as defined on .nvmrc)
nvm use
# Install the dependencies for all of the plugins
pnpm install
# Launch a build process for all of the plugins in the monorepo
pnpm run buildAt this point you are now ready to begin developing and testing the examples.
Important To see the examples in action you can just click on the Live Demo icon
(from the List of examples table below) to see a playground-powered live demo of the example.
To see the examples in action you can can also:
- Use your own WordPress installation to install the plugin (that can be downloaded as a
.zipfrom the 📦 icon of the example you're interested in the List of examples table below). - Run
pnpm -- wp-env startfrom any plugin folder to usewp-envto get a local development environment with that example - Run
npx @wp-now/wp-now startfrom any plugin folder to usewp-nowto quickly launch a WordPress installation with that specific plugin installed. - Copy the plugins folders for the examples you're interested in under the
pluginsfolder of your own WordPress installation.
Note Check out the Development Guide for a more comprehensive look at working in this repository.
The folder plugins contains all the plugins that register each one of the gutenberg 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 example ID links to its related folder.
- 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 needs 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 labelled with the tag NO-BUILD.
Note Want to add an example to this repo? Check out the Contributions Guide.
| ID | Short description | Tags | Download .zip | Live Demo | |
|---|---|---|---|---|---|
| 64756b | Basic Block with Dynamic Rendering | undefined, CREATE BLOCK |
📦 |  |
|
| 3df23d | Basic Block with Translations | STATIC BLOCK |
📦 | |
|
| 833d15 | Interactivity API Block | CREATE BLOCK TEMPLATE, INTERACTIVE BLOCK, INTERACTIVITY API, GUTENBERG PLUGIN |
📦 | |
|
| b16608 | Block with Static Rendering | STATIC BLOCK, CREATE BLOCK |
📦 | |
|
| 1b8c51 | Block Editable | 📦 | |
||
| 56d6f3 | Non-block wp data with React | NO BLOCK, WP DATA |
📦 | |
|
| ca6eda | Minimal Block | MINIMAL |
📦 | |
|
| e621a6 | Minimal Gutenberg Block (No Build) | MINIMAL, NO BUILD |
📦 | |
These examples show the use of the experimental Interactivity API in Blocks via the @wordpress/interactivity package
These examples show how to add behaviour for the frontend in your blocks. This behaviour is usually applied on an extra file (defined with the property viewScript of your block.json) that is executed only when the block is loaded in the frontend.
These examples shows the result of using the create-block tool with any of his variants or options.
These examples shows the result of using a template with the create-block tool with any of his variants or options.
These examples shows block development that doesn't require a build process, mostly because they don't use ESNext or JSX syntax.
These examples shows the development of a feature or behaviour for WordPress using gutenberg packages and React without the creation of a block.
These examples shows dynamic blocks.
These examples shows static blocks.
These examples shows some experimentatal feature that require the latest version of the Gutenberg Plugin in order to work properly
These examples shows the most simple version of specific types of blocks