Fix discrepancy of the progress bar of the meta description inside content planner modal and inside yoast metabox

[FAMarfuaty]

Context

• This pull request refactors how the progress bar color is determined for meta description in both the AI Content Planner and Snippet Editor. The main changes consolidate the color logic into a single helper, improve consistency with the scoring system, and update components to use the new logic.
• Before this PR, the progress bar calculation of the meta description inside the Content planner modal doesn't take into account the post date length, whether or not the post is a cornerstone content, and the site locale.
• Previously we always assume that the maximum length of meta description is 156 characters. This is not the case for Japanese where the maximum length is 80 characters. Additionally, a cornerstone content post require more strict length requirement for the meta description

Summary

This PR can be summarized in the following changelog entry:

• Ensures consistent and accurate progress feedback for users editing meta descriptions across the application.
• Changes the height of the meta description progress bar inside content outline modal.
• [search-metadata-previews other] Adds and exposes a helper to determine the color of meta description and SEO title progress bar.

Relevant technical choices:

• Now Content planner is using the same logic for calculating the meta description progress bar as the one used in Yoast Metabox.
• Now we also take into account the post date length and whether the post is a cornerstone content
• Removed the now-obsolete local getProgressColor implementation and an unused method from "@yoast/search-metadata-previews" package

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

• Install and activate Yoast SEO

Non-cornerstone content, English

• Set the site language to English
• Create a new post
• Click on the get suggestion button in the banner for the content suggestions
• Click on one of the generated suggestions
• Make a note on the length and color of the meta description progress bar
• Apply the suggestion to the post
• Visit Search appearance and check out the progress bar of the meta description
• Confirm that the length and color of the meta description progress bar is the same as the one shown inside the Content planner modal
  • ⚠️ Before this PR: The length of the meta description progress bar in the Yoast metabox is longer than the one shown in the Content planner modal. This is because the progress bar in the Content planner doesn't include the post date length when calculating the meta description length

Cornerstone content, English

• Create a new post
• Toggle on the "Mark as cornerstone content" option
• Click on the get suggestion button in the banner for the content suggestions
• Click on one of the generated suggestions
• Replace the meta description with the following text:

Learn everything you need to know about starting your blog, from choosing a niche to setting it up and promoting it. Discover tips and tools for successful blogging!

• Inside the modal, confirm that the color of the progress bar is red 🟥 and the length is full
  • ⚠️ Before this PR, the color is orange 🟧
• Apply the outline to your post
• Visit Search appearance and check out the progress bar of the meta description
• Confirm that the color of the progress bar is red 🟥 and the length is full

Non-cornerstone content, Japanese

• Set the site language to Japanese (日本語)
• Create a new post
• Click on the get suggestion button in the banner for the content suggestions
• Click on one of the generated suggestions
• Replace the meta description with the following text:

数多くのWordPressプラグインの中から、初心者におすすめのプラグインを選ぶためのヒントと理由を紹介します。

• Confirm that the color of the progress bar is green 🟩 and the length is as seen below:

• ⚠️ Before this PR, the color is orange and the length is less than half of the entire bar
• Apply the outline to your post
• Visit Search appearance and check out the progress bar of the meta description
• Confirm that the color of the progress bar is green 🟩 and the length is the same as shown inside the Content planner modal

Test progress bar height

• Create a new post
• Click on the get suggestion button in the banner for the content suggestions
• Click on one of the generated suggestions
• Inspect the progress bar of the meta description
• Confirm that now its height is 6px
  • ⚠️ Previously it was 8px

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:

• N/A

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 https://github.com/Yoast/reserved-tasks/issues/1165

[coveralls]

Coverage Report for CI Build 475796

Coverage decreased (-0.003%) to 53.475%

Details

• Coverage decreased (-0.003%) from the base build.
• Patch coverage: 1 uncovered change across 1 file (9 of 10 lines covered, 90.0%).
• No coverage regressions found.

Uncovered Changes

File	Changed	Covered	%
packages/search-metadata-previews/src/helpers/progress.js	6	5	83.33%

Coverage Regressions

No coverage regressions found.

---

Coverage Stats

Relevant Lines:	66022
Covered Lines:	35170
Line Coverage:	53.27%
Relevant Branches:	16925
Covered Branches:	9186
Branch Coverage:	54.27%
Branches in Coverage %:	Yes
Coverage Strength:	45562.2 hits per line

---

💛 - Coveralls

[Copilot]

Pull request overview

This PR aims to make the meta description progress bar behavior consistent between the AI Content Planner modal and the Yoast snippet editor/metabox by centralizing progress color logic and reusing the existing getDescriptionProgress scoring (locale/date/cornerstone-aware).

Changes:

• Adds and exports a shared getProgressColor(score) helper from @yoast/search-metadata-previews and updates Snippet Editor fields to use it.
• Updates the Content Outline modal’s meta description progress bar to use getDescriptionProgress(...) + the shared getProgressColor(...), and changes the bar height (8px → 6px).
• Updates/extends AI Content Planner modal tests to cover the new progress bar behavior.

Reviewed changes

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

Show a summary per file

File	Description
packages/search-metadata-previews/src/snippet-editor/SnippetEditorFields.js	Switches progress bar color selection to the shared helper.
packages/search-metadata-previews/src/index.js	Exposes getProgressColor as a public helper export.
packages/search-metadata-previews/src/helpers/progress.js	Implements getProgressColor(score) using style-guide colors.
packages/js/src/ai-content-planner/components/content-outline-modal.js	Uses getDescriptionProgress/getProgressColor for the meta description bar and updates bar height.
packages/js/src/ai-content-planner/containers/content-outline-modal.js	Passes date, locale, and a cornerstone-related flag from the editor store into the modal.
packages/js/src/ai-content-planner/helpers/get-progress-color.js	Removes the now-obsolete local progress color helper.
packages/js/tests/ai-content-planner/components/feature-modal.test.js	Mocks the new @yoast/search-metadata-previews helper usage for tests.
packages/js/tests/ai-content-planner/components/content-outline-modal.test.js	Adds coverage for the meta description progress bar behavior and helper calls.

---

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

[github-actions]

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.

[github-actions]

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.

[vraja-pro]

CR & AC ✅