Skip to content

Convert the How To block and the FAQ block to the Blocks V3 API#21329

Merged
pls78 merged 9 commits intotrunkfrom
feature/v3-api-how-to-and-faq
Apr 29, 2024
Merged

Convert the How To block and the FAQ block to the Blocks V3 API#21329
pls78 merged 9 commits intotrunkfrom
feature/v3-api-how-to-and-faq

Conversation

@enricobattocchi
Copy link
Copy Markdown
Member

@enricobattocchi enricobattocchi commented Apr 23, 2024 •
edited by igorschoester
Loading

Context

  • We want to move the FAQ and the How To block to the new version of the API

Summary

This PR can be summarized in the following changelog entry:

  • Converts the Yoast How-to and FAQ blocks to use the Blocks V3 API.
  • [wordpress-seo other] Deprecates \Yoast\WP\SEO\Integrations\Blocks\Structured_Data_Blocks::enqueue_block_editor_assets().

Relevant technical choices:

  • the structured-data-blocks.js file (used to register the blocks) is now unnecessary, so it's been deleted
  • the wpseo_enable_structured_data_blocks has been moved before the blocks registration, while the original method to enqueue the script and the style has been deprecated.
  • note that this doesn't prevent the blocks to be usable in the site editor when e.g. editing a template. this will be addressed in another issue
  • note about translations: they work a bit differently than they used to because they add a context. This means that even if the strings are the same, existing translations won't be automatically used. In the RC time we'll check whether the translation memory sets the existing translations as suggestions for the new string+context pairs, so PTE will just need to approve them.

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

  • Important: test using an artifact instead of just building from the source, since there is an integral part of this PR that is related to copying the blocks JSON to a dist dir and finding it there.

New blocks

  • create a post and add a new How To block
    • add the time, several steps, possibly with images
    • publish it and check the Schema: it should have a HowTo section with the info you added.
  • create a post and add a new FAQ block
    • add some questions and answers
    • publish it and check the Schema: the page should be a FAQPage with mainEntity set to the Question pieces

Analysis check

  • FAQ block: follow 1.1.1.1A until the step Add a related keyphrase "pet food" from these instructions
  • HowTo block: follow 1.1.1.1B from these instructions
Comparison
  • on another site, install the latest released version of Free - make sure you have the same theme
  • create a post and add a new How To block
  • fill it with the same info you entered in the first phase and publish it
  • visually compare the 2 posts with the HowTo block to spot any difference
  • compare the Schema of the 2 posts and check that they are the same (except of course for times, IDs etc)
  • create a post and add a new FAQ block
  • fill it with the same info you entered in the first phase and publish it
  • visually compare the 2 posts with the FAQ block to spot any difference
  • compare the Schema of the 2 posts and check that they are the same (except of course for times, IDs etc)
  • make sure to save the Schema of the two posts somewhere before progressing to the next phase

Upgrading

  • install the new zip with this PR in the site with the old version of Free that you used in the previous phase
  • edit the post with the How To block and check that everything is fine. You can also update the post, with no changes.
  • check the Schema and compare it with the one you saved to check that it didn't change
  • edit the post with the FAQ block and check that everything is fine. You can also update the post, with no changes.
  • check the Schema and compare it with the one you saved to check that it didn't change

