I am developing a wordpress Plugin and during development, I decided to continue the code with react, instead of Html. In order to do that I needed to build the React environment on WordPress. I have built it and it was compiling correctly. Thereby my goal was to see if react was also rendering on the wordpress page, but on the wordpress settings page of my Plugin was nothing to see from the react test component.
The expected result is that the contents of the react file renders on the settings page. For this task I got help from the WordPress Documentation. I would be very happy if any of you can help me to solve this bug.
Here is how I did the enque on the php file(the whole contents of the php file):
Look at the functions justinLegalRegisterTestPage, justinLegalRenderTestPage, justinLegalEnqueueTestPageScripts which are relevant for the react component.
<?php
/**
* Justin Legal Plugin – Admin Settings
*
* This file adds the Justin Legal settings page to the admin, registers common settings
* (including AJAX handlers), and renders the settings page with tabs by including
* tab-specific files.
*
* @package JustinLegalPlugin
*/
// Prevent direct access.
if (! defined('ABSPATH')) {
exit;
}
// Always include the tab files so that their registration functions run.
require_once plugin_dir_path(__FILE__) . 'settings/main-settings-tab.php';
require_once plugin_dir_path(__FILE__) . 'settings/compliance-tab.php';
/**
* Add the Justin Legal settings page to the admin menu.
*/
function justinLegalAddSettingsPage()
{
add_menu_page(
'Justin Legal Settings', // Page title.
'Justin Legal', // Menu title.
'manage_options', // Capability.
'justin-legal-settings', // Menu slug.
'justinLegalRenderSettingsPage', // Callback function.
'dashicons-admin-generic', // Icon.
100 // Position.
);
}
add_action('admin_menu', 'justinLegalAddSettingsPage');
/**
* Render the settings page with tabs.
* The URL remains unchanged (no query parameters are appended) because the tab switching
* is handled via JavaScript.
*/
function justinLegalRenderSettingsPage()
{
?>
<div class="wrap">
<h1>Justin Legal Settings</h1>
<h2 class="nav-tab-wrapper">
<a href="#" class="nav-tab nav-tab-active" data-tab="main">Main Settings</a>
<a href="#" class="nav-tab" data-tab="compliance">Compliance</a>
</h2>
<div id="tab-main">
<?php justinLegalRenderMainSettingsTab(); ?>
</div>
<div id="tab-compliance" style="display: none;">
<?php justinLegalRenderCompliance(); ?>
</div>
</div>
<?php
}
/**
* AJAX handler to retrieve profile data from the external API.
*/
function justinLegalGetProfileData()
{
if (! current_user_can('manage_options')) {
wp_send_json_error('Permission denied');
}
$options = get_option('justin_legal_settings');
$encodedId = '';
if (isset($_POST['lawfirm']) && ! empty($_POST['lawfirm'])) {
$encodedId = sanitize_text_field($_POST['lawfirm']);
} else {
$encodedId = isset($options['lawfirm']) && ! empty($options['lawfirm']) ? $options['lawfirm'] : 'sFuCvloJ';
}
$apiUrl = 'https://justin-api-dev.azurewebsites.net/api/v1/LawFirm/encoded/' . urlencode($encodedId);
$response = wp_remote_get($apiUrl);
if (is_wp_error($response)) {
wp_send_json_error($response->get_error_message());
}
$code = wp_remote_retrieve_response_code($response);
$body = wp_remote_retrieve_body($response);
if ($code != 200) {
wp_send_json_error('API returned HTTP code ' . $code . ': ' . $body);
}
$data = json_decode($body, true);
if (empty($data) || ! is_array($data)) {
wp_send_json_error('Empty data returned from API');
}
$kanzleiName = isset($data['name']) ? sanitize_text_field($data['name']) : '';
$options['kanzlei_name_customer'] = $kanzleiName;
update_option('justin_legal_settings', $options);
wp_send_json_success(array('kanzlei_name' => $kanzleiName));
}
add_action('wp_ajax_justin_legal_get_profile_data', 'justinLegalGetProfileData');
/**
* Enqueue admin scripts on the Justin Legal settings page.
*/
function justinLegalAdminScripts($hook)
{
if ($hook !== 'toplevel_page_justin-legal-settings') {
return;
}
wp_enqueue_script(
'justin-legal-admin-js',
plugin_dir_url(__FILE__) . 'js/admin.js',
array('jquery'),
filemtime(plugin_dir_path(__FILE__) . 'js/admin.js'),
true
);
}
add_action('admin_enqueue_scripts', 'justinLegalAdminScripts');
/**
* Enqueue the Justin Legal widget CSS in WP Admin
*/
function justinLegalEnqueueWidgetCSS($hook)
{
if ($hook === 'toplevel_page_justin-legal-settings') {
wp_enqueue_style(
'justin-legal-widget-css',
'https://widgets.justin-legal.com/index.css',
array(), // without array() it will not work
null
);
}
wp_enqueue_style(
'justin-legal-admin-overrides',
plugin_dir_url(__FILE__) . 'css/admin.css',
array('justin-legal-widget-css'),
filemtime(plugin_dir_path(__FILE__) . 'css/admin.css')
);
}
add_action('admin_enqueue_scripts', 'justinLegalEnqueueWidgetCSS');
// Register the Test Page as a Subpage under the Justin Legal settings page.
function justinLegalRegisterTestPage()
{
add_submenu_page(
'justin-legal-settings', // Correct parent slug (matches your add_menu_page slug)
__('Test Page', 'justin-legal'), // Page title
__('Test Page', 'justin-legal'), // Menu title
'manage_options', // Capability required
'test-page', // Menu slug
'justinLegalRenderTestPage' // Callback to render the page
);
}
add_action('admin_menu', 'justinLegalRegisterTestPage');
function justinLegalRenderTestPage()
{
printf(
'<div class="wrap" id="justin-legal-test-page">%s</div>',
esc_html__('Loading…', 'justin-legal')
);
}
function justinLegalEnqueueTestPageScripts($hook)
{
if ($hook !== 'justin-legal-settings_page_test-page') {
return;
}
$asset_file = plugin_dir_path(__FILE__) . 'build/index.asset.php';
if (! file_exists($asset_file)) {
wp_die('The asset file for the Test Page does not exist. Run `npm run build` to create it.');
}
$asset = include $asset_file;
wp_enqueue_script(
'justin-legal-admin-script',
plugin_dir_url(__FILE__) . 'build/index.js',
$asset['dependencies'],
$asset['version'],
array(
'in_footer' => true,
)
);
wp_localize_script(
'justin-legal-admin-script',
'justinLegalData',
array(
'nonce' => wp_create_nonce('justin_legal_nonce'),
'ajaxUrl' => admin_url('admin-ajax.php')
)
);
}
add_action('admin_enqueue_scripts', 'justinLegalEnqueueTestPageScripts');
And here is the src/index.jsx:
import domReady from "@wordpress/dom-ready";
import { createRoot } from "@wordpress/element";
const SettingsPage = () => {
return <div>Placeholder for settings page</div>;
};
domReady(() => {
const container = document.getElementById("justin-legal-test-page");
if (container) {
const root = createRoot(container);
root.render(<SettingsPage />);
} else {
console.error("Container #justin-legal-test-page not found");
}
});
On the browser page, I don’t see any error. When I run npm run build:
asset index.js 587 bytes [emitted] [minimized] (name: index)
asset index.asset.php 133 bytes [emitted] (name: index)
Entrypoint index 720 bytes = index.js 587 bytes index.asset.php 133 bytes
orphan modules 126 bytes [orphan] 3 modules
runtime modules 663 bytes 3 modules
./src/index.js + 3 modules 674 bytes [not cacheable] [built] [code generated]
webpack 5.98.0 compiled successfully in 1398 ms
And when I run npm run start:
> [email protected] start
> wp-scripts start
asset index.js 5.26 KiB [emitted] (name: index) 1 related asset
asset index.asset.php 133 bytes [emitted] (name: index)
Entrypoint index 5.39 KiB (3.75 KiB) = index.js 5.26 KiB index.asset.php 133 bytes 1 auxiliary asset
runtime modules 937 bytes 4 modules
built modules 674 bytes [built]
./src/index.js 548 bytes [built] [code generated]
external ["wp","domReady"] 42 bytes [built] [code generated]
external ["wp","element"] 42 bytes [built] [code generated]
external "ReactJSXRuntime" 42 bytes [built] [code generated]
webpack 5.98.0 compiled successfully in 343 ms
asset index.js 5.26 KiB [emitted] (name: index) 1 related asset
asset index.asset.php 133 bytes [emitted] (name: index)
Entrypoint index 5.39 KiB (3.75 KiB) = index.js 5.26 KiB index.asset.php 133 bytes 1 auxiliary asset
runtime modules 937 bytes 4 modules
cached modules 126 bytes [cached] 3 modules
./src/index.js 548 bytes [built] [code generated]