Create new block: "Featured Product"

[ryelle]

This new block will feature a single product in a style similar to the Call To Action block #293.

First the user will select a product using the ProductSelector component:

This will fill out a preview with background image, header, description, price, & link:

• It supports wide/full alignment
• It also supports left/right/center text alignment
• The button text and background color can be edited.
• The image can be changed, but only for other images on this product.
• It should be possible to upload a new image to use, and this will be attached to the product itself

See p6riRB-3OP-p2

[ryelle]

@jameskoster @LevinMedia – I think we're at a good place for a v1 of this block. It allows for selecting a product, supports normal/wide/full widths, left/center/right text alignment, and has a text-customizable button link. The price and description can be toggled off. It behaves like the cover image block with overlay color and opacity.

What's not here yet: The image height is not controllable. The button color can't be changed. The image can't be swapped out. These have some technical limitations that make this difficult for v1.3.

• The button is not a separate block, so if we want to add a control for the background color, it'll need to go in the whole block's sidebar items (this can happen before 1.3, but it's not exactly what you requested)
• The image height is not controllable– it would go from this fixed min-height to the height of the full image, but we don't have the image height from the API. I also don't see a mockup for the custom height slider idea.
• The user should be able to choose from the images attached to the product. I don't think this is technically possible, to open the Media Library to a subset of images – I looked into it on Friday, and this is one of the more esoteric bits of WP code; I don't even see the option to give the Media modal a list of IDs. Perhaps I can investigate again before the WC merge, but I wouldn't be too hopeful. If we want to allow picking of any image or uploading a new image, we could just use the plain Media Library modal.

Alternately we can wait for the Call To Action block + transform, and let users change out the background image after it's been converted.

Edit: I'd like some feedback on the above, and once we determine still needs to be done I'd like to close this issue and open new issues for each task.

[jameskoster]

The button is not a separate block, so if we want to add a control for the background color, it'll need to go in the whole block's sidebar items (this can happen before 1.3, but it's not exactly what you requested)

I think it's fine to leave as-is for now.

The image height is not controllable– it would go from this fixed min-height to the height of the full image, but we don't have the image height from the API. I also don't see a mockup for the custom height slider idea.

If the "Custom" radio is selected the range is revealed;

The user should be able to choose from the images attached to the product.

Thought about this some more. Allowing folks to pick any image or upload a new one should be fine.

[ryelle]

I've created issues #319 and #320 to track the remaining tasks here. Any other updates to this block should be new issues.

[GlennMartin1]

I think this block should be renamed.

Since WooCommerce already uses the term "Featured Product" to classify a product, this block should use a term other than "Featured Product".

As is, it's confusing - my instinct is to choose this block if I wish to display WooCommerce Featured Products.

It would be better to call it "Spotlight" or some other synonym.

👍

[LevinMedia]

Hi @GlennMartin1 thanks for your feedback!

I can definitely can definitely appreciate where you're confusion is coming from. Truth be told, we've had a number of discussions amongst the Woo Design team regarding the method of featuring products that you've described, and what kind of future it has in a Gutenberg powered WordPress / WooCommerce.

I'll be clear, that method of featuring products isn't going away any time soon. However for now, we've elected not to promote its use through the new blocks because we think creating and using different blocks will allow more people to achieve the same affect in a more intuitive way. For example, using this Featured Product block, or the new Hand Picked Products block, to feature a collection of products.

That said, we're actively testing these blocks with our design feedback group, and we're looking for feedback specifically like what you've provided here. It's noted and appreciated!