Add the Title Generation UI #83

dkotter · 2025-11-14T19:51:40Z

What?

Partially closes #10

Continues work on the Title Generation Experiment, with initial scaffold work done in #61 and the execution functionality done in #67.

Why?

We now have a Title Generation Ability that can be triggered to generate title suggestions but that requires you to make direct API requests. This PR adds in the UI that allows users to easily trigger this Ability from the post edit screen.

How?

Uses the Asset_Loader class within the Title_Generation Experiment to load the needed JS file when we're on the post edit screen for a post that has title support.
Adds in a TitleToolbar component and TitleToolbarWrapper component (using typescript though can change to plain JS if we want)
When the title is a block (when using the template preview mode) we modify the Edit component of that block to use the new TitleToolbar component
When the title isn't a block (normal editing mode), we load the TitleToolbarWrapper component as a plugin which will then find the title field and inject the TitleToolbar component
In either case, we show a toolbar above the title that has a button in it. When clicked, we show a loading state and when titles are returned, those are loaded in a modal within a textarea. The user can then choose which title (if any) they want to select and optionally make edits before selection. Once they select a title, we set that as the title for the post and trigger an autosave
Adds in all necessary dependencies

Testing Instructions

Pull changes and run npm i && npm run build && composer install --no-dev
Go to Settings > AI Credentials and ensure you add at least one valid API key
Go to Settings > AI Experiments and ensure the Title Generation Experiment is enabled
Add a new post or edit an existing post
Click into the title field and ensure you see a toolbar with a button that says either Generate or Re-generate depending on if you have an existing title or not
Click on that button and ensure a loading state shows
Once the request completes, ensure a modal opens with title suggestions. Ensure you can select a title (and optionally edit a title first) and that title is set within the post

Testing Instructions for Keyboard

Screenshots

Toolbar with Generate button when no existing title

Toolbar with Re-generate button when there is an existing title

Loading state of the toolbar when the button is clicked

Modal that shows title options, allowing you to edit and select a title

Test using WordPress Playground

The changes in this pull request can be previewed and tested using this WordPress Playground instance:

Click here to test this pull request.

… toolbar

…a block)

…neration-ui

…styling on this and the toolbar to get things positioned correctly. Fix lint errors

…neration-ui

…ng the executeAbility function

src/experiments/title-generation/utils/casing.ts

src/index.js

dkotter · 2025-11-14T19:54:16Z

package-lock.json

I know, huge amount of line changes here but is needed to include all the various WordPress components we're using, otherwise linting will complain about importing things that don't exist

codecov · 2025-11-14T20:10:50Z

Codecov Report

❌ Patch coverage is 0% with 16 lines in your changes missing coverage. Please review.
⚠️ Please upload report for BASE (trunk@1f48035). Learn more about missing BASE report.
⚠️ Report is 86 commits behind head on trunk.

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

Additional details and impacted files

@@           Coverage Diff            @@
##             trunk      #83   +/-   ##
========================================
  Coverage         ?   29.19%           
  Complexity       ?      142           
========================================
  Files            ?       14           
  Lines            ?      846           
  Branches         ?        0           
========================================
  Hits             ?      247           
  Misses           ?      599           
  Partials         ?        0

Flag	Coverage Δ
unit	`29.19% <0.00%> (?)`

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.

felixarntz

@dkotter Overall this is looking good, but a few concerns regarding coding standards and dependencies.

package.json

felixarntz · 2025-11-24T22:51:23Z

