Skip to content

Implement AI plugin onboarding guide#450

Draft
vishnupprajapat wants to merge 3 commits intoWordPress:developfrom
vishnupprajapat:feature/issue-428-onboarding-guide
Draft

Implement AI plugin onboarding guide#450
vishnupprajapat wants to merge 3 commits intoWordPress:developfrom
vishnupprajapat:feature/issue-428-onboarding-guide

Conversation

@vishnupprajapat
Copy link
Copy Markdown

@vishnupprajapat vishnupprajapat commented Apr 21, 2026

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?

  1. Design Parity: Recreated the Gutenberg ai-plugin-callout aesthetic by carrying over the WpLogoDecoration SVG and matching the gradient hero background using a custom <GuideGraphic /> component.
  2. State Management: Integrated the @wordpress/components <Guide /> modal containing three paginated steps. Added strict CSS styling overrides globally to maintain a solid 320px width that eliminates jarring resizing between paginated steps, and ensures consistent typography.
  3. Persistence Logic: Registered a global boolean user meta key (wpai_settings_guide_dismissed). When the guide is finished, an apiFetch POST request is dispatched directly to the /wp/v2/users/me REST endpoint. This bypasses local caching inconsistencies and ensures the modal is never shown again once dismissed.
  4. Added a manual "Getting started" button next to "Manage Connectors" in the page header for manual reopening.

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

  1. Check out this branch and run npm run build from the plugins/ai directory.
  2. Navigate to your local WordPress Admin.
  3. Go to the "AI" settings page (admin.php?page=ai-wp-admin).
  4. You should see the 3-step "Welcome to WordPress AI" guide pop up automatically.
  5. Click through the "Next" buttons and verify the modal width does not skip or resize.
  6. Verify the graphical gradient fills the header smoothly and matches @wordpress/components defaults.
  7. Click "Finish" on the final slide.
  8. Click "Getting started" up in the top right header to verify the modal can be summoned manually.

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

Added - 3-step onboarding Welcome guide to the main settings page.

Open WordPress Playground Preview

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.
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 21, 2026

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: vishnupprajapat <vishnuprajapat@git.wordpress.org>
Co-authored-by: jeffpaul <jeffpaul@git.wordpress.org>
Co-authored-by: CacheMeOwside <kaavyaiyer@git.wordpress.org>
Co-authored-by: raftaar1191 <raftaar1191@git.wordpress.org>
Co-authored-by: juanfra <juanfra@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 21, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 67.65%. Comparing base (43d3bde) to head (ddb5321).

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     
Flag Coverage Δ
unit 67.65% <100.00%> (+0.74%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@jeffpaul jeffpaul added the [Status] Blocked Used to indicate unable to move forward label Apr 21, 2026
@jeffpaul jeffpaul added this to the 1.0.0 milestone Apr 21, 2026
@jeffpaul
Copy link
Copy Markdown
Member

Marking this as blocked until we can finalize some design guidance as noted in #428 (comment).

@vishnupprajapat vishnupprajapat marked this pull request as draft April 22, 2026 08:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Status] Blocked Used to indicate unable to move forward

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add onboarding guide to settings page

2 participants