Building a Gutenberg sidebar plugin Part 2: Adding structure and asset bundling
Tags: wordpress, webdev, php, javascript
Published: 2019-09-08 18:07:21

---
title: Building a Gutenberg sidebar plugin Part 2: Adding structure and asset bundling
published: true
description: A multi-part tutorial, showing how you can build WordPress Gutenberg sidebar plugins by developing a simple SEO tag editor sidebar.
canonical_url: https://since1979.dev/building-a-gutenberg-sidebar-plugin-part-2-adding-structure-and-asset-bundling/
cover_image: https://since1979.dev/wp-content/uploads/2019/08/building-a-gutenberg-sidebar-plugin-part-2-1000x450.jpg
tags: wordpress, webdev, php, javascript
---
[Originally posted on my website on September 8th 2019](https://since1979.dev/building-a-gutenberg-sidebar-plugin-part-2-adding-structure-and-asset-bundling/)

### Introduction

In the [previous article](https://since1979.dev/building-a-gutenberg-sidebar-plugin-part-2-adding-structure-and-asset-bundling/) i showed you how to register the *Metatags* plugin with WordPress using Oop Php. In this article we will continue by adding a folder structure and a [Webpack asset bundler](https://webpack.js.org/) using [Laravel Mix](https://laravel-mix.com/) to process the Css and [React](https://reactjs.org/) Javascript needed for the Gutenberg editor.

I'm gonna quickly show you how to set up a *Package.json* file and *Laravel Mix* to bundle our assets. If you are unfamiliar with Laravel Mix, Please read my "[Laravel Mix, Sass and ES6 Modules in theme development](https://since1979.dev/wordpress-laravel-mix-sass-and-es6-modules-in-theme-development/)" article first.

### Folder sturcture.

We first need to add some structure and folders to our project. At this point we only have a *metatags.php* in our plugin directory, and if you created the test files in the previous article there should be a *dist/css/metatags.css* and a *dist/js/metatags.js* file.

Because we are going to use an asset bundler we are going to need a *src/* directory where our working files will live, and a *dist/* directory where the bundled files will be generated. Below is a screenshot of the finished projects files.

![](https://since1979.dev/wp-content/uploads/2019/08/metatags-gutenberg-plugin-file-structure.png)

### Source directory

Lets start by adding a src/ directory to our project. In this directory we will put our working files. Meaning that we will be writing our code in this directory.

Within the *src/* directory create the following files.

-   ***src/scss/metatags.scss*** This file will hold the styles for this project.
-   ***src/js/metatags.js*** This will be our main Javascript file.

### Distribution directory

This directory will hold the files that will be generated by our asset bundler, and that will be used to run the plugin. Meaning that these files will be the ones we enqueue with the Metatags class..

If you created the test files earlier, you should already have this directory set up. If not create the following files.

-   ***dist/css/metatags.css*** The main stylesheet for the plugin.
-   ***dist/js/metatags.js*** The main Javascript file for the plugin.

### .gitignore

If you want to use Git to version the plugin you should add a *.gitignore* file with the following content.

{% gist https://gist.github.com/vanaf1979/721184434861c2d26d6d9204fced6236 %} 

This will make sure that the *node_modules* folder and the *package-lock.json* file won't be added to your repository.

### Package.json file

To install the Laravel Mix asset bundler, we are gonna need [Npm](https://www.npmjs.com/) in our project. To setup Npm create a file called *[package.json](https://docs.npmjs.com/files/package.json)* in the root of the plugin and add the following content.

{% gist https://gist.github.com/vanaf1979/8d8bea2563cd726e8c7a7b98722a13be %}

Here we provide some basic info about the project. And add some scripts that will serve as our Npm commands for Laravel Mix later.

### Install Laravel Mix

To create a Gutenberg plugin with React we are going to need an asset bundler. In this case we are going to use Webpack, but since Webpack is a bit cumbersome to configure, we will use Laravel Mix which is a wrapper Api making configuring Webpack a breeze.

To install Laravel Mix into our project Move your terminal into the root of our plugin, and run the following command.

```
$ npm install laravel-mix sass sass-loader --save-dev
```

With this command we add Laravel Mix and the needed Sass packages to our project.

### Webpack.mix.js

Now that we have Laravel Mix installed we need to provide it with a configuration file. Please create a file called *webpack.mix.js* in the root of our plugin and add the following code.

{% gist https://gist.github.com/vanaf1979/5f57fb167fda3066b5d10ad6a98552af %}

You can check out the [official docs](https://laravel-mix.com/docs/4.1/installation), or check out [my article](https://since1979.dev/wordpress-laravel-mix-sass-and-es6-modules-in-theme-development/) to learn more about configuring Laravel Mix.

With this config we tell Laravel Mix to take our two entry point files in the *src/* directory and process/output them into the *dist/* directory.

Next we add a *webpackConfig* object. All this does is let Webpack know that the React and ReactDom packages will be provided by another bundle. Since Gutenberg already contains copies of these packages we don't need to include these in our own bundle. But if we don't tell Webpack about this it will think that the packages are missing, exit with an error and it won't bundle our files.

### Laravel Mix Npm commands

Now that we have Laravel Mix installed we can run it by using the script commands we added to the *package.json* file earlier. We have three commands at our disposal namely:

```
$ npm run dev
```

This command will process and bundle our plugin files for development use.

```
$ npm run watch
```

This command will do the same as npm run dev but will keep running and watch for file changes. If any of our files change it will automatically process and rebundle our files.

NOTE: To stop the *npm run watch* process you can type *ctrl + c* in your terminal window.

```
$ npm run production
```

This command will process, bundle and minify our files for use in distribution a.k.a your plugin on the WordPRess plugin directory.

### Testing our setup.

To check if everything is working like we want it to we need to add some content to our files in the *src/* directory and see if this gets processed to the fies in the *dist/* directory.

Add the following content to the *src/js/metatags.js* file.

{% gist https://gist.github.com/vanaf1979/5e6d71a5462446957bfe5d76b4c19e67 %}

And the following content to the src/scss/metatags.scss file.

{% gist https://gist.github.com/vanaf1979/2636f04e61facab4731307cdf30b579a %}

Save both files and in your terminal run the command below.

```
$ npm run dev
```

If all goes well your should see a output like shown below.

![](https://since1979.dev/wp-content/uploads/2019/08/laravel-mix-output.jpg)

If you now go to any Gutenberg edit screen in your WordPress admin you should have some funky looking blue borders accros the screen, and get a alert showing the *"Content of metatags.js in scr/ is been copied to the dist/ directory."* message.

If you don't get this result. Please check this [Github Repositorie of the finished project](https://github.com/vanaf1979/gb-plugin-tutorial) to check if you missed something along the way..

### Moving forward

That's it for now setting up the folder structure and assets bundling. In the next article we will start adding Javascript code, and register our plugin with Gutenberg.

**Follow me on twitter** [**@Vanaf1979**](https://twitter.com/Vanaf1979) **or here on Dev.to** [**@Vanaf1979**](https://dev.to/vanaf1979) **to be notified about the next article in this series, and other WordPress related stuff.**

IIf you have any questions, want to leave a comment or want to point out a mistake i made please drop you comment here so i can get back to you.

**Thanx for reading.**