Creating a Block

Setting up the project

In this course we have created a custom theme for a fictional school using the traditional or classic approach. Now we will create the same theme as a block theme using the Gutenberg block editor.

Copying starter files from the traditional theme

Open the Excellence theme folder. We will copy the following things to the Excellence-Block theme folder:

1. We need the assets folder, which has the CSS and images folders.

2. We need the functions.php file, which enqueues the styles and registers the custom post types (from the mu-plugins folder).

3. We need the src folder, which contains the files that power the slideshow animation as well as the counters and mobile menu. It also contains the files for the search functionality as well as the lecture notes feature.

4. We also need the inc and template-parts folder where we created files that help power the search functionality.

Creating package.json file

Next, we also need a package.json file that describes the dependencies needed for compiling and running the project.

With the theme folder opened in VS Code, type npm init --yes in the terminal to create a package.json file with default configurations.

The terminal option can be found in the "View" menu of VS Code.

Installing @wordpress/scripts package

Next, install the @wordpress/scripts package by running the command npm install --save-dev @WordPress/scripts. This command will install the package, which in turn installs Babel and webpack to compile and build the files. This is a dev dependency as we only need it in development and not in production. After running this command, we can see the node_modules folder in the theme folder.

After the @wordpress/scripts package is installed and added as a dependency in the package.json file, we need to specify the scripts so that the code can be compiled. These scripts start webpack.

• The start script is used when actively developing the code as it keeps on watching the code for any changes and compiles it again as soon as the code changes.

• The build script on the other hand runs once and creates a minified file.