Task List Phase 2

[leonidasmi]

Important

This is a draft PR that has been created already in case it helps us add test instructions in one place.

Context

Summary

This PR can be summarized in the following changelog entry:

• Enhances the task list with tasks about the SEO and readability of recent posts.

Relevant technical choices:

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

Note: When you see a different UI than the test instructions or the added screenshots, please check with #22990 as your updated source of truth.

---

Test the backend logic for the SEO task (from #22891)

• Have 4 public posts modified the last 2 months and a public post modified 2 months and 1 day ago
  • For the 4 posts that were modified the last 2 months, have:
    • one post with a good SEO score (above 70)
    • one with ok SEO score, (above 40)
    • one with bad SEO scores (below 40 but above 0)
    • one with no keyphrase
  • For the 1 post modified 2 months and 1 day ago, give it a keyphrase and make sure has an SEO score above 0
• Go to the task list
• Confirm that you see the Improve the SEO of your recent content: Posts task and that it's open/incomplete and that it has a 1/3 progress badge

• Open that task and confirm that it has 3 child tasks in a list and that it looks like this:

• Out of these 3 child tasks:
  • One is completed because it has a good SEO score. For that one, the priority (even if it's greyed out), is Medium
  • The other two are open/incomplete because they have a bad/ok SEO score. For those the priorities are High for the red one and Medium for the yellow one.
• Open one of the open child tasks and confirm it looks like this:

• Also confirm that the CTA button (the Open editor one) redirects you to the post editor for that post, in a new tab.
• Now, make one of the 3 recent posts not public, or noindexed and confirm that they don't appear as tasks anymore - which is reflected in the parent task's progress bar or if you open the parent task, the child task about that post is no longer in the list.
• Make all recent posts have a good seo score or no keyphrase and confirm that the parent task is now complete.
• Repeat the test, but this time with pages (or products if you have WooCommerce enabled).

---

Test the backend logic for the Readability task (from #22947)

• Create 4 posts:
  • One that has a readability score over 70
  • One that has a readability score under 70 but over 40
  • One that has a readability score under 40
  • And one that was created while Yoast was not enabled - we want to have its indexable have NULL in its estimated reading time column
    • For that to happen you need to deactivate Yoast, create a post, reactivate Yoast and run the SEOO.
    • If the SEOO is not active after you re-enabled Yoast, just confirm that there is an indexable for the post you have created and that its estimated reading time is NULL.
• Go to the task list
• Confirm that you see the Improve the readability of your recent content: Posts task that:
  • Has a duration that is equal to 20, which is the sum of the incomplete child tasks.
  • Is open/incomplete.
• Open that parent task to see the list of its child tasks. Those:
  • DO NOT include a task for the post that was created while Yoast was not enabled.
  • Have priority equal to high for the post that has a readability score under 40 and and priority medium for all the rest of them.
  • Are not closed/completed, except for the one that has a readability score over 70.
• Repeat the tests but for pages - instead of Improve the readability of your recent content: Posts you will see Improve the readability of your recent content: Page

---

Calculate duration of the SEO parent task (from #22950)

• Have at least 2 posts and 1 page modified the last 2 months with a keyphrase.
• Let's say for now that both posts and the page have a GOOD SEO score and go to the task list
  • The duration for the parent Improve the SEO of your recent content: Posts task and the parent Improve the SEO of your recent content: Pages task is 0 (because all child tasks are completed)
• Now make one post and the page to have a bad or ok SEO score
  • The duration for the parent Improve the SEO of your recent content: Posts is 10 minutes (which is the sum of the incomplete child tasks) and the parent Improve the SEO of your recent content: Pages task is 10 (which is the sum of the incomplete child tasks)
• Now make the other post too to have a bad or ok SEO score
  • The duration for the parent Improve the SEO of your recent content: Posts is now 20 minutes (which is the sum of the incomplete child tasks again)

---

Child task section and updated task row design (from #22934)

• Go to Yoast SEO -> General -> Task list
• Check the Progress bar is wider, as wide as the text above.
  • Check the progress bar includes only parent tasks and parent completed tasks
• Check another column of Progress was added to the table.
• Check the order of the columns order is priority, duration and then progress.
• Check that in the progress column you have a progress bar when loading and when the task has child tasks like "Improve your content's SEO".
• Check task row status bullet matches the design. in the task row, task modal and child task.

• Check the duration and priority of completed tasks are with opacity 50% on task row, modal and child task
• Check the task about copy and title design match the design.
• Confirm child tasks are not part of the main list.
• Open a task modal with child tasks:
  • Check the progress badge is in the modal header and reflect the completed and total tasks.
  • Check the progress badge is not clickable.
  • Check you see a full width progressbar under the about copy.
  • Check you see the list of child tasks tasks with pripority, duration and status icon.
  • With less than 4 child tasks, check pagination is disabled.
  • Have more than 5 child tasks by adding posts and click the next and previous navigation, check the pagination works ("Page 1 out of 2") works.
  • Click on a child task, check the modal content changes to the child task modal.
  • Check the child task modal has the progress bade in the modal header with the parent task name.
  • Click on the badge and check you are back on the parent task modal.

---

Apply feedback from UX team (from #22990)

• Progress badges and bars: Check gaps in between the numeric values ( x / x ) is 2px.
• Check the progress bar for the task list has the amount next to the label and the label is "Tasks" with font size 18 and the count font size is 14.
• Check the progress bar for the child tasks hads the label "Progress" and the size is 13px and the count font size is 12.
• Check the label is next to the count.
• Check the width of the progress bar has changed.

Modals

• Check modal max width is 672px width and Tailwind class w-2xl.

• Check gap between button in the modal footer is 12px.

• Check the metadata in the tasks:

  • gap between icon and label should be 4px
  • Gap between each metadata and dot/bullet should be 8px.

• Check the mobile design for the task list and the child task list.

• Check the progress badge in the modal for child task is above the task title.

• Check the the badge label is truncated when it overflows.

• Disable development mode or indexables andcheck parent tasks has "No tasks detected" message.

• Check loading task list on mobile is also adjusted.

---

Improve UX in parent tasks with lots of child tasks in small screens (from #23008)

• Go to Yoast SEO -> General -> Task List and open a task with at least 4 child tasks ( add posts with keyphrase to have child tasks)
• Check check you have a scroll bar and there is a fade effect in the bottom of the modal content area.
• Check scrollbar on mobile screen.

---

Improve progress badge (from #23008)

• On desktop go to the task list and check there are no console errors.
• Hover over the task progress badge in a row and check you get the pointer cursor and clicking on it will open the task.
• In the modal check the progress badge is not clickable on a parent task modal.
• Click on the child task and check the badge is clickable on the child task modal.

---

Tests for copies (from #22993 and from https://github.com/Yoast/wordpress-seo-premium/pull/4892)

• Confirm that all the copies in all the tasks (both old and new, for Free tasks and for old Premium tasks) are the same with the sheet.

---

Tests about the analyzer attribute (backend logic from #22959 and frontend from #22963)

Prerequisites

• Have at least 3 published posts (modified within the last 2 months) with different SEO scores: one good, one ok, and one bad.
• Same for readability scores

• Go to the child tasks of the SEO or Readability tasks and confirm the analyzer looks like the designs:

• For the copy of the analyzers, follow the below:

For SEO child tasks:

• Good → "Your content is well optimized for search engines. This increases your chances of ranking higher in search results."
• OK → "Your content is partially optimized. Adding a few more SEO best practices will help you reach a wider audience."
• Needs Improvement → "Your content is not yet optimized for search. Follow the SEO recommendations to help search engines understand and rank your page."

For readability child tasks:

• Good → "Your content is clear and easy to read. This helps your audience stay engaged with your message."
• OK → "Your content is readable but could be clearer. Consider simplifying a few sentences to improve the overall flow."
• Needs Improvement → "Your content is currently difficult to read. Check the analysis for specific ways to simplify your writing for a better user experience."

---

Prevent showing tasks about content SEO if not applicable (from #22940)

• Go to the task list and confirm that you see the Improve the SEO of your recent content: Posts task and its children
• Delete transients: wp transient delete --all
• Disable the indexables via the add_filter( 'Yoast\WP\SEO\should_index_indexables', '__return_false' ); filter and repeat the GET request
  • This time you won't see the Improve the SEO of your recent content: Posts task and its children
• Delete transients: wp transient delete --all
• Remove the add_filter( 'Yoast\WP\SEO\should_index_indexables', '__return_false' ); filter
• Disable the SEO analysis feature from Yoast settings and repeat the GET request
  • This time you won't see the Improve the SEO of your recent content: Posts task and its children
• Delete transients: wp transient delete --all
• Remove the add_filter( 'Yoast\WP\SEO\should_index_indexables', '__return_false' ); filter
• Enable the SEO analysis feature from Yoast settings
• Disable the SEO analysis feature for your user only from the user profile and repeat the GET request
  • This time you won't see the improve-content-seo-post task and its children (search for improve-content-seo- in the response and you will get no results

---

Prevent showing tasks about content Readability if not applicable (from #22947)

• Go to the task list and confirm that you see the Improve the readability of your recent content: Posts task and its children
• Delete transients: wp transient delete --all
• Disable the indexables via the add_filter( 'Yoast\WP\SEO\should_index_indexables', '__return_false' ); filter and repeat the GET request
  • This time you won't see the Improve the readability of your recent content: Posts task and its children
• Delete transients: wp transient delete --all
• Remove the add_filter( 'Yoast\WP\SEO\should_index_indexables', '__return_false' ); filter
• Disable the Readability analysis feature from Yoast settings and repeat the GET request
  • This time you won't see the Improve the readability of your recent content: Posts task and its children
• Delete transients: wp transient delete --all
• Enable the Readability analysis feature from Yoast settings
• Disable the Readability analysis feature for your user only from the user profile and repeat the GET request
  • This time you won't see the Improve the readability of your recent content: Posts task and its children

---

Task list and Dashboard use the same source of posts

Note: Between refreshes of the task list and the dashboard widgets delete all transients wp transient delete --all, so we dont let cache affects our tests.

The task list's "Recent content" tasks and the dashboard's score widgets must query the same population of posts (at least if we assume that all posts have been modified the last 2 months). The following shared conditions must hold in both places. For each condition, verify that both the dashboard widget and the task list entries behave identically.

1. Only published posts are included

• Have no other posts, so it's easy to understand what's happening in the dashboard widget.
• Test: Create a draft post, give it a focus keyphrase, and save it from the block editor. Verify that it does not appear in either the dashboard SEO/readability score counts or the task list. For the task list, it means that opening the parent Improve the SEO of your content type: Posts task , will not display a child task for that post.
• Test: Publish that post. Verify that it now appears in both places. For the dashboard SEO widget, this means that it will fall under one of the Good/Ok/Needs Improvement buckets.
• Test: Trash a published post. Verify that it disappears from both places.
• Test: Create a scheduled (future) post with a focus keyphrase, save it from the editor. Verify that it does not appear in either place until its publish date passes.

2. Only posts of the selected content type are included

Both queries filter on object_sub_type = <content type>.

• Have no other posts, so it's easy to understand what's happening in the dashboard widget.
• Test: Create and publish a Post and a Page, both with a focus keyphrase, both saved from the editor. When viewing the dashboard/task list filtered to "Posts", only the Post should appear. When filtered to "Pages", only the Page should appear.
• Do the same with a product, with WooCommerce enabled

3. Noindex posts are excluded from SEO scores

Both the dashboard SEO widget and the task list SEO widget require is_robots_noindex IS NULL OR is_robots_noindex <> 1.

• Have no other posts, so it's easy to understand what's happening in the dashboard widget.
• Test: Publish a post with a focus keyphrase and save it from the editor. Verify it appears in both the dashboard SEO score counts and the task list SEO tab.
• Test: In the Yoast meta box of that post, set it to "No" for "Allow search engines to show this post in search results?" (i.e. mark it as noindex). Save/update. Verify it disappears from both the dashboard SEO score counts and the task list SEO view.
• Test: Remove the noindex override (set it back to the default). Verify the post reappears in both places.
• Test: Disable the global Yoast setting for posts (aka, turn off the Show posts in search results setting). Verify the post appears in both places.

Note: The readability widgets in both dashboard and task list do not filter on noindex — this is intentional. A noindex post should still be visible in both readability views.

4. Only posts saved from the editor with Yoast active are included in readability scores

Both queries use estimated_reading_time_minutes to determine whether a post has been analyzed. This field is only populated when a post is saved from the block/classic editor while Yoast is active.

• Have no other posts, so it's easy to understand what's happening in the dashboard widget.
• Test: Create a published post while Yoast is deactivated. Without ever opening it in the editor again, reactivate Yoast and run the SEOO. Verify that it does appear in the dashboard readability score counts but in the "not analyzed" bucket and does not appear in the task list readability view.
• Test: Now open that same post in the block editor and click Update (without changing anything). Verify it now appears in both the dashboard readability widget (in one of the scored buckets, not "not analyzed") and the task list readability view.

This is an expected difference between the two features: the dashboard shows all posts (including "not analyzed"), while the task list only shows posts that have been analyzed.

5. Posts without a focus keyphrase are excluded from SEO scores

The task list SEO query requires primary_focus_keyword_score IS NOT NULL AND primary_focus_keyword_score <> 0. The dashboard SEO widget buckets these as "not analyzed."

• Have no other posts, so it's easy to understand what's happening in the dashboard widget.
• Test: Publish a post from the editor without setting a focus keyphrase. Verify that:
  • In the dashboard SEO widget, this post is counted under the "not analyzed" bucket.
  • In the task list SEO view, this post does not appear at all (the task list only shows analyzed posts).
• Test: Now add a focus keyphrase to that post and save. Verify that:
  • In the dashboard, the post moves from "not analyzed" to one of the scored buckets.
  • In the task list, the post now appears.

This is an expected difference between the two features: the dashboard shows all posts (including "not analyzed"), while the task list only shows posts that have been analyzed.

---

Fixes of unreleased bugs for completing tasks (from #22967)

• Test in a site with Hello World post
• Go to Task list
• Go to Remove the Hello World task and open its modal
• Click on the CTA to delete the post
• Confirm that the Completed icon is displayed in the Modal title
• Confirm that the CTA button is disabled

• Have llms.txt disabled
• Go to the task list and the relevant task is incomplete
• Open its modal and click on the CTA to enable the feature and complete the task
• Confirm that the Completed icon is displayed in the Modal title
• Confirm that the CTA button is disabled

• Smoke test the other task modals and confirm that they still work as expected.

---

Fixes of bug of HTML entities in the frontend (from #23001)

• Create a post with the following title: Title's bug
  • Make sure to add a keyphrase and content, so it appears in the task list
• Go to the task list and check the Improve the readability of your content type: Posts task
  • In the child tasks, find the one about the post you created and confirm that the title is shown as Title's bug and not as Title’s bug
• Go to the task list and check the Improve the SEO of your content type: Posts task
  • In the child tasks, find the one about the post you created and confirm that the title is shown as Title's bug and not as Title’s bug

---

Open the CTA in a new tab (from #23005)

• We're changing all CTA links, even in older tasks, to make them open a new tab when clicked
• So, in a fresh site with ALL tasks as incomplete, go to the task list
• For the new tasks, follow the following instructions:
  • Create some posts or pages with a keyphrase set
  • Make sure that they have bad score for SEO and Readability analysis
  • Go to Task list: Yoast SEO > General > Task list
  • Open the Improve the readability of your recent content task: your post/page with a bad readability score should be visible as its child task
  • Click on the content title to open the child task
  • Click on Open editor button
  • Confirm that a new tab is opened and you are taken to the editor for your content
  • Open the Improve the SEO of your recent content task: your post/page with a bad SEO score should be visible as its child task
  • Click on the content title to open the child task
  • Click on Open editor button
  • Confirm that a new tab is opened and you are taken to the editor for your content
• For every old task (except the Enable llms.txt and Delete Hello World tasks, which are special because their CTAs don't redirect you to any page, but rather perform an action under the hood), click on its CTA and confirm that you get a redirected in a new tab in the page that you are supposed to
• For the Enable llms.txt and Delete Hello World tasks, click on their CTAs and confirm that:
  • you're not opening a new tab
  • the buttons get their loading state until the task gets completed

---

Loading state should show 10 rows (from #22767)

• Go to the task list and check the loading state contains 10 tasks with different task title skeleton wiidth.
• Switch to mobile view and check loading tasks has fixed width.

---

Sorting tasks in the list (from #22781)

• Check tasks are sorted in the following order:
  • 1. Incomplete tasks first.
  • 2. Higher priority tasks first (high, medium, low).
  • 3. If tasks have the same completion status and priority, sort by duration (shorter duration first).
  • 4. If tasks have the same completion status, priority, and duration, sort alphabetically by title.
• Complete the llms.txt task and check it has moved to the bottom of the list.
• Add the following snippet to create an error when fetching tasks:

add_filter( 'wpseo_task_list_tasks', 'custom_task_list_tasks', 10, 3 );

function custom_task_list_tasks( $tasks ) {
   return array_merge( $tasks, [ 'new-task' => [ 'new-task' ] ] );
}

• Go to the task list and check you see the error for fetching the tasks.
• Open the console and check you see an error: Error fetching tasks: Added invalid task.

---

Add user locale support for task list duration (from #22927)

• Go to Yoast SEO -> General -> task list
• Check the duration of the completed tasks is set to 0.
• Check it shows the hour and minute as in the design.

• To enable the Create content task that is more than one hour, move all posts to trash.
• Go to user profile and change the language to something other than English, test also in Japanese.
• Go back to the task list and check it reflects in the time duration
• In Japanese and check there is no spacing in the duration.

---

Check Free and Premium mismatch in versions

• Confirm that having this RC in Free and the production version in Premium doesn't result in a broken task list.

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.

Impact check

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

• Quick regression test of the Top 5 most popular content widget in the Site Kit integration
  • Specifically, test (in a different tab, to avoid browser cache) with this PR and without whether the Yoast SEO score of each URL in that widget is the same color with this PR and without
• Add tracking for the task list. #22815

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 #