create-guten-block is zero configuration dev-toolkit (#0CJS) to develop WordPress Gutenberg blocks in a matter of minutes without configuring
create-guten-blockis zero configuration dev-toolkit (#0CJS) to develop WordPress Gutenberg blocks in a matter of minutes without configuring
Create Guten Block is not like other starter-kits or boilerplates. It's a developer's toolbox which is continuously updated. Since it has zero-configuration, you can always update it without any changes in your code.
Let's create a WordPress block plugin...
#2 quickly in one go Run inside local WP install E.g.
npx create-guten-block my-block cd my-block npm start
If you want to study the detailed installation of step
#2then take a look at the steps below.
npminstalled? Read this. (CLICK TO EXPAND!)
In case you are an absolute beginner to the world of
npm packages all you need to do is go to the Node's site download + install Node on your system. This will install both
npm, i.e., node package manager the command line interface of Node.js.
You can verify the install by opening your terminal app and typing...
node -v # Results into v9.1.0 make sure you have Node >= 8 installed. npm -v # Results into 5.6.0 make sure you have npm >= 5.3 installed.
All you have to do is run the following command and it will create a WordPress block plugin. It's done by installing and running the
create-guten-block command and providing it with a unique name for a WordPress plugin that will get created.
Make sure run this command in your local WordPress install's plugins folder i.e.
/local_dev_site.tld/wp-content/plugins/folder since this command will produce a WordPress plugin that you can go to
npx create-guten-block my-block
It'll take a couple of minutes to install.
Youll need to have Node >= 8 and npm >= 5.3 on your local development machine (but its not required on the server). You can use nvm (macOS/Linux) or nvm-windows to easily switch Node versions between different projects.
It will create a directory called
my-block inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies:
INSIDE: /local_dev_site.tld/wp-content/plugins/my-block .gitignore plugin.php package.json readme.md | dist | blocks.build.js | blocks.editor.build.css | blocks.style.build.css | src block | block.js | editor.scss | style.scss | blocks.js common.scss init.php
No configuration or complicated folder structures, just the files you need to build your app.
Once the installation is done, you can open your project folder and run the start script.
Let's do that.
cd my-block npm start
You can also use
yarn start if that's your jam.
This runs the plugin in development mode. To produce production code run
npm run build.
You will see the build messages, errors, and lint warnings in the console.
And just like that, you're building your next WordPress plugin with Gutenberg, React.js, ES 6/7/8/Next, transpiled with Babel, which also has ESLint configurations for your code editor to pick up and use automatically.
There are just three scripts that you can use in your
create-guten-block workflow. With these three scripts, you can develop, build, and eject your plugin.
npm run build
npm run eject
ejectand you have to maintain everything yourself.
ejecta project because by ejecting you lose the connection with
create-guten-blockand from there onwards you have to update and maintain all the dependencies on your own.
That's about it.
Your environment will have everything you need to build a modern next-gen WordPress Gutenberg plugin:
-webkitor other prefixes.
The tradeoff is that these tools are preconfigured to work in a specific way. If your project needs more customization, you can "eject" and customize it, but then you will need to maintain this configuration.
One Dependency: There is just one build dependency. It uses webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them.
No Configuration Required: You don't need to configure anything. A reasonably good configuration of both development and production builds is handled for you so you can focus on writing code.
No Lock-In: You can
eject to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off.
create-guten-block hides all this configuration away in an optimized package that we call
cgb-scripts. This package is the only dependency in your projects. We keep
cgb-scripts up to date while you go ahead and create the next best WordPress themes and plugins.
Too long, didn't read? Here's a shorter version.
Open the terminal app and run the following commands.
npx create-guten-block my-blockRun inside local WP install E.g.
cd my-blockOpen the newly created plugin directory.
npm startFor development.
npm run buildFor production build.
npm run ejectTo customize, update, and maintain all by yourself.
Create-Guten-Block has been tested to work on macOS, but must also work on Windows, and Linux. If something doesnt work, kindly file an issue
Create Guten Block is divided into two packages:
create-guten-blockis a command-line utility that you use to create new WP Gutenberg plugins.
cgb-scriptsis a development dependency in the generated plugin projects.
You never need to update
create-guten-block itself as it's run via
npx and it delegates all the setup to
When you run
create-guten-block, it always creates the project with the latest version of
cgb-scripts so youll get all the new features and improvements in newly created plugins automatically.
To update an existing project to a new version of
cgb-scripts, open the changelog, find the version youre currently on (check package.json in your plugin's folder if youre not sure), and apply the migration instructions for the newer versions.
In most cases bumping the
cgb-scripts version in package.json and running
npm install in this folder should be enough, but its good to consult the changelog for potential breaking changes.
We commit to keeping the breaking changes minimal so you can upgrade
Read what's new, improved, fixed, and if docs got updated.
Go read the entire changelog at this link CGB Changelog
Nothing's ever complete, so bear with us while we keep iterating towards a better future.
'Coz every night I lie in bed The brightest colors fill my head A million dreams are keeping me awake I think of what the world could be A vision of the one I see A million dreams is all it's gonna take A million dreams for the world we're gonna make ...
... listen to A million dreams!
Me (Ahmad Awais) and my incredible wife (Maedah Batool) are two engineers who fell in love with open source and then with each other. You can read more about me here. If you or your company use any of my projects or like what Im doing then consider backing me. I'm in this for the long run. An open-source developer advocate.
This repository is part of the NodeCLI.com course.
This FOSS (free and open source software) project is updated and maintained with the help of awesome businesses listed below. Without the support from these amazing companies/individuals, this project would not have been possible.
What/How? Read more about it
This project is inspired by the work of more people than I could mention here. But thank you, Dan Abramov for Create React App, Andrew Clark, and Christopher Chedeau, Sophie Alpert from React.js team, Kent C. Dodds for his open source evangelism, WordPress Core Contributors, Gary for keeping everyone sane, Gutenberg developers Matias, Riad, Andrew, Ella, Joen, Tammie, Greg and contributors, and other WordPress community members like Zac for his course on Gutenberg, and also my friend Morten for all the #Guten-motivation, Icons8 for the awesome icons, Maedah for managing this project, and to everyone I forgot.
For anything else, tweet at @MrAhmadAwais
I have released a video course to help you become a better developer Become a VSCode Power User