
# Welcome
In this post we will go over how to set up your plugin to use React within its admin page.

## Dev Environment
You could use creat-react-app inside a sub folder of your plugin but, in my opinion, it creates to many things that are not needed.
So we won't be using that for this application.

I'll be starting with my default multi-block plugin template.
You can check out my previous post on how to fully set that up **[@ this link](/posts/wp-multi-block-setup)**.
Through that setup I already have npm and webpack set up for registering multiple block-types.
My directory structure looks like this after I have added a place for my admin pages.

![Starting directory structure](wp-admin-react-01.png)

First we will install react and react dom as dependencies.

```shell
npm install react react-dom 
```

Then we need to install our dev dependencies (Babel compiler).

```shell
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
```

You will need to add a .babelrc file to your plugin root directory with the following as the contents.

```shell
{  
 "presets": [
        "@babel/preset-react",
        "@babel/preset-env"
            ]
}
````

And last some helpers for webpack.

```shell
npm install --save-dev style-loader css-loader file-loader
```

## Webpack
Next is configuring webpack in a way that will compile our React, while still doing what it needs to do for the WordPress blocks.
We do this by giving module exports an array with two different config objects.
This setup will also not do any code splitting making our lives a bit easier for this specific instance.

```js
const defaultConfig = require('@wordpress/scripts/config/webpack.config');
const path = require("path");

module.exports = [
    {
    ...defaultConfig,
    entry: {
        'test-one': './includes/blocks/block-one/src',
    },
},
    {
        entry: "./includes/admin/pages/main/src/",
        output: {
            filename: "wp-multi-block-main.js",
            path: path.resolve(__dirname, "build"),
        },
        resolve: {
            modules: [__dirname, "src", "node_modules"],
            extensions: ["*", ".js", ".jsx", ".tsx", ".ts"],
        },
        module: {
            rules: [
                {
                    test: /\.jsx?$/,
                    exclude: /node_modules/,
                    loader: require.resolve("babel-loader"),
                },
                {
                    test: /\.css$/,
                    use: ["style-loader", "css-loader"],
                },
                {
                    test: /\.png|svg|jpg|gif$/,
                    use: ["file-loader"],
                },
            ],
        },
    }
];
```

The first object in module exports, as shown above, is for using the default wp configs with multiple blocks,
The second object is what will compile our React code.
Make sure your entry is pointing to the right directory and your output file makes sense for where it will be applied.
If you are wanting to have multiple separate react pages then just add another config object to the array above with the entry and output changed appropriately.

## Adding the admin page to WordPress
Let's add the admin page to WordPress inside our plugins main php file.

```php
function menu_page() {
	add_menu_page(
		page_title: 'Multi Block',
		menu_title: 'Multi Block',
		capability: 'manage_options',
		menu_slug:  'multi-block',
		function: function () {
			include_once WP_MULTI_BLOCK_PLUGIN_DIR . 'includes/admin/pages/main/wp-multi-block.php';
		},
		icon_url:   'dashicons-schedule',
		position:   3
	);
}

add_action( 'admin_menu', 'menu_page');
```

Now lets make a php file that we specified above to properly render the menu page.
Put some text in there of your choice, just to make sure it is showing the right page.
Now you should see your admin page in the menu and when you click on it, you should see the text that you put in the pages php file.

## Setting up the React files
In your pages src folder (wp-multi-block/includes.admin/pages/main/src), add and index.js file and an App.js file.
This will be the root of all our React code.

index.js

```js
import React from "react"
import ReactDom from "react-dom"
import App from "./App";

ReactDom.render(<App/>, document.querySelector("#wp-multi-block"))
```

App.js

```js
import React from "react";

const App = () => (
    <div>
        <h1>Hello From React</h1>
    </div>
);

export default App
```

Now in your php file for the page, add a div with the selector you specified in your index.js file.
Ok we are almost there, just need to properly enqueue the scripts so WordPress will load them on this admin page.
Back in the plugins main php file lets make some changes to the function that adds the admin page.

```php
function menu_page() {
	$hook_suffix = add_menu_page(
		page_title: 'Multi Block',
		menu_title: 'Multi Block',
		capability: 'manage_options',
		menu_slug:  'multi-block',
		function: function () {
			include_once WP_MULTI_BLOCK_PLUGIN_DIR . 'includes/admin/pages/main/wp-multi-block.php';
		},
		icon_url:   'dashicons-schedule',
		position:   3
	);

	function script_enqueue() {
		wp_enqueue_script(
			handle: 'wp-multi-block-js',
			src:                   WP_MULTI_BLOCK_PLUGIN_URL . 'build/wp-multi-block-main.js',
			deps:                  [],
			ver:                   1,
			in_footer:             true
		);
	}

	add_action( 'admin_print_scripts-' . $hook_suffix, 'script_enqueue');
}

