feat: update price block to use placeholder and large font size (#71)

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,29 +76,31 @@ 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( {
 								price: parseFloat( value < 0 ? 0 : value ),
 							} );
 						} }
 					/>
-				) : (
-					<>{ formattedPrice }</>
-				) }
-			</h2>
+				</Placeholder>
+			) : (
+				<p className="newspack-listings__price has-large-font-size">
+					<strong>{ formattedPrice }</strong>
+				</p>
+			) }
 		</>
 	);
 };

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;

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();