Add "FocalPointPicker" to Featured Product block

[ryelle]

Fixes #403 - Adds the FocalPointPicker to the Featured Product block, which lets you reposition the background image. For example, by default this person's head is cut off:

But by using the focal point picker, we can move the "focus" up a bit and have this:

Accessibility

FocalPointPicker is a core component, it has the 2 text inputs as accessible fallbacks from the image selection. There's a minor bug with the inputs, will be fixed with WordPress/gutenberg#15255

How to test the changes in this Pull Request:

1. Add a Featured Product block (most noticeable change when the image is tall)
2. Use the Focal Point Picker to change which part of the image is visible in the block
3. Publish the post, reload the page – it should keep that part of the image visible
4. View it on the frontend – it should look the same on the frontend

[timmyc]

While testing this out - I get a JS exception and block-editor error after selecting a product:

If I click "Attempt Recovery" the block appears, but then if I try to interact with the block, the error is shown again.

[ryelle]

@timmyc Are you using the gutenberg plugin? I think maybe the FocalPointPicker isn't available in WP core yet (I didn't check this before doing the PR)… so maybe this needs to wait until that component is released in WP core.

[timmyc]

Are you using the gutenberg plugin?

No I currently only have WooCommerce 3.6.2, WC Smooth Generator ( to build out 100+ products for the grid PR ;) ) and this branch installed/active - so that could likely be the cause. Should I checkout g-berg master, or is it in the current plugin?

Is FocalPointPicker set to be released to WP Core in 5.2?

[ryelle]

Is FocalPointPicker set to be released to WP Core in 5.2?

It looks like it is, yeah - I deactivated GB on my test site with 5.2 RC and it's working. Looks like 5.2 will be out on May 7, but we probably want to keep support parity with WC core so we can easily merge, so I think that's 5.1 + 5.2 (current + one previous)?

I'll see if I can check before using FocalPointPicker.

[timmyc]

Cool, well i'll keep my test env as-is right now to verify things will still work without 5.2 - and then can install 5.2 and test again.

[ryelle]

@timmyc I've added a fix, but for some reason FocalPointPicker is not working for me anymore– it keeps defaulting the y value to 100% (even on the cover block, even with this plugin deactivated…) so can you let me know if this tests well for you? (and I'll just keep investigating my setup :/ )

[timmyc]

Confirmed the changes in 0e19076 have solved the JS exception I was seeing - and I can add a featured product block on a site running 5.1.1 without gutenberg installed. When saving the post with a featured product block, i'm seeing the following on the front-end:

FWIW I don't see that when viewing the same page on master.

[ryelle]

Interestingly I can't reproduce that– but I've switched the check to confirm it's an array (it should always be set from the default in wp_parse_args).

[timmyc]

Confirmed the warning I saw on the front-end is no longer happening, and that all is well when FocalPointPicker is not present, and that it functions when available ( via Gutenberg plugin ) - very cool addition!