Creating A WordPress Plugin Using WordPress Scripts

In the first section of this course, we built a small React app. In this section, we will set up a plugin to use those components in a Gutenberg block. You will learn how to apply the technical skills of React testing and the TDD methodology to WordPress block development.

Creating A Block Plugin

In your local WordPress' plugins directory, create a new directory for this plugin and set up package.json following these steps:

  • Inititalize package.json
    • npm init
    • Answer all the questions
  • Add WordPress Scripts
    • yarn add @wordpress/scripts
  • Add a JavaScript file at /src/index.js
    • This is the main JavaScript file for the block.
  • Create a block.json
  • Create a main plugin file to enqueue JavaScript and CSS.

Add Scripts To package.json

Yarn and npm can be used as a test runner. Instead of memorizing the commands that @wordpress/scripts provides, we should add shortcuts in package.json scripts. See the README for more information.

{
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start",
"test:e2e": "wp-scripts test-e2e --config e2e/jest.config.js",
"test:unit": "wp-scripts test-unit-js --config jest.config.js"
}
}

At this point, running yarn build should compile the JavaScript in src/index.js to /build/index.min.js. If so, you are probably ready to write the plugin code.