
# 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
```

---

KrittIT Blog Setup Part 4


## Previously
We configured the site-settings-and-info.js file.
Your blog should really be taking shape now.
All that is missing are blog posts.

## Your First Blog Post
In this section we'll go through putting together your first blog post.
Going over the directory structure, how to format your .md file, as well as how to use images within your post

## Directory and File Structure
First you will create a directory that will ultimately go in your public folder.
The name of the directory need to be in all lowercase without any spaces or special characters.

Example

Post name - KrittIT Blog Setup Part 3 :: directory name - krittit-blog-setup-3

Within that directory you need to create a .md file with exactly the same name.

krittit-blog-setup-3.md

---

## .md File Header
At the top of your md file will be a header that contains all the needed information for the blog post to work.
After we are done it should look like this.

```md
---
title: KrittIT Blog Setup Part 3
image: krittit-blog-setup-3.png
date: 2022-3-26
filterKeys: NextJS, JavaScript, React
excerpt: In this part we will go through creating your first blog post.
series: KrittIT Blog Setup
numberInSeries: 3
---
```

The tree dashes (---) must be before and after the header information.

**title:** The title of your blog post that will be displayed in the preview as well as the top of the blog post.

**image:** This is the image that will be displayed in the preview.
It must be inside your blog post's directory.

**date:** The date of the blog post in YYY-MM-DD format.

**filterKeys:** Words that are seperated by a coma and space.
They should correspond to the filter keys you set in the site-settings-and-info.js file.

**excerpt:** And excerpt or a short description from your blog post that will be displayed in the preview.

**All the above** are required fields.
All except filter keys requires a value.
The **ones below are optional** and will only work if you set series to true in the site-settings-and-info.js file.

**series:** The name of the series this posts belongs to.
This will be shown on the series page and have all posts with its name inside it.

**numberInSeries:** The number this post is within the above series.
The series must start at 1 and increment by 1.

And again close off the header with **three dashes (---)**.

---

## Your Blog Post
After your header you will put the content of your blog post in Markdown format.
If you are unfamiliar with Markdown I recommend going to **[this link](https://towardsdatascience.com/the-ultimate-markdown-cheat-sheet-3d3976b31a0)** to see how to properly format your post in the way you want.

### Images
Images inside your post must either be inside the same directory as your blog post or on another website.

Example

```md
![Image Alt Text](actual-image-name.png)

![Image Alt text](https://actual-image-url.com/actual-image.png)
```

### Code
The default supported code formats are as follows.

* PHP as php
* JavaScript as js
* Markdown as md
* Java as java
* CSS as css
* Shell as shell

I will go over how to add more code styles in a later post.
The code snippet must have three backticks(```) above and bellow.
After the top three backticks you will specify the code style as shown bellow.

````md

```js
console.log(x);
```
````

KrittIT Blog Setup Part 3

## Previously
In the last part we got the initial project setup and customized the look of it.
Now it's time to customize the content of it.

## Site Settings and Info
In the root of your project directory you should see a directory called global.
Inside there is a file called site-settings-and-info.js.
Open it with your text editor and let's get started.
We will go over each setting, covering both what it does and how to configure it.

---
### seriesOn
This will enable you to group relative posts together in a specific order.
It will add the series link to the navigation as well as pagination to all series posts as long as they are numbered in order without skipping any numbers.

Give this either a true or false value, true for on false for off.

---
### contactFormOn
This will enable a contact form on the contact page(we will cover how to properly set up the contact form in a later post).
If it is off then your social media links will be displayed instead.

Give this either a true or false value, true for on false for off.

---
### logo
With this you can specify your logo image along with the alt text for the image.
Or choose to not have an image and to just use the alt text for your logo.

You can configure as shown below.

![Text for logo config](krittit-blog-setup-2-1.png)

---
### aboutInfo
This is the text that will be displayed on the home page next to the about image.
Simply replace the string with your own.

---
### contactStatement
This is the text that will be on the contact page.
Simply replace the string with your own.