Site editor

  • edit a page in the site editor (not a page template!)
  • add a How To block, you can copy and paste the one from the post
    • see that the block is styled in the right way in the Site editor (it wasn't before)
  • publish the page and check that the Schema is right
  • repeat the same for a FAQ block.

Language support

  • Switch the site to another language
  • check that the How To block in the front-end is translated correctly
    • see technical notes to see why the backend won't be translated

Also check #21369

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:

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 #

igorschoester and others added 6 commits April 23, 2024 12:25
@igorschoester @enricobattocchi
Load structured data blocks assets in site editor
01f20eb 
* Change enqueue method to newer `enqueue_block_assets`. This also affects the frontend, which we do not want, hence the `is_admin` check
* Add styling dependencies on `dashicons` and `forms`, these are missing in the site editor: not sure if a WP components bug, but this solves it
* Add fieldset (`.schema-how-to-duration`) styling (copied from WP common), removing the border around the duration
@igorschoester @enricobattocchi
Copy block.json files over to root blocks folder
123ecf3 
For the block registration, we need access to the `block.json` file. Therefore, we need to ensure the path is the same in development and production (zip).
This commit solves that by effectively making the root blocks folder the "dist" or "build" folder for our block.json files.

When bundling, any `block.json` files found (within our entry scripts) are copied over to the root blocks folder.
Keeping the folder structure in place from `packages/js/src` onwards.

When creating an artifact, the blocks root folder is copied to the artifact folder.
Note: the webpack copy currently has no support for any CSS or JS alongside, but the artifact copy ignore extensions already.
@igorschoester @enricobattocchi
Move How To block to v3 API
49ad521 
* Using block.json file in both server and client side
* Refactor `block.js` to use the `block.json` and add it as entry point for client side
* Point to the `block.js` entry script in the server side block registration
@enricobattocchi
Move FAQ block to the V3 API
72507eb
@enricobattocchi
Remove the structured-data-blocks script, now useless
10c827d
@enricobattocchi
Remove the attributes since they in the block.json file now
a64c5d9
@enricobattocchi enricobattocchi added the changelog: enhancement Needs to be included in the 'Enhancements' category in the changelog label Apr 23, 2024
@enricobattocchi enricobattocchi mentioned this pull request Apr 23, 2024
Closed
18 tasks
@coveralls
Copy link
Copy Markdown

coveralls commented Apr 23, 2024 •
edited
Loading

Pull Request Test Coverage Report for Build 4211b05368a5e8b10057c8f6d470bae92d69d010

Details

  • 0 of 14 (0.0%) changed or added relevant lines in 3 files are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage increased (+0.006%) to 52.251%
Changes Missing Coverage Covered Lines Changed/Added Lines %
src/integrations/blocks/structured-data-blocks.php 0 4 0.0%
packages/js/src/structured-data-blocks/faq/block.js 0 5 0.0%
packages/js/src/structured-data-blocks/how-to/block.js 0 5 0.0%
Totals Coverage Status
Change from base Build 447fe11c916acaec5a7487fc47708a8eecc5e1ed: 0.006%
Covered Lines: 28618
Relevant Lines: 55320
💛 - Coveralls

@enricobattocchi enricobattocchi self-assigned this Apr 23, 2024
igorschoester
igorschoester reviewed Apr 23, 2024
View reviewed changes
Copy link
Copy Markdown
Contributor

@igorschoester igorschoester left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CR ❓

Detected a possible follow-up with the stylesheets and a minor fix/circumvention for the eslint-disable.

igorschoester
igorschoester approved these changes Apr 23, 2024
View reviewed changes
Copy link
Copy Markdown
Contributor

@igorschoester igorschoester left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM ✅

@pls78 pls78 self-assigned this Apr 29, 2024
@pls78 pls78 added this to the 22.7 milestone Apr 29, 2024
@pls78
Copy link
Copy Markdown
Member

pls78 commented Apr 29, 2024

Acc: ✅

@pls78 pls78 merged commit 4110125 into trunk Apr 29, 2024
@pls78 pls78 deleted the feature/v3-api-how-to-and-faq branch April 29, 2024 12:22
This was referenced May 2, 2024
Merged
Merged
@enricobattocchi enricobattocchi mentioned this pull request May 23, 2024
Merged
18 tasks
@igorschoester igorschoester added the innovation Innovative issue. Relating to performance, memory or data-flow. label Oct 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@igorschoester igorschoester igorschoester approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@pls78 pls78

Labels

changelog: enhancement Needs to be included in the 'Enhancements' category in the changelog innovation Innovative issue. Relating to performance, memory or data-flow.

Projects

None yet

Milestone

22.7

Development

Successfully merging this pull request may close these issues.

4 participants

@enricobattocchi @coveralls @pls78 @igorschoester