Add WP 5.3 preview for Feature Product Block (https://github.com/woocommerce/woocommerce-blocks/pull/1034)
* fix space in setting retrieval * allow for previews via `withProduct` * add example property to block registration * add preview handling * fix typo Co-Authored-By: Albert Juhé Lluveras <contact@albertjuhe.com> * Added product preview JSON * Add example.js file for preview content * Update HOC to handle preview. * Move preview check
This commit is contained in:
Darren Ethier
Mike Jolley
parent
00ab1d1913
commit
a6c150a11c
|
|
@ -11,6 +11,7 @@ import {
|
|||
MediaUploadCheck,
|
||||
PanelColorSettings,
|
||||
withColors,
|
||||
RichText,
|
||||
} from '@wordpress/editor';
|
||||
import {
|
||||
Button,
|
||||
|
|
@ -259,7 +260,7 @@ const FeaturedProduct = ( {
|
|||
const classes = classnames(
|
||||
'wc-block-featured-product',
|
||||
{
|
||||
'is-selected': isSelected,
|
||||
'is-selected': isSelected && attributes.productId !== 'preview',
|
||||
'is-loading': ! product && isLoading,
|
||||
'is-not-found': ! product && ! isLoading,
|
||||
'has-background-dim': dimRatio !== 0,
|
||||
|
|
@ -327,28 +328,57 @@ const FeaturedProduct = ( {
|
|||
/>
|
||||
) }
|
||||
<div className="wc-block-featured-product__link">
|
||||
<InnerBlocks
|
||||
template={ [
|
||||
[
|
||||
'core/button',
|
||||
{
|
||||
text: __(
|
||||
'Shop now',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
url: product.permalink,
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
] }
|
||||
templateLock="all"
|
||||
/>
|
||||
{ renderButton() }
|
||||
</div>
|
||||
</div>
|
||||
</ResizableBox>
|
||||
);
|
||||
};
|
||||
|
||||
const renderButton = () => {
|
||||
const buttonClasses = classnames(
|
||||
'wp-block-button__link',
|
||||
'is-style-fill'
|
||||
);
|
||||
const buttonStyle = {
|
||||
backgroundColor: 'vivid-green-cyan',
|
||||
borderRadius: '5px',
|
||||
};
|
||||
const wrapperStyle = {
|
||||
width: '100%',
|
||||
};
|
||||
return attributes.productId === 'preview' ? (
|
||||
<div className="wp-block-button aligncenter" style={ wrapperStyle }>
|
||||
<RichText.Content
|
||||
tagName="a"
|
||||
className={ buttonClasses }
|
||||
href={ product.url }
|
||||
title={ attributes.linkText }
|
||||
style={ buttonStyle }
|
||||
value={ attributes.linkText }
|
||||
target={ product.url }
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<InnerBlocks
|
||||
template={ [
|
||||
[
|
||||
'core/button',
|
||||
{
|
||||
text: __(
|
||||
'Shop now',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
url: product.permalink,
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
] }
|
||||
templateLock="all"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const renderNoProduct = () => (
|
||||
<Placeholder
|
||||
className="wc-block-featured-product"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { DEFAULT_HEIGHT } from '@woocommerce/block-settings';
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { previewProducts } from '../../previews/products';
|
||||
|
||||
export const example = {
|
||||
attributes: {
|
||||
contentAlign: 'center',
|
||||
dimRatio: 50,
|
||||
editMode: false,
|
||||
height: DEFAULT_HEIGHT,
|
||||
mediaSrc: '',
|
||||
showDesc: true,
|
||||
productId: 'preview',
|
||||
previewProduct: previewProducts[ 0 ],
|
||||
},
|
||||
};
|
||||
|
|
@ -11,6 +11,7 @@ import { DEFAULT_HEIGHT } from '@woocommerce/block-settings';
|
|||
*/
|
||||
import './style.scss';
|
||||
import './editor.scss';
|
||||
import { example } from './example';
|
||||
import Block from './block';
|
||||
|
||||
/**
|
||||
|
|
@ -32,6 +33,7 @@ registerBlockType( 'woocommerce/featured-product', {
|
|||
align: [ 'wide', 'full' ],
|
||||
html: false,
|
||||
},
|
||||
example,
|
||||
attributes: {
|
||||
/**
|
||||
* Alignment of content inside block.
|
||||
|
|
@ -132,6 +134,14 @@ registerBlockType( 'woocommerce/featured-product', {
|
|||
type: 'boolean',
|
||||
default: true,
|
||||
},
|
||||
|
||||
/**
|
||||
* Product preview.
|
||||
*/
|
||||
previewProduct: {
|
||||
type: 'object',
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -12,15 +12,14 @@ import { formatError } from '../base/utils/errors.js';
|
|||
|
||||
const withProduct = createHigherOrderComponent( ( OriginalComponent ) => {
|
||||
return class WrappedComponent extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
this.state = {
|
||||
error: null,
|
||||
loading: false,
|
||||
product: null,
|
||||
};
|
||||
this.loadProduct = this.loadProduct.bind( this );
|
||||
}
|
||||
state = {
|
||||
error: null,
|
||||
loading: false,
|
||||
product:
|
||||
this.props.attributes.productId === 'preview'
|
||||
? this.props.attributes.previewProduct
|
||||
: null,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.loadProduct();
|
||||
|
|
@ -38,6 +37,10 @@ const withProduct = createHigherOrderComponent( ( OriginalComponent ) => {
|
|||
loadProduct() {
|
||||
const { productId } = this.props.attributes;
|
||||
|
||||
if ( productId === 'preview' ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( ! productId ) {
|
||||
this.setState( { product: null, loading: false, error: null } );
|
||||
return;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -10,7 +10,7 @@ export const MIN_ROWS = getSetting( 'min_rows', 1 );
|
|||
export const DEFAULT_ROWS = getSetting( 'default_rows', 1 );
|
||||
export const MIN_HEIGHT = getSetting( 'min_height', 500 );
|
||||
export const DEFAULT_HEIGHT = getSetting( 'default_height', 500 );
|
||||
export const PLACEHOLDER_IMG_SRC = getSetting( 'placeholderImgSrc ', '' );
|
||||
export const PLACEHOLDER_IMG_SRC = getSetting( 'placeholderImgSrc', '' );
|
||||
export const THUMBNAIL_SIZE = getSetting( 'thumbnail_size', 300 );
|
||||
export const IS_LARGE_CATALOG = getSetting( 'isLargeCatalog' );
|
||||
export const LIMIT_TAGS = getSetting( 'limitTags' );
|
||||
|
|
|
|||
Loading…
Reference in New Issue