1105 next post create cta inline banner and approve modal

[vraja-pro]

Context

Summary

This PR can be summarized in the following changelog entry:

• Adds the inline banner, approve modal and editor intro with cta for next post feature.
• [yoast/ui-library 0.1.0 enhancement] Exposes the sparkles gradient icon and decouple the gradient border styling.

Relevant technical choices:

• The upsell state of the modal will be tested in a later stage when we will introduce the spark count.
• The get suggestions button in the banner will not work. We will add functionality in a separate PR.

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

• Create a new post and check you see the inline next post banner as in the design.
• Check you can dismissed it. Restore it by refresh.
• Enable premium and check the "Use 1 spark" text with it's icon is gone.
• Check the inline banner does not disappears once you add text, or when it is switched to draft( add content and wait a minute for it to switch to draft),is should only disappear when dismissed, currently value is not saved to DB so after refresh it will disappear if it's not a new post.
• Open an existing post and check the banner is not there.
• Go to the Yoast metabox and check you see the following intro with the next post button as in the design.
• Check the Yoast sidebar for the same design.
• Check the intro text is Optimize your content for discovery or get new content suggestions. in metabox and sidebar
• Check the text has changed to Optimize your content for discovery. and the button is not rendered when:
  • Editing in block editor a page, not a post.
  • Editing in the classic editor and elementor.
  • Yoast AI is disabled.
• Click on the Get content suggestions button and check when:
  • Blank canvas you get the title: Looking for inspiration? and the description: Yoast identifies content gaps in your site structure and recommends topics that strengthen your topical authority.
    • Check when you have no text.
  • Post with content you get the title: Get content suggestions and the description: Yoast will analyze your site and recommend topics. Note: Applying a content suggestion will replace your current blogpost content & metadata.
  • Without premium enable, check you get the Using 1 spark under the button.

Test ads.

• Deactivate Premium
• Webinar ad: Change the user meta _yoast_alerts_dismissed to:
  a:1:{s:26:"webinar-promo-notification";b:0;}
• Chech the webinar ad is between the yoast logo and copy.
• Trigger the Black Friday ad by changing the date in src/promotions/domain/black-friday-promotion.php, change only the year in the second date to 2027:

new Time_Interval( \gmmktime( 10, 00, 00, 3, 20, 2025 ), \gmmktime( 10, 00, 00, 3, 30, 2027 ) ),                           

• Check the ad appears in the editor intro (Yoast logo and intro copy). Check both metabox and sidebar, also check in elementor.

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:

Impact check

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

• Spin the ui library storybook and check Button is rendered with the gradient border for ai-secondary variant.

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 Next post: Create CTA inline banner, and approve modal

[Copilot]

Pull request overview

This PR introduces the “Next post” content-suggestions entry points across the WordPress editor UI (inline banner, sidebar/metabox items, and an approval modal), and updates the Yoast UI library to expose a gradient sparkles icon and reuse the gradient-border styling.

Changes:

• Add a new ai-next-post package area with a WP data store, inline banner injection (BlockEdit filter), and an editor plugin to ensure an initial paragraph block.
• Add an EditorIntro component and wire it into Gutenberg sidebar/metabox and Elementor fills.
• Update @yoast/ui-library to export GradientSparklesIcon and extract gradient-border styling for reuse.

Reviewed changes

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

Show a summary per file

File	Description
packages/ui-library/src/index.js	Exports GradientSparklesIcon for consumers.
packages/ui-library/src/elements/button/style.css	Extracts/adjusts AI button styles and adds reusable gradient border utility.
packages/ui-library/src/elements/button/index.js	Applies gradient-border class to ai-secondary button variant.
packages/js/src/initializers/block-editor-integration.js	Initializes the Next Post banner/plugin during block editor integration.
packages/js/src/elementor/components/fills/ElementorFill.js	Adds EditorIntro to Elementor sidebar fill.
packages/js/src/components/fills/SidebarFill.js	Adds EditorIntro + Next Post item to the Yoast sidebar (Gutenberg).
packages/js/src/components/fills/MetaboxFill.js	Adds EditorIntro + Next Post item to the Yoast metabox fill.
packages/js/src/components/EditorIntro.js	New “Optimize…” introduction component with optional CTA prompt text.
packages/js/src/ai-next-post/store/index.js	Registers the yoast-seo/next-post WP data store.
packages/js/src/ai-next-post/store/banner.js	Slice/actions/selectors for banner dismissal state.
packages/js/src/ai-next-post/next-post-editor-plugin.js	Inserts a paragraph block on truly empty canvases to anchor the inline banner.
packages/js/src/ai-next-post/initialize.js	Registers store + BlockEdit filter + editor plugin for the inline banner.
packages/js/src/ai-next-post/components/one-spark-note.js	Displays “Using 1 spark” note (non-premium state).
packages/js/src/ai-next-post/components/next-post-inline-banner.js	New inline banner UI under the first empty paragraph.
packages/js/src/ai-next-post/components/next-post-editor-item.js	Sidebar/metabox section with button + approve modal.
packages/js/src/ai-next-post/components/next-post-button.js	“Get content suggestions” button using AI secondary styling.
packages/js/src/ai-next-post/components/next-post-approve-modal.js	Approval modal with different copy for empty vs non-empty canvas.
packages/js/images/yoast.svg	Adds Yoast logo asset used by EditorIntro.

