block-developer-cookbook
block-developer-cookbook copied to clipboard
The Block Developer Cookbook
This repository contains all of the create-block templates for the recipes that can be found at https://blockdevelopercookbook.com/.
You can use this repo as a local development environment with the @wordpress/env package.
Setup
Please ensure you have all of the requirements for a block development environment.
Checkout this repo.
git clone [email protected]:ryanwelcher/block-developer-cookbook.git
Navigate to the directory block-developer-cookbook
cd block-developer-cookbook
Install the dependencies
npm install
Start the development environment (make sure you have Docker installed)
npm run env start
Using the recipes
Run any of the following scripts to scaffold a recipe and then follow the tutorial in either the Readme or at https://blockdevelopercookbook.com/. The content of the tutorials on the website is also provided in the README for each scaffolded plugin.
| Script | Recipe |
|---|---|
npm run prep:acronym-format |
Creating a custom format |
npm run prep:customize-build-process |
Customize the build process |
npm run prep:simple-fade-effect |
Simple Fade-in Effect |
npm run prep:transforms |
Block Transforms |
npm run prep:post-meta-testimonial |
Post Meta Testimonial Block |
npm run prep:gallery-slider |
Interactive API Gallery Slider |
npm run prep:tape-style |
Custom Image block style |
npm run prep:editorial-notes |
Editorial Notes |
npm run prep:word-counter |
Word Counter |
npm run prep:deprecations |
Block Deprecations |
npm run prep:preset-block-bindings |
Preset block bindings with variations |
npm run prep:bound-excerpt |
Binding the excerpt to a block |
npm run prep:dark-light-mode |
Creating a dark/light mode block |
npm run prep:your-people |
Managing team members |
All of the these commands will scaffold a new plugin in the plugins directory of this repo, set some defaults, and assign them the custom block category of `Block Developer Cookbook'. Beyond that, there is no difference between the plugins scaffolded using these commands and the templates published on NPM - in fact this repo uses those!