Admin UX improvements, AI helper, template library, and bug fixes

[vytisbulkevicius]

Summary

Major admin UX overhaul addressing the most common user pain points: setup complexity, blank-slate confusion, manual product assignment workflow, and several pre-existing bugs. Adds AI-powered field generation, a template library with 8 data-driven presets, a Quick Setup onboarding wizard, live product preview, and CSS/JS style presets.

All changes are in the free plugin. Pro features (AI, Pro-only templates, Style tab customization) are gated behind ppom_pro_is_valid_license() with appropriate upgrade CTAs. AI features additionally require an API key configured in PPOM Settings.

Will affect visual aspect of the product

YES — frontend field layout improvements (consistent alignment, spacing, input styling) and new admin UI elements.

Changes overview

New features:

• Collapsible advanced settings in field editor — essential settings visible by default, advanced behind a toggle
• Empty state for fields list — guides new users to add their first field
• Inline product/category assignment — Select2 dropdowns with AJAX search (replaces the modal, scales to 1000s of products)
• AI-powered field generation — OpenAI + Anthropic support, generates fields from natural language descriptions
• Template library — 8 curated templates based on customer usage data (2 free, 6 Pro)
• Quick Setup wizard — onboarding flow with templates, AI generation, or start from scratch
• AI Helper in field group editor — additive field generation/removal within existing groups
• Live product page preview — iframe-based preview with product selector
• CSS/JS style presets — 5 CSS themes + 4 JS behavior snippets, one-click insertable
• CSS/JS AI assistants — describe what you want, AI generates the code
• Frontend layout improvements — consistent field alignment, spacing, input styling

Bug fixes:

• Multi-group CSS/JS now renders from all attached groups (not just the first)
• Stale group references auto-cleaned on product load
• Fields without ppom_id no longer silently filtered out on frontend
• Validation crash on single-value price matrix options
• Conditions format mismatch from imports (case-insensitive handling)
• CodeMirror sync before AJAX form submit (CSS/JS changes were silently lost)
• CSS/JS sanitizer changed from sanitize_text_field to wp_unslash (was stripping tags and line breaks)
• CodeMirror editors now resizable (removed 139px !important height lock)

New files:

• classes/ai-service.class.php — shared AI backend (API calls, AJAX handlers, field normalizer)
• classes/template-library.class.php — 8 template definitions + import handler
• classes/onboarding-wizard.class.php — Quick Setup wizard modal

Modified files:

• woocommerce-product-addon.php — requires new class files
• backend/options.php — AI Provider + API Key settings
• classes/fields.class.php — advanced settings collapse, conditions format fix
• classes/form.class.php — ppom_id resilience for imported/legacy fields
• classes/ppom.class.php — multi-group CSS/JS, stale group auto-cleanup
• css/ppom-admin.css — styles for all new admin features, CodeMirror resize, presets
• css/ppom-style.css — frontend field layout baseline
• inc/admin.php — sanitizer fix for CSS/JS fields
• inc/validation.php — array key guard for price matrix
• js/admin/ppom-admin.js — empty state removal, CodeMirror sync
• js/admin/ppom-meta-table.js — Quick Setup button in toolbar
• templates/admin/ppom-fields.php — inline assignment, preview, AI Helper, presets, empty state

Test instructions

Quick Setup wizard:

1. Go to WooCommerce > PPOM Fields
2. Click "Quick Setup" — verify three options appear
3. Import a free template (Food Customiser) — verify fields created
4. Assign to product — verify fields render on frontend

AI Helper (requires Pro + API key in PPOM Settings):

1. Edit a field group > click "AI Helper"
2. Describe fields to add > Generate > Apply Changes
3. Verify new fields added to existing group without removing old ones

Inline assignment:

1. Edit a field group > General tab > Products dropdown
2. Search for a product > select > verify "Saved" status
3. Test with many products — verify AJAX search works

Style presets:

1. Edit a field group > Style tab > click "Clean & Modern" CSS preset
2. Save Fields > visit product page > verify styling applied
3. Test JS snippets (Character Counter, Collapsible Sections)

Bug fixes:

1. Attach multiple field groups with different CSS to one product — verify all CSS renders
2. Delete a field group > visit a product that had it — verify no blank areas
3. Import a template > assign to product > verify no PHP warnings on frontend

Check before Pull Request is ready:

• I have written a test and included it in this PR
• I have run all tests and they pass
• The code passes when running the PHP CodeSniffer
• Code meets WordPress Coding Standards for PHP, HTML, CSS and JS
• Security and Sanitization requirements have been followed
• I have assigned a reviewer or two to review this PR

Closes https://github.com/Codeinwp/ppom-pro/issues/643.
Closes https://github.com/Codeinwp/ppom-pro/issues/644.
Closes https://github.com/Codeinwp/ppom-pro/issues/645.
Closes https://github.com/Codeinwp/ppom-pro/issues/646.
Closes https://github.com/Codeinwp/ppom-pro/issues/647.
Closes https://github.com/Codeinwp/ppom-pro/issues/648.
Closes https://github.com/Codeinwp/ppom-pro/issues/649.
Closes https://github.com/Codeinwp/ppom-pro/issues/650.
Closes https://github.com/Codeinwp/ppom-pro/issues/651.
Closes https://github.com/Codeinwp/ppom-pro/issues/652.
Closes https://github.com/Codeinwp/ppom-pro/issues/653.

[pirate-bot]

Plugin build for 8c29d5d is ready 🛎️!

• Download PPOM - build 🔗