Creating a Block Using a Template

Within the plugin and theme starter repos, there are two npm scripts that will aid you in creating a new block:

  • new-id-block: Pulls in the skeleton of a new block based on the BU block template.
  • new-wp-block: Pulls in the skeleton of the WordPress default block.

new-id-block

Screenshot of the questions asked to build a new block from 'npm run new-id-block'

Running npm run new-id-block will download the BU block template from NPM, and ask a series of questions to name the new block and set up the directory structure. The “theme” and “plugin” variants are both dynamic blocks. There is a third option, “static”, which will give the skeleton of a static block, but still BU-specific.

Screenshot of the BU plugin block directory tree.

new-wp-block

Screenshot of the WordPress default block creation script.

The new-wp-block will run through a similar set of questions, but the difference is there are only two options for variants, “static” and “dynamic”, defaulting on “static”. As you can see below, the tree is much simpler.

Screenshot of the WordPress standard block skeleton, in the static variant.

From here, you can customize the skeletons for the plugin or theme’s requirements. The blocks will compile into the build folder and will be available in the edit screen.