Since the introduction of the Gutenberg block in WordPress 5.0, React JS has been a part of WordPress. For the developers, creating their own block plugin hasn’t been a tough task because of the well-written documentation on Writing Your First Block Type by WordPress. Also, because of the fact that you don’t need to have a full grasp of React JS to build a block-based plugin.
However, most of the developers aren’t utilizing the powerful features of React JS while building the plugin settings.
React JS in WordPress is not only for building a block in the block editor.
So, let’s start with creating a plugin settings page with React JS.
Usually, a WordPress plugin has a settings page under the Settings menu of the WordPress dashboard. Let’s consider an example plugin plugin-name. We have a wp-content/plugins/plugin-name.php
add_action( 'admin_menu', 'prefix_register_settings_menu' );
function prefix_register_settings_menu() {
add_options_page( 'Plugin Settings', 'Plugin Name', 'manage_options', 'plugin-slug','plugin_settings_page' );
}
function plugin_settings_page() {
// Settings page content.
}
Traditional Approach:
Traditionally, we add all the settings in plugin_settings_page() function. For example:
function plugin_settings_page() {
?>
<h2><?php esc_html_e( 'General Settings', 'plugin-text-domain' ); ?></h2>
<form method="post">
<table class="form-table">
<tr valign="top" class="plugin-slug-option">
<th scope="row"><?php echo esc_html__( 'One of the input type settings', 'plugin-text-domain' ); ?></th>
<td>
<input style="width:auto" type="text" name="input_type_settings" />
</td>
</tr>
</table>
<?php submit_button(); ?>
</form>
<?php
}
With this, we’ve successfully created a settings page for our plugin.
Here’s the full plugin code at this point.
Now, instead of using this traditional approach, let’s focus on extending React JS to create plugin settings.
React JS Approach:
Let’s modify the plugin_settings_page() function to:
function plugin_settings_page() {
?>
<div id="plugin-name-settings-page">
</div>
<?php
}
This is all we do on the PHP side. We’re going to fill all the settings from the JS using React JS.
Create a settings.js file and enqueue this settings file.
add_action( 'admin_enqueue_scripts', 'prefix_enqueue_scripts' );
function prefix_enqueue_scripts() {
wp_enqueue_script( 'plugin-name-settings-js', plugins_url( 'settings.js', __FILE__ ), array( 'wp-element', 'wp-i18n' ), '1.0', false );
}
The full plugin at this point will be:
<?php
/**
* Plugin Name: Plugin Name
* Description: Creating plugin settings with React JS.
* Version: 1.0.0
* Author: Sanjeev Aryal
* Author URI: https://www.sanjeebaryal.com.np
* Text Domain: plugin-text-domain
* Domain Path: /languages/
*
*/
defined( 'ABSPATH' ) || exit;
add_action( 'admin_menu', 'prefix_register_settings_menu' );
function prefix_register_settings_menu() {
add_options_page( 'Plugin Settings', 'Plugin Name', 'manage_options', 'plugin-slug','plugin_settings_page' );
}
function plugin_settings_page() {
?>
<div id="plugin-name-settings-page">
</div>
<?php
}
add_action( 'admin_enqueue_scripts', 'prefix_enqueue_scripts' );
function prefix_enqueue_scripts() {
wp_enqueue_script( 'plugin-name-settings-js', plugins_url( 'settings.js', __FILE__ ), array( 'wp-element', 'wp-i18n' ), '1.0', false );
}
Now, let’s work on settings.js, which we’ll be writing on React. Before doing that, note that we’ve added wp-element and wp-i18n as dependencies. We’ll be using the functionalities of these in our JS file.
Enqueuing React in WordPress: To make sure React is loaded, you will simply add wp-element as a dependency of your own JavaScript file.
— Sanzeeb Aryal (@Sanzeeb3) July 23, 2021
Our setting.js file.
import { render } from '@wordpress/element';
import { Component } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
class PluginName extends Component {
render() {
return (
<h1> General Settings </h1>
);
}
}
document.addEventListener( "DOMContentLoaded", function(event) {
render(
<PluginName />,
document.getElementById( 'plugin-name-settings-page' )
}
});That’s all. We’ve successfully built a settings page with React.
However, this is written in JSX and we’ll need to convert it into JS5 using tools like Babel. You’ve probably already done this while creating a block. If you have not already, here’s a useful tutorial to follow on that.
If you’d want to extend this to create a full-blown settings page, you can see how I implemented it in one of the plugins I’ve created.
I’d also recommend getting started with React JS
I hope you found this helpful!
You might also be interested on getting data from the promise of WordPress apiFetch.
Are you a WooCommerce site owner? Don’t miss out on the Customer Journey Plugin For WooCommerce to track your customers.
CUSTOMER JOURNEY FOR WOOCOMMERCE
