Adds "Optimize with AI" buttons next to SEO assessments

[FAMarfuaty]

Context

• For the following assessments, we need to add an AI button next to the assessments:
  • Keyphrase in introduction
  • Keyphrase subheadings
  • Keyphrase density
  • Keyphrase distribution
• This PR implements the AI button for the assessments above

Summary

This PR can be summarized in the following changelog entry:

• [@yoast/analysis-report] Makes it possible to render the AI Assessment Fixes button inside AnalysisResult.js.
• [yoastseo] Adds new property hasAIFixes in AssessmentResult class.
• [yoastseo] Adds a logic to set hasAIFixes to true for a certain condition for keyphrase in introduction, keyphrase in subheading, keyphrase density, and keyphrase distribution assessment's result.
• [@yoast/components 0.1.0] Adds component IconButtonBase.
• [@yoast/components 0.1.0] Adds component IconAIFixesButton.
• [shopify-seo] Adds a wider gap between assessment result list items.

Relevant technical choices:

• We're aware that we're making changes and using components from @yoast/components package. This is because even though technically we can use @yoast/ui-library package for this purpose, the stylings of the new AI button will not be consistent with the highlighting and the edit button. For the sake of consistency and UI cohesiveness, we are using the same stylings/components that we're using for the highlighting and the edit button. Eventually, in the new Tailwind style, we need to replace all the buttons and tooltips at once.

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

WordPress

• Follow the testing instructions as described in this document.

Shopify

• Test in Shopify product
• Create a product and add some content
• Go to SEO analysis tab
• Confirm that now between assessment result list items, there is a 12px gap
• Confirm that this is also the case for Readability analysis and Inclusive language analysis
• Additionally, make sure that there is no error in the console

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:

• The changes introduced in this PR may have an impact on how the eye icon/highlighting button is displayed. So when testing, please also pay attention to how the eye icon is displayed. They should not change.
• We also made some changes in analysis-report package which is also being used in Shopify. Please smoke test in shopify and confirm that we didn't change the behaviour/display of the eye icon.

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. 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.

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/wordpress-seo-premium/issues/4285

[github-actions]

@FAMarfuaty Please be aware that following packages have been abandoned and are not actively maintained anymore:

Package name	Path
@yoast/babel-preset	packages/babel-preset
@yoast/components	packages/components
@yoast/e2e-tests	packages/e2e-tests
@yoast/helpers	packages/helpers
@yoast/jest-preset	packages/jest-preset
@yoast/style-guide	packages/style-guide

Please consider using the other packages instead.

[mhkuu]

CR: Really well done! 👍 I've added a few small comments to potentially address. Feel free to ignore some of these.

ACC: I've added one question to the ATP that we need to discuss. I've taken it for a quick spin. It seems like everything is in order, just two comments:

• It should not be possible to have the AI button active as well as a highlight button. It would be great if they would cancel each other out.
• When clicking the eye button, the AI button moves up just a bit (1px?), and sometimes the assessment text moves up just a bit as well.

[mhkuu]

CR: Looks great! 😸

[FAMarfuaty]

@mhkuu I pushed a commit to fix tiny typos in JSDoc 😸

[FAMarfuaty]

This helper to check if Block editor is active isBlockEditor helper packages/js/src/helpers/isBlockEditor.js is not quite accurate: it also returns true inside Elementor. We got the value from WP_Screen::get()->is_block_editor();. As a workaround to make sure that the AI button is not shown in Elementor, here I added an extra check that the editor is NOT Elementor. So far I haven't found a more reliable method to check for Block editor. If such method exist, I guess that method would be preferable here

[mhkuu]

Hmm, it's not optimal -- I guess we could also consider removing

wordpress-seo/src/integrations/third-party/elementor.php

Line 466 in 97f4aa2

'isBlockEditor' => WP_Screen::get()->is_block_editor(),

But I'm OK with the current implementation as well.

[mhkuu]

ACC: Everything works as advertised, there is just a small problem with the Elementor in-between-screen, but as the behaviour of the metabox/sidebar there is erratic anyway, we can have a look at that later.

Nice work! 🚀