---
### filters
Here you will set up filters that can be used on the posts page to only show posts that have these filter keys applied in their md file.
If you put a filter, and you don't have any posts with filterKeys applied to it, then when it is clicked no post will show.

You configure it by typing a word between the square brackets, surrounded by single quotes, with a coma separating each filter like so.

```js
export const filters = ['JavaScript', 'PHP', 'NextJS']
```

---
### social
Here you can specify your social media links.
When configured the links with the icons will appear in the footer as well as in place of the contact form, if you chose to not have the contact form.

By default, only the ones you see listed are supported.
I will go in depth how to change this in a future post.

You can configure this part by simply placing your full social media url between the single quotes, next to the appropriate vendor.

```js
github: 'https://github.com/40chalk',
```

---
### metaData
Here is where you will specify your blog title and descriptions for each of the main pages.
This is for SEO and will appear in google searches as the description for the site.

Side note, all of your posts pages will have a meta description set to the title, exceprt and filterKeys.

You can configure this part by placing the appropriate text between the single quotes of the corresponding pages.

```js
homePage: 'This is a home page',
```

KrittIT Blog Setup Part 2

# Welcome
My goal with this project was to create a simple, easily modified, fully featured blog.
Throughout this part of the setup we will go through cloning the project, setting up node and npm, then changing the placeholder photos and customizing the css.

## Initial Project Files and Setup
If you have git you can clone the project from [https://github.com/40chalk/krittit-blog](https://github.com/40chalk/krittit-blog). 
If you don’t you can either go to the link above and download the zip file containing the project, or download git for your OS and clone the repository as shown below.
```shell
git clone https://github.com/40chalk/krittit-blog.git your-project-name
```
After you have gotten the project files you should have a directory that looks like this.

![Initial Project Files](initial-setup-1.png)

The **only** files you should change are in the **global**, **public**, and **styles-page-global** directories.
Which we will start after we get npm up and running.

If you have npm installed skip down to the next section.

If you don't have it installed then go to **[https://nodejs.org/](https://nodejs.org/en/download/current/)** and download the installer for your OS.
After you have it installed you will open up your terminal and navigate to your project directory.

If you are on Windows press your Windows key and type cmd, then enter, and finally navigate to your project directory.
If you are unsure how to navigate within your terminal I recommend this **[link](https://riptutorial.com/cmd/example/8646/navigating-in-cmd)** to help you out.
Once in your project directory type npm install, and after it finishes type npm run dev.
```shell
npm install
```
```shell
npm run dev
```
It should provide you with a link something like https://localhost:3000.
Click the link or type it into your browser, and you will be able to see the initial blog ready for you to customize.

![npm run dev terminal output](initial-setup-2.png)

## Images
Next you should replace the about, banner, mobile-banner, and logo(logo can be text instead of an image we will cover this later) images in the public folder with your own.
If you view the images they show you what size in pixels the replacement photos should be around, in pixels.
After you have replaced them if you reload your browser you will see the blog updated with your new images.

## Styling and Fonts
For this next part you will need a text editor. If you are not sure what to use I recommend VS Code.
In the styles-page-global directory open up globals.css.

At the top you will see an import statement for the font.
You can replace the url in there with the  font of your choice.
Then set your font towards the bottom of the body selector, bellow the sizes.
Both the --font-family-primary: and the --font-family-secondary:.

In this same file is where you will change the color scheme of the blog.
At the top of the body selector you should see the following.

![Global css vars for blog color scheme](initial-setup-3.png)

Change those to whatever you want and reload the browser to see how it looks.
If you are having trouble selecting colors I recommend checking out **[https://huemint.com](https://huemint.com/brand-intersection/)**.
Play around with it till you find a set that looks good then copy the color values over replacing the values set in the css variables shown above.

## Next Steps
At this point the blog should be taking shape and starting to look like your own.
In the next part of this series we will go over changing the text, title and metadata within the site.

Add React To WordPress Admin

Have Multiple Blocks In WP Plugin

KrittIT Blog Setup Part 5

KrittIT Blog Setup Part 4

KrittIT Blog Setup Part 3

KrittIT Blog Setup Part 2

KrittIT Blog Setup Part 1