add_action( 'admin_menu', 'menu_page');
```

Here we are using the return value of the add_menu_page() to get the page suffix.
Then we add an action admin_print_scripts- with the $hook_suffix that calls a function that enqueues the compiled script at the proper url address.

Now run npm start, navigate to your custom admin menu page, and you should see your React code there.

Add React To WordPress Admin


# Welcome
You have a great idea for a plugin, and you have some coding experience your self.
You decide to check out the WordPress documentation and get started.
Things are going well until you realize that what you have done so far is only good for one block.
You don't want to have to make a new plugin for each block.
What do you do?

Well here we will solve that problem, and walk through how to set up your plugin for as many blocks as you would like.

## Directory Structure
After following the WordPress documentation for getting started with a new block plugin you should have a directory structure that looks like this.

![Initial project directory](wp-multi-block-01.png)

We are going to need to rearrange it just a bit.
Let's start with making a place for all of our blocks.
I like to start by adding an includes directory that then has all my blocks in there, like so.

![Altered project directory](wp-multi-block-02.png)

Then we need to move all the related files for the individual block to its own block folder, excluding the contents of the build directory.
Which in this case should just be the src directory and its contents.

![src moved to block directory](wp-multi-block-03.png)

## Updating The Plugin Files
Now that we have a place to put all the individual blocks we need to let WordPress know.
In the root of your plugin directory you should see a file with the name of your plugin .php.
In my case it is wp-multi-block.php.
Inside that file you should see a function that registers the block with WordPress.

```php
function create_block_wp_multi_block_block_init() {
	register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'create_block_wp_multi_block_block_init' );
```

Let's change it so that it will register a new block type for each potential block we might have.
First create an array that holds the string value of each of our block directories.
Then we'll parse through each one's src folder to register the block.

```php
function create_block_wp_multi_block_init() {
    $blocks = array(
        'block-one',
    );

    foreach( $blocks as $block ) {
        register_block_type( block_type: WP_MULTI_BLOCK_PLUGIN_DIR . 'includes/blocks/' . $block . '/src/');
    }
}
add_action( 'init', 'create_block_wp_multi_block_init' );
```

Now let's update the block.json files in the block directories.
At the bottom of the file you should see "editorScript", "editorStyle", and "style".
We need to point them to the proper directory where the compiled code will be in relation to the file we are in.

```json
    {
  "editorScript": "file:../../../../build/block-one.js",
  "editorStyle": "file:../../../../build/block-one.css",
  "style": "file:../../../../build/style-block-one.css"
}
```

## Webpack Config
Now that we have told wordpress where all of our block files are, we need to let webpack know as well.
Start by creating a webpack.config.js in your root plugin directory.
Inside we will first get the default configs then add our own custom entry points like so.

```js
const defaultConfig = require('@wordpress/scripts/config/webpack.config');

