[block editor] The highlighting feature does not highlight text in image captions

[mhkuu]

Jira issue

This is a clone of #19414, but for the block editor. The description is the same.

What behavior were you expecting?
In the default/block editor, the Yoast SEO analysis is able to analyze image captions for the SEO, the readability, and the inclusive language analysis. As such, I would expect the highlighting feature to be able to highlight words/sentences that should be acted upon.

What actually happened?
However, the highlighting feature does not highlight the affected words/sentences. See the images and videos below.

How can we reproduce the current behavior?
Create a new post (with the default editor)

Add a keyphrase.

Add an image with a caption containing the keyphrase.

Note that the keyphrase is detected (The focus keyphrase was found n times. This is great!), but when you click the eye icon, the keyphrase is not highlighted.

Similarly, readability analyses like that for transition words do detect those, but fail to highlight them when clicking the eye icon.

And similarly, the inclusive language analysis do detect phrases in those blocks, but do not allow to highlight these phrases.

If available: what are the tips for fixing the problem or possible solutions?
We should also check whether this issue plays a role for the Classic Editor, and if so, fix that in this issue.

The file that handles the highlighting feature for the default/block editor is packages/js/src/decorator/gutenberg.js.

Below, please find some examples of the highlighting feature not working:

SEO analysis: keyphrase assessment
The Yoast analysis is able to detect the focus keyphrase on the image caption and takes it into account for the keyword density assessment. However, the highlighting feature does not highlight it (see screenshot below).

Inclusive language analysis
Install and activate Yoast SEO Premium 19.2 RC2 and Free 19.6 RC2

Create a post in Default Editor

Add an image

Add non-inclusive phrase as an image caption

Actual result: Non-inclusive phrase is recognized, but it’s not highlighted.

Readability analysis
See video.

[mhkuu]

Let’s re-start work on this one once the WordPress team is available – we’ve asked about this in #devchat: https://yoast.slack.com/archives/C0361PEK4/p1671546374439399

[mhkuu]

I think we need to compare packages/block-library/src/paragraph/block.json, packages/block-library/src/list-item/block.json, and packages/block-library/src/image/block.json and see the differences. I think we need to add supports.typography in the latter file.

[mhkuu]

Breakthrough: found that in packages/block-library/src/image/image.js, we should add identifier="caption" to the RichText component to enable highlighting for this component.

After that, we can apply the code in the attached PR.

[mhkuu]

Thanks @hannaw93 for reviewing! I'll ask QA how to proceed given that the PR is dependent upon an unreleased enhancement in Gutenberg.

[mhkuu]

Hi @tatasha2004! We were wondering if and how to proceed with this task, as the PR is dependent upon an upon an unreleased enhancement in Gutenberg, which will probably be part of Gutenberg 15.0, which will in turn probably be part of WordPress 6.2.

There are three possibilities:

1. Already accept / merge this PR based on Gutenberg trunk. Of course, we would have to make sure then that nothing breaks with (1) the current version of the block editor and (2) the current Gutenberg 14.9 version.
2. Wait until the Gutenberg 15.0 release to accept / merge this PR. Of course, we would have to make sure then that nothing breaks with the current version of the block editor.
3. Wait until the WordPress 6.2 release to accept / merge this PR.

I have a slight preference for option (2), so users running Gutenberg could already profit from this enhancement. But I would love to hear your opinion!

[mhkuu]

Conclusion: we can go for option (1). But: let's also check if the classic editor is truly unaffected by this change. I'll adapt the PR accordingly tomorrow.