THEMES-891: Non-manual images focal point support

[vgalatro]

Description

This PR updates multiple blocks with the new getFocalFromANS helper function so that they can properly send focal point info to the Image component. The original ticket mentions the gallery block, but gallery images are displayed at their full aspect ratio with no cropping, so the focal point will not matter.

Jira Ticket

• THEMES-891

Acceptance Criteria

• Focal point display is supported on the following blocks:
  • card-list-block
  • extra-large-promo-block
  • large-promo-block
  • lead-art-block
  • medium-promo-block
  • numbered-list-block
  • product-assortment-carousel-block
  • product-featured-image-block
  • results-list-block
  • search-results-list-block
  • simple-list-block
  • small-promo-block
  • top-table-list-block

Test Steps

1. Checkout this branch git checkout THEMES-891
2. If linking the Themes components repo, make sure the latest arc-themes-release-version-2.2.0 branch is checked out.
3. Run fusion repo with linked blocks npx fusion start -f -l @wpmedia/card-list-block,@wpmedia/extra-large-promo-block,@wpmedia/large-promo-block,@wpmedia/lead-art-block,@wpmedia/medium-promo-block,@wpmedia/numbered-list-block,@wpmedia/product-assortment-carousel-block,@wpmedia/product-featured-image-block,@wpmedia/results-list-block,@wpmedia/search-results-list-block,@wpmedia/simple-list-block,@wpmedia/small-promo-block,@wpmedia/top-table-list-block
4. Create or load a page with each affected block on it. There are two stories with promo images cloned from each other, but with different focal points set that can be used for testing:

• /global/2024/02/23/story-with-focal-point-promo-pyramid/
• /travel/2024/02/16/story-with-focal-point-images/

5. These can be used for the individual promo blocks.
6. For list blocks, adjust the content queries so they appear. At the time of writing this PR they are the two newest stories on sandbox themesinternal.

Author Checklist

• Confirmed all the test steps a reviewer will follow above are working.
• Confirmed there are no linter errors. Please run npm run lint to check for errors. Often, npm run lint:fix will fix those errors and warnings.
• Ran this code locally and checked that there are not any unintended side effects. For example, that a CSS selector is scoped only to a particular block.
• Confirmed this PR has reasonable code coverage. You can run npm run test:coverage to see your progress.
  • Confirmed this PR has unit test files
  • Ran npm run test, made sure all tests are passing
  • If the amount of work to write unit tests for this change are excessive,
    please explain why (so that we can fix it whenever it gets refactored).
• Confirmed relevant documentation has been updated/added.

Reviewer Checklist

The reviewer of the PR should copy-paste this template into the review comments on review.

• Linting code actions have passed.
• Ran the code locally based on the test instructions.
  • I don’t think this is needed to be tested locally. For example, a padding style change (storybook?) or a logic change (write a test).
• I am a member of the engine theme team so that I can approve and merge this. If you're not on the team, you won't have access to approve and merge this pr.
• Looked to see that the new or changed code has code coverage, specifically. We want the global code coverage to keep on going up with targeted testing.

[blakeganderson]

LGTM 👍

[vgalatro]

Marking as do not merge since we want this in the next release, not 2.2.0.

The base branch was changed.

[vgalatro]

@blakeganderson , I'll need a re-review here too. Fixed a couple of merge conflicts with 2.3.0.

[blakeganderson]

LGTM