Add featured category preview (#1122)

Author: mikejolley

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

@@ -11,6 +11,7 @@ import {
 	MediaUploadCheck,
 	PanelColorSettings,
 	withColors,
+	RichText,
 } from '@wordpress/editor';
 import {
 	Button,
@@ -221,6 +222,50 @@ const FeaturedCategory = ( {
 		);
 	};
 
+	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.categoryId === 'preview' ? (
+			<div className="wp-block-button aligncenter" style={ wrapperStyle }>
+				<RichText.Content
+					tagName="a"
+					className={ buttonClasses }
+					href={ category.permalink }
+					title={ attributes.linkText }
+					style={ buttonStyle }
+					value={ attributes.linkText }
+					target={ category.permalink }
+				/>
+			</div>
+		) : (
+			<InnerBlocks
+				template={ [
+					[
+						'core/button',
+						{
+							text: __(
+								'Shop now',
+								'woo-gutenberg-products-block'
+							),
+							url: category.permalink,
+							align: 'center',
+						},
+					],
+				] }
+				templateLock="all"
+			/>
+		);
+	};
+
 	const renderCategory = () => {
 		const {
 			className,
@@ -233,7 +278,7 @@ const FeaturedCategory = ( {
 		const classes = classnames(
 			'wc-block-featured-category',
 			{
-				'is-selected': isSelected,
+				'is-selected': isSelected && attributes.productId !== 'preview',
 				'is-loading': ! category && isLoading,
 				'is-not-found': ! category && ! isLoading,
 				'has-background-dim': dimRatio !== 0,
@@ -282,22 +327,7 @@ const FeaturedCategory = ( {
 						/>
 					) }
 					<div className="wc-block-featured-category__link">
-						<InnerBlocks
-							template={ [
-								[
-									'core/button',
-									{
-										text: __(
-											'Shop now',
-											'woo-gutenberg-products-block'
-										),
-										url: category.permalink,
-										align: 'center',
-									},
-								],
-							] }
-							templateLock="all"
-						/>
+						{ renderButton() }
 					</div>
 				</div>
 			</ResizableBox>

assets/js/blocks/featured-category/example.js

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { DEFAULT_HEIGHT } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { previewCategories } from '@woocommerce/resource-previews';
+
+export const example = {
+	attributes: {
+		contentAlign: 'center',
+		dimRatio: 50,
+		editMode: false,
+		height: DEFAULT_HEIGHT,
+		mediaSrc: '',
+		showDesc: true,
+		categoryId: 'preview',
+		previewCategory: previewCategories[ 0 ],
+	},
+};

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

@@ -12,6 +12,7 @@ import { DEFAULT_HEIGHT } from '@woocommerce/block-settings';
 import './style.scss';
 import './editor.scss';
 import Block from './block';
+import { example } from './example';
 import { IconFolderStar } from '@woocommerce/block-components/icons';
 
 /**
@@ -33,6 +34,7 @@ registerBlockType( 'woocommerce/featured-category', {
 		align: [ 'wide', 'full' ],
 		html: false,
 	},
+	example,
 	attributes: {
 		/**
 		 * Alignment of content inside block.
@@ -125,6 +127,14 @@ registerBlockType( 'woocommerce/featured-category', {
 			type: 'boolean',
 			default: true,
 		},
+
+		/**
+		 * Category preview.
+		 */
+		previewCategory: {
+			type: 'object',
+			default: null,
+		},
 	},
 
 	/**

assets/js/hocs/with-category.js

@@ -17,7 +17,10 @@ const withCategory = createHigherOrderComponent( ( OriginalComponent ) => {
 			this.state = {
 				error: null,
 				loading: false,
-				category: null,
+				category:
+					this.props.attributes.categoryId === 'preview'
+						? this.props.attributes.previewCategory
+						: null,
 			};
 			this.loadCategory = this.loadCategory.bind( this );
 		}
@@ -38,6 +41,10 @@ const withCategory = createHigherOrderComponent( ( OriginalComponent ) => {
 		loadCategory() {
 			const { categoryId } = this.props.attributes;
 
+			if ( categoryId === 'preview' ) {
+				return;
+			}
+
 			if ( ! categoryId ) {
 				this.setState( {
 					category: null,

assets/js/previews/categories.js

@@ -1,2 +1,3 @@
 export { previewProducts } from './products';
 export { previewReviews } from './reviews';
+export { previewCategories } from './categories';