Featured Product: Try using Button block for button (#398)

* Try using Button block for the product button

* Use the permalink for the selected product

* Fix use of templateLock prop

* Fix button component alignment

Author: ryelle

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

@@ -6,11 +6,11 @@ import apiFetch from '@wordpress/api-fetch';
 import {
 	AlignmentToolbar,
 	BlockControls,
+	InnerBlocks,
 	InspectorControls,
 	MediaUpload,
 	MediaUploadCheck,
 	PanelColorSettings,
-	RichText,
 	withColors,
 } from '@wordpress/editor';
 import {
@@ -218,7 +218,6 @@ class FeaturedProduct extends Component {
 			dimRatio,
 			editMode,
 			height,
-			linkText,
 			showDesc,
 			showPrice,
 		} = attributes;
@@ -318,13 +317,19 @@ class FeaturedProduct extends Component {
 											dangerouslySetInnerHTML={ { __html: product.price_html } }
 										/>
 									) }
-									<div className="wc-block-featured-product__link wp-block-button">
-										<RichText
-											value={ linkText }
-											onChange={ ( value ) => setAttributes( { linkText: value } ) }
-											formattingControls={ [ 'bold', 'italic', 'strikethrough' ] }
-											className="wp-block-button__link"
-											keepPlaceholderOnFocus
+									<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"
 										/>
 									</div>
 								</div>

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

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { InnerBlocks } from '@wordpress/editor';
 import { registerBlockType } from '@wordpress/blocks';
 
 /**
@@ -131,6 +132,6 @@ registerBlockType( 'woocommerce/featured-product', {
 	 * Block content is rendered in PHP, not via save function.
 	 */
 	save() {
-		return null;
+		return <InnerBlocks.Content />;
 	},
 } );

assets/js/blocks/featured-product/style.scss

@@ -35,8 +35,7 @@
 
 		.wc-block-featured-product__title,
 		.wc-block-featured-product__description,
-		.wc-block-featured-product__price,
-		.wc-block-featured-product__link {
+		.wc-block-featured-product__price {
 			margin-left: 0;
 			text-align: left;
 		}
@@ -47,23 +46,18 @@
 
 		.wc-block-featured-product__title,
 		.wc-block-featured-product__description,
-		.wc-block-featured-product__price,
-		.wc-block-featured-product__link {
+		.wc-block-featured-product__price {
 			margin-right: 0;
 			text-align: right;
 		}
 	}
 
 	.wc-block-featured-product__title,
 	.wc-block-featured-product__description,
-	.wc-block-featured-product__price,
-	.wc-block-featured-product__link {
+	.wc-block-featured-product__price {
 		color: $white;
 		line-height: 1.25;
-		z-index: 1;
 		margin-bottom: 0;
-		width: 100%;
-		padding: 0 48px 16px 48px;
 		text-align: center;
 
 		a,
@@ -74,6 +68,15 @@
 		}
 	}
 
+	.wc-block-featured-product__title,
+	.wc-block-featured-product__description,
+	.wc-block-featured-product__price,
+	.wc-block-featured-product__link {
+		width: 100%;
+		padding: 0 48px 16px 48px;
+		z-index: 1;
+	}
+
 	.wc-block-featured-product__title {
 		margin-top: 0;
 

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

@@ -30,7 +30,6 @@ class WC_Block_Featured_Product {
 		'contentAlign' => 'center',
 		'dimRatio'     => 50,
 		'height'       => false,
-		'linkText'     => false,
 		'mediaId'      => 0,
 		'mediaSrc'     => '',
 		'showDesc'     => true,
@@ -51,9 +50,6 @@ public static function render( $attributes, $content ) {
 			return '';
 		}
 		$attributes = wp_parse_args( $attributes, self::$defaults );
-		if ( ! $attributes['linkText'] ) {
-			$attributes['linkText'] = __( 'Shop now', 'woo-gutenberg-products-block' );
-		}
 		if ( ! $attributes['height'] ) {
 			$attributes['height'] = wc_get_theme_support( 'featured_block::default_height', 500 );
 		}
@@ -73,14 +69,6 @@ public static function render( $attributes, $content ) {
 			$product->get_price_html()
 		);
 
-		$link_str = sprintf(
-			'<div class="wc-block-featured-product__link wp-block-button"><a class="wp-block-button__link" href="%1$s" aria-label="%2$s">%3$s</a></div>',
-			$product->get_permalink(),
-			/* translators: %s is product name */
-			sprintf( __( 'View product %s', 'woo-gutenberg-products-block' ), $product->get_name() ),
-			$attributes['linkText']
-		);
-
 		$output = sprintf( '<div class="%1$s" style="%2$s">', self::get_classes( $attributes ), self::get_styles( $attributes, $product ) );
 
 		$output .= $title;
@@ -90,7 +78,7 @@ public static function render( $attributes, $content ) {
 		if ( $attributes['showPrice'] ) {
 			$output .= $price_str;
 		}
-		$output .= $link_str;
+		$output .= '<div class="wc-block-featured-product__link">' . $content . '</div>';
 		$output .= '</div>';
 
 		return $output;

includes/class-wgpb-products-controller.php

@@ -276,6 +276,7 @@ protected function get_product_data( $product, $context = 'view' ) {
 
 		$data['id']                = $raw_data['id'];
 		$data['name']              = $raw_data['name'];
+		$data['permalink']         = $raw_data['permalink'];
 		$data['sku']               = $raw_data['sku'];
 		$data['description']       = $raw_data['description'];
 		$data['short_description'] = $raw_data['short_description'];
@@ -330,6 +331,7 @@ public function get_item_schema() {
 
 		$schema['properties']['id']                = $raw_schema['properties']['id'];
 		$schema['properties']['name']              = $raw_schema['properties']['name'];
+		$schema['properties']['permalink']         = $raw_schema['properties']['permalink'];
 		$schema['properties']['sku']               = $raw_schema['properties']['sku'];
 		$schema['properties']['description']       = $raw_schema['properties']['description'];
 		$schema['properties']['short_description'] = $raw_schema['properties']['short_description'];