Implement AI plugin onboarding guide#450
Implement AI plugin onboarding guide#450vishnupprajapat wants to merge 3 commits intoWordPress:developfrom
Conversation
Resolves WordPress#428. Added a 3-step onboarding guide to the settings page with visual parity to Gutenberg's AI callout. Persists dismissal state via global user meta utilizing apiFetch.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## develop #450 +/- ##
=============================================
+ Coverage 66.90% 67.65% +0.74%
Complexity 907 907
=============================================
Files 59 59
Lines 4699 4708 +9
=============================================
+ Hits 3144 3185 +41
+ Misses 1555 1523 -32
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
Marking this as |
Resolves #428. Added a 3-step onboarding guide to the settings page with visual parity to Gutenberg's AI callout. Persists dismissal state via global user meta utilizing apiFetch.
What?
Closes #428
This PR implements a 3-step dynamic onboarding guide for the WordPress AI plugin's main settings page. The guide automatically pops up on the first visit to help users configure and understand the plugin.
Why?
This PR addresses the need for a cohesive onboarding experience. Users need immediate directions on how to set up their "AI Connectors" and discover available "Experiments" directly from the core settings page.
How?
ai-plugin-calloutaesthetic by carrying over theWpLogoDecorationSVG and matching the gradient hero background using a custom<GuideGraphic />component.@wordpress/components<Guide />modal containing three paginated steps. Added strict CSS styling overrides globally to maintain a solid320pxwidth that eliminates jarring resizing between paginated steps, and ensures consistent typography.wpai_settings_guide_dismissed). When the guide is finished, anapiFetchPOST request is dispatched directly to the/wp/v2/users/meREST endpoint. This bypasses local caching inconsistencies and ensures the modal is never shown again once dismissed.Use of AI Tools
AI assistance: Yes
Tool(s): Antigravity / Gemini Coding Assistant
Used for: Initial code implementation for
<GuideGraphic />, UI layout integration, user meta state logic, and solving UI/UX styling consistency errors. I personally reviewed, tweaked, and tested the final work.Testing Instructions
npm run buildfrom theplugins/aidirectory.admin.php?page=ai-wp-admin).@wordpress/componentsdefaults.Screenshots or screencast
(Please attach your screenshots or a screen recording here showing the popup modal)
General.Settings.Custom.Gutenberg.Blocks.WordPress.mp4
Changelog Entry