Commands

USE create-block-plugin quickly generate a WordPress plugin by answering a few questions.

Interactive Mode

npx create-block-plugin

When you run the command above you’ll be asked a series of questions that we will use to autofill plugin details such as the plugin name, plugin author, & plugin description.

You’ll want to use interactive mode if you want a little more control over some of the more detailed fields generated by the plugin.

Shortcut Mode

npx create-block-plugin --template blockPattern --css tailwindcss --server 8000 --git my-plugin-name

You have to use a slug in the command to bypass the questions and use shortcut mode. Don’t worry you can still choose the block starter template(s) you want, choose a CSS framework, fire up a server, and initialize a local and remote git repo on github.

Options

-t, --template <template(s)>Template(s) – Use 1 or a comma separated list. Defaults to ‘default.’
-c, --css <name>CSS framework – tailwindcss, or none. Defaults to ‘none’.
-s, --server <port>Server port number – Defaults to ‘8888’.
-g, --gitGit repo – add this option to initialize a local and remote git repo. Defaults to ‘false’ if not added.

Block starter template options (use default to use ’em all together):

  1. staticBlock

Examples

All templates + CSS Framework + Server + Git Repo

Generate a block plugin using ALL templates, tailwindcss, a server at port 8888, and initialize a local and remote git repository:

npx create-block-plugin --template default --css tailwindcss --server 8888 --git my-plugin-slug

Here’s the same using option shorthands:

npx create-block-plugin -t default -c tailwindcss -s 8888 -g my-plugin-slug

Single Template + CSS Framework + Server + Git Repo

Generate a block plugin using only the blockPattern template, bootstrap, a server at port 8000, and initialize a local and remote git repository:

npx create-block-plugin --template blockPattern --css bootstrap --server 8000 --git my-plugin-slug

Here’s the same using option shorthands:

npx create-block-plugin -t blockPattern -c bootstrap -s 8000 -g my-plugin-slug

3 Templates + No CSS Framework + No Server + No Git Repo

Generate a block plugin using only the blockPattern template, bootstrap, a server at port 8000, and initialize a local and remote git repository:

npx create-block-plugin --template frontendBlock,dynamicBlock,staticBlock my-plugin-slug

Here’s the same using option shorthands:

npx create-block-plugin -t frontendBlock,dynamicBlock,staticBlock my-plugin-slug

All Commands

So we’ll be the first to admit that we went a little overboard with all the commands we provide. But, these are all the commands we’ve put together over the last 2+ years of building blocks and publishing them to the WordPress plugin directory. Trust us, you’re going to need them.

Once you generate your new plugin, you can find all these commands in the root folder in the package.json file under “scripts”. Note that depending on what css framework you choose, your package.json file may or may not have some of these commands available, we had to trim it up some how!

We’ve organized the package.json > scripts based on what you’ll most likely be using to least likely. We then put utility scripts (scripts that other scripts use) at the end of the package.json > scripts section, just after the “zip” script.

start

npm start

Did you know you could run ‘npm start’ instead of ‘npm run start’?

This puts things in watch mode, or development mode. Run this whenever you want to work your block plugin. This will instantly fire up Hot Module Replacement for JavaScript and CSS files and Auto-Reloading using BrowserSync for any php files that are edited and saved.

build

npm run build

This puts things in production mode and compiles all of your code into a sleek, streamlined bundle of code. Run this whenever you want to release or publish your plugin.

publish

npm run publish

This script does a lot. It first compiles the plugin code. Then it increments the version, by using the version listed in the package.json file, and updating the readme.txt and the root plugin .php file version numbers. Once the version gets updated it adds all of the updates to a git commit and finally pushes this tagged ( versioned ) commit to github.

After running this command, the github actions take over and automatically publish your updated plugin to the WordPress plugin directory.

The piece that makes all of this work is the versioning ( tagging ). We are using 10ups github actions under the hood and they look for version updates and then publish them accordingly.

server:start

npm run server:start

This fires up a development server with WordPress, a theme, the Gutenberg plugin, and your plugin installed. You’ll want to make sure you aren’t running another instance on the same port when you use this. If you do, checkout that server:clean script below.

server:stop

npm run server:stop

This shuts down your development server. If I’m engrossed in developing one plugin, I tend to run this infrequently. If you’re building many plugins on the same port, I would run this daily.

server:clean

npm run server:clean

This is what you use if you’ve accidentally tried using the same port twice, running server:start and you already had something on it. Keep in mind this wipes your Docker container on that port clean, so if you have a bunch of stuff saved on your server instance, it’s gonna be gone.

server:destroy

npm run server:destroy

If you tried running server:clean and that didn’t work, try running this. Typically this is what you use if you’ve accidentally tried using the same port twice running server:start and you already had something on it. Keep in mind this wipes your Docker container on that port clean, so if you have a bunch of stuff saved on your server instance, it’s gonna be gone.

