From 8c38d1790a672780ad4b0d8667a3a4da1c616686 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Mon, 29 Apr 2019 14:55:49 -0400 Subject: [PATCH 1/5] Add FocalPointPicker to featured product block --- assets/js/blocks/featured-product/block.js | 22 +++++++++++++++++++++- assets/js/blocks/featured-product/index.js | 7 +++++++ 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/assets/js/blocks/featured-product/block.js b/assets/js/blocks/featured-product/block.js index dac13ed85e7..0a41ad5376a 100644 --- a/assets/js/blocks/featured-product/block.js +++ b/assets/js/blocks/featured-product/block.js @@ -15,6 +15,7 @@ import { } from '@wordpress/editor'; import { Button, + FocalPointPicker, IconButton, PanelBody, Placeholder, @@ -124,6 +125,9 @@ class FeaturedProduct extends Component { setOverlayColor, } = this.props; + const url = + attributes.mediaSrc || getImageSrcFromProduct( this.state.product ); + return ( @@ -156,6 +160,14 @@ class FeaturedProduct extends Component { max={ 100 } step={ 10 } /> + { url && + setAttributes( { focalPoint: value } ) } + /> + } ); @@ -205,6 +217,7 @@ class FeaturedProduct extends Component { contentAlign, dimRatio, editMode, + focalPoint, height, showDesc, showPrice, @@ -229,6 +242,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 ) } ); @@ -304,7 +321,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', }, diff --git a/assets/js/blocks/featured-product/index.js b/assets/js/blocks/featured-product/index.js index bffba6c0477..87d2c8422f8 100644 --- a/assets/js/blocks/featured-product/index.js +++ b/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. */ From 2e59d5effb16b867431bd8c0e9b8b3daaee7d055 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Mon, 29 Apr 2019 14:56:16 -0400 Subject: [PATCH 2/5] Disable the media icon if no product is selected --- assets/js/blocks/featured-product/block.js | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/js/blocks/featured-product/block.js b/assets/js/blocks/featured-product/block.js index 0a41ad5376a..de198b1b589 100644 --- a/assets/js/blocks/featured-product/block.js +++ b/assets/js/blocks/featured-product/block.js @@ -274,6 +274,7 @@ class FeaturedProduct extends Component { label={ __( 'Edit media' ) } icon="format-image" onClick={ open } + disabled={ ! this.state.product } /> ) } /> From 5d8b0fa85abe667e06a0c193fee5dd52ad671beb Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Mon, 29 Apr 2019 15:04:21 -0400 Subject: [PATCH 3/5] Use the focal point on the frontend display --- assets/php/class-wgpb-block-featured-product.php | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/assets/php/class-wgpb-block-featured-product.php b/assets/php/class-wgpb-block-featured-product.php index 56f02e9784a..4fb71b5adaa 100644 --- a/assets/php/class-wgpb-block-featured-product.php +++ b/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 @@ public static function get_styles( $attributes, $product ) { $style .= sprintf( 'min-height:%dpx;', intval( $attributes['height'] ) ); } + if ( isset( $attributes['focalPoint'] ) && 2 === count( $attributes['focalPoint'] ) ) { + $style .= sprintf( + 'background-position: %s%% %s%%', + $attributes['focalPoint']['x'] * 100, + $attributes['focalPoint']['y'] * 100 + ); + } + return $style; } From b66ef76bcf84344c7cf10af3bd784bfb5a0c40b2 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Tue, 30 Apr 2019 17:14:13 -0400 Subject: [PATCH 4/5] Check for `FocalPointPicker` before using it (compat for WP 5.1) --- assets/js/blocks/featured-product/block.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/assets/js/blocks/featured-product/block.js b/assets/js/blocks/featured-product/block.js index de198b1b589..5d51da59b46 100644 --- a/assets/js/blocks/featured-product/block.js +++ b/assets/js/blocks/featured-product/block.js @@ -127,6 +127,7 @@ class FeaturedProduct extends Component { const url = attributes.mediaSrc || getImageSrcFromProduct( this.state.product ); + const { focalPoint = { x: 0.5, y: 0.5 } } = attributes; return ( @@ -160,11 +161,11 @@ class FeaturedProduct extends Component { max={ 100 } step={ 10 } /> - { url && + { !! FocalPointPicker && !! url && setAttributes( { focalPoint: value } ) } /> } From 5ca1d1c51b1326ab14c98ae4ac559778a23ffabc Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 2 May 2019 11:49:09 -0400 Subject: [PATCH 5/5] Check if focalPoint attribue is an array before trying to use it --- assets/php/class-wgpb-block-featured-product.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/php/class-wgpb-block-featured-product.php b/assets/php/class-wgpb-block-featured-product.php index 4fb71b5adaa..f50a5b039bc 100644 --- a/assets/php/class-wgpb-block-featured-product.php +++ b/assets/php/class-wgpb-block-featured-product.php @@ -119,7 +119,7 @@ public static function get_styles( $attributes, $product ) { $style .= sprintf( 'min-height:%dpx;', intval( $attributes['height'] ) ); } - if ( isset( $attributes['focalPoint'] ) && 2 === count( $attributes['focalPoint'] ) ) { + if ( is_array( $attributes['focalPoint'] ) && 2 === count( $attributes['focalPoint'] ) ) { $style .= sprintf( 'background-position: %s%% %s%%', $attributes['focalPoint']['x'] * 100,