WPSDK/helix
2
0
Fork 0
mirror of https://ghproxy.net/https://github.com/abhijitb/helix.git synced 2025-08-27 20:13:02 +08:00
Code Issues Projects Packages Wiki Activity Actions

updated react app and API backend

Browse source 
1. Added API backend for settings
2. Added React components for the settings page
3. Added JS lint using @wordpress/scripts
4. Lint fixes for PHP
This commit is contained in:
Abhijit Bhatnagar 2025-08-11 01:38:33 +05:30
parent 38067e490a
commit e80316be89
36 changed files with 45313 additions and 1736 deletions
Download patch file Download diff file Expand all files Collapse all files

22
.eslintrc.js Normal file
View file

@ -0,0 +1,22 @@
const defaultConfig = require( '@wordpress/scripts/config/.eslintrc.js' );
module.exports = {
...defaultConfig,
rules: {
...defaultConfig.rules,
// Custom rules for our project
'react/react-in-jsx-scope': 'off', // Not needed in React 17+
'import/no-unresolved': 'off', // Vite handles module resolution
'@wordpress/no-unused-vars-before-return': 'off', // Allow modern patterns
'jsdoc/require-param-type': 'off', // Too verbose for React props
'jsdoc/require-param': 'off', // Too verbose for React props
'no-alert': 'off', // Allow confirm dialogs for UX
'jsx-a11y/label-has-associated-control': 'off', // Our labels are correctly associated
'jsx-a11y/no-noninteractive-element-to-interactive-role': 'off', // Allow nav with tablist role
},
globals: {
...defaultConfig.globals,
// Additional globals for our project
helixData: 'readonly',
},
};

3
.prettierrc.js Normal file
View file

@ -0,0 +1,3 @@
module.exports = {
...require( '@wordpress/prettier-config' ),
};

12
admin/disable-wp-admin.php
View file

