Fix inconsistent feedback of Readability score icons on the Post overview page

[marinakoleva]

⚠ Please discuss the preferred behaviour with @manuelaugustin . ⚠

• [ ] I've read and understood the contribution guidelines.
• [x] I've searched for any related issues and avoided creating a duplicate issue.

Please give us a description of what happened

The Readability score icons on the Post overview page sometimes show a red traffic light, and sometimes show a grey traffic light, depending on the last page you were on:

• if you've just activated Yoast SEO, most of the icons are grey, apart from posts that have a green score for Readability, in which case a green traffic light is shown
• if you open a post that has enough content, save it, and then go to the Post preview page, the icons for Readability are correct, e.g. an orange traffic light appears orange, not grey
• if after that you open a post that doesn't have enough content, e.g. has 1 word in it and a photo, save it and then open the Post preview page, the Readability icons are back to grey (apart from the green ones)
• Funnily enough, if you don't save the post but just open it and then you go back to the Post preview page, the Readability icons don't change.
• A screen recording of the bug: https://user-images.githubusercontent.com/90325221/230336088-264a5f81-6273-490c-8623-aa7c6fe59bb0.mov

To Reproduce

Step-by-step reproduction instructions

1. Create a post that has enough content for the Readability assessments to appear, and add such content that the Readability analysis returns a red traffic light.
2. Call it “Bad post” and save it.
3. Go to the Post overview page and confirm that the post’s icon in the Readability score column is a red traffic light.
4. Create another post that doesn’t have enough content, let’s say it’s got 2 words. Call it “No content” and save it.
5. Go to the Post overview page and confirm that the post’s icon in the Readability score column is a grey traffic light.
6. Open again the “A bad post” post and save it.
7. Go to the Post overview page and confirm that the post’s icon in the Readability score column is back to a red traffic light. (Can be reproduced, but not consistently. Sometimes it is and stays red)
8. Go the “No content” post and publish it.
9. Go to the Post overview page and confirm that the post’s icon in the Readability score column is a grey traffic light.

Expected results

The scores for the Readability analysis in the Post overview should display consistent feedback. However, what this feedback should be exactly is still to be decided:

• In my opinion, no matter the content of the post, all scores for the Readability analysis in the Post overview should show the same icon that you can see when you open the post.
• However, Martijn brought up a different consideration (copy-pasting his comment from this PR):

  The current solution in the PR changes all score icons that are grey to red. So, not only the SEO score, but also the readability score. We question whether that’s a good solution, because that means that score bullets for pre-existing posts (i.e. posts already present before installation of the plug-in) will all turn red. With respect to SEO score, that makes sense (because no keyphrase has been set for pre-existing posts), but with respect to readability score, it potentially doesn’t: it could well be that the post is very readable, but we haven’t calculated the score yet, because we only do that when opening the post. Upon a save of the post, the score is then shown in the post overview.

Conclusion:

The only times that the overall score should give a grey bullet is if the score was not calculated yet. If the post was opened, then the score was calculated (whether there is enough content or not), so it should show red.

Technical info

Used versions

• Device you are using:
• Operating system:
• PHP version:
• WordPress version:
• WordPress Theme:
• Yoast SEO version: 20.4, but I've noticed it in earlier versions too
• Relevant plugins in case of a bug:

[mhkuu]

Please discuss the preferred behaviour with @manuelaugustin .

[hannaw93]

The bug occurs whether the post is saved or published ,and regardless of which editor the post is saved in. The current guess (thanks to Hans-Christiaan) is that it is a timing issue. There is still inconsistency in one part of the bug reproducing (see reproduction steps).

[hannaw93]

current behaviour:

1. Create a post that has enough content for the Readability assessments to appear, and add such content that the Readability analysis returns a red traffic light.
2. Call it “Bad post” and save it.
3. Go to the Post overview page and confirm that the “Bad post” post’s icon in the Readability score column is a red traffic light.
4. Create another post that doesn’t have enough content, let’s say it’s got 2 words. Call it “No content” and save it.
5. Go to the Post overview page and confirm that the “No content” post’s icon in the Readability score column shows a grey traffic light, and the “bad post” is currently showing a grey bullet instead of red.
6. Further steps applicable only if “and the “bad post” is currently showing a grey bullet instead of red” occurs:
7. Open again the “A bad post” post and save it.
8. Go to the Post overview page and confirm that the “bad post” post’s icon in the Readability score column is back to a red traffic light. (! Can be reproduced, but not consistently. Sometimes it is and stays red)

Observation: if at step 4 we click on/open the readability analysis in the Yoast SEO metabox, then the and the “bad post” is currently showing a grey bullet instead of red from step 5 does not happen. So good news is, the user is not likely to experience this since they usually check/open both the SEO and readability metabox. However, we still want to fix to red instead of grey for posts that don’t have enough content but for which results were calculated (see No content” post’s icon in the Readability score column shows a grey traffic light)

The timing is definitely applicable as well, probably even more than whether the user opens the readability tab. because if I very quickly create a “bad post”, the bullet will show for it as grey even if I click on both the SEO and readability metabox. reproduction steps in detail for this one:

1. Create a post
2. Paste this text and call it “bad post”
3. Click on the Readability section of the yoastseo metabox (or don’t :smile: )
4. Save the post immediately
5. Confirm that the readability icon in posts overview for the post shows red instead of grey.

In this case, a creating and saving a new post (in this case it’s not enough content one, but that shouldn’t be relevant) does not update the previous “bad post” icon to red if it is created and saved as quickly.

[hannaw93]

The underlying issue is a tricky timing problem that is cannot be fixed easily. Since it is not high priority and was found by devs while working on another scoring-related bug, it has been decided to close it.