Using Create-Block Template

Create Block is an officially supported tool for scaffolding a WordPress plugin that registers a block. It generates PHP, JS, CSS code, and everything you need to start the project. It also integrates a modern build setup with no configuration.

How to Do It

The template for create-block is located in this repo: https://github.com/bu-ist/create-block-templates

responsive-child-starter-3x-block-editor and bu-plugin-starter-blocks have a script for creating blocks from the ID template built in:

npm run new-id-block

If you are not using one of these starter repos, you can still use the create block template by running:

npx @wordpress/create-block@latest --template @bostonuniversity/create-block-templates --no-plugin

What It Does

Let’s break this down. new-id-block is a script defined in package.json. When called, it runs two scripts:

  1. cd src/blocks
  2. npx @wordpress/create-block@latest –template @bostonuniversity/create-block-templates –no-plugin

The first script changes the terminal to the src/blocks directory in your project.

The second script runs the official WordPress create-block script with two predefined options:

  1. –template @bostonuniversity/id-block-template
  2. –no-plugin

--template tells the script to use the files in @bostonuniversity/id-block-template as the template for our block. You can learn more about template files here.

--no-plugin tells the script to only scaffolds block files into the current directory. If this flag is not present, the script will install node_modules, create the src and build folders in the current directory. We don’t want this as we’ve already set all that up.

You will be asked a series of questions…

  • The template variant to use for this block <selection: theme or plugin>
  • The block slug used for identification (also the output folder name) <string>
  • The internal namespace for the block name (something unique for your products) <string>
  • The display title for your block <string>
  • The short description for your block (optional) <string>
  • The dashicon to make it easier to identify your block (optional) <string>
  • The category name to help users browse and discover your block <selection>

Note: once you run this script, your terminal will be in the blocks folder.

See https://github.com/bu-ist/id-block-template/blob/develop/README.md for additional known issues.

WordPress Template

You can also use the default WordPress template by running npm run new-wp-block.

File Created

  • block-base.scss – SCSS partial that contains all of the base (structural) styles for this block.
  • block.json – Simplifies the process of defining and registering a block by using the same block’s definition in JSON format to register the block on both the server and the client. Read more at WordPress Developer Resources and block.json
  • edit.js – Contains the React component responsible for rendering the block’s editing user interface, allowing users to interact with and customize the block’s content and settings in the Block Editor. This component gets passed to the edit property of the registerBlockType function in the index.js file.
  • index.js – The entry point file for JavaScript that should only get loaded in the Block Editor. It’s responsible for calling the registerBlockType function to register the block on the client and typically imports the edit.js and save.js files to get the functions required for block registration.
  • editor.scss – Styles that are applied inside the editor only. See Editor Styling
  • render.php – PHP file to use when rendering the block type on the server to show on the front end. See Render Template
  • style.scss – Styles that are applied both on the front of your site and in the editor. See Frontend Styling
  • view.js – Use this file for JavaScript code that you want to run in the front-end on posts/pages that contain this block. See Frontend JS