Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Add "FocalPointPicker" to Featured Product block #544

Merged
merged 5 commits into from
May 3, 2019
Merged

Add "FocalPointPicker" to Featured Product block #544

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8c38d17
Add FocalPointPicker to featured product block
ryelle Apr 29, 2019
2e59d5e
Disable the media icon if no product is selected
ryelle Apr 29, 2019
5d8b0fa
Use the focal point on the frontend display
ryelle Apr 29, 2019
b66ef76
Check for `FocalPointPicker` before using it (compat for WP 5.1)
ryelle Apr 30, 2019
5ca1d1c
Check if focalPoint attribue is an array before trying to use it
ryelle May 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 23 additions & 1 deletion assets/js/blocks/featured-product/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
} from '@wordpress/editor';
import {
Button,
FocalPointPicker,
IconButton,
PanelBody,
Placeholder,
Expand Down Expand Up @@ -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' ) }>
Expand Down Expand Up @@ -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>
);
Expand Down Expand Up @@ -205,6 +218,7 @@ class FeaturedProduct extends Component {
contentAlign,
dimRatio,
editMode,
focalPoint,
height,
showDesc,
showPrice,
Expand All @@ -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 ) } );
Expand Down Expand Up @@ -257,6 +275,7 @@ class FeaturedProduct extends Component {
label={ __( 'Edit media' ) }
icon="format-image"
onClick={ open }
disabled={ ! this.state.product }
/>
) }
/>
Expand Down Expand Up @@ -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',
},
Expand Down
7 changes: 7 additions & 0 deletions assets/js/blocks/featured-product/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down
9 changes: 9 additions & 0 deletions assets/php/class-wgpb-block-featured-product.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ class WGPB_Block_Featured_Product {
'align' => 'none',
'contentAlign' => 'center',
'dimRatio' => 50,
'focalPoint' => false,
'height' => false,
'mediaId' => 0,
'mediaSrc' => '',
Expand Down Expand Up @@ -118,6 +119,14 @@ public static function get_styles( $attributes, $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;
}

Expand Down