Let build UI for our WordPress Plugin with ReactJS.

First we need to generate a package.json file. Open your terminal and run:

>npm init

Once the package.json has been generated, we can begin installing our dependencies.

Run these commands sequentially:

>npm install --save react

>npm install --save react-dom

Before React code can run in the browser, it must go through a transformation by compiling JSX into vanilla JavaScript.

Installing Babel

We are installing babel as a dev dependency:

>npm install --save-dev babel-core

We are also required to install two babel-related modules, named babel-loader and babel-preset-react.

>npm install --save-dev babel-loader

>npm install --save-dev babel-preset-react

All done.

Configuration

Create a file .babelrc and add { presets: [‘react’] }

Webpack

Lastly we need to install webpack and two modules webpack-dev-server and html-webpack-plugin.

>npm install --save-dev webpack

>npm install --save-dev webpack-dev-server

>npm install --save-dev html-webpack-plugin

Configure webpack

Create a file webpack.config.js

module.exports = {
    entry: __dirname + '/app/index.js',
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    output:  {
        filename: 'wp-global-site-tag-admin.js',
        path: __dirname + '/build'
    }
};

Sometimes we need to hide a WordPress customizer control out of view based on the value of another customizer control.

In my case, I needed a way to hide a customizer control during the initial loading of the customizer or loading of a customizer for the first time before any default values get stored in the database.

If you spent time googling around you probably came across these 3 solutions. The reason why these 3 stood out is because of the majority of other websites copy/paste these solutions.

• Stackexchange
• Github
• FlorianBrinkmann

The above worked for me when you performed an action by clicking or selecting a value. But didn’t work after customizer was loaded.

Because the code wasn’t firing after the hook wp.customize.bind( 'ready' I wanted to try initializing default values for all my settings and storing them in the database.

I came across another interesting article showing you how to do this. Strangely the author uses the customize_save_after hook instead of the after_theme_setup. Which means the code for the initialization of the default values runs every time the user saves their customizer settings.

To test the theory and to avoid the hurdle of trying out the code which would init defaults. I decided to manually update my values for the customizer. I clicked on my controls, selected random values and clicked Publish.

The JS code didn’t work. It was only working when I would perform an action but completely ignored after wp.customize.bind( 'ready' hook.

At this stage, I decided to explore default WordPress themes looking for controls which were dependant on other customizer controls. It didn’t take me long before I stumbled on colors control for the ‘twentynineteen‘ theme.

As you can see in the image below, the first radio button with the label of ‘Default’ is selected when you load the theme for the first time. But if you click on the radio button with the label ‘Custom’ a HUE control appears.

The value for the Primary Color is not stored in the database at this stage, which is ideal. After looking under the hood, I extracted the JS code responsible for controlling the visibility state of the second customizer control.