Switch branches/tags
Nothing to show
Find file History


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.js via 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.json & package-lock.json β€” NPM related file for holding NPM related metadata and build/dev NPM scripts.
  • webpack.config.js β€” Webpack configuration file.

Getting Started!

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 node -v or npm -v to check their versions.
  • Access this directory cd /path/to/gutenberg-boilerplate/block/02-basic-esnext/
  • Install node dependencies by running node install or sudo node install
  • For building the block.js file into block.build.js you can use run npm scripts.
  • To watch and build run npm run dev
  • To build for production run npm run build