https://github.com/jverneaut/gutenberg-webpack-plugin
A lightweight, developer-friendly alternative to @wordpress/scripts that simplifies the setup and build process for custom Gutenberg blocks.
https://github.com/jverneaut/gutenberg-webpack-plugin
gutenberg webpack
Last synced: 11 months ago
JSON representation
A lightweight, developer-friendly alternative to @wordpress/scripts that simplifies the setup and build process for custom Gutenberg blocks.
- Host: GitHub
- URL: https://github.com/jverneaut/gutenberg-webpack-plugin
- Owner: jverneaut
- License: mit
- Created: 2025-04-07T21:22:41.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-03T18:22:23.000Z (about 1 year ago)
- Last Synced: 2025-08-08T18:35:23.552Z (11 months ago)
- Topics: gutenberg, webpack
- Language: JavaScript
- Homepage:
- Size: 655 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# GutenbergWebpackPlugin
A lightweight webpack plugin that simplifies the setup and build process for custom Gutenberg blocks. It’s designed to integrate easily into any existing Webpack configuration with minimal boilerplate.
It uses a lot of parts from [@worpress/scripts](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/).
It also integrates nicely with my other package: [HTML To Gutenberg](https://github.com/jverneaut/html-to-gutenberg).
## Installation
```sh
# Install GutenbergWebpackPlugin
npm install --save-dev @jverneaut/gutenberg-webpack-plugin
# Install Webpack (if not already set up)
npm install --save-dev webpack webpack-cli
```
## Usage
```js
// webpack.config.js
import GutenbergWebpackPlugin from "@jverneaut/gutenberg-webpack-plugin";
export default {
entry: "./index.js", // your main app entry for non-Gutenberg stuff
plugins: [
// "./blocks" is your blocks folder
new GutenbergWebpackPlugin("./blocks", {
outputPathPrefix: "blocks", // optional, default is "blocks"
}),
],
};
```
If you have issues making it work with an existing webpack config that is already setup to build CSS and SASS files, you can use the `disableCssLoaders` and `disableSassLoaders` options.
```js
new GutenbergWebpackPlugin("./blocks", {
disableCssLoaders: true,
disableScssLoaders: true,
});
```
This will prevent conflicts between the two and should properly handle styles as long as your webpack config is standard enough.
## Block Structure
Given an input folder that looks like this:
```
blocks/
└── example-block/
├── block.json
├── edit.js
├── index.js
└── render.php
```
In your block.json, reference files like so:
```json
{
"name": "custom/example-block",
"editorScript": "file:./index.js",
"render": "file:./render.php"
}
```
The plugin will:
- Add index.js as a Webpack entry named `blocks/custom/example-block/index`
- Copy `block.json`, `render.php`, and any other referenced files into the final build output directory
- Create the `*.asset.php` files with `@wordpress/dependency-extraction-webpack-plugin`
## Output
Output files will be written to:
```
dist/
└── blocks/
└── custom/
└── example-block/
├── block.json
├── index.asset.php
├── index.js
├── render.php
```