I’ve been writing tutorials on how to extend Gutenberg Block Editor and having a lot of requests to create one for “Creating Block and Build Processes”. In this article, I’ll be very happy to do something about this request with added PostCSS build processing to make it more useful and extra special. I hope this will be very helpful.
But first, I would really appreciate it if you could upvote my EditorsKit plugin at ProductHunt. I’ve built this plugin to provide set of tools to easily navigate the editor and improve writing and page creation workflow. Thank you in advance.
Adding wp-scripts Package to the Plugin
Assuming you haven’t created the plugin folder yet, let’s create a new folder inside wp-content > plugins and call it my-custom-plugin.
wp-scripts or @wordpress/scripts
You can learn more about this package on the npm documentation. It’s stated there that wp-scripts is a collection of reusable scripts for WordPress development. For convenience, every tool provided in this package comes with a recommended configuration.
Installing Package with npm
I’m also assuming here that you are already familiar with npm. If not, please use this link to learn more and install npm.
Now let’s install wp-scripts package by running the code below to your console or terminal.
npm install --save-dev @wordpress/scriptsIf you open package.json file under my-custom-block folder you will see that @wordpress/scripts has been added to it.
"devDependencies": {
"@wordpress/scripts": "^3.4.0"
}Setting Up wp-scripts
@wordpress/scripts packages are designed to be configured using scripts section in the package.json file. Add the following under scripts to take advantage of the configurations that have already been setup by the Gutenberg WordPress team for build processes, linting and more.
{
"scripts": {
"build": "wp-scripts build",
"check-engines": "wp-scripts check-engines",
"check-licenses": "wp-scripts check-licenses",
"lint:css": "wp-scripts lint-style",
"lint:js": "wp-scripts lint-js",
"lint:pkg-json": "wp-scripts lint-pkg-json",
"start": "wp-scripts start",
"test:e2e": "wp-scripts test-e2e",
"test:unit": "wp-scripts test-unit-js"
}
}build: Transform your code to minified version optimized for production with best performance.check-engines: Checknpmcompatibility.check-licenses: Validate that all dependencies of a project are compatible with the project’s own license.lint-css: Enforce coding standards for CSS files.lint-js: Enforce coding standards for Javascript files.start: Start compiling javascript and stylesheets according to the configurations. Automatically rebuild if you make changes to the code and you will see errors on console, if there are any.test:e2e: Running end to end tests.test:unit: Running unit tests.
As always, please refer to the documentation in order to check the scripts information.
Adding PostCSS to Handle .css, .scss or .sass Build Processing
Next is to make sure that when running npm start, stylesheets will run the build processing too and will be rebuild when making changes. Files with .css, .scss or .sass will automatically be included.
Installing Packages
Install the required packages for PostCSS configuration by running the following command on your console or terminal.
npm install --save-dev postcss-preset-env mini-css-extract-plugin path css-loader node-sass sass-loader postcss-loader ignore-emit-webpack-pluginIf you check package.json again, you will now see the dependencies installed.
"devDependencies": {
"@wordpress/scripts": "^3.4.0",
"css-loader": "^3.1.0",
"ignore-emit-webpack-plugin": "^2.0.2",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.12.0",
"path": "^0.12.7",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"sass-loader": "^7.1.0"
}Modify WebPack Configuration
wp-scripts can be modified easily by creating webpack.config.js on my-custom-block folder, so go ahead and create this file. Then, add the following inside:
Configuration is now complete. 💪 Let’s start creating our custom test block.
How to Create Custom Block Plugin
In this tutorial, you need to create and make sure the following files and folders are available on my-custom-block folder. wp-scripts expects index.js javascript entry point located inside src folder.
+—— my-custom-block
| +—— plugin.php
| +—— src
| +—— index.js
| +—— editor.scss
| +—— style.scss
| +—— blocks
| +—— container
| +—— index.js
| +—— editor.scss
| +—— style.scss
| +—— buildIn this sample plugin, we will create “Custom Container” block which will accept any blocks as inner content. To demonstrate that the stylesheets are working and processes are running, I’ve included few lines of CSS to add padding and shadow on the container element.
Then add the following codes inside the designated files:
plugin.php
src/index.js
src/editor.scss
src/style.scss
src/blocks/container/index.js
src/blocks/container/editor.scss
src/blocks/container/style.scss
Custom Block Created!
Now open your console or terminal again and run npm start to start the build process.
Next, go to your WordPress installation now and activate the My Custom Block plugin. Then, head over and create a new post. You will now see that our Custom Container block is available under Common Blocks category.
You can view the full plugin codes and files on this Github repository.
Final Thoughts
Though wp-scripts help a lot to ease the webpack configurations, it’s a huge question why they didn’t add PostCSS build processing?. Perhaps they will add that in the near future, but for now you can use this article as a solution. If you want to learn more about my other tutorials, I’ve listed them below.
Leave a Reply