Add content suggestions modal for AI Content Planner feature by vraja-pro · Pull Request #23090 · Yoast/wordpress-seo

vraja-pro · 2026-03-23T10:59:50Z

Context

This PR adds the Content Suggestions Modal for the AI Content Planner feature. The modal displays AI-generated content suggestions after the user confirms they want to get suggestions, showing a loading skeleton while fetching and a list of selectable suggestion cards once results are ready.

Summary

This PR can be summarized in the following changelog entry:

Adds content suggestions modal with loading state and suggestion cards for the AI Content Planner feature.

Relevant technical choices:

The modal uses a loading skeleton with a gradient fade overlay while suggestions are being fetched.
Each suggestion card displays an intent badge (informational, navigational, or commercial) with matching colors and icons.
A UsageCounter component is shown in the modal header to display remaining spark usage.
The component reads isPremium from the Yoast SEO editor store to conditionally show beta/reset information in the usage counter tooltip.

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

Edit a post in the block editor. Open the Yoast sidebar or go to the metabox.
Click "Get content suggestions" in the editor and confirm the approve modal.
Verify the content suggestions modal opens with dummy suggestions.
Once loaded, verify suggestion cards appear with the correct design for intent badge, title, and description.
Test loading state design.
Close the modal and verify it closes correctly.

Accessibility:

Setup

macOS: Enable VoiceOver with Cmd + F5
Windows: Start NVDA (Ctrl + Alt + N) or JAWS
Open the WordPress post editor with the Yoast SEO sidebar visible

Test 1: Dialog is announced correctly on open

With the screen reader active, click "Get content suggestions" in the
Yoast sidebar and confirm the approve modal, triggering the content
suggestions modal.
Expected: Screen reader announces "Content suggestions, web dialog"
(or equivalent for your screen reader).

Test 2: Close button has a descriptive label

Open the modal.
Navigate to the close button (Tab).
Expected: Screen reader announces "Close content suggestions modal".
Not expected: Just "Close" or "button".

Test 3: Loading state is announced

Open the modal.
Wait approximately 100ms (the loading state appears after a short
delay).
Expected: Screen reader announces "Yoast Analyzing your site content…"
without the user navigating to it.
Focus is on the close button.
Expected: Announcement does not interrupt currently spoken text
(polite, not assertive).
When loading completes
Expected: Screen reader announces "Select a suggestion to generate a
structured outline for your post."

Test 4: Suggestions are keyboard accessible

When suggestions are visible, press Tab to navigate through them.
Expected: Each suggestion is reachable and announced as a button with
its title.

Relevant test scenarios

Changes should be tested with the browser console open
Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other)
Changes should be tested on different browsers
Changes should be tested on multisite

Test instructions for QA when the code is in the RC

QA should use the same steps as above.

QA can test this PR by following these steps:

Same steps as above.

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

AI Content Planner sidebar/metabox editor item
Content suggestions modal UI

Other environments

This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.
This PR also affects Yoast SEO for Google Docs. I have added a changelog entry starting with [yoast-doc-extension], added test instructions for Yoast SEO for Google Docs and attached the Google Docs Add-on label to this PR.

Documentation

I have written documentation for this change. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.

Quality assurance

I have tested this code to the best of my abilities.
During testing, I had activated all plugins that Yoast SEO provides integrations for.
I have added unit tests to verify the code works as intended.
If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
I have written this PR in accordance with my team's definition of done.
I have checked that the base branch is correctly set.
I have run grunt build:images and commited the results, if my PR introduces new images or SVGs.

Innovation

No innovation project is applicable for this PR.
This PR falls under an innovation project. I have attached the innovation label.
I have added my hours to the WBSO document.

Fixes Content Planner: Create the modal for the content suggestions

Copilot

Pull request overview

Adds a new “Content suggestions” modal to the AI Content Planner flow, intended to show a loading state while fetching AI suggestions and then present selectable suggestion cards.

Changes:

Introduces ContentSuggestionsModal with loading skeleton UI and intent-badged suggestion cards.
Wires the new modal into ContentPlannerEditorItem so it opens after the approve step.
Adds a UsageCounter to the modal header (currently with placeholder values).

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 8 comments.

File	Description
packages/js/src/ai-content-planner/components/content-suggestions-modal.js	New modal UI: loading skeleton, suggestion cards, intent badge mapping, usage counter.
packages/js/src/ai-content-planner/components/content-planner-editor-item.js	Opens the new modal and currently supplies loading flag + placeholder suggestions.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/js/src/ai-content-planner/components/content-suggestions-modal.js

packages/js/src/ai-content-planner/components/content-planner-editor-item.js

