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
  • Copy and edit this file
• Create a main plugin file to enqueue JavaScript and CSS.
  • Copy and edit this file

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.