UX iteration for the title generation experiment

[juanfra]

What?

Improves the UX of the title regeneration modal by simplifying the selection interface and adding the ability to regenerate options without closing the modal.

Why?

The current flow has different textareas with selection buttons, which made the interaction feel heavier than it needed to be. On the other hand, users had to close and reopen the modal to get new suggestions. Creating unnecessary friction when none of the initial options worked.

The current flow is auto-inserting the suggestion without giving the chance to "confirm" you like the result, and leaving no option but undoing if you don't like it.

How?

• Simplified the selection UI to radio-style choice cards (inspired by shadcn's ChoiceCard component, adapting to the block editor's design language)
• Added a "Regenerate" button directly in the modal so users can go through suggestions without closing.
• Updated the modal title to "Select a title or regenerate for more options" to make the flow clearer.
• Added proper loading states during regeneration (with disabled controls)
• Auto-selects the first option after regeneration

Testing Instructions

1. Create or edit a page.
2. Click on "Regenerate title" via title toolbar
3. Verify the modal opens with the suggestion
4. Confirm the suggestion shows in a textarea and you can insert it or regenerate.
5. Click "Insert" and verify the title is inserted, and the modal closed.

Update Apr 10

After #341 was merged, the regeneration was limited to only one result and auto-inserting it. This PR was updated to show the suggestion in the modal (as before, instead of auto-inserting) with the option to insert or regenerate.

Screenshots or screencast

title-regenerate-new.mp4

[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: juanfra <juanfra@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
Co-authored-by: jeffpaul <jeffpaul@git.wordpress.org>

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

[codecov]

Codecov Report

❌ Patch coverage is 0% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 68.29%. Comparing base (274a2da) to head (3b4574a).

Files with missing lines	Patch %	Lines
.../Experiments/Title_Generation/Title_Generation.php	0.00%	1 Missing ⚠️

Additional details and impacted files

@@              Coverage Diff              @@
##             develop     #290      +/-   ##
=============================================
- Coverage      68.31%   68.29%   -0.02%     
  Complexity       812      812              
=============================================
  Files             53       53              
  Lines           3939     3940       +1     
=============================================
  Hits            2691     2691              
- Misses          1248     1249       +1     

Flag	Coverage Δ
unit	68.29% <0.00%> (-0.02%)	⬇️

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.

[juanfra]

I'll be fixing the tests.

[dkotter]

Note we've now merged in #341, which made the decision to remove the generation of multiple titles. As such, the changes in this PR will no longer work. I've leaving this open for the moment to see if there's any feedback you may have @juanfra with this new approach.

[juanfra]

Thanks for the ping @dkotter, sorry I missed that. Haven't had time to come back to this.

In terms of UX, I'm a bit concerned about auto-inserting the title. It doesn't give users a chance to preview or dismiss if they don't like the result. They'd have to undo, which feels pretty aggressive.

I think there's still value in having a modal where the user can confirm the suggestion. I feel the flow of "getting a suggestion > regenerate if needed > insert when you're happy" would give users more control and be more predictable. That said, it would be good to have a pattern that's followed in the different experiments (summary, excerpt)

Thoughts?

[dkotter]

In terms of UX, I'm a bit concerned about auto-inserting the title. It doesn't give users a chance to preview or dismiss if they don't like the result. They'd have to undo, which feels pretty aggressive.

I think there's still value in having a modal where the user can confirm the suggestion. I feel the flow of "getting a suggestion > regenerate if needed > insert when you're happy" would give users more control and be more predictable. That said, it would be good to have a pattern that's followed in the different experiments (summary, excerpt)

Thoughts?

Yeah, I agree that I like giving the user a clear opportunity to accept a suggestion instead of auto-inserting it. Though that said, this does match what we do in other areas (excerpt generation, summarization, featured image generation) so I don't think it's the worst UX.

But I'm definitely open to reviewing a different approach to this if you want to try tackling that. We're not looking to go back to rendering multiple results but I'm open to bringing back some sort of modal approach that allows the user to approve/re-generate as needed.

[juanfra]

Thanks @dkotter. I iterated on what we have now.

Updated the PR to bring back the modal with a layout that adapts well to having only one option (changed the title of the modal as well) and giving the user the chance to insert, regenerate or exit the whole thing without changing (closing the modal).

title-regenerate-new.mp4

[dkotter]

This looks good to me. Before merging, any thoughts on this new approach @jeffpaul?

[jeffpaul]

Functionally, this isn't all that much different that the existing experience:

regen-title.mp4

So question is a modal better than just directly updating the title, allowing editing there as normal, and relying on undo to roll back to before generation?

[juanfra]

Functionally, this isn't all that much different that the existing experience

@jeffpaul the radical difference is user control. With the modal the user can review and discard, regenerate, or insert suggestions. With auto-insert, they lose that control. The title just changes and their only option is undo.

Another problem with the current flow, if the generation takes a few seconds and the user scrolls down or starts editing other content, they might not even notice when the title changes. They could lose their original title without realizing it. At minimum, if we're auto-inserting we should show a toast notice when the title changes.

I believe the proposed changes are providing better UX, though I understand these things can be subjective.