@ -127,8 +127,16 @@ add_action(
return;
}
// Check if we're already on the helix page or WordPress admin page.
if ( in_array( $current_screen->id, array( 'toplevel_page_helix', 'toplevel_page_wordpress-admin' ), true ) ) {
// Check if we're already on any Helix page or WordPress admin page.
$helix_pages = array(
'toplevel_page_helix',
'toplevel_page_helix-posts',
'toplevel_page_helix-users',
'toplevel_page_helix-settings',
'toplevel_page_wordpress-admin',
);
if ( in_array( $current_screen->id, $helix_pages, true ) ) {
return;
}

77
admin/menu-customization.php
View file

@ -9,7 +9,19 @@
add_action(
'current_screen',
function ( $current_screen ) {
if ( ! $current_screen || 'toplevel_page_helix' !== $current_screen->id ) {
if ( ! $current_screen ) {
return;
}
// Check if we're on any Helix admin page.
$helix_pages = array(
'toplevel_page_helix',
'toplevel_page_helix-posts',
'toplevel_page_helix-users',
'toplevel_page_helix-settings',
);
if ( ! in_array( $current_screen->id, $helix_pages, true ) ) {
return;
}
@ -27,27 +39,6 @@ add_action(
// Remove all admin menu separators.
remove_all_admin_menu_separators();
// 2) Add custom Helix menu items.
add_menu_page(
'Helix Posts',
'Posts',
'edit_posts',
'helix-posts',
'helix_posts_callback',
'dashicons-admin-post',
3
);
add_menu_page(
'Helix Users',
'Users',
'list_users',
'helix-users',
'helix_users_callback',
'dashicons-admin-users',
4
);
},
10
);
@ -78,7 +69,7 @@ add_action(
// Check if we're going to the Helix page by looking at the sanitized request.
$page_requested = filter_input( INPUT_GET, 'page', FILTER_SANITIZE_URL );
$is_helix_request = ( 'admin.php' === $pagenow && 'helix' === $page_requested );
$is_helix_request = ( 'admin.php' === $pagenow && ( 'helix' === $page_requested || strpos( $page_requested, 'helix-' ) === 0 ) );
$use_default_admin = get_option( 'helix_use_default_admin', false );
// Always show the WordPress Admin link when navigating to Helix, or when not in default admin mode.
@ -88,6 +79,37 @@ add_action(
update_option( 'helix_use_default_admin', false );
}
// Add Helix menu items.
add_menu_page(
'Helix Posts',
'Posts',
'edit_posts',
'helix-posts',
'helix_posts_callback',
'dashicons-admin-post',
3
);
add_menu_page(
'Helix Users',
'Users',
'list_users',
'helix-users',
'helix_users_callback',
'dashicons-admin-users',
4
);
add_menu_page(
'Helix Settings',
'Settings',
'manage_options',
'helix-settings',
'helix_settings_callback',
'dashicons-admin-settings',
5
);
// Add a menu item to go back to default WordPress admin.
add_menu_page(
'WordPress Admin', // Page title.
@ -96,7 +118,7 @@ add_action(
'wordpress-admin', // Menu slug.
'wordpress_admin_callback', // Callback function.
'dashicons-wordpress', // Icon.
2 // Position (after main Helix menu).
6 // Position (after Settings menu).
);
}
},
@ -142,3 +164,10 @@ function helix_posts_callback() {
function helix_users_callback() {
echo '<div id="helix-users-root"></div>';
}
/**
* Callback function for Settings menu item.
*/
function helix_settings_callback() {
echo '<div id="helix-settings-root"></div>';
}

259
admin/rest-routes.php
View file

@ -5,22 +5,259 @@
* @package Helix
*/
add_action(
'rest_api_init',
function () {
// Prevent direct access.
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
// Include settings API utilities.
require_once plugin_dir_path( __FILE__ ) . 'settings-api.php';
add_action( 'rest_api_init', 'helix_register_rest_routes' );
/**
* Register REST API routes for Helix.
*
* @since 1.0.0
*/
function helix_register_rest_routes() {
// Settings endpoints.
register_rest_route(
'helix/v1',
'/settings',
array(
'methods' => 'GET',
'permission_callback' => '__return_true',
'callback' => function () {
return array(
'siteTitle' => get_option( 'blogname' ),
'language' => get_option( 'WPLANG' ),
array(
'methods' => WP_REST_Server::READABLE,
'callback' => 'helix_get_settings',
'permission_callback' => 'helix_settings_permissions_check',
'args' => helix_get_settings_schema(),
),
array(
'methods' => WP_REST_Server::EDITABLE,
'callback' => 'helix_update_settings',
'permission_callback' => 'helix_settings_permissions_check',
'args' => helix_update_settings_schema(),
),
)
);
},
// Individual setting endpoints.
register_rest_route(
'helix/v1',
'/settings/(?P<setting>[a-zA-Z0-9_-]+)',
array(
array(
'methods' => WP_REST_Server::READABLE,
'callback' => 'helix_get_single_setting',
'permission_callback' => 'helix_settings_permissions_check',
'args' => array(
'setting' => array(
'description' => __( 'Setting name to retrieve.', 'helix' ),
'type' => 'string',
'required' => true,
),
),
),
array(
'methods' => WP_REST_Server::EDITABLE,
'callback' => 'helix_update_single_setting',
'permission_callback' => 'helix_settings_permissions_check',
'args' => array(
'setting' => array(
'description' => __( 'Setting name to update.', 'helix' ),
'type' => 'string',
'required' => true,
),
'value' => array(
'description' => __( 'Setting value.', 'helix' ),
'type' => array( 'string', 'boolean', 'integer', 'number' ),
'required' => true,
),
),
),
)
);
}
/**
* Permission callback for settings endpoints.
*
* @since 1.0.0
* @return bool True if the request has read access for the item, false otherwise.
*/
function helix_settings_permissions_check() {
return current_user_can( 'manage_options' );
}
/**
* Get all WordPress settings.
*
* @since 1.0.0
* @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
*/
function helix_get_settings() {
$settings = helix_get_wordpress_settings();
if ( is_wp_error( $settings ) ) {
return $settings;
}
return rest_ensure_response( $settings );
}
/**
* Update WordPress settings.
*
* @since 1.0.0
* @param WP_REST_Request $request Current request object.
* @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
*/
function helix_update_settings( $request ) {
$params = $request->get_json_params();
if ( empty( $params ) ) {
return new WP_Error(
'helix_no_settings_data',
__( 'No settings data provided.', 'helix' ),
array( 'status' => 400 )
);
}
$updated_settings = array();
$errors = array();
$allowed_settings = helix_get_allowed_settings();
foreach ( $params as $setting => $value ) {
if ( ! in_array( $setting, $allowed_settings, true ) ) {
$errors[ $setting ] = sprintf(
/* translators: %s: Setting name */
__( 'Setting "%s" is not allowed to be updated.', 'helix' ),
$setting
);
continue;
}
$sanitized_value = helix_sanitize_setting_value( $setting, $value );
if ( is_wp_error( $sanitized_value ) ) {
$errors[ $setting ] = $sanitized_value->get_error_message();
continue;
}
$option_name = helix_get_wp_option_name( $setting );
$result = update_option( $option_name, $sanitized_value );
if ( $result ) {
$updated_settings[ $setting ] = $sanitized_value;
} else {
$errors[ $setting ] = __( 'Failed to update setting.', 'helix' );
}
}
if ( ! empty( $errors ) && empty( $updated_settings ) ) {
return new WP_Error(
'helix_settings_update_failed',
__( 'Failed to update any settings.', 'helix' ),
array(
'status' => 400,
'errors' => $errors,
)
);
}
);
$response_data = array(
'updated' => $updated_settings,
);
if ( ! empty( $errors ) ) {
$response_data['errors'] = $errors;
}
return rest_ensure_response( $response_data );
}
/**
* Get a single setting value.
*
* @since 1.0.0
* @param WP_REST_Request $request Current request object.
* @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
*/
function helix_get_single_setting( $request ) {
$setting = $request->get_param( 'setting' );
if ( ! helix_is_setting_allowed( $setting ) ) {
return new WP_Error(
'helix_setting_not_allowed',
sprintf(
/* translators: %s: Setting name */
__( 'Setting "%s" is not allowed.', 'helix' ),
$setting
),
array( 'status' => 403 )
);
}
$option_name = helix_get_wp_option_name( $setting );
$value = get_option( $option_name );
return rest_ensure_response(
array(
'setting' => $setting,
'value' => $value,
)
);
}
/**
* Update a single setting value.
*
* @since 1.0.0
* @param WP_REST_Request $request Current request object.
* @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
*/
function helix_update_single_setting( $request ) {
$setting = $request->get_param( 'setting' );
$value = $request->get_param( 'value' );
if ( ! helix_is_setting_allowed( $setting ) ) {
return new WP_Error(
'helix_setting_not_allowed',
sprintf(
/* translators: %s: Setting name */
__( 'Setting "%s" is not allowed to be updated.', 'helix' ),
$setting
),
array( 'status' => 403 )
);
}
$sanitized_value = helix_sanitize_setting_value( $setting, $value );
if ( is_wp_error( $sanitized_value ) ) {
return $sanitized_value;
}
$option_name = helix_get_wp_option_name( $setting );
$result = update_option( $option_name, $sanitized_value );
if ( ! $result && get_option( $option_name ) !== $sanitized_value ) {
return new WP_Error(
'helix_setting_update_failed',
sprintf(
/* translators: %s: Setting name */
__( 'Failed to update setting "%s".', 'helix' ),
$setting
),
array( 'status' => 500 )
);
}
return rest_ensure_response(
array(
'setting' => $setting,
'value' => $sanitized_value,
'updated' => true,
)
);
}

493
admin/settings-api.php Normal file
View file

@ -0,0 +1,493 @@
<?php
/**
* Settings API utilities and helper functions.
*
* @package Helix
*/
// Prevent direct access.
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
/**
* Get the schema for settings GET requests.
*
* @since 1.0.0
* @return array Schema array.
*/
function helix_get_settings_schema() {
return array(
'context' => array(
'description' => __( 'Scope under which the request is made; determines fields present in response.', 'helix' ),
'type' => 'string',
'enum' => array( 'view', 'edit' ),
'default' => 'view',
),
);
}
/**
* Get the schema for settings UPDATE requests.
*
* @since 1.0.0
* @return array Schema array.
*/
function helix_update_settings_schema() {
$settings_config = helix_get_settings_config();
$schema = array();
foreach ( $settings_config as $category => $settings ) {
foreach ( $settings as $setting_key => $setting_config ) {
$schema[ $setting_key ] = array(
'description' => $setting_config['description'],
'type' => $setting_config['type'],
);
if ( isset( $setting_config['enum'] ) ) {
$schema[ $setting_key ]['enum'] = $setting_config['enum'];
}
if ( isset( $setting_config['default'] ) ) {
$schema[ $setting_key ]['default'] = $setting_config['default'];
}
}
}
return $schema;
}
/**
* Get all WordPress settings in organized format.
*
* @since 1.0.0
* @return array|WP_Error Array of settings or WP_Error on failure.
*/
function helix_get_wordpress_settings() {
$settings_config = helix_get_settings_config();
$settings = array();
foreach ( $settings_config as $category => $category_settings ) {
$settings[ $category ] = array();
foreach ( $category_settings as $setting_key => $setting_config ) {
$option_name = helix_get_wp_option_name( $setting_key );
$value = get_option( $option_name, $setting_config['default'] ?? null );
// Apply formatting if specified.
if ( isset( $setting_config['format_callback'] ) && is_callable( $setting_config['format_callback'] ) ) {
$value = call_user_func( $setting_config['format_callback'], $value );
}
$settings[ $category ][ $setting_key ] = array(
'value' => $value,
'label' => $setting_config['label'],
'description' => $setting_config['description'],
'type' => $setting_config['type'],
);
// Add additional properties if they exist.
if ( isset( $setting_config['enum'] ) ) {
$settings[ $category ][ $setting_key ]['options'] = $setting_config['enum'];
}
}
}
return $settings;
}
/**
* Get the list of allowed settings that can be updated.
*
* @since 1.0.0
* @return array Array of allowed setting keys.
*/
function helix_get_allowed_settings() {
$settings_config = helix_get_settings_config();
$allowed_settings = array();
foreach ( $settings_config as $category => $settings ) {
$allowed_settings = array_merge( $allowed_settings, array_keys( $settings ) );
}
/**
* Filter the list of allowed settings.
*
* @since 1.0.0
* @param array $allowed_settings Array of allowed setting keys.
*/
return apply_filters( 'helix_allowed_settings', $allowed_settings );
}
/**
* Check if a setting is allowed to be accessed/updated.
*
* @since 1.0.0
* @param string $setting Setting key to check.
* @return bool True if allowed, false otherwise.
*/
function helix_is_setting_allowed( $setting ) {
$allowed_settings = helix_get_allowed_settings();
return in_array( $setting, $allowed_settings, true );
}
/**
* Get WordPress option name from setting key.
*
* @since 1.0.0
* @param string $setting Setting key.
* @return string WordPress option name.
*/
function helix_get_wp_option_name( $setting ) {
$option_mapping = helix_get_option_mapping();
return $option_mapping[ $setting ] ?? $setting;
}
/**
* Get mapping between setting keys and WordPress option names.
*
* @since 1.0.0
* @return array Mapping array.
*/
function helix_get_option_mapping() {
return array(
'siteTitle' => 'blogname',
'tagline' => 'blogdescription',
'siteUrl' => 'siteurl',
'homeUrl' => 'home',
'adminEmail' => 'admin_email',
'language' => 'WPLANG',
'timezone' => 'timezone_string',
'dateFormat' => 'date_format',
'timeFormat' => 'time_format',
'startOfWeek' => 'start_of_week',
'postsPerPage' => 'posts_per_page',
'showOnFront' => 'show_on_front',
'pageOnFront' => 'page_on_front',
'pageForPosts' => 'page_for_posts',
'defaultCategory' => 'default_category',
'defaultPostFormat' => 'default_post_format',
'useSmilies' => 'use_smilies',
'defaultCommentStatus' => 'default_comment_status',
'defaultPingStatus' => 'default_ping_status',
'siteLogo' => 'site_logo',
'siteIcon' => 'site_icon',
'thumbnailSizeW' => 'thumbnail_size_w',
'thumbnailSizeH' => 'thumbnail_size_h',
'mediumSizeW' => 'medium_size_w',
'mediumSizeH' => 'medium_size_h',
'largeSizeW' => 'large_size_w',
'largeSizeH' => 'large_size_h',
'uploadsUseYearmonthFolders' => 'uploads_use_yearmonth_folders',
'usersCanRegister' => 'users_can_register',
'defaultRole' => 'default_role',
'blogPublic' => 'blog_public',
'helixUseDefaultAdmin' => 'helix_use_default_admin',
);
}
/**
* Sanitize setting value based on setting type.
*
* @since 1.0.0
* @param string $setting Setting key.
* @param mixed $value Value to sanitize.
* @return mixed|WP_Error Sanitized value or WP_Error on failure.
*/
function helix_sanitize_setting_value( $setting, $value ) {
$settings_config = helix_get_settings_config();
$setting_config = null;
// Find the setting configuration.
foreach ( $settings_config as $category => $settings ) {
if ( isset( $settings[ $setting ] ) ) {
$setting_config = $settings[ $setting ];
break;
}
}
if ( ! $setting_config ) {
return new WP_Error(
'helix_invalid_setting',
sprintf(
/* translators: %s: Setting name */
__( 'Invalid setting: %s', 'helix' ),
$setting
),
array( 'status' => 400 )
);
}
// Apply custom sanitization if available.
if ( isset( $setting_config['sanitize_callback'] ) && is_callable( $setting_config['sanitize_callback'] ) ) {
return call_user_func( $setting_config['sanitize_callback'], $value );
}
// Default sanitization based on type.
switch ( $setting_config['type'] ) {
case 'string':
return sanitize_text_field( $value );
case 'email':
$sanitized = sanitize_email( $value );
if ( ! is_email( $sanitized ) ) {
return new WP_Error(
'helix_invalid_email',
__( 'Invalid email address.', 'helix' ),
array( 'status' => 400 )
);
}
return $sanitized;
case 'url':
return esc_url_raw( $value );
case 'integer':
return absint( $value );
case 'number':
return floatval( $value );
case 'boolean':
return rest_sanitize_boolean( $value );
default:
// For enum types, validate against allowed values.
if ( isset( $setting_config['enum'] ) ) {
if ( ! in_array( $value, $setting_config['enum'], true ) ) {
return new WP_Error(
'helix_invalid_enum_value',
sprintf(
/* translators: 1: Setting name, 2: Allowed values */
__( 'Invalid value for %1$s. Allowed values: %2$s', 'helix' ),
$setting,
implode( ', ', $setting_config['enum'] )
),
array( 'status' => 400 )
);
}
}
return sanitize_text_field( $value );
}
}
/**
* Get comprehensive settings configuration.
*
* @since 1.0.0
* @return array Settings configuration array.
*/
function helix_get_settings_config() {
return array(
'site_information' => array(
'siteTitle' => array(
'label' => __( 'Site Title', 'helix' ),
'description' => __( 'In a few words, explain what this site is about.', 'helix' ),
'type' => 'string',
'default' => get_bloginfo( 'name' ),
),
'tagline' => array(
'label' => __( 'Tagline', 'helix' ),
'description' => __( 'In a few words, explain what this site is about.', 'helix' ),
'type' => 'string',
'default' => get_bloginfo( 'description' ),
),
'siteUrl' => array(
'label' => __( 'WordPress Address (URL)', 'helix' ),
'description' => __( 'The address of your WordPress core files.', 'helix' ),
'type' => 'url',
'default' => site_url(),
),
'homeUrl' => array(
'label' => __( 'Site Address (URL)', 'helix' ),
'description' => __( 'The address you want people to type in their browser to reach your website.', 'helix' ),
'type' => 'url',
'default' => home_url(),
),
'adminEmail' => array(
'label' => __( 'Administration Email Address', 'helix' ),
'description' => __( 'This address is used for admin purposes.', 'helix' ),
'type' => 'email',
'default' => get_option( 'admin_email' ),
),
'language' => array(
'label' => __( 'Site Language', 'helix' ),
'description' => __( 'The language for your site.', 'helix' ),
'type' => 'string',
'default' => get_locale(),
),
'timezone' => array(
'label' => __( 'Timezone', 'helix' ),
'description' => __( 'Choose either a city in the same timezone as you or a UTC timezone offset.', 'helix' ),
'type' => 'string',
'default' => get_option( 'timezone_string', 'UTC' ),
),
),
'content_reading' => array(
'showOnFront' => array(
'label' => __( 'Your homepage displays', 'helix' ),
'description' => __( 'What to show on the front page.', 'helix' ),
'type' => 'string',
'enum' => array( 'posts', 'page' ),
'default' => 'posts',
),
'pageOnFront' => array(
'label' => __( 'Homepage', 'helix' ),
'description' => __( 'The page to show on the front page.', 'helix' ),
'type' => 'integer',
'default' => 0,
),
'pageForPosts' => array(
'label' => __( 'Posts page', 'helix' ),
'description' => __( 'The page to show posts.', 'helix' ),
'type' => 'integer',
'default' => 0,
),
'postsPerPage' => array(
'label' => __( 'Blog pages show at most', 'helix' ),
'description' => __( 'Number of posts to show per page.', 'helix' ),
'type' => 'integer',
'default' => 10,
),
'blogPublic' => array(
'label' => __( 'Search engine visibility', 'helix' ),
'description' => __( 'Discourage search engines from indexing this site.', 'helix' ),
'type' => 'boolean',
'default' => true,
),
'dateFormat' => array(
'label' => __( 'Date Format', 'helix' ),
'description' => __( 'Format for displaying dates.', 'helix' ),
'type' => 'string',
'default' => get_option( 'date_format' ),
),
'timeFormat' => array(
'label' => __( 'Time Format', 'helix' ),
'description' => __( 'Format for displaying times.', 'helix' ),
'type' => 'string',
'default' => get_option( 'time_format' ),
),
'startOfWeek' => array(
'label' => __( 'Week Starts On', 'helix' ),
'description' => __( 'The day of the week the calendar should start on.', 'helix' ),
'type' => 'integer',
'enum' => array( 0, 1, 2, 3, 4, 5, 6 ),
'default' => 1,
),
),
'writing_publishing' => array(
'defaultCategory' => array(
'label' => __( 'Default Post Category', 'helix' ),
'description' => __( 'The default category for new posts.', 'helix' ),
'type' => 'integer',
'default' => 1,
),
'defaultPostFormat' => array(
'label' => __( 'Default Post Format', 'helix' ),
'description' => __( 'The default format for new posts.', 'helix' ),
'type' => 'string',
'enum' => array( 'standard', 'aside', 'gallery', 'image', 'link', 'quote', 'status', 'video', 'audio', 'chat' ),
'default' => 'standard',
),
'useSmilies' => array(
'label' => __( 'Convert emoticons', 'helix' ),
'description' => __( 'Convert emoticons like :-) and :-P to graphics on display.', 'helix' ),
'type' => 'boolean',
'default' => true,
),
'defaultCommentStatus' => array(
'label' => __( 'Default comment status', 'helix' ),
'description' => __( 'Allow people to submit comments on new posts.', 'helix' ),
'type' => 'string',
'enum' => array( 'open', 'closed' ),
'default' => 'open',
),
'defaultPingStatus' => array(
'label' => __( 'Default ping status', 'helix' ),
'description' => __( 'Allow link notifications from other blogs (pingbacks and trackbacks) on new posts.', 'helix' ),
'type' => 'string',
'enum' => array( 'open', 'closed' ),
'default' => 'open',
),
),
'media_assets' => array(
'siteLogo' => array(
'label' => __( 'Site Logo', 'helix' ),
'description' => __( 'The site logo.', 'helix' ),
'type' => 'integer',
'default' => 0,
),
'siteIcon' => array(
'label' => __( 'Site Icon', 'helix' ),
'description' => __( 'The site icon (favicon).', 'helix' ),
'type' => 'integer',
'default' => 0,
),
'thumbnailSizeW' => array(
'label' => __( 'Thumbnail Width', 'helix' ),
'description' => __( 'Maximum width of thumbnail images.', 'helix' ),
'type' => 'integer',
'default' => 150,
),
'thumbnailSizeH' => array(
'label' => __( 'Thumbnail Height', 'helix' ),
'description' => __( 'Maximum height of thumbnail images.', 'helix' ),
'type' => 'integer',
'default' => 150,
),
'mediumSizeW' => array(
'label' => __( 'Medium Width', 'helix' ),
'description' => __( 'Maximum width of medium-sized images.', 'helix' ),
'type' => 'integer',
'default' => 300,
),
'mediumSizeH' => array(
'label' => __( 'Medium Height', 'helix' ),
'description' => __( 'Maximum height of medium-sized images.', 'helix' ),
'type' => 'integer',
'default' => 300,
),
'largeSizeW' => array(
'label' => __( 'Large Width', 'helix' ),
'description' => __( 'Maximum width of large-sized images.', 'helix' ),
'type' => 'integer',
'default' => 1024,
),
'largeSizeH' => array(
'label' => __( 'Large Height', 'helix' ),
'description' => __( 'Maximum height of large-sized images.', 'helix' ),
'type' => 'integer',
'default' => 1024,
),
'uploadsUseYearmonthFolders' => array(
'label' => __( 'Organize uploads into date-based folders', 'helix' ),
'description' => __( 'Organize my uploads into month- and year-based folders.', 'helix' ),
'type' => 'boolean',
'default' => true,
),
),
'users_membership' => array(
'usersCanRegister' => array(
'label' => __( 'Anyone can register', 'helix' ),
'description' => __( 'Allow anyone to register as a user.', 'helix' ),
'type' => 'boolean',
'default' => false,
),
'defaultRole' => array(
'label' => __( 'New User Default Role', 'helix' ),
'description' => __( 'The default role for new users.', 'helix' ),
'type' => 'string',
'enum' => array( 'subscriber', 'contributor', 'author', 'editor', 'administrator' ),
'default' => 'subscriber',
),
),
'helix_specific' => array(
'helixUseDefaultAdmin' => array(
'label' => __( 'Use Default WordPress Admin', 'helix' ),
'description' => __( 'Use the default WordPress admin interface instead of Helix.', 'helix' ),
'type' => 'boolean',
'default' => false,
),
),
);
}

1
build/assets/App-WewVjZZ6.css Normal file
View file

File diff suppressed because one or more lines are too long

56
build/index.js
View file

File diff suppressed because one or more lines are too long

22
enqueue.php
View file

@ -8,7 +8,15 @@
add_action(
'admin_enqueue_scripts',
function ( $hook ) {
if ( 'toplevel_page_helix' !== $hook ) {
// Define Helix admin pages that need the React app.
$helix_pages = array(
'toplevel_page_helix',
'toplevel_page_helix-posts',
'toplevel_page_helix-users',
'toplevel_page_helix-settings',
);
if ( ! in_array( $hook, $helix_pages, true ) ) {
return;
}
@ -20,6 +28,18 @@ add_action(
array()
);
// Enqueue the CSS file built by Vite.
$css_files = glob( plugin_dir_path( __FILE__ ) . 'build/assets/*.css' );
if ( ! empty( $css_files ) ) {
$css_file = basename( $css_files[0] );
wp_enqueue_style(
'helix-app-styles',
plugin_dir_url( __FILE__ ) . 'build/assets/' . $css_file,
array(),
'0.1.0'
);
}
// Get the original route that was redirected.
$original_route = filter_input( INPUT_GET, 'helix_route', FILTER_SANITIZE_URL );
$original_route = $original_route ? esc_url_raw( $original_route ) : '/wp-admin/';

20392
node_modules/.package-lock.json generated vendored
View file

File diff suppressed because it is too large Load diff

20381
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

8
package.json
View file

@ -3,7 +3,12 @@
"version": "0.1.0",
"scripts": {
"dev": "vite",
"build": "vite build"
"build": "vite build",
"lint:js": "wp-scripts lint-js",
"lint:js:fix": "wp-scripts lint-js --fix",
"format": "wp-scripts format",
"lint": "npm run lint:js",
"prebuild": "npm run lint && npm run format"
},
"dependencies": {
"react": "^18.0.0",
@ -12,6 +17,7 @@
},
"devDependencies": {
"@vitejs/plugin-react": "^4.7.0",
"@wordpress/scripts": "^30.21.0",
"vite": "^5.0.0"
}
}

38
src/App.jsx
View file

@ -1,4 +1,5 @@
import React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import Settings from './pages/Settings';
@ -8,10 +9,41 @@ export default function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Dashboard />} />
<Route path="/settings" element={<Settings />} />
<Route path="/2fa" element={<TwoFA />} />
<Route path="/" element={ <Dashboard /> } />
<Route path="/settings" element={ <Settings /> } />
<Route path="/2fa" element={ <TwoFA /> } />
</Routes>
</Router>
);
}
// Mount components based on container element
document.addEventListener( 'DOMContentLoaded', function () {
// Main Helix app
const helixRoot = document.getElementById( 'helix-root' );
if ( helixRoot ) {
const root = createRoot( helixRoot );
root.render( <App /> );
}
// Settings page
const settingsRoot = document.getElementById( 'helix-settings-root' );
if ( settingsRoot ) {
const root = createRoot( settingsRoot );
root.render( <Settings /> );
}
// Posts page
const postsRoot = document.getElementById( 'helix-posts-root' );
if ( postsRoot ) {
const root = createRoot( postsRoot );
root.render( <Dashboard /> ); // For now, render Dashboard
}
// Users page
const usersRoot = document.getElementById( 'helix-users-root' );
if ( usersRoot ) {
const root = createRoot( usersRoot );
root.render( <Dashboard /> ); // For now, render Dashboard
}
} );

159
src/pages/Settings.jsx
View file

@ -1,4 +1,159 @@
import React from 'react';
import React, { useState } from 'react';
import { useSettings } from './Settings/hooks/useSettings';
import SettingsTabs from './Settings/components/SettingsTabs';
import SaveButton from './Settings/components/SaveButton';
import Notification from './Settings/components/Notification';
import SiteInformationSettings from './Settings/components/SiteInformationSettings';
import ContentReadingSettings from './Settings/components/ContentReadingSettings';
import WritingPublishingSettings from './Settings/components/WritingPublishingSettings';
import MediaAssetsSettings from './Settings/components/MediaAssetsSettings';
import UsersMembershipSettings from './Settings/components/UsersMembershipSettings';
import HelixSettings from './Settings/components/HelixSettings';
import './Settings/styles.css';
/**
* Main Settings Page Component
*/
export default function Settings() {
return <div>Settings Page</div>;
const {
settings,
loading,
saving,
error,
hasUnsavedChanges,
updateSetting,
saveSettings,
resetSettings,
} = useSettings();
const [ activeTab, setActiveTab ] = useState( 'site' );
const [ notification, setNotification ] = useState( null );
const handleSave = async () => {
const result = await saveSettings();
if ( result.success ) {
setNotification( {
type: 'success',
message: result.message || 'Settings saved successfully!',
} );
} else {
setNotification( {
type: 'error',
message:
result.message ||
'Failed to save settings. Please try again.',
} );
}
};
const handleReset = () => {
resetSettings();
setNotification( {
type: 'info',
message: 'Changes have been reset to their original values.',
} );
};
const handleTabChange = ( tabId ) => {
if ( hasUnsavedChanges ) {
const confirmed = window.confirm(
'You have unsaved changes. Are you sure you want to switch tabs? Your changes will be lost.'
);
if ( ! confirmed ) {
return;
}
}
setActiveTab( tabId );
};
const renderTabContent = () => {
const commonProps = { settings, updateSetting };
switch ( activeTab ) {
case 'site':
return <SiteInformationSettings { ...commonProps } />;
case 'content':
return <ContentReadingSettings { ...commonProps } />;
case 'writing':
return <WritingPublishingSettings { ...commonProps } />;
case 'media':
return <MediaAssetsSettings { ...commonProps } />;
case 'users':
return <UsersMembershipSettings { ...commonProps } />;
case 'helix':
return <HelixSettings { ...commonProps } />;
default:
return <SiteInformationSettings { ...commonProps } />;
}
};
if ( loading ) {
return (
<div className="helix-settings-page">
<div className="helix-loading">
<div className="helix-spinner"></div>
<p>Loading settings...</p>
</div>
</div>
);
}
return (
<div className="helix-settings-page">
{ /* Header */ }
<div className="helix-settings-header">
<h1>Settings</h1>
<p>Manage your WordPress site configuration</p>
</div>
{ /* Global Error */ }
{ error && (
<Notification
type="error"
message={ error }
onClose={ () => {} }
autoClose={ false }
/>
) }
{ /* Success/Info Notifications */ }
{ notification && (
<Notification
type={ notification.type }
message={ notification.message }
onClose={ () => setNotification( null ) }
/>
) }
{ /* Tabs Navigation */ }
<SettingsTabs
activeTab={ activeTab }
onTabChange={ handleTabChange }
hasUnsavedChanges={ hasUnsavedChanges }
/>
{ /* Tab Content */ }
<div className="helix-settings-content">
<div
id={ `${ activeTab }-panel` }
role="tabpanel"
aria-labelledby={ `${ activeTab }-tab` }
className="helix-tab-panel"
>
{ renderTabContent() }
</div>
</div>
{ /* Footer Controls */ }
<div className="helix-settings-footer">
<SaveButton
onSave={ handleSave }
onReset={ handleReset }
saving={ saving }
hasUnsavedChanges={ hasUnsavedChanges }
/>
</div>
</div>
);
}

124
src/pages/Settings/components/ContentReadingSettings.jsx Normal file
View file

@ -0,0 +1,124 @@
import React from 'react';
import SettingsSection from './SettingsSection';
import SelectInput from './SelectInput';
import NumberInput from './NumberInput';
import ToggleInput from './ToggleInput';
import TextInput from './TextInput';
/**
* Content & Reading Settings Component
* @param root0
* @param root0.settings
* @param root0.updateSetting
*/
const ContentReadingSettings = ( { settings, updateSetting } ) => {
const showOnFrontOptions = [
{ value: 'posts', label: 'Your latest posts' },
{ value: 'page', label: 'A static page' },
];
const startOfWeekOptions = [
{ value: 0, label: 'Sunday' },
{ value: 1, label: 'Monday' },
{ value: 2, label: 'Tuesday' },
{ value: 3, label: 'Wednesday' },
{ value: 4, label: 'Thursday' },
{ value: 5, label: 'Friday' },
{ value: 6, label: 'Saturday' },
];
return (
<SettingsSection
title="Content & Reading"
description="Settings that affect how your content is displayed"
>
<div className="helix-settings-grid">
<SelectInput
label="Your homepage displays"
description="What to show on the front page of your site."
value={ settings.showOnFront }
onChange={ ( value ) =>
updateSetting( 'showOnFront', value )
}
options={ showOnFrontOptions }
/>
{ settings.showOnFront === 'page' && (
<>
<NumberInput
label="Homepage"
description="The page to show on the front page (Page ID)."
value={ settings.pageOnFront }
onChange={ ( value ) =>
updateSetting( 'pageOnFront', value )
}
min={ 0 }
/>
<NumberInput
label="Posts page"
description="The page to show posts (Page ID)."
value={ settings.pageForPosts }
onChange={ ( value ) =>
updateSetting( 'pageForPosts', value )
}
min={ 0 }
/>
</>
) }
<NumberInput
label="Blog pages show at most"
description="Number of posts to show per page."
value={ settings.postsPerPage }
onChange={ ( value ) =>
updateSetting( 'postsPerPage', value )
}
min={ 1 }
max={ 100 }
/>
<ToggleInput
label="Discourage search engines from indexing this site"
description="This will discourage, but not prevent, search engines from indexing this site."
value={ ! settings.blogPublic }
onChange={ ( value ) =>
updateSetting( 'blogPublic', ! value )
}
/>
<TextInput
label="Date Format"
description="Format for displaying dates throughout your site."
value={ settings.dateFormat }
onChange={ ( value ) =>
updateSetting( 'dateFormat', value )
}
placeholder="F j, Y"
/>
<TextInput
label="Time Format"
description="Format for displaying times throughout your site."
value={ settings.timeFormat }
onChange={ ( value ) =>
updateSetting( 'timeFormat', value )
}
placeholder="g:i a"
/>
<SelectInput
label="Week Starts On"
description="The day of the week the calendar should start on."
value={ settings.startOfWeek }
onChange={ ( value ) =>
updateSetting( 'startOfWeek', parseInt( value ) )
}
options={ startOfWeekOptions }
/>
</div>
</SettingsSection>
);
};
export default ContentReadingSettings;

41
src/pages/Settings/components/FormField.jsx Normal file
View file

@ -0,0 +1,41 @@
import React from 'react';
/**
* Form field wrapper component
* @param root0
* @param root0.label
* @param root0.description
* @param root0.error
* @param root0.required
* @param root0.children
* @param root0.className
*/
const FormField = ( {
label,
description,
error,
required = false,
children,
className = '',
} ) => {
return (
<div className={ `helix-form-field ${ className }` }>
{ label && (
<label className="helix-form-label">
{ label }
{ required && <span className="helix-required">*</span> }
</label>
) }
<div className="helix-form-control">{ children }</div>
{ description && (
<p className="helix-form-description">{ description }</p>
) }
{ error && <p className="helix-form-error">{ error }</p> }
</div>
);
};
export default FormField;

31
src/pages/Settings/components/HelixSettings.jsx Normal file
View file

@ -0,0 +1,31 @@
import React from 'react';
import SettingsSection from './SettingsSection';
import ToggleInput from './ToggleInput';
/**
* Helix Specific Settings Component
* @param root0
* @param root0.settings
* @param root0.updateSetting
*/
const HelixSettings = ( { settings, updateSetting } ) => {
return (
<SettingsSection
title="Helix Settings"
description="Settings specific to the Helix plugin"
>
<div className="helix-settings-grid">
<ToggleInput
label="Use Default WordPress Admin"
description="Switch back to the default WordPress admin interface instead of using Helix."
value={ settings.helixUseDefaultAdmin }
onChange={ ( value ) =>
updateSetting( 'helixUseDefaultAdmin', value )
}
/>
</div>
</SettingsSection>
);
};
export default HelixSettings;

118
src/pages/Settings/components/MediaAssetsSettings.jsx Normal file
View file

@ -0,0 +1,118 @@
import React from 'react';
import SettingsSection from './SettingsSection';
import NumberInput from './NumberInput';
import ToggleInput from './ToggleInput';
/**
* Media & Assets Settings Component
* @param root0
* @param root0.settings
* @param root0.updateSetting
*/
const MediaAssetsSettings = ( { settings, updateSetting } ) => {
return (
<SettingsSection
title="Media & Assets"
description="Settings for media files, images, and site branding"
>
<div className="helix-settings-grid">
<NumberInput
label="Site Logo"
description="The site logo (Media ID). Upload a logo in Media Library and enter its ID here."
value={ settings.siteLogo }
onChange={ ( value ) => updateSetting( 'siteLogo', value ) }
min={ 0 }
/>
<NumberInput
label="Site Icon (Favicon)"
description="The site icon/favicon (Media ID). Upload an icon in Media Library and enter its ID here."
value={ settings.siteIcon }
onChange={ ( value ) => updateSetting( 'siteIcon', value ) }
min={ 0 }
/>
<div className="helix-settings-subsection">
<h4>Image Sizes</h4>
<NumberInput
label="Thumbnail Width"
description="Maximum width of thumbnail images in pixels."
value={ settings.thumbnailSizeW }
onChange={ ( value ) =>
updateSetting( 'thumbnailSizeW', value )
}
min={ 0 }
max={ 2000 }
/>
<NumberInput
label="Thumbnail Height"
description="Maximum height of thumbnail images in pixels."
value={ settings.thumbnailSizeH }
onChange={ ( value ) =>
updateSetting( 'thumbnailSizeH', value )
}
min={ 0 }
max={ 2000 }
/>
<NumberInput
label="Medium Width"
description="Maximum width of medium-sized images in pixels."
value={ settings.mediumSizeW }
onChange={ ( value ) =>
updateSetting( 'mediumSizeW', value )
}
min={ 0 }
max={ 2000 }
/>
<NumberInput
label="Medium Height"
description="Maximum height of medium-sized images in pixels."
value={ settings.mediumSizeH }
onChange={ ( value ) =>
updateSetting( 'mediumSizeH', value )
}
min={ 0 }
max={ 2000 }
/>
<NumberInput
label="Large Width"
description="Maximum width of large-sized images in pixels."
value={ settings.largeSizeW }
onChange={ ( value ) =>
updateSetting( 'largeSizeW', value )
}
min={ 0 }
max={ 4000 }
/>
<NumberInput
label="Large Height"
description="Maximum height of large-sized images in pixels."
value={ settings.largeSizeH }
onChange={ ( value ) =>
updateSetting( 'largeSizeH', value )
}
min={ 0 }
max={ 4000 }
/>
</div>
<ToggleInput
label="Organize my uploads into month- and year-based folders"
description="Organize uploaded files into date-based folder structure."
value={ settings.uploadsUseYearmonthFolders }
onChange={ ( value ) =>
updateSetting( 'uploadsUseYearmonthFolders', value )
}
/>
</div>
</SettingsSection>
);
};
export default MediaAssetsSettings;

76
src/pages/Settings/components/Notification.jsx Normal file
View file

@ -0,0 +1,76 @@
import React, { useState, useEffect } from 'react';
/**
* Notification component for displaying success/error messages
* @param root0
* @param root0.type
* @param root0.message
* @param root0.onClose
* @param root0.autoClose
* @param root0.duration
*/
const Notification = ( {
type = 'info',
message,
onClose,
autoClose = true,
duration = 5000,
} ) => {
const [ visible, setVisible ] = useState( true );
useEffect( () => {
if ( autoClose && duration > 0 ) {
const timer = setTimeout( () => {
setVisible( false );
setTimeout( () => onClose?.(), 300 ); // Allow fade out animation
}, duration );
return () => clearTimeout( timer );
}
}, [ autoClose, duration, onClose ] );
if ( ! visible ) {
return null;
}
const getIcon = () => {
switch ( type ) {
case 'success':
return '✅';
case 'error':
return '❌';
case 'warning':
return '⚠️';
default:
return 'ℹ️';
}
};
return (
<div
className={ `helix-notification helix-notification-${ type } ${
visible ? 'visible' : ''
}` }
>
<div className="helix-notification-content">
<span className="helix-notification-icon">{ getIcon() }</span>
<span className="helix-notification-message">{ message }</span>
{ onClose && (
<button
type="button"
onClick={ () => {
setVisible( false );
setTimeout( () => onClose(), 300 );
} }
className="helix-notification-close"
aria-label="Close notification"
>
×
</button>
) }
</div>
</div>
);
};
export default Notification;

63
src/pages/Settings/components/NumberInput.jsx Normal file
View file

@ -0,0 +1,63 @@
import React from 'react';
import FormField from './FormField';
/**
* Number input component
* @param root0
* @param root0.label
* @param root0.description
* @param root0.value
* @param root0.onChange
* @param root0.min
* @param root0.max
* @param root0.step
* @param root0.required
* @param root0.disabled
* @param root0.error
* @param root0.className
*/
const NumberInput = ( {
label,
description,
value,
onChange,
min = null,
max = null,
step = 1,
required = false,
disabled = false,
error = null,
className = '',
...props
} ) => {
const handleChange = ( event ) => {
const newValue = event.target.value;
// Convert to number if not empty, otherwise keep as empty string
onChange( newValue === '' ? '' : Number( newValue ) );
};
return (
<FormField
label={ label }
description={ description }
error={ error }
required={ required }
className={ className }
>
<input
type="number"
value={ value || '' }
onChange={ handleChange }
min={ min }
max={ max }
step={ step }
required={ required }
disabled={ disabled }
className="helix-number-input"
{ ...props }
/>
</FormField>
);
};
export default NumberInput;

56
src/pages/Settings/components/SaveButton.jsx Normal file
View file

@ -0,0 +1,56 @@
import React from 'react';
/**
* Save button component with loading and status indicators
* @param root0
* @param root0.onSave
* @param root0.onReset
* @param root0.saving
* @param root0.hasUnsavedChanges
* @param root0.disabled
*/
const SaveButton = ( {
onSave,
onReset,
saving = false,
hasUnsavedChanges = false,
disabled = false,
} ) => {
return (
<div className="helix-save-buttons">
<button
type="button"
onClick={ onSave }
disabled={ disabled || saving || ! hasUnsavedChanges }
className={ `helix-btn helix-btn-primary ${
saving ? 'saving' : ''
}` }
>
{ saving ? (
<>
<span className="helix-spinner"></span>
Saving...
</>
) : (
'Save Changes'
) }
</button>
{ hasUnsavedChanges && ! saving && (
<button
type="button"
onClick={ onReset }
className="helix-btn helix-btn-secondary"
>
Reset Changes
</button>
) }
{ ! hasUnsavedChanges && ! saving && (
<span className="helix-save-status">✓ All changes saved</span>
) }
</div>
);
};
export default SaveButton;

66
src/pages/Settings/components/SelectInput.jsx Normal file
View file

@ -0,0 +1,66 @@
import React from 'react';
import FormField from './FormField';
/**
* Select input component
* @param root0
* @param root0.label
* @param root0.description
* @param root0.value
* @param root0.onChange
* @param root0.options
* @param root0.required
* @param root0.disabled
* @param root0.error
* @param root0.className
* @param root0.placeholder
*/
const SelectInput = ( {
label,
description,
value,
onChange,
options = [],
required = false,
disabled = false,
error = null,
className = '',
placeholder = 'Select an option...',
...props
} ) => {
const handleChange = ( event ) => {
onChange( event.target.value );
};
return (
<FormField
label={ label }
description={ description }
error={ error }
required={ required }
className={ className }
>
<select
value={ value || '' }
onChange={ handleChange }
required={ required }
disabled={ disabled }
className="helix-select-input"
{ ...props }
>
{ placeholder && (
<option value="" disabled>
{ placeholder }
</option>
) }
{ options.map( ( option ) => (
<option key={ option.value } value={ option.value }>
{ option.label }
</option>
) ) }
</select>
</FormField>
);
};
export default SelectInput;

35
src/pages/Settings/components/SettingsSection.jsx Normal file
View file

@ -0,0 +1,35 @@
import React from 'react';
/**
* Settings section wrapper component
* @param root0
* @param root0.title
* @param root0.description
* @param root0.children
* @param root0.className
*/
const SettingsSection = ( {
title,
description,
children,
className = '',
} ) => {
return (
<div className={ `helix-settings-section ${ className }` }>
{ title && (
<div className="helix-settings-section-header">
<h3 className="helix-settings-section-title">{ title }</h3>
{ description && (
<p className="helix-settings-section-description">
{ description }
</p>
) }
</div>
) }
<div className="helix-settings-section-content">{ children }</div>
</div>
);
};
export default SettingsSection;

76
src/pages/Settings/components/SettingsTabs.jsx Normal file
View file

@ -0,0 +1,76 @@
import React from 'react';
/**
* Settings tabs navigation component
* @param root0
* @param root0.activeTab
* @param root0.onTabChange
* @param root0.hasUnsavedChanges
*/
const SettingsTabs = ( { activeTab, onTabChange, hasUnsavedChanges } ) => {
const tabs = [
{
id: 'site',
label: 'Site Information',
icon: '🏠',
},
{
id: 'content',
label: 'Content & Reading',
icon: '📖',
},
{
id: 'writing',
label: 'Writing & Publishing',
icon: '✍️',
},
{
id: 'media',
label: 'Media & Assets',
icon: '🖼️',
},
{
id: 'users',
label: 'Users & Membership',
icon: '👥',
},
{
id: 'helix',
label: 'Helix Settings',
icon: '⚙️',
},
];
return (
<div className="helix-settings-tabs">
<nav className="helix-tabs-nav" role="tablist">
{ tabs.map( ( tab ) => (
<button
key={ tab.id }
type="button"
role="tab"
aria-selected={ activeTab === tab.id }
aria-controls={ `${ tab.id }-panel` }
className={ `helix-tab ${
activeTab === tab.id ? 'active' : ''
}` }
onClick={ () => onTabChange( tab.id ) }
>
<span className="helix-tab-icon">{ tab.icon }</span>
<span className="helix-tab-label">{ tab.label }</span>
{ hasUnsavedChanges && (
<span
className="helix-tab-indicator"
title="Unsaved changes"
>
●
</span>
) }
</button>
) ) }
</nav>
</div>
);
};
export default SettingsTabs;

87
src/pages/Settings/components/SiteInformationSettings.jsx Normal file
View file

@ -0,0 +1,87 @@
import React from 'react';
import SettingsSection from './SettingsSection';
import TextInput from './TextInput';
/**
* Site Information Settings Component
* @param root0
* @param root0.settings
* @param root0.updateSetting
*/
const SiteInformationSettings = ( { settings, updateSetting } ) => {
return (
<SettingsSection
title="Site Information"
description="Basic information about your WordPress site"
>
<div className="helix-settings-grid">
<TextInput
label="Site Title"
description="In a few words, explain what this site is about."
value={ settings.siteTitle }
onChange={ ( value ) =>
updateSetting( 'siteTitle', value )
}
placeholder="My Awesome Site"
required
/>
<TextInput
label="Tagline"
description="A brief description of your site, usually displayed under the title."
value={ settings.tagline }
onChange={ ( value ) => updateSetting( 'tagline', value ) }
placeholder="Just another WordPress site"
/>
<TextInput
label="WordPress Address (URL)"
description="The address of your WordPress core files."
value={ settings.siteUrl }
onChange={ ( value ) => updateSetting( 'siteUrl', value ) }
type="url"
placeholder="https://example.com"
/>
<TextInput
label="Site Address (URL)"
description="The address you want people to type in their browser to reach your website."
value={ settings.homeUrl }
onChange={ ( value ) => updateSetting( 'homeUrl', value ) }
type="url"
placeholder="https://example.com"
/>
<TextInput
label="Administration Email Address"
description="This address is used for admin purposes, like new user notification."
value={ settings.adminEmail }
onChange={ ( value ) =>
updateSetting( 'adminEmail', value )
}
type="email"
placeholder="admin@example.com"
required
/>
<TextInput
label="Site Language"
description="The language for your site interface."
value={ settings.language }
onChange={ ( value ) => updateSetting( 'language', value ) }
placeholder="en_US"
/>
<TextInput
label="Timezone"
description="Choose either a city in the same timezone as you or a UTC timezone offset."
value={ settings.timezone }
onChange={ ( value ) => updateSetting( 'timezone', value ) }
placeholder="UTC"
/>
</div>
</SettingsSection>
);
};
export default SiteInformationSettings;

57
src/pages/Settings/components/TextInput.jsx Normal file
View file

@ -0,0 +1,57 @@
import React from 'react';
import FormField from './FormField';
/**
* Text input component
* @param root0
* @param root0.label
* @param root0.description
* @param root0.value
* @param root0.onChange
* @param root0.placeholder
* @param root0.type
* @param root0.required
* @param root0.disabled
* @param root0.error
* @param root0.className
*/
const TextInput = ( {
label,
description,
value,
onChange,
placeholder = '',
type = 'text',
required = false,
disabled = false,
error = null,
className = '',
...props
} ) => {
const handleChange = ( event ) => {
onChange( event.target.value );
};
return (
<FormField
label={ label }
description={ description }
error={ error }
required={ required }
className={ className }
>
<input
type={ type }
value={ value || '' }
onChange={ handleChange }
placeholder={ placeholder }
required={ required }
disabled={ disabled }
className="helix-text-input"
{ ...props }
/>
</FormField>
);
};
export default TextInput;

55
src/pages/Settings/components/ToggleInput.jsx Normal file
View file

@ -0,0 +1,55 @@
import React from 'react';
import FormField from './FormField';
/**
* Toggle/Checkbox input component
* @param root0
* @param root0.label
* @param root0.description
* @param root0.value
* @param root0.onChange
* @param root0.required
* @param root0.disabled
* @param root0.error
* @param root0.className
*/
const ToggleInput = ( {
label,
description,
value,
onChange,
required = false,
disabled = false,
error = null,
className = '',
...props
} ) => {
const handleChange = ( event ) => {
onChange( event.target.checked );
};
return (
<FormField
description={ description }
error={ error }
required={ required }
className={ `helix-toggle-field ${ className }` }
>
<label className="helix-toggle-wrapper">
<input
type="checkbox"
checked={ !! value }
onChange={ handleChange }
required={ required }
disabled={ disabled }
className="helix-toggle-input"
{ ...props }
/>
<span className="helix-toggle-slider"></span>
<span className="helix-toggle-label">{ label }</span>
</label>
</FormField>
);
};
export default ToggleInput;

50
src/pages/Settings/components/UsersMembershipSettings.jsx Normal file
View file

@ -0,0 +1,50 @@
import React from 'react';
import SettingsSection from './SettingsSection';
import SelectInput from './SelectInput';
import ToggleInput from './ToggleInput';
/**
* Users & Membership Settings Component
* @param root0
* @param root0.settings
* @param root0.updateSetting
*/
const UsersMembershipSettings = ( { settings, updateSetting } ) => {
const roleOptions = [
{ value: 'subscriber', label: 'Subscriber' },
{ value: 'contributor', label: 'Contributor' },
{ value: 'author', label: 'Author' },
{ value: 'editor', label: 'Editor' },
{ value: 'administrator', label: 'Administrator' },
];
return (
<SettingsSection
title="Users & Membership"
description="Settings for user registration and default permissions"
>
<div className="helix-settings-grid">
<ToggleInput
label="Anyone can register"
description="Allow anyone to register as a user on your site."
value={ settings.usersCanRegister }
onChange={ ( value ) =>
updateSetting( 'usersCanRegister', value )
}
/>
<SelectInput
label="New User Default Role"
description="The default role assigned to new users when they register."
value={ settings.defaultRole }
onChange={ ( value ) =>
updateSetting( 'defaultRole', value )
}
options={ roleOptions }
/>
</div>
</SettingsSection>
);
};
export default UsersMembershipSettings;

91
src/pages/Settings/components/WritingPublishingSettings.jsx Normal file
View file

@ -0,0 +1,91 @@
import React from 'react';
import SettingsSection from './SettingsSection';
import SelectInput from './SelectInput';
import NumberInput from './NumberInput';
import ToggleInput from './ToggleInput';
/**
* Writing & Publishing Settings Component
* @param root0
* @param root0.settings
* @param root0.updateSetting
*/
const WritingPublishingSettings = ( { settings, updateSetting } ) => {
const postFormatOptions = [
{ value: 'standard', label: 'Standard' },
{ value: 'aside', label: 'Aside' },
{ value: 'gallery', label: 'Gallery' },
{ value: 'image', label: 'Image' },
{ value: 'link', label: 'Link' },
{ value: 'quote', label: 'Quote' },
{ value: 'status', label: 'Status' },
{ value: 'video', label: 'Video' },
{ value: 'audio', label: 'Audio' },
{ value: 'chat', label: 'Chat' },
];
const statusOptions = [
{ value: 'open', label: 'Open' },
{ value: 'closed', label: 'Closed' },
];
return (
<SettingsSection
title="Writing & Publishing"
description="Settings for content creation and publishing"
>
<div className="helix-settings-grid">
<NumberInput
label="Default Post Category"
description="The default category for new posts (Category ID)."
value={ settings.defaultCategory }
onChange={ ( value ) =>
updateSetting( 'defaultCategory', value )
}
min={ 1 }
/>
<SelectInput
label="Default Post Format"
description="The default format for new posts."
value={ settings.defaultPostFormat }
onChange={ ( value ) =>
updateSetting( 'defaultPostFormat', value )
}
options={ postFormatOptions }
/>
<ToggleInput
label="Convert emoticons like :-) and :-P to graphics on display"
description="Transform text emoticons into graphical representations."
value={ settings.useSmilies }
onChange={ ( value ) =>
updateSetting( 'useSmilies', value )
}
/>
<SelectInput
label="Default comment status"
description="Allow people to submit comments on new posts."
value={ settings.defaultCommentStatus }
onChange={ ( value ) =>
updateSetting( 'defaultCommentStatus', value )
}
options={ statusOptions }
/>
<SelectInput
label="Default ping status"
description="Allow link notifications from other blogs (pingbacks and trackbacks) on new posts."
value={ settings.defaultPingStatus }
onChange={ ( value ) =>
updateSetting( 'defaultPingStatus', value )
}
options={ statusOptions }
/>
</div>
</SettingsSection>
);
};
export default WritingPublishingSettings;

162
src/pages/Settings/hooks/useSettings.js Normal file
View file

@ -0,0 +1,162 @@
import { useState, useEffect, useCallback } from 'react';
import { getAllSettings, updateSettings } from '../utils/settingsAPI';
/**
* Custom hook for managing WordPress settings
* @return {Object} Settings state and methods
*/
export const useSettings = () => {
const [ settings, setSettings ] = useState( {} );
const [ originalSettings, setOriginalSettings ] = useState( {} );
const [ loading, setLoading ] = useState( true );
const [ saving, setSaving ] = useState( false );
const [ error, setError ] = useState( null );
const [ hasUnsavedChanges, setHasUnsavedChanges ] = useState( false );
/**
* Load settings from API
*/
const loadSettings = useCallback( async () => {
try {
setLoading( true );
setError( null );
const data = await getAllSettings();
// Flatten settings for easier form handling
const flattenedSettings = {};
Object.keys( data ).forEach( ( category ) => {
Object.keys( data[ category ] ).forEach( ( setting ) => {
flattenedSettings[ setting ] =
data[ category ][ setting ].value;
} );
} );
setSettings( flattenedSettings );
setOriginalSettings( flattenedSettings );
setHasUnsavedChanges( false );
} catch ( err ) {
setError( err.message );
} finally {
setLoading( false );
}
}, [] );
/**
* Update a single setting value
* @param {string} key - Setting key
* @param {any} value - Setting value
*/
const updateSetting = useCallback(
( key, value ) => {
setSettings( ( prev ) => {
const newSettings = { ...prev, [ key ]: value };
// Check if there are unsaved changes
const hasChanges = Object.keys( newSettings ).some(
( settingKey ) =>
newSettings[ settingKey ] !==
originalSettings[ settingKey ]
);
setHasUnsavedChanges( hasChanges );
return newSettings;
} );
},
[ originalSettings ]
);
/**
* Save all changes to the server
*/
const saveSettings = useCallback( async () => {
try {
setSaving( true );
setError( null );
// Only send changed settings
const changedSettings = {};
Object.keys( settings ).forEach( ( key ) => {
if ( settings[ key ] !== originalSettings[ key ] ) {
changedSettings[ key ] = settings[ key ];
}
} );
if ( Object.keys( changedSettings ).length === 0 ) {
return { success: true, message: 'No changes to save' };
}
const result = await updateSettings( changedSettings );
// Update original settings to reflect saved state
setOriginalSettings( settings );
setHasUnsavedChanges( false );
return {
success: true,
message: 'Settings saved successfully',
updated: result.updated,
errors: result.errors,
};
} catch ( err ) {
setError( err.message );
return { success: false, message: err.message };
} finally {
setSaving( false );
}
}, [ settings, originalSettings ] );
/**
* Reset settings to original values
*/
const resetSettings = useCallback( () => {
setSettings( originalSettings );
setHasUnsavedChanges( false );
setError( null );
}, [ originalSettings ] );
/**
* Reset a single setting to its original value
* @param {string} key - Setting key
*/
const resetSetting = useCallback(
( key ) => {
updateSetting( key, originalSettings[ key ] );
},
[ originalSettings, updateSetting ]
);
// Load settings on mount
useEffect( () => {
loadSettings();
}, [ loadSettings ] );
// Warn user about unsaved changes before leaving
useEffect( () => {
const handleBeforeUnload = ( event ) => {
if ( hasUnsavedChanges ) {
event.preventDefault();
event.returnValue =
'You have unsaved changes. Are you sure you want to leave?';
return event.returnValue;
}
};
window.addEventListener( 'beforeunload', handleBeforeUnload );
return () =>
window.removeEventListener( 'beforeunload', handleBeforeUnload );
}, [ hasUnsavedChanges ] );
return {
settings,
loading,
saving,
error,
hasUnsavedChanges,
updateSetting,
saveSettings,
resetSettings,
resetSetting,
loadSettings,
};
};

462
src/pages/Settings/styles.css Normal file
View file

@ -0,0 +1,462 @@
/* Helix Settings Page Styles */
.helix-settings-page {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Header */
.helix-settings-header {
margin-bottom: 30px;
text-align: center;
}
.helix-settings-header h1 {
font-size: 2.5rem;
font-weight: 600;
color: #1d4ed8;
margin: 0 0 10px 0;
}
.helix-settings-header p {
font-size: 1.1rem;
color: #6b7280;
margin: 0;
}
/* Loading State */
.helix-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
text-align: center;
}
.helix-loading p {
margin: 20px 0 0 0;
font-size: 1.1rem;
color: #6b7280;
}
/* Spinner */
.helix-spinner {
width: 24px;
height: 24px;
border: 3px solid #e5e7eb;
border-top: 3px solid #1d4ed8;
border-radius: 50%;
animation: spin 1s linear infinite;
display: inline-block;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Controls */
.helix-settings-controls,
.helix-settings-footer {
display: flex;
justify-content: center;
margin: 30px 0;
padding: 20px 0;
border-top: 1px solid #e5e7eb;
}
.helix-settings-footer {
border-bottom: 1px solid #e5e7eb;
margin-top: 50px;
}
/* Save Buttons */
.helix-save-buttons {
display: flex;
align-items: center;
gap: 15px;
}
.helix-btn {
padding: 12px 24px;
font-size: 14px;
font-weight: 500;
border-radius: 8px;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.helix-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.helix-btn-primary {
background-color: #1d4ed8;
color: white;
border-color: #1d4ed8;
}
.helix-btn-primary:hover:not(:disabled) {
background-color: #1e40af;
border-color: #1e40af;
}
.helix-btn-secondary {
background-color: white;
color: #374151;
border-color: #d1d5db;
}
.helix-btn-secondary:hover:not(:disabled) {
background-color: #f9fafb;
border-color: #9ca3af;
}
.helix-save-status {
color: #059669;
font-weight: 500;
display: flex;
align-items: center;
gap: 5px;
}
/* Tabs */
.helix-settings-tabs {
margin: 30px 0;
}
.helix-tabs-nav {
display: flex;
border-bottom: 2px solid #e5e7eb;
overflow-x: auto;
gap: 2px;
}
.helix-tab {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
font-size: 14px;
font-weight: 500;
color: #6b7280;
background: none;
border: none;
border-bottom: 3px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
position: relative;
}
.helix-tab:hover {
color: #1d4ed8;
background-color: #f8fafc;
}
.helix-tab.active {
color: #1d4ed8;
border-bottom-color: #1d4ed8;
}
.helix-tab-icon {
font-size: 16px;
}
.helix-tab-indicator {
color: #f59e0b;
font-size: 12px;
position: absolute;
top: 5px;
right: 5px;
}
/* Content */
.helix-settings-content {
margin: 40px 0;
}
.helix-tab-panel {
min-height: 400px;
}
/* Settings Sections */
.helix-settings-section {
background: white;
border-radius: 12px;
border: 1px solid #e5e7eb;
overflow: hidden;
margin-bottom: 30px;
}
.helix-settings-section-header {
background: #f8fafc;
padding: 24px;
border-bottom: 1px solid #e5e7eb;
}
.helix-settings-section-title {
font-size: 1.5rem;
font-weight: 600;
color: #111827;
margin: 0 0 8px 0;
}
.helix-settings-section-description {
color: #6b7280;
margin: 0;
font-size: 14px;
}
.helix-settings-section-content {
padding: 24px;
}
.helix-settings-grid {
display: grid;
gap: 24px;
}
.helix-settings-subsection {
border-top: 1px solid #e5e7eb;
padding-top: 24px;
margin-top: 24px;
}
.helix-settings-subsection h4 {
font-size: 1.1rem;
font-weight: 600;
color: #374151;
margin: 0 0 20px 0;
}
/* Form Fields */
.helix-form-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.helix-form-label {
font-weight: 500;
color: #374151;
font-size: 14px;
}
.helix-required {
color: #ef4444;
margin-left: 4px;
}
.helix-form-control {
display: flex;
flex-direction: column;
}
.helix-form-description {
font-size: 13px;
color: #6b7280;
margin: 0;
line-height: 1.4;
}
.helix-form-error {
font-size: 13px;
color: #ef4444;
margin: 0;
}
/* Input Elements */
.helix-text-input,
.helix-number-input,
.helix-select-input {
padding: 10px 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s ease;
background: white;
}
.helix-text-input:focus,
.helix-number-input:focus,
.helix-select-input:focus {
outline: none;
border-color: #1d4ed8;
box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}
.helix-select-input {
cursor: pointer;
}
/* Toggle Input */
.helix-toggle-field {
margin: 16px 0;
}
.helix-toggle-wrapper {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
}
.helix-toggle-input {
position: relative;
width: 48px;
height: 24px;
appearance: none;
background: #d1d5db;
border-radius: 12px;
outline: none;
cursor: pointer;
transition: background-color 0.2s ease;
}
.helix-toggle-input:checked {
background: #1d4ed8;
}
.helix-toggle-input::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
transition: transform 0.2s ease;
}
.helix-toggle-input:checked::before {
transform: translateX(24px);
}
.helix-toggle-label {
font-weight: 500;
color: #374151;
font-size: 14px;
}
/* Notifications */
.helix-notification {
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 16px;
margin: 20px 0;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
}
.helix-notification.visible {
opacity: 1;
transform: translateY(0);
}
.helix-notification-success {
border-left: 4px solid #059669;
background-color: #f0fdf4;
}
.helix-notification-error {
border-left: 4px solid #ef4444;
background-color: #fef2f2;
}
.helix-notification-warning {
border-left: 4px solid #f59e0b;
background-color: #fffbeb;
}
.helix-notification-info {
border-left: 4px solid #1d4ed8;
background-color: #eff6ff;
}
.helix-notification-content {
display: flex;
align-items: center;
gap: 12px;
}
.helix-notification-icon {
font-size: 18px;
flex-shrink: 0;
}
.helix-notification-message {
flex: 1;
font-size: 14px;
color: #374151;
}
.helix-notification-close {
background: none;
border: none;
font-size: 20px;
color: #6b7280;
cursor: pointer;
padding: 0;
line-height: 1;
flex-shrink: 0;
}
.helix-notification-close:hover {
color: #374151;
}
/* Responsive Design */
@media (max-width: 768px) {
.helix-settings-page {
padding: 15px;
}
.helix-settings-header h1 {
font-size: 2rem;
}
.helix-tabs-nav {
flex-direction: column;
gap: 0;
}
.helix-tab {
justify-content: flex-start;
border-bottom: 1px solid #e5e7eb;
border-right: none;
}
.helix-tab.active {
border-bottom-color: #e5e7eb;
border-left: 3px solid #1d4ed8;
background-color: #f8fafc;
}
.helix-settings-section-content,
.helix-settings-section-header {
padding: 20px;
}
.helix-save-buttons {
flex-direction: column;
width: 100%;
}
.helix-btn {
width: 100%;
justify-content: center;
}
}

98
src/pages/Settings/utils/settingsAPI.js Normal file
View file

@ -0,0 +1,98 @@
/**
* Settings API utilities for making requests to the WordPress REST API.
*/
// Get the REST API base URL
const getAPIBase = () => {
return window.helixData?.restUrl || '/wp-json/helix/v1/';
};
// Get the REST API nonce for authentication
const getNonce = () => {
return window.helixData?.nonce || '';
};
/**
* Make an authenticated API request
* @param {string} endpoint - API endpoint
* @param {Object} options - Fetch options
* @return {Promise<Object>} API response
*/
const apiRequest = async ( endpoint, options = {} ) => {
const url = `${ getAPIBase() }${ endpoint }`;
const defaultOptions = {
headers: {
'Content-Type': 'application/json',
'X-WP-Nonce': getNonce(),
},
credentials: 'include',
};
const mergedOptions = {
...defaultOptions,
...options,
headers: {
...defaultOptions.headers,
...options.headers,
},
};
try {
const response = await fetch( url, mergedOptions );
if ( ! response.ok ) {
const errorData = await response.json().catch( () => ( {} ) );
throw new Error(
errorData.message ||
`HTTP ${ response.status }: ${ response.statusText }`
);
}
return await response.json();
} catch ( error ) {
throw error;
}
};
/**
* Get all settings
* @return {Promise<Object>} All settings organized by category
*/
export const getAllSettings = async () => {
return apiRequest( 'settings' );
};
/**
* Get a single setting
* @param {string} setting - Setting key
* @return {Promise<Object>} Setting data
*/
export const getSetting = async ( setting ) => {
return apiRequest( `settings/${ setting }` );
};
/**
* Update multiple settings
* @param {Object} settings - Settings to update
* @return {Promise<Object>} Update result
*/
export const updateSettings = async ( settings ) => {
return apiRequest( 'settings', {
method: 'POST',
body: JSON.stringify( settings ),
} );
};
/**
* Update a single setting
* @param {string} setting - Setting key
* @param {any} value - Setting value
* @return {Promise<Object>} Update result
*/
export const updateSetting = async ( setting, value ) => {
return apiRequest( `settings/${ setting }`, {
method: 'POST',
body: JSON.stringify( { value } ),
} );
};

14
vite.config.js
View file

@ -1,16 +1,16 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
export default defineConfig( {
plugins: [ react() ],
build: {
outDir: 'build',
emptyOutDir: true,
rollupOptions: {
input: 'src/App.jsx',
output: {
entryFileNames: 'index.js'
}
}
}
});
entryFileNames: 'index.js',
},
},
},
} );