src/experiments/example-experiment/index.tsx


 const ExampleExperiment = () => {
-	return <div className="test">{ __( 'Example Experiment', 'ai' ) }</div>;
+	return <div className="test">{__('Example Experiment', 'ai')}</div>;


Why this "correction"? Before it was using WordPress Coding Standards, and now it isn't.

We use wp-scripts here for linting (npm run lint:js which will run wp-scripts lint-js) and it was flagging this. I've always assumed the linting wp-scripts enforces is what WordPress wants (seems it uses https://www.npmjs.com/package/@wordpress/eslint-plugin) but if there's a better/more canonical approach to enforcing JS coding standards, happy to switch up our tooling for that

That is really strange. I don't know if there was a recent update, but I've been using wp-scripts myself and it would always enforce the opposite (I.e. WordPress Coding Standards). Is there something else at play here maybe that leads to the regular Prettier taking over the WordPress specific version? 🤔

This needs some more digging because that's not something that should be changed without broader consensus by the Core developers. A few years ago there was actually a proposal to change it which ended up rejected.

Yeah, not sure what's going on. We didn't have an ESLint config file so I was hoping adding that (done in f755562) would fix it. That did end up flagging additional errors (fixed in fc4d178) but still doesn't allow me to add extra spaces around things (I reverted the spacing change in that example file and you can now see the error it's flagging: https://github.com/WordPress/ai/actions/runs/19657884624/job/56298366699?pr=83#step:5:11).

I feel like I'm missing something simple here, a config file or dependency, but I'm not seeing anything obvious

Is there maybe a conflicting version of prettier installed that's not the wp-prettier fork? If some dependency uses prettier, maybe that's what's happening.

@wordpress/scripts uses wp-prettier, so that's all as I thought it would be. But maybe another dependency is pulling in the "real" prettier, and that might cause the problem?

Okay, think I got this fixed. Had to delete multiple dependencies (and the package-lock.json file) but finally got it installing correctly. Doing a quick search, seems the wrong version got installed in #73 though still not quite sure how. But I've got it working now and I've fixed up all lint errors so things should match proper coding standards now

src/experiments/title-generation/components/TitleToolbar.tsx

felixarntz

@dkotter LGTM!

There appear to be some transient PHPUnit CI failures though.

felixarntz · 2025-11-25T22:30:21Z

.prettierrc

@@ -0,0 +1 @@
+"@wordpress/prettier-config"


What does this do? Why is it needed?

This loads in the WP prettier config to ensure those rules are used when running prettier. But this was part of me experimenting to get things fixed so I've reverted this to how it was initially setup, which removes this file from this PR: fb62804

JasonTheAdams

Great work, @dkotter!

dkotter · 2025-11-25T23:14:55Z

There appear to be some transient PHPUnit CI failures though.

Yeah, the PHPUnit tests are failing on trunk since we set our WP minimum to 6.9 in #78 :(

Getting this error: Failed to activate plugin. Current WordPress version (6.8.3) does not meet minimum requirements for AI Experiments. The plugin requires WordPress 6.9

felixarntz · 2025-11-25T23:19:42Z

There appear to be some transient PHPUnit CI failures though.

Yeah, the PHPUnit tests are failing on trunk since we set our WP minimum to 6.9 in #78 :(

Getting this error: Failed to activate plugin. Current WordPress version (6.8.3) does not meet minimum requirements for AI Experiments. The plugin requires WordPress 6.9

Why don't we set it to 6.8 for now, so that we don't have these problems? It should still be fine to submit to .org like that. Bumping the minimum requirement to 6.9 probably takes 5 minutes and could be done on release day :)

jeffpaul · 2025-11-26T04:16:42Z

Why don't we set it to 6.8 for now, so that we don't have these problems? It should still be fine to submit to .org like that. Bumping the minimum requirement to 6.9 probably takes 5 minutes and could be done on release day :)

I went ahead and did that in 77ac717 and then updated #28 to include:

Bump minimum WP version to 6.9 (ensuring this covers any additional concerns from #94)

...as a precursor to submitting to WPORG.

Assuming tests pass here, I'll merge this in.

jeffpaul · 2025-12-20T19:23:42Z

@dkotter perhaps a follow-up PR here to add a docs page like done in https://github.com/WordPress/ai/pull/155/changes#diff-f70665388390657902e73741dea03efcdadc4bd0ceb4432959f8903ae015c042?

dkotter added 21 commits November 6, 2025 15:07

Get asset compiling setup with proper webpack config

2acd608

Add a class that can be used to load assets

cbd8a46

Add the structure needed in the src directory

c37a85b

Load the assets in our feature

443b29d

Rename file

b7c395b

Rename everywhere

ef41f62

Add base structure to modify the post title block and add in a custom…

958409d

… toolbar

Add the same toolbar when not in template mode (when the title isn't …

25e7597

…a block)

Update comment

273c189

Merge branch 'feature/title-generation-execute' into feature/title-ge…

57000ef

…neration-ui

Add a new wrapper around our toolbar and the title input. Add proper …

de5fadf

…styling on this and the toolbar to get things positioned correctly. Fix lint errors

Keep toolbar open if sub-menu is open

b2973b1

Remove react-dom. Ensure strings are translated

74d9adb

Wire up the title generation API request

078bf4b

Add a method to build the REST API path

394e447

Add better loading state. Fix lint errors

9c574d9

Merge branch 'feature/title-generation-execute' into feature/title-ge…

8ca9217

…neration-ui

Update doc

8549253

Merge branch 'trunk' into feature/title-generation-ui

a6c84cb

Fix lint issues

d07365f

Switch from making direct API requests to the Ability endpoint to usi…

1d98d49

…ng the executeAbility function

dkotter added this to the 0.1.0 milestone Nov 14, 2025

dkotter self-assigned this Nov 14, 2025

dkotter commented Nov 14, 2025

View reviewed changes

src/experiments/title-generation/utils/casing.ts Outdated Show resolved Hide resolved

dkotter commented Nov 14, 2025

View reviewed changes

src/index.js Show resolved Hide resolved

dkotter commented Nov 14, 2025

View reviewed changes

dkotter mentioned this pull request Nov 14, 2025

Title Generation / Rewriting #10

Closed

Merge branch 'trunk' into feature/title-generation-ui

f0aba6f

Ensure the build directory ends up in our final release

4781318

dkotter added 9 commits November 24, 2025 12:48

Remove autosave of title after selection

0390cd4

Rename variables to be more specific

dea4acb

Create a new component for a single title option

63c9934

Add proper type

88c8fa2

Extract the createRetry function out of the component

cf8cdd6

Extract the createFocusBlurHandlers function out of the component

36fecba

Extract the setupEventListeners function out of the component

378116f

Disconnect the observer when no longer needed

ef1b112

Fix lint errors

587233c

dkotter requested a review from JasonTheAdams November 24, 2025 20:17

felixarntz reviewed Nov 24, 2025

View reviewed changes

dkotter added 6 commits November 24, 2025 20:43

Add new eslint config file. Change structure of prettier config file

f755562

Move packages to dependencies

eb8f523

Fix new lint errors

fc4d178

Remove auto formatting in our JS lint test so we can see failures

4b89dea

Remove dependencies we don't need to ensure wp-prettier is installed

277c054

Lint fixes

c02047e

jeffpaul requested a review from felixarntz November 25, 2025 20:29

felixarntz approved these changes Nov 25, 2025

View reviewed changes

Revert back to old prettier file

fb62804

JasonTheAdams approved these changes Nov 25, 2025

View reviewed changes

Update minimum required WordPress version to 6.8

77ac717

jeffpaul merged commit e86c5be into WordPress:trunk Nov 26, 2025
20 of 22 checks passed

jeffpaul linked an issue Nov 26, 2025 that may be closed by this pull request

Add UI controls in post editor for rewriting titles #29

Closed

5 tasks

jeffpaul mentioned this pull request Nov 26, 2025

Add UI controls in post editor for rewriting titles #29

Closed

5 tasks

dkotter deleted the feature/title-generation-ui branch December 1, 2025 22:32

		@@ -0,0 +1 @@
		"@wordpress/prettier-config"

Add the Title Generation UI #83

Add the Title Generation UI #83

Uh oh!

Conversation

dkotter commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots

Test using WordPress Playground

Uh oh!

Uh oh!

Uh oh!

dkotter Nov 14, 2025

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

felixarntz left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

felixarntz Nov 24, 2025

Choose a reason for hiding this comment

Uh oh!

dkotter Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

felixarntz Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dkotter Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

felixarntz Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

dkotter Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

felixarntz left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

felixarntz Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

dkotter Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

JasonTheAdams left a comment

Choose a reason for hiding this comment

Uh oh!

dkotter commented Nov 25, 2025

Uh oh!

felixarntz commented Nov 25, 2025

Uh oh!

jeffpaul commented Nov 26, 2025

Uh oh!

Uh oh!

jeffpaul commented Dec 20, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

dkotter commented Nov 14, 2025 •

edited

Loading

codecov bot commented Nov 14, 2025 •

edited

Loading

dkotter Nov 24, 2025 •

edited

Loading

felixarntz Nov 25, 2025 •

edited

Loading

dkotter Nov 25, 2025 •

edited

Loading

felixarntz left a comment •

edited

Loading