module.exports = {
    ...defaultConfig,
    entry: {
        'block-one': './includes/blocks/block-one/src',
    },
};
```

When you run npm start or npm run build it will now go through each of the blocks you have and place the proper files in the build folder.

Have Multiple Blocks In WP Plugin


## Previously
In the last part we covered gathering all the information needed for the environment variables to get the contact form working.
Now the last step, deployment.

## Deploying Your Blog
In this part of the series I will walk you through deploying your blog on using Vercel as a hosting provider.
They make it extremely simple and is free for a hobby site.

## Git Repository
First we need to get your project into a cloud git provider.
I recommend GitHub for this.
It is free, easy and there is lots of support for it.

If you are familiar with git then skip to the next section.
The following is intended for those who don't know how git works and don't really care to.

Go to [https://github.com/](https://github.com/) and create your account.
Then in the top right you should see a plus sign.
Click that and select new repository.
There you will enter a name for your repository like krittit-blog-live.
Select private or public either is fine but in this case I would recommend private.
Then click create repository.

![Screen after creating git repository](krittit-blog-setup-5-1.png)

You should see the above after the repository is created.
Click uploading an existing file.
Then open your file explorer and navigate to your projects root directory.
There you will select all the files and folders except for node-modules and .next.
I recommend doing this by holding shift down clicking blog-posts then, while still holding shift, click the last file.
This should have selected all the files except .idea and .next.
Now press the ctrl key and click node-modules.
That should hav unselected node modules for you while keeping the rest of the files selected.

Once that is done drag the files over to the area shown bellow in your GitHub repository.

![GitHub drop files area](krittit-blog-setup-5-2.png)

You should see all your files being uploaded.
Now scroll down to the bottom of the screen and slick commit changes.
Congratulations your project is not on GitHub.

## Vercel
Now that that is finished, it's time to create our Vercel account.
Got to [https://vercel.com/signup](https://vercel.com/signup) and select continue with GitHub.
There it will link your GitHub account to it, be sure to give the appropriate permissions when asked.

Once that is finished you should see a screen asking you to import a git repository.
Click add, say you only want to give accesses to a single repository, select your blog's repository, then click import.

![Vercel screen after import](krittit-blog-setup-5-3.png)

You should see a screen like the above now.
Here, if you have chosen to have the contact form, is where you will input the environment variables for it.
Just expand the environment variables tab and put the information in there like bellow, clicking add after each one.

![.env file of variable](krittit-blog-setup-5-4.png)

![Vercel environment variable](krittit-blog-setup-5-5.png)

Then click deploy.
It will take a few minutes, but afterwords you should see the domain to where your site is currently accessible from.
Visit it and make sure everything is working.

## Domain
This next part is completely optional.
You can leave your blog at the domain that was given, or you can route a custom domain to it.
For this just navigate to settings, then domains, type in your domain and click add.
FYI for this to work you need to have already purchased a domain from a domain registrar.
After clicking add you should see your domain with a routing error and instructions on how to fix it. 
Copy the cname they give you, go to you domain registrar, select your domains DNS setting and add the cname or a record that was provided.
After that is saved and is live your blog should come up at your new domain.

## Congratulations
You have created fully functioning blog on one of the most advanced frameworks available.

## Next Steps
Now anytime you want to post to your blog just create your blog post like you did the first one then upload that folder to the public/blog-posts folder in your git repository.
Vercel will see the change and automatically update the blog.

KrittIT Blog Setup Part 5


## Previously
In the last part we configured and created your first blog post.
Only a step or two left till you can deploy your site.

## Contact Form Configuration
In this section we will go over how to properly set up the environment variables for the contact form.
If you chose not to enable the contact form then you can skip the post and head to the next one.
Once the variables are set it will make it so that when someone presses the submit button on the contact page, you will get an email with their message and info.
We will go through each variable one by one.

**Security** - Throughout the rest of this post we will be referring to the .env file. This file is meant to show you the variable names and approximations of their corresponding values.
I highly recommend you don't put your actual credentials in this file.
Instead, I recommend you write this information down somewhere handy, so it is available when we deploy your blog.
When deploying there will be a place to input these variables in a secure location with your hosting provider.
If you are the only one that will have access to this repository and just are not that worried about then filling out the .env file properly will get the contact form working as well.

## .env File
In your projects root directory you should see a file called .env.
If you don't see it then you will need to enable show hidden files in your OS

---

### TO_EMAIL_ADDRESS
Here you will put the email address you want to receive the email on.

```shell
TO_EMAIL_ADDRESS=example@example.com
```
---

### FROM_EMAIL_ADDRESS
Here you will put the email address that will be sending the email.
This can be the same value as the TO_EMAIL_ADDRESS variable.

```shell
FROM_EMAIL_ADDRESS=example@example.com
```

---

### SMTP_ADDRESS
This one may take a bit of work depending on who your email provider is.
Search for 'your email provider' smtp settings.
In the settings that come up you should see a smtp server address.
It will look like smtp.something.com.
Make sure it is the outgoing server settings address.
You will put the server address they provided as the value of this variable.

```shell
SMTP_ADDRESS=smtp.example.com
```

---

### SMTP_PORT
Within the information you found by searching for the smtp settings should be your port number.
Make sure you are looking at the outgoing settings and put the number they give you as the value for this variable.

```shell
SMTP_PORT=587
```

---

### EMAIL_SECURE
Still within the information you found when searching for your smtp settings, you should see something referring to ssl.
If your outgoing server uses ssl put true as the value if not put false.
Sometimes it will be dependent on what port you are using weather or not ssl is enabled so be sure to make sure that the value you put here corresponds with the port you imputed above.

```shell
EMAIL_SECURE=true
```

---

### EMAIL_USERNAME
Here you will put your username for the sending email address as the value.
Be aware this maybe your whole email address instead of just the part before the @ symbol.

```shell
EMAIL_USERNAME=example@example.com
```

---

### EMAIL_PASSWORD
Here you will put your password for the sending email address as the value.

```shell
EMAIL_PASSWORD=example
```

---

Add React To WordPress Admin

Have Multiple Blocks In WP Plugin

KrittIT Blog Setup Part 5

KrittIT Blog Setup Part 4