Featured Product block: Allow custom background image selecton (#322)

* Add media icon to toolbar, save selected media ID and src as attributes

* Use the selected image instead of the product image, if set

* Unset the selected image when a new product is selected

Author: ryelle

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

@@ -7,12 +7,15 @@ import {
 	AlignmentToolbar,
 	BlockControls,
 	InspectorControls,
+	MediaUpload,
+	MediaUploadCheck,
 	PanelColorSettings,
 	RichText,
 	withColors,
 } from '@wordpress/editor';
 import {
 	Button,
+	IconButton,
 	PanelBody,
 	Placeholder,
 	RangeControl,
@@ -24,23 +27,41 @@ import {
 import classnames from 'classnames';
 import { Component, Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
-import { debounce } from 'lodash';
+import { debounce, isObject } from 'lodash';
 import PropTypes from 'prop-types';
 
 /**
  * Internal dependencies
  */
 import ProductControl from '../../components/product-control';
+import {
+	getImageSrcFromProduct,
+	getImageIdFromProduct,
+} from '../../utils/products';
 
-// Copied from core/cover, updated for product.
-function backgroundImageStyles( { images = [] } ) {
-	if ( images.length ) {
-		const url = images[ 0 ].src;
+/**
+ * Generate a style object given either a product object or URL to an image.
+ *
+ * @param {object|string} url A product object as returned from the API, or an image URL.
+ * @return {object} A style object with a backgroundImage set (if a valid image is provided).
+ */
+function backgroundImageStyles( url ) {
+	// If `url` is an object, it's actually a product.
+	if ( isObject( url ) ) {
+		url = getImageSrcFromProduct( url );
+	}
+	if ( url ) {
 		return { backgroundImage: `url(${ url })` };
 	}
 	return {};
 }
 
+/**
+ * Convert the selected ratio to the correct background class.
+ *
+ * @param {number} ratio Selected opacity from 0 to 100.
+ * @return {string} The class name, if applicable (not used for ratio 0 or 50).
+ */
 function dimRatioToClass( ratio ) {
 	return ratio === 0 || ratio === 50 ?
 		null :
@@ -107,7 +128,7 @@ class FeaturedProduct extends Component {
 						selected={ attributes.productId || 0 }
 						onChange={ ( value = [] ) => {
 							const id = value[ 0 ] ? value[ 0 ].id : 0;
-							setAttributes( { productId: id } );
+							setAttributes( { productId: id, mediaId: 0, mediaSrc: '' } );
 						} }
 					/>
 				</PanelBody>
@@ -173,7 +194,7 @@ class FeaturedProduct extends Component {
 						selected={ attributes.productId || 0 }
 						onChange={ ( value = [] ) => {
 							const id = value[ 0 ] ? value[ 0 ].id : 0;
-							setAttributes( { productId: id } );
+							setAttributes( { productId: id, mediaId: 0, mediaSrc: '' } );
 						} }
 					/>
 					<Button isDefault onClick={ onDone }>
@@ -205,8 +226,11 @@ class FeaturedProduct extends Component {
 			dimRatioToClass( dimRatio ),
 			contentAlign !== 'center' && `has-${ contentAlign }-content`
 		);
+		const mediaId = attributes.mediaId || getImageIdFromProduct( product );
 
-		const style = !! product ? backgroundImageStyles( product ) : {};
+		const style = !! product ?
+			backgroundImageStyles( attributes.mediaSrc || product ) :
+			{};
 		if ( overlayColor.color ) {
 			style.backgroundColor = overlayColor.color;
 		}
@@ -230,6 +254,25 @@ class FeaturedProduct extends Component {
 							},
 						] }
 					/>
+					<MediaUploadCheck>
+						<Toolbar>
+							<MediaUpload
+								onSelect={ ( media ) => {
+									setAttributes( { mediaId: media.id, mediaSrc: media.url } );
+								} }
+								allowedTypes={ [ 'image' ] }
+								value={ mediaId }
+								render={ ( { open } ) => (
+									<IconButton
+										className="components-toolbar__control"
+										label={ __( 'Edit media' ) }
+										icon="format-image"
+										onClick={ open }
+									/>
+								) }
+							/>
+						</Toolbar>
+					</MediaUploadCheck>
 				</BlockControls>
 				{ ! attributes.editMode && this.getInspectorControls() }
 				{ editMode ? (

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

@@ -50,6 +50,22 @@ registerBlockType( 'woocommerce/featured-product', {
 			default: true,
 		},
 
+		/**
+		 * ID for a custom image, overriding the product's featured image.
+		 */
+		mediaId: {
+			type: 'number',
+			default: 0,
+		},
+
+		/**
+		 * URL for a custom image, overriding the product's featured image.
+		 */
+		mediaSrc: {
+			type: 'string',
+			default: '',
+		},
+
 		/**
 		 * The overlay color, from the color list.
 		 */

assets/js/utils/products.js

@@ -0,0 +1,25 @@
+/**
+ * Get the src of the first image attached to a product (the featured image).
+ *
+ * @param {array} images The array of images, destructured from the product object.
+ * @return {string} The full URL to the image.
+ */
+export function getImageSrcFromProduct( { images = [] } ) {
+	if ( images.length ) {
+		return images[ 0 ].src || '';
+	}
+	return '';
+}
+
+/**
+ * Get the ID of the first image attached to a product (the featured image).
+ *
+ * @param {array} images The array of images, destructured from the product object.
+ * @return {number} The ID of the image.
+ */
+export function getImageIdFromProduct( { images = [] } ) {
+	if ( images.length ) {
+		return images[ 0 ].id || 0;
+	}
+	return 0;
+}

includes/blocks/class-wc-block-featured-product.php

@@ -30,6 +30,8 @@ class WC_Block_Featured_Product {
 		'contentAlign' => 'center',
 		'dimRatio'     => 50,
 		'linkText'     => false,
+		'mediaId'      => 0,
+		'mediaSrc'     => '',
 		'showDesc'     => true,
 		'showPrice'    => true,
 	);
@@ -98,8 +100,16 @@ public static function render( $attributes, $content ) {
 	 * @return string
 	 */
 	public static function get_styles( $attributes, $product ) {
-		$image = self::get_image( $product, ( 'none' !== $attributes['align'] ) ? 'large' : 'full' );
-		$style = sprintf( 'background-image:url(%s);', esc_url( $image ) );
+		$image_size = ( 'none' !== $attributes['align'] ) ? 'full' : 'large';
+		if ( $attributes['mediaId'] ) {
+			$image = wp_get_attachment_image_url( $attributes['mediaId'], $image_size );
+		} else {
+			$image = self::get_image( $product, $image_size );
+		}
+
+		if ( ! empty( $image ) ) {
+			$style = sprintf( 'background-image:url(%s);', esc_url( $image ) );
+		}
 
 		if ( isset( $attributes['customOverlayColor'] ) ) {
 			$style .= sprintf( 'background-color:%s;', esc_attr( $attributes['customOverlayColor'] ) );