Add "FocalPointPicker" to Featured Product block (https://github.com/woocommerce/woocommerce-blocks/pull/544)

* Add FocalPointPicker to featured product block

* Disable the media icon if no product is selected

* Use the focal point on the frontend display

* Check for `FocalPointPicker` before using it (compat for WP 5.1)

* Check if focalPoint attribue is an array before trying to use it

plugins/woocommerce-blocks/assets/js/blocks/featured-product/block.js

@@ -15,6 +15,7 @@ import {
 } from '@wordpress/editor';
 import {
 	Button,
+	FocalPointPicker,
 	IconButton,
 	PanelBody,
 	Placeholder,
@@ -124,6 +125,10 @@ class FeaturedProduct extends Component {
 			setOverlayColor,
 		} = this.props;
 
+		const url =
+			attributes.mediaSrc || getImageSrcFromProduct( this.state.product );
+		const { focalPoint = { x: 0.5, y: 0.5 } } = attributes;
+
 		return (
 			<InspectorControls key="inspector">
 				<PanelBody title={ __( 'Content', 'woo-gutenberg-products-block' ) }>
@@ -156,6 +161,14 @@ class FeaturedProduct extends Component {
 						max={ 100 }
 						step={ 10 }
 					/>
+					{ !! FocalPointPicker && !! url &&
+						<FocalPointPicker
+							label={ __( 'Focal Point Picker' ) }
+							url={ url }
+							value={ focalPoint }
+							onChange={ ( value ) => setAttributes( { focalPoint: value } ) }
+						/>
+					}
 				</PanelColorSettings>
 			</InspectorControls>
 		);
@@ -205,6 +218,7 @@ class FeaturedProduct extends Component {
 			contentAlign,
 			dimRatio,
 			editMode,
+			focalPoint,
 			height,
 			showDesc,
 			showPrice,
@@ -229,6 +243,10 @@ class FeaturedProduct extends Component {
 		if ( overlayColor.color ) {
 			style.backgroundColor = overlayColor.color;
 		}
+		if ( focalPoint ) {
+			style.backgroundPosition = `${ focalPoint.x * 100 }% ${ focalPoint.y *
+				100 }%`;
+		}
 
 		const onResizeStop = ( event, direction, elt ) => {
 			setAttributes( { height: parseInt( elt.style.height ) } );
@@ -257,6 +275,7 @@ class FeaturedProduct extends Component {
 										label={ __( 'Edit media' ) }
 										icon="format-image"
 										onClick={ open }
+										disabled={ ! this.state.product }
 									/>
 								) }
 							/>
@@ -304,7 +323,10 @@ class FeaturedProduct extends Component {
 												[
 													'core/button',
 													{
-														text: __( 'Shop now', 'woo-gutenberg-products-block' ),
+														text: __(
+															'Shop now',
+															'woo-gutenberg-products-block'
+														),
 														url: product.permalink,
 														align: 'center',
 													},

plugins/woocommerce-blocks/assets/js/blocks/featured-product/index.js

@@ -52,6 +52,13 @@ registerBlockType( 'woocommerce/featured-product', {
 			default: true,
 		},
 
+		/**
+		 * Focus point for the background image
+		 */
+		focalPoint: {
+			type: 'object',
+		},
+
 		/**
 		 * A fixed height for the block.
 		 */

plugins/woocommerce-blocks/assets/php/class-wgpb-block-featured-product.php

@@ -31,6 +31,7 @@ class WGPB_Block_Featured_Product {
 		'align'        => 'none',
 		'contentAlign' => 'center',
 		'dimRatio'     => 50,
+		'focalPoint'   => false,
 		'height'       => false,
 		'mediaId'      => 0,
 		'mediaSrc'     => '',
@@ -118,6 +119,14 @@ class WGPB_Block_Featured_Product {
 			$style .= sprintf( 'min-height:%dpx;', intval( $attributes['height'] ) );
 		}
 
+		if ( is_array( $attributes['focalPoint'] ) && 2 === count( $attributes['focalPoint'] ) ) {
+			$style .= sprintf(
+				'background-position: %s%% %s%%',
+				$attributes['focalPoint']['x'] * 100,
+				$attributes['focalPoint']['y'] * 100
+			);
+		}
+
 		return $style;
 	}