Comments suppressed due to low confidence (1)

packages/ui-library/src/elements/button/style.css:56

• button.yst-button--ai-primary limits the AI primary styling to actual elements, but the Button component supports as="a" (and has specific anchor overrides earlier in this stylesheet). As a result, using variant="ai-primary" with as="a" will miss these styles.

Consider styling .yst-button--ai-primary (no element qualifier) or adding an a.yst-button--ai-primary selector as well, similar to how .yst-button is handled for anchors.

		button.yst-button--ai-primary {
			@apply
			yst-text-white
			yst-ps-2
			yst-gap-1.5
			yst-bg-ai-500;

			border-image: none;

---

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

[JorPV]

The Get content suggestions button test part isn't working as described in the test instruction.

Also take a look at GH 🤖 suggestions.

[Copilot]

Pull request overview

This PR introduces UI and editor integration for the “next post / content suggestions” feature in the WordPress editor, including an inline banner for new posts, an editor intro CTA, and an approval modal, while also extending the UI library with a reusable gradient sparkle icon and gradient border styling.

Changes:

• Add a new ai-content-planner module with store, inline banner injection into Gutenberg, and sidebar/metabox editor items + approval modal.
• Add an EditorIntro component and render it in Sidebar/Metabox/Elementor fills, with conditional CTA messaging based on AI feature + post type.
• Update @yoast/ui-library to export a gradient sparkles icon and refactor gradient border styling for AI button variants.

Reviewed changes

Copilot reviewed 20 out of 22 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
yarn.lock	Adds a new @wordpress/wordcount entry for content counting.
packages/js/package.json	Adds @wordpress/wordcount dependency for empty-canvas detection.
packages/js/src/initializers/block-editor-integration.js	Initializes the new content planner integration in the block editor.
packages/js/src/components/fills/SidebarFill.js	Adds EditorIntro and the content planner sidebar item (block editor + post + AI active only).
packages/js/src/components/fills/MetaboxFill.js	Adds EditorIntro and the content planner metabox item (block editor + post + AI active only).
packages/js/src/elementor/components/fills/ElementorFill.js	Adds EditorIntro (without CTA) for Elementor.
packages/js/src/components/EditorIntro.js	New intro text component for editor contexts.
packages/js/src/ai-content-planner/**	New store + banner injection + UI components (inline banner, approve modal, sidebar item).
packages/js/tests/ai-content-planner/components/approve-modal.test.js	Adds RTL/Jest coverage for the new approval modal.
packages/ui-library/src/index.js	Exposes GradientSparklesIcon from the button sparkles icon.
packages/ui-library/src/elements/button/index.js	Adds gradient-border class to the ai-secondary button variant.
packages/ui-library/src/elements/button/style.css	Refactors gradient border styling and adjusts AI primary selector.
packages/js/images/yoast.svg	Adds Yoast logo asset for the editor intro.

Comments suppressed due to low confidence (1)

packages/ui-library/src/elements/button/style.css:54

• The selector for the AI primary variant is now button.yst-button--ai-primary, which means AI-primary styling will no longer apply when the Button is rendered as an anchor (as="a"). There are existing usages of variant="ai-primary" on links (e.g. introductions modals), so this change will regress their styling. Consider reverting to .yst-button--ai-primary (or adding an additional a.yst-button--ai-primary selector) so both button and anchor renders are covered.

		button.yst-button--ai-primary {
			@apply
			yst-text-white
			yst-ps-2
			yst-gap-1.5
			yst-bg-ai-500;

---

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

[JorPV]

Some adjustments to be done 🔧

[JorPV]

CR + ACC ✅