Allows highlighting in captions

[mhkuu]

Context

• Previously, we were unable to highlight content in audio, embed, gallery, image, table, and video captions. This PR allows highlighting in captions for the Block editor, after we previously fixed this for the Classic editor in this PR.
• However, this PR does depend on this PR for Gutenberg. So, when acceptance testing, we should test three scenarios:
  • The current version of the block editor (for which this PR does not work, but also should not break stuff).
  • The current version of Gutenberg (for which this PR does not work, but also should not break stuff).
  • The trunk version of Gutenberg (for which this PR does work and makes highlighting of captions available).

Summary

This PR can be summarized in the following changelog entry:

• Allows the highlighting feature to highlight content in captions of Audio, Embed, Gallery, Image, Table, and Video blocks in the Block editor.

Relevant technical choices:

• I copied the existing behaviour for other blocks.

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

NOTE: The instructions have been adapted from this PR.

NOTE: While testing, also install and activate all the plugins in this list. This is to make sure that the fix still works in combination with those plugins we support.

Preliminaries

• Build and activate Yoast SEO.
• Build and activate Gutenberg.
  • You can build Gutenberg by fetching the repository and checking out the trunk branch, symlinking it to your Local environment, and then building it.
• Set the site language to English.
• Create a post.

SEO analysis

Keyphrase density

• Add at least 100 words to the post
• Set a focus keyphrase
• Add an image
• Add a caption to your image and include the focus keyphrase there
• Confirm that the Keyword density assessment detects the focus keyphrase occurrence in the caption
• Click on the eye icon
• Confirm that the focus keyphrase in the image caption is highlighted
• Style the focus keyphrase in the image caption. Try making it bold, italic, etc.
• Confirm that the focus keyphrase in the image caption is still highlighted when the eye icon of the Keyword density assessment is enabled

Keyphrase distribution (a premium assessment)

• Install and activate Yoast SEO Premium
  • If building the plugin, run composer require yoast/wordpress-seo:dev-19479-block-editor-the-highlighting-feature-does-not-highlight-text-in-image-captions@dev before building it
• Repeat the test steps in Keyword density, but make sure that there are at least 15 sentences in the text

Readability analysis
Smoke test whether the highlighting feature works, with both an assessment that highlights individual words (e.g., the word complexity assessment) and one that highlights sentences (e.g., the sentence length assessment).

Word complexity assessment (a premium assessment)

• Install and activate Yoast SEO Premium
  • If building the plugin, run composer require yoast/wordpress-seo:dev-19479-block-editor-the-highlighting-feature-does-not-highlight-text-in-image-captions@dev before building it
• Go to the previous post
• Go to the Readability analysis tab
• Add a complex word in the image caption, for example, "hereditary"
• Click on the eye icon of the Word complexity assessment
• Confirm that the word "hereditary" in the image caption is highlighted
• Style the complex word in the image caption. Try making it bold, italic, etc.
• Confirm that the complex word in the image caption is still highlighted when the eye icon of Word complexity assessment is enabled/toggled on

Sentence length assessment

• Go to the previous post
• Add a sentence that is longer than 20 words (this number might differ in different languages, see this page for more info) to the image caption
• Click on the eye icon of the Sentence length assessment
• Confirm that the long sentence in the caption is highlighted
• Style some of the words in the image caption. Try making them bold, italic, etc.
• Confirm that the long sentence in the caption is still highlighted when the eye icon of Sentence length assessment is enabled/toggled on

Inclusive language analysis
Smoke test whether the highlighting feature works for the inclusive language analysis.

• Go to the previous post
• In the image caption, add non-inclusive words like "seniors", "policemen" etc.
• Click on the eye icon of the feedback
• Confirm that sentence in the caption that contains the non-inclusive word is highlighted

Upgrade routine

• Install and activate the previous version of Yoast SEO
• Install and activate Gutenberg (trunk, as before)
• Set the site language to English
• Create a post
• Add at least 100 words to the post
• Set a focus keyphrase
• Add an image
• Add a caption to your image and include the focus keyphrase there
• Confirm that the Keyword density assessment detects the focus keyphrase occurrence in the caption
• Click on the eye icon
• Confirm that the focus keyphrase in the image caption is NOT highlighted
• Save your post
• Upgrade the Yoast SEO to the version that contains this fix
• Open your previous post
• Go to SEO analysis > Keyword density
• Confirm that the Keyword density assessment still detects the focus keyphrase occurrence in the caption
• Click on the eye icon
• Confirm that the focus keyphrase in the image caption now is highlighted

Repeat the above test instructions for audio, embed, gallery, table, and video captions! It's easiest to adapt the existing post you have used in the tests above.

Also, do a smoke test on the highlighting functionality for the block editor and the Gutenberg editor, as stated above in the PR's context. This PR should not break any existing functionality.

Also do a smoke test on the highlighting functionality for the Classic editor for image captions. While this code does not touch the highlighting functionality for the Classic editor, it's better to be safe than sorry! 😄

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 (Block/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:

• This PR touches only the highlighting of blocks (audio, embed, gallery, image, table, and video) that we hitherto did not highlight. Impact is therefore minimal.

UI changes

• This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

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.

Documentation

• I have written documentation for this change.

Quality assurance

• I have tested this code to the best of my abilities
• 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.

Innovation

• No innovation project is applicable for this PR.
• This PR falls under an innovation project. I have attached the innovation label and noted the work hours.

Fixes #19479

[mhkuu]

Update: the PR for Gutenberg has been approved 🎉 Let's discuss next week with QA whether we want to acceptance test this PR already, or wait until the 15.0 Gutenberg release.

[mhkuu]

As discussed with QA, it's OK to start testing this PR. The test instructions have been adapted to cover additional cases.

Also, after feedback on the Gutenberg PR, I've added support for all blocks that allow captions, viz. audio, embed, gallery, image, table, and video blocks.

[hdvos]

Acceptance test: happy to merge.
Also tested:
This PR works together with:

• classic editor
• currently released version of gutenberg: obviously does not highlight captions, but also doens't crash
• currently released version of block editor: obviously does not highlight captions, but also doens't crash