composer:generate-autoloader

npm run composer:generate-autoloader

This is a utility script but it will also come in handy on it’s own. Whenever you add a new php class to the includes/ directory, you’ll need to run this. If you don’t you’ll get weird errors and not know what’s going on.

format:js

npm run format:js

This is baked into the wp-scripts package and it formats your javascript.

lint:css

npm run lint:css

This is also baked into the wp-scripts package that we’re using and it checks your css files to make sure we’re following coding standard guidelines. Learn more.

lint:js

npm run lint:js

This is also baked into the wp-scripts package that we’re using and it checks your js files to make sure we’re following coding standard guidelines. Learn more.

lint:pkg-json

npm run lint:pkg-json

This is also baked into the wp-scripts package that we’re using and it checks your package.json files to make sure we’re following coding standard guidelines. Learn more.

packages-update

npm run packages-update

This is also baked into the wp-scripts package that we’re using and it updates all WordPress packages to their latest version. Be careful with this b/c it can break things, you’ll want to check here first for any updates. Learn more.

i18n:make-pot

npm run i18n:make-pot

Generates the pot file to internationalize your plugin. If you’re translating the plugin yourself you’d run this first, add your translations and then run i18n:make-json to translate any javascript files & then run i18n:make-mo to translate any php files. Make sure you update the placeholder information in the root package.json file before you run this script. IMPORTANT: This requires wp-cli to be installed on your computer. Learn more about how to install wp-cli here.

i18n:make-json

npm run i18n:make-json

Generates the translations from all javascript files. Run this after running i18n:make-pot. IMPORTANT: This requires wp-cli to be installed on your computer.

i18n:make-mo

npm run i18n:make-mo

Generates the translations from all php files. Run this after running i18n:make-pot. IMPORTANT: This requires wp-cli to be installed on your computer.

svn:make

npm run svn:make

If your plugin isn’t yet listed in the WordPress plugin directory, this will create an svn directory in the plugin’s root folder along w/ the directories you need to host your plugin in the WordPress plugin directory. If it is already hosted, it will pull down the entire svn repository into the root svn directory.

svn:add

npm run svn:add

This adds all files in the trunk/, assets/, branches/, and tags/ directories into your local SVN repository.

svn:update

npm run svn:update

Brings changes from the SVN repository into your local copy.

svn:tag

npm run svn:tag

This copies the current version of the svn/trunk source code into the svn/tags directory.

test:e2e

npm run test:e2e

This is baked into the wp-scripts package we’re using and launches the end-to-end test runner. Learn more.

test:unit

npm run test:unit

This is baked into the wp-scripts package we’re using and launches the unit test runner. Learn more.

wp

npm run wp

This is more-or-less a reminder of how to to run wp-cli commands in the Docker development server we’re using. By itself it doesn’t do anything, but checkout the cli:install-gutenberg script and you can see how you could use this as a foundation for creating other wp-cli scripts. NOTE: Some scripts don’t work as expected in the Docker development environment. For instance, all of the i18n translation scripts will generally not work and return an error. Please keep this in mind.

zip

npm run zip

This zips your plugin directory into a usable plugin that you can use on any WordPress install. It’s great for testing plugins in different environments and I use this all the time. If you need to add directories to the zip file simply add the in package.json > scripts > zip.

browser-sync

npm run browser-sync

Fires up browser-sync using the bs-config.js file. If you need different browser-sync settings just edit that bs-config.js file. This is mainly a utility script used by other scripts.

cli:install-gutenberg

npm run cli:install-gutenberg

cli:permalinks

npm run cli:permalinks

Gives us pretty permalinks. I hated having a server fire up w/o pretty permalinks so I added this utility script, which is mainly used by other scripts.

publish:increment-version

npm run publish:increment-version

Uses the replace.config.js file to find and replace versions in the readme.txt and root .php plugin file. This is mostly used as a utility script for the ‘publish’ command.

server:setup

npm run server:setup

This is a utility script used by the create-block-plugin module that uses the setup script below & also fires up a server if you opt-in to having a server launched.

setup

npm run setup

This is a utility script used by the create-block-plugin module that installs all composer dependencies, generates the autoloader for php classes, installs all node dependencies & builds the initial plugin files. This is mainly a utility script used by other scripts.

tailwind:build

npm run tailwind:build

Builds tailwindcss files located in ./src/tailwind.css into ./build/tailwind.css using the postcss.config.js & tailwind.config.js files in the root director. This script is mainly a utility script used by the build script.

tailwind:watch

npm run tailwind:watch

Watches tailwindcss files located at ./src/tailwind.css and compiles them into ./build/tailwind.css using the postcss.config.js & tailwind.config.js files in the root director. This script is mainly a utility script used by the “start” script.

wpplugin

The Fastest way to
Learn, Build, & Publish WordPress plugins.