feat: Implement Phase 2, 3, 4 - Module Settings System with Schema Forms and Addon API
Phase 2: Schema-Based Form System
- Add ModuleSettingsController with GET/POST/schema endpoints
- Create SchemaField component supporting 8 field types (text, textarea, email, url, number, toggle, checkbox, select)
- Create SchemaForm component for automatic form generation from schema
- Add ModuleSettings page with dynamic routing (/settings/modules/:moduleId)
- Add useModuleSettings React hook for settings management
- Implement NewsletterSettings as example with 8 configurable fields
- Add has_settings flag to module registry
- Settings stored as woonoow_module_{module_id}_settings
Phase 3: Advanced Features
- Create windowAPI.ts exposing React, hooks, components, icons, utils to addons via window.WooNooW
- Add DynamicComponentLoader for loading external React components
- Create TypeScript definitions (woonoow-addon.d.ts) for addon developers
- Initialize Window API in App.tsx on mount
- Enable custom React components for addon settings pages
Phase 4: Production Polish & Example
- Create complete Biteship addon example demonstrating both approaches:
* Schema-based settings (no build required)
* Custom React component (with build)
- Add comprehensive README with installation and testing guide
- Include package.json with esbuild configuration
- Demonstrate window.WooNooW API usage in custom component
Bug Fixes:
- Fix footer newsletter form visibility (remove redundant module check)
- Fix footer contact_data and social_links not saving (parameter name mismatch: snake_case vs camelCase)
- Fix useModules hook returning undefined (remove .data wrapper, add fallback)
- Add optional chaining to footer settings rendering
- Fix TypeScript errors in woonoow-addon.d.ts (use any for external types)
Files Added (15):
- includes/Api/ModuleSettingsController.php
- includes/Modules/NewsletterSettings.php
- admin-spa/src/components/forms/SchemaField.tsx
- admin-spa/src/components/forms/SchemaForm.tsx
- admin-spa/src/routes/Settings/ModuleSettings.tsx
- admin-spa/src/hooks/useModuleSettings.ts
- admin-spa/src/lib/windowAPI.ts
- admin-spa/src/components/DynamicComponentLoader.tsx
- types/woonoow-addon.d.ts
- examples/biteship-addon/biteship-addon.php
- examples/biteship-addon/src/Settings.jsx
- examples/biteship-addon/package.json
- examples/biteship-addon/README.md
- PHASE_2_3_4_SUMMARY.md
Files Modified (11):
- admin-spa/src/App.tsx
- admin-spa/src/hooks/useModules.ts
- admin-spa/src/routes/Appearance/Footer.tsx
- admin-spa/src/routes/Settings/Modules.tsx
- customer-spa/src/hooks/useModules.ts
- customer-spa/src/layouts/BaseLayout.tsx
- customer-spa/src/components/NewsletterForm.tsx
- includes/Api/Routes.php
- includes/Api/ModulesController.php
- includes/Core/ModuleRegistry.php
- woonoow.php
API Endpoints Added:
- GET /woonoow/v1/modules/{module_id}/settings
- POST /woonoow/v1/modules/{module_id}/settings
- GET /woonoow/v1/modules/{module_id}/schema
For Addon Developers:
- Schema-based: Define settings via woonoow/module_settings_schema filter
- Custom React: Build component using window.WooNooW API, externalize react/react-dom
- Both approaches use same storage and retrieval methods
- TypeScript definitions provided for type safety
- Complete working example (Biteship) included
This commit is contained in:
Dwindi Ramadhana
@@ -13,11 +13,11 @@ namespace WooNooW\Core;
|
||||
class ModuleRegistry {
|
||||
|
||||
/**
|
||||
* Get all registered modules
|
||||
* Get built-in modules
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
public static function get_all_modules() {
|
||||
private static function get_builtin_modules() {
|
||||
$modules = [
|
||||
'newsletter' => [
|
||||
'id' => 'newsletter',
|
||||
@@ -26,6 +26,7 @@ class ModuleRegistry {
|
||||
'category' => 'marketing',
|
||||
'icon' => 'mail',
|
||||
'default_enabled' => true,
|
||||
'has_settings' => true,
|
||||
'features' => [
|
||||
__('Subscriber management', 'woonoow'),
|
||||
__('Email campaigns', 'woonoow'),
|
||||
@@ -89,7 +90,118 @@ class ModuleRegistry {
|
||||
],
|
||||
];
|
||||
|
||||
return apply_filters('woonoow/modules/registry', $modules);
|
||||
return $modules;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get addon modules from AddonRegistry
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
private static function get_addon_modules() {
|
||||
$addons = apply_filters('woonoow/addon_registry', []);
|
||||
$modules = [];
|
||||
|
||||
foreach ($addons as $addon_id => $addon) {
|
||||
$modules[$addon_id] = [
|
||||
'id' => $addon_id,
|
||||
'label' => $addon['name'] ?? ucfirst($addon_id),
|
||||
'description' => $addon['description'] ?? '',
|
||||
'category' => $addon['category'] ?? 'other',
|
||||
'icon' => $addon['icon'] ?? 'puzzle',
|
||||
'default_enabled' => false,
|
||||
'features' => $addon['features'] ?? [],
|
||||
'is_addon' => true,
|
||||
'version' => $addon['version'] ?? '1.0.0',
|
||||
'author' => $addon['author'] ?? '',
|
||||
'has_settings' => !empty($addon['has_settings']),
|
||||
'settings_component' => $addon['settings_component'] ?? null,
|
||||
];
|
||||
}
|
||||
|
||||
return $modules;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all modules (built-in + addons)
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
public static function get_all_modules() {
|
||||
$builtin = self::get_builtin_modules();
|
||||
$addons = self::get_addon_modules();
|
||||
|
||||
return array_merge($builtin, $addons);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get categories dynamically from registered modules
|
||||
*
|
||||
* @return array Associative array of category_id => label
|
||||
*/
|
||||
public static function get_categories() {
|
||||
$all_modules = self::get_all_modules();
|
||||
$categories = [];
|
||||
|
||||
// Extract unique categories from modules
|
||||
foreach ($all_modules as $module) {
|
||||
$cat = $module['category'] ?? 'other';
|
||||
if (!isset($categories[$cat])) {
|
||||
$categories[$cat] = self::get_category_label($cat);
|
||||
}
|
||||
}
|
||||
|
||||
// Sort by predefined order
|
||||
$order = ['marketing', 'customers', 'products', 'shipping', 'payments', 'analytics', 'other'];
|
||||
uksort($categories, function($a, $b) use ($order) {
|
||||
$pos_a = array_search($a, $order);
|
||||
$pos_b = array_search($b, $order);
|
||||
if ($pos_a === false) $pos_a = 999;
|
||||
if ($pos_b === false) $pos_b = 999;
|
||||
return $pos_a - $pos_b;
|
||||
});
|
||||
|
||||
return $categories;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get human-readable label for category
|
||||
*
|
||||
* @param string $category Category ID
|
||||
* @return string
|
||||
*/
|
||||
private static function get_category_label($category) {
|
||||
$labels = [
|
||||
'marketing' => __('Marketing & Sales', 'woonoow'),
|
||||
'customers' => __('Customer Experience', 'woonoow'),
|
||||
'products' => __('Products & Inventory', 'woonoow'),
|
||||
'shipping' => __('Shipping & Fulfillment', 'woonoow'),
|
||||
'payments' => __('Payments & Checkout', 'woonoow'),
|
||||
'analytics' => __('Analytics & Reports', 'woonoow'),
|
||||
'other' => __('Other Extensions', 'woonoow'),
|
||||
];
|
||||
|
||||
return $labels[$category] ?? ucfirst($category);
|
||||
}
|
||||
|
||||
/**
|
||||
* Group modules by category
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
public static function get_grouped_modules() {
|
||||
$all_modules = self::get_all_modules();
|
||||
$grouped = [];
|
||||
|
||||
foreach ($all_modules as $module) {
|
||||
$cat = $module['category'] ?? 'other';
|
||||
if (!isset($grouped[$cat])) {
|
||||
$grouped[$cat] = [];
|
||||
}
|
||||
$grouped[$cat][] = $module;
|
||||
}
|
||||
|
||||
return $grouped;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user