packages/js/src/ai-content-planner/components/content-suggestions-modal.js

github-actions · 2026-03-23T12:40:45Z

A merge conflict has been detected for the proposed code changes in this PR. Please resolve the conflict by either rebasing the PR or merging in changes from the base branch.

…al' into content-planner-content-suggestion-modal

JorPV

Please check review comments 👇🏼

packages/js/src/ai-content-planner/components/content-planner-editor-item.js

packages/js/src/ai-content-planner/components/content-suggestions-modal.js

packages/js/src/ai-content-planner/components/content-planner-editor-item.js

packages/js/src/ai-content-planner/components/content-suggestions-modal.js

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

packages/js/src/ai-content-planner/components/content-planner-editor-item.js

packages/js/src/ai-content-planner/components/content-suggestions-modal.js

fix tests

packages/js/src/ai-content-planner/components/content-suggestions-modal.js

Co-authored-by: Jordi-PV <88150345+JorPV@users.noreply.github.com>

Modal.Container.Content only accepts children and className — it doesn't spread other props, so aria-live="polite" is silently dropped and never reaches the DOM. The fix is in the source component — wrap the content in a plain <div> that actually renders the attribute

coveralls · 2026-03-25T10:11:46Z

Pull Request Test Coverage Report for Build c96dde2aca4e3ba550d825fafdd19d79d3a9c72d

Details

40 of 42 (95.24%) changed or added relevant lines in 4 files are covered.
No unchanged relevant lines lost coverage.
Overall coverage increased (+0.05%) to 56.656%

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/js/src/ai-content-planner/components/content-planner-editor-item.js	0	2	0.0%

Totals
Change from base Build df688fa2632afc948072e05a911ef32cd0b0545e:	0.05%
Covered Lines:	15308
Relevant Lines:	26346

💛 - Coveralls

packages/js/src/ai-content-planner/components/content-suggestions-modal.js

Co-authored-by: Jordi-PV <88150345+JorPV@users.noreply.github.com>

github-actions · 2026-03-27T10:42:16Z

A merge conflict has been detected for the proposed code changes in this PR. Please resolve the conflict by either rebasing the PR or merging in changes from the base branch.

…uggestion-modal

Copilot

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 6 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/js/src/ai-content-planner/components/approve-modal.js

packages/js/src/ai-content-planner/components/content-suggestions-modal.js

packages/js/tests/ai-content-planner/components/approve-modal.test.js

packages/js/tests/ai-content-planner/components/content-suggestions-modal.test.js

packages/js/src/ai-content-planner/components/feature-modal.js

packages/js/src/ai-content-planner/components/approve-modal.js

JorPV · 2026-03-27T15:37:13Z

packages/js/src/ai-content-planner/components/feature-modal.js

