From f0b2de307fa4ed80ba40aa831c198d07aa66fc4c Mon Sep 17 00:00:00 2001
From: Thomas Guillot <info@thomasguillot.com>
Date: Thu, 17 Jun 2021 14:21:28 +0100
Subject: [PATCH] feat: update price block to use placeholder and large font
 size

---
 src/blocks/price/edit.js     | 26 +++++++++++++++-----------
 src/blocks/price/editor.scss |  7 -------
 src/blocks/price/index.js    |  1 -
 src/blocks/price/view.php    |  2 +-
 4 files changed, 16 insertions(+), 20 deletions(-)
 delete mode 100644 src/blocks/price/editor.scss

diff --git a/src/blocks/price/edit.js b/src/blocks/price/edit.js
index ff38fc3c..e82174b9 100644
--- a/src/blocks/price/edit.js
+++ b/src/blocks/price/edit.js
@@ -6,12 +6,14 @@ import { InspectorControls } from '@wordpress/block-editor';
 import {
 	PanelBody,
 	PanelRow,
+	Placeholder,
 	SelectControl,
 	TextControl,
 	ToggleControl,
 } from '@wordpress/components';
 import { useEffect } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
+import { currencyDollar } from '@wordpress/icons';
 
 export const PriceEditor = ( { attributes, isSelected, setAttributes } ) => {
 	const { currencies = {}, currency: defaultCurrency = 'USD' } = window.newspack_listings_data;
@@ -74,18 +76,18 @@ export const PriceEditor = ( { attributes, isSelected, setAttributes } ) => {
 				</PanelBody>
 			</InspectorControls>
 
-			<h2 className="newspack-listings__price">
-				{ isSelected ? (
+			{ isSelected ? (
+				<Placeholder
+					icon={ currencyDollar }
+					label={ __( 'Price', 'newspack-listings' ) }
+					isColumnLayout
+				>
 					<TextControl
 						label={ sprintf(
-							__( 'Enter price in %s', 'newspack-listings' ),
-							currency || defaultCurrency
-						) }
-						type="number"
-						placeholder={ sprintf(
 							__( 'Price in %s', 'newspack-listings' ),
 							currency || defaultCurrency
 						) }
+						type="number"
 						value={ price }
 						onChange={ value => {
 							setAttributes( {
@@ -93,10 +95,12 @@ export const PriceEditor = ( { attributes, isSelected, setAttributes } ) => {
 							} );
 						} }
 					/>
-				) : (
-					<>{ formattedPrice }</>
-				) }
-			</h2>
+				</Placeholder>
+			) : (
+				<p className="newspack-listings__price has-large-font-size">
+					<strong>{ formattedPrice }</strong>
+				</p>
+			) }
 		</>
 	);
 };
diff --git a/src/blocks/price/editor.scss b/src/blocks/price/editor.scss
deleted file mode 100644
index 72fdb6aa..00000000
--- a/src/blocks/price/editor.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.newspack-listings {
-	&__price {
-		.components-text-control__input {
-			font-size: 2rem;
-		}
-	}
-}
diff --git a/src/blocks/price/index.js b/src/blocks/price/index.js
index fbd062cd..0c2468c1 100644
--- a/src/blocks/price/index.js
+++ b/src/blocks/price/index.js
@@ -8,7 +8,6 @@ import { Icon, currencyDollar } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import './editor.scss';
 import { PriceEditor } from './edit';
 import metadata from './block.json';
 const { attributes, category, name } = metadata;
diff --git a/src/blocks/price/view.php b/src/blocks/price/view.php
index 4b848b10..9ff68c31 100644
--- a/src/blocks/price/view.php
+++ b/src/blocks/price/view.php
@@ -37,7 +37,7 @@ function register_block() {
  * @return string $content content.
  */
 function render_block( $attributes ) {
-	return '<h2 class="newspack-listings__price">' . esc_html( $attributes['formattedPrice'] ) . '</h2>';
+	return '<p class="newspack-listings__price has-large-font-size"><strong>' . esc_html( $attributes['formattedPrice'] ) . '</strong></p>';
 }
 
 register_block();