Compress AI settings page above-the-fold

[Adi-ty]

Move the global AI toggle into the page header and replace the large general settings block with an infotip so Features and Experiments appear higher on the page.

What?

Closes #451

Moves the global “Enable AI” control out of the large General Settings block and into the page header. Replaces the explanatory block with an infotip so the Features and Experiments sections are visible higher on the page.

Why?

The previous layout pushed the main feature sections too far below the fold because the General Settings block consumed a large amount of vertical space. This change keeps the same behavior while improving scanability and reducing the amount of unused space at the top of the settings page.

How?

• Renders the global AI toggle in the page header instead of inside the main DataForm settings section.
• Uses an @wordpress/ui Popover-based infotip to display the explanatory copy.
• Keeps the same settings key and save flow through core-data and the WP settings API.

Use of AI Tools

GPT-5.3-Codex was used to assist with code review and PR description drafting.

Testing Instructions

1. Open the AI settings page in wp-admin.
2. Verify the global AI toggle is shown in the page header.
3. Verify the Features and Experiments sections are visible higher on the page.
4. Hover or focus the infotip icon and confirm the explanatory text appears.
5. Toggle AI on and off and confirm the setting persists after refresh.

Screenshots or screencast

Before	After

Changelog Entry

Changed - Compress the AI settings page above the fold by moving the global AI toggle into the header and replacing the large general settings block with an infotip.

[jeffpaul]

@Adi-ty I see this is in draft, are you still working on this or is this ready for review/testing?

[Adi-ty]

@Adi-ty I see this is in draft, are you still working on this or is this ready for review/testing?

Hi @jeffpaul I've kept it in draft due to the npm ci failures I mentioned in the issue here. There’s a conflict between the new @wordpress/ui and the current @wordpress/build peer dependencies. Since this seems to be a workspace/dependency issue rather than a code one, I wasn't sure if I should mark it ready yet. Thoughts on how we should handle the build mismatch?

[github-actions]

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: Adi-ty <iamadisingh@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
Co-authored-by: jeffpaul <jeffpaul@git.wordpress.org>
Co-authored-by: simison <simison@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: dilipom13 <dilip2615@git.wordpress.org>

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

[simison]

In another thread (#472 (comment)) a question about "disable everything" toggle came up by @jameskoster:

Dimming the cards when AI is disabled doesn’t feel like a strong pattern—the connection isn’t very clear. It also raises the question of whether the “Enable AI” toggle is necessary at all. As it stands, a user could enable AI and then switch off all related features, which creates a misleading state. That starts to feel like a UX smell. Unless “Enable AI” has a meaningful standalone effect—beyond simply unlocking other options—it might be better to remove it.

What's the purpose of the toggle; I don't understand an use case where one would disable the toggle but keep the plugin enabled?

The very mechanism of enabling or disabling the plugin in WP is meant to enable or disable functionality overall, so it feels odd to have a separate toggle for it here.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 69.06%. Comparing base (a04709f) to head (a40f8cd).
⚠️ Report is 1 commits behind head on develop.

Additional details and impacted files

@@            Coverage Diff             @@
##             develop     #455   +/-   ##
==========================================
  Coverage      69.06%   69.06%           
  Complexity       957      957           
==========================================
  Files             60       60           
  Lines           4512     4512           
==========================================
  Hits            3116     3116           
  Misses          1396     1396           

Flag	Coverage Δ
unit	69.06% <ø> (ø)

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.

[Adi-ty]

@simison on your earlier question @dkotter covered the rationale for the "Enable AI" toggle in the #472 thread(intentional one-click kill switch, separate from plugin deactivation). Removing it feels out of scope for #455 since this PR is just compressing the layout per #451 - happy to help on a follow-up issue if the broader redesign is worth pursuing.

[dkotter]

Tested and everything works as expected and looks fine to me.

The only minor thing I'd flag is there's more spacing than I'd expect between the Enable AI label and the info icon, might be nice to tighten that up if we can:

[Adi-ty]

Tested and everything works as expected and looks fine to me.

The only minor thing I'd flag is there's more spacing than I'd expect between the Enable AI label and the info icon, might be nice to tighten that up if we can:

Thanks for the review @dkotter. I have tightened that spacing up by wrapping the toggle and infotip in a flex container and setting the gap to 4px.