Custom Gutenberg Block
This is a basic custom Gutenberg block. Files explained below.
block.js— We register Custom Gutenberg block here.
block.build.js— Built file from
block.jsvia NPM Script and Webpack.
editor.css_ Block CSS for the editor.
style.css— Block CSS for the front end.
index.php— Enqueue block's assets for the editor and the front end.
.babelrc— Babel custom configuration.
.gitignore— Git ignore file to ignore node_modules and such other files.
package-lock.json— NPM related file for holding NPM related metadata and
webpack.config.js— Webpack configuration file.
Read the files explained above. All of the files are heavily inline documented. All you have to do is following:
- Open up your favorite terminal app.
- Makes sure NodeJS and NPM are installed by running
npm -vto check their versions.
- Access this directory
- Install node dependencies by running
sudo node install
- For building the
block.build.jsyou can use run npm scripts.
- To watch and build run
npm run dev
- To build for production run
npm run build