+ */
+export const FeatureModal = ( { isOpen, onClose, isEmptyCanvas, isPremium, isUpsell, upsellLink } ) => {
+	const [ status, setStatus ] = useState( "idle" );
+


Something like this:

Suggested change

const { title: dialogTitle } = getModalContent( isEmptyCanvas );

JorPV · 2026-03-27T15:37:31Z

packages/js/src/ai-content-planner/components/feature-modal.js

+	}, [ isOpen ] );
+
+	return (
+		<Modal isOpen={ isOpen } onClose={ onClose }>


And this prop in the modal

Suggested change

<Modal isOpen={ isOpen } onClose={ onClose }>

<Modal isOpen={ isOpen } onClose={ onClose } aria-label={ status === "idle" ? dialogTitle : __( "Content suggestions", "wordpress-seo" ) }>>

No, we have the label on the modal panel. I think aria label is more for input fields and buttons.

Screen reader needs time to pick up the modal title.

adds the suggestions modal

23b62b2

vraja-pro requested a review from a team as a code owner March 23, 2026 10:59

vraja-pro added the changelog: non-user-facing Needs to be included in the 'Non-userfacing' category in the changelog label Mar 23, 2026

vraja-pro changed the base branch from trunk to 1105-next-post-create-cta-inline-banner-and-approve-modal March 23, 2026 11:02

JorPV requested a review from Copilot March 23, 2026 12:33

Copilot started reviewing on behalf of JorPV March 23, 2026 12:34 View session

Copilot AI reviewed Mar 23, 2026

View reviewed changes

github-actions bot added the merge conflict label Mar 23, 2026

Merge branch '1105-next-post-create-cta-inline-banner-and-approve-mod…

9c02810

…al' into content-planner-content-suggestion-modal

github-actions bot removed the merge conflict label Mar 23, 2026

JorPV reviewed Mar 23, 2026

View reviewed changes

vraja-pro and others added 2 commits March 23, 2026 15:51

Apply suggestion from @Copilot

bcaafe0

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

fix lint, js comments, and adds tests

1fbd507

JorPV reviewed Mar 24, 2026

View reviewed changes

vraja-pro added 3 commits March 24, 2026 13:16

add isPremium prop

d64cb2d

fix tests

adds window object for testing loading state

c9f54ba

fix js docs

27a4ee4

vraja-pro force-pushed the content-planner-content-suggestion-modal branch from 14717e3 to 27a4ee4 Compare March 24, 2026 11:42

vraja-pro added this to the feature/content-planner milestone Mar 24, 2026

Base automatically changed from 1105-next-post-create-cta-inline-banner-and-approve-modal to feature/content-planner March 24, 2026 14:38

JorPV reviewed Mar 24, 2026

View reviewed changes

vraja-pro and others added 5 commits March 25, 2026 11:35

fix spacing

e79b828

Co-authored-by: Jordi-PV <88150345+JorPV@users.noreply.github.com>

update aria attribute

80d0181

Co-authored-by: Jordi-PV <88150345+JorPV@users.noreply.github.com>

fix spacing

6457600

Co-authored-by: Jordi-PV <88150345+JorPV@users.noreply.github.com>

fix linting

c6f9470

vraja-pro added 2 commits March 25, 2026 15:52

improve accessibility + tests

fc6c177

fix focus styling

29a6382

JorPV reviewed Mar 25, 2026

View reviewed changes

packages/js/src/ai-content-planner/components/content-suggestions-modal.js Outdated Show resolved Hide resolved

vraja-pro and others added 5 commits March 26, 2026 10:13

Adds svgAriaProps in the YoastIcon

7bcf720

Co-authored-by: Jordi-PV <88150345+JorPV@users.noreply.github.com>

fix linting

4b882c3

add transition effect when content changes in the modal

4bae89f

adds svg props

617fbeb

fix modal transition

c8e559a

github-actions bot added the merge conflict label Mar 27, 2026

vraja-pro added 2 commits March 27, 2026 13:45

Add delay to stop flickering

0b9fdcf

Merge branch 'feature/content-planner' into content-planner-content-s…

8960137

…uggestion-modal

github-actions bot removed the merge conflict label Mar 27, 2026

vraja-pro added 2 commits March 27, 2026 13:56

fix tests

1e5caf2

fix modal title and description for accessibility

2aeb37c

vraja-pro force-pushed the content-planner-content-suggestion-modal branch from b24a56c to 73bbe9a Compare March 27, 2026 11:13

fix focus

474fa32

vraja-pro force-pushed the content-planner-content-suggestion-modal branch from 73bbe9a to 474fa32 Compare March 27, 2026 11:17

fix review comments

9e5a5df

JorPV requested a review from Copilot March 27, 2026 12:42

Copilot started reviewing on behalf of JorPV March 27, 2026 12:43 View session

Copilot AI reviewed Mar 27, 2026

View reviewed changes

vraja-pro added 2 commits March 27, 2026 16:53

fix tests and cleanup

f817b26

fix screen reader for loading

9b81837

JorPV reviewed Mar 27, 2026

View reviewed changes

vraja-pro added 4 commits March 28, 2026 19:19

fix lint

af150bb

add time out for screen reader

64b165b

Screen reader needs time to pick up the modal title.

fix tests

0a09b58

Adds comment

f9f4faa


	const { title: dialogTitle } = getModalContent( isEmptyCanvas );

	<Modal isOpen={ isOpen } onClose={ onClose }>
	<Modal isOpen={ isOpen } onClose={ onClose } aria-label={ status === "idle" ? dialogTitle : __( "Content suggestions", "wordpress-seo" ) }>>

Conversation

vraja-pro commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Context

Summary

Relevant technical choices:

Test instructions

Test instructions for the acceptance test before the PR gets merged

Accessibility:

Relevant test scenarios

Test instructions for QA when the code is in the RC

Impact check

Other environments

Documentation

Quality assurance

Innovation

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Mar 23, 2026

Uh oh!

JorPV 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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coveralls commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request Test Coverage Report for Build c96dde2aca4e3ba550d825fafdd19d79d3a9c72d

Details

💛 - Coveralls

Uh oh!

Uh oh!

github-actions bot commented Mar 27, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

JorPV Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

JorPV Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

vraja-pro Mar 28, 2026

Choose a reason for hiding this comment

Uh oh!

vraja-pro commented Mar 23, 2026 •

edited

Loading

JorPV left a comment •

edited

Loading

coveralls commented Mar 25, 2026 •

edited

Loading