Merge branch 'trunk' of github.com:woocommerce/woocommerce-gutenberg-…

…products-block into add/4965-product-title

assets/js/base/components/formatted-monetary-amount/index.tsx

@@ -18,6 +18,8 @@ interface FormattedMonetaryAmountProps
 	extends Omit< NumberFormatProps, 'onValueChange' > {
 	className?: string;
 	displayType?: NumberFormatProps[ 'displayType' ];
+	allowNegative?: boolean;
+	isAllowed?: ( formattedValue: NumberFormatValues ) => boolean;
 	value: number | string; // Value of money amount.
 	currency: Currency | Record< string, never >; // Currency configuration object.
 	onValueChange?: ( unit: number ) => void; // Function to call when value changes.

assets/js/base/components/price-slider/index.tsx

@@ -19,6 +19,7 @@ import { Currency, isObject } from '@woocommerce/types';
 import './style.scss';
 import { constrainRangeSliderValues } from './constrain-range-slider-values';
 import FilterSubmitButton from '../filter-submit-button';
+import { isValidMaxValue, isValidMinValue } from './utils';
 
 export interface PriceSliderProps {
 	/**
@@ -240,9 +241,27 @@ const PriceSlider = ( {
 			) {
 				return;
 			}
+
 			const isMin = event.target.classList.contains(
 				'wc-block-price-filter__amount--min'
 			);
+
+			// When the user inserts in the max price input a value less or equal than the current minimum price,
+			// we set to 0 the minimum price.
+			if ( minPriceInput >= maxPriceInput ) {
+				const values = constrainRangeSliderValues(
+					[ 0, maxPriceInput ],
+					null,
+					null,
+					stepValue,
+					isMin
+				);
+				return onChange( [
+					parseInt( values[ 0 ], 10 ),
+					parseInt( values[ 1 ], 10 ),
+				] );
+			}
+
 			const values = constrainRangeSliderValues(
 				[ minPriceInput, maxPriceInput ],
 				null,
@@ -351,6 +370,12 @@ const PriceSlider = ( {
 								'Filter products by minimum price',
 								'woo-gutenberg-products-block'
 							) }
+							allowNegative={ false }
+							isAllowed={ isValidMinValue( {
+								minConstraint,
+								minorUnit: currency.minorUnit,
+								currentMaxValue: maxPriceInput,
+							} ) }
 							onValueChange={ ( value ) => {
 								if ( value === minPriceInput ) {
 									return;
@@ -369,6 +394,10 @@ const PriceSlider = ( {
 								'Filter products by maximum price',
 								'woo-gutenberg-products-block'
 							) }
+							isAllowed={ isValidMaxValue( {
+								maxConstraint,
+								minorUnit: currency.minorUnit,
+							} ) }
 							onValueChange={ ( value ) => {
 								if ( value === maxPriceInput ) {
 									return;

assets/js/base/components/price-slider/utils.ts

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import { NumberFormatValues } from 'react-number-format';
+
+/**
+ Check if that the value is minor than the max price and greater than 0.
+ */
+export const isValidMaxValue = ( {
+	maxConstraint,
+	minorUnit,
+}: {
+	maxConstraint: number;
+	minorUnit: number;
+} ) => ( { floatValue }: NumberFormatValues ): boolean => {
+	const maxPrice = maxConstraint / 10 ** minorUnit;
+
+	return floatValue !== undefined && floatValue <= maxPrice && floatValue > 0;
+};
+
+/**
+ Check if that the value is minor than the max price and greater than 0.
+ */
+export const isValidMinValue = ( {
+	minConstraint,
+	currentMaxValue,
+	minorUnit,
+}: {
+	minConstraint: number;
+	currentMaxValue: number;
+	minorUnit: number;
+} ) => ( { floatValue }: NumberFormatValues ): boolean => {
+	const minPrice = minConstraint / 10 ** minorUnit;
+	const currentMaxPrice = currentMaxValue / 10 ** minorUnit;
+
+	return (
+		floatValue !== undefined &&
+		floatValue >= minPrice &&
+		floatValue < currentMaxPrice
+	);
+};

assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-payment-block/block.tsx

@@ -1,22 +1,14 @@
 /**
  * External dependencies
  */
-import { StoreNoticesProvider } from '@woocommerce/base-context';
-import { useEmitResponse } from '@woocommerce/base-context/hooks';
 
 /**
  * Internal dependencies
  */
 import { PaymentMethods } from '../../../payment-methods';
 
 const Block = (): JSX.Element | null => {
-	const { noticeContexts } = useEmitResponse();
-
-	return (
-		<StoreNoticesProvider context={ noticeContexts.PAYMENTS }>
-			<PaymentMethods />
-		</StoreNoticesProvider>
-	);
+	return <PaymentMethods />;
 };
 
 export default Block;

assets/js/blocks/cart-checkout/mini-cart/index.tsx

@@ -36,6 +36,7 @@ const settings = {
 			 * to add color classes and style to the wrapper.
 			 */
 			__experimentalSkipSerialization: true,
+			background: false,
 		},
 		/**
 		 * We need this experimental flag because we don't want to style the

assets/js/blocks/cart-checkout/mini-cart/quantity-badge/style.scss

@@ -9,7 +9,7 @@
 	border: 0.15em solid;
 	border-radius: 1em;
 	box-sizing: border-box;
-	color: #000;
+	color: inherit;
 	display: flex;
 	font-size: 0.875em;
 	font-weight: 600;

assets/js/blocks/legacy-template/constants.ts

@@ -6,28 +6,28 @@ import { __ } from '@wordpress/i18n';
 export const TEMPLATES: Record< string, Record< string, string > > = {
 	'single-product': {
 		title: __(
-			'WooCommerce Single Product Template',
+			'WooCommerce Single Product Block',
 			'woo-gutenberg-products-block'
 		),
 		placeholder: 'single-product',
 	},
 	'archive-product': {
 		title: __(
-			'WooCommerce Product Archive Template',
+			'WooCommerce Product Grid Block',
 			'woo-gutenberg-products-block'
 		),
 		placeholder: 'archive-product',
 	},
 	'taxonomy-product_cat': {
 		title: __(
-			'WooCommerce Product Taxonomy Template',
+			'WooCommerce Product Taxonomy Block',
 			'woo-gutenberg-products-block'
 		),
 		placeholder: 'archive-product',
 	},
 	'taxonomy-product_tag': {
 		title: __(
-			'WooCommerce Product Tag Template',
+			'WooCommerce Product Tag Block',
 			'woo-gutenberg-products-block'
 		),
 		placeholder: 'archive-product',

assets/js/blocks/legacy-template/editor.scss

@@ -3,6 +3,11 @@
 	margin-bottom: 30px;
 }
 
+.wp-block-woocommerce-legacy-template__placeholder-warning {
+	border-left: 5px solid #2181d2;
+	padding-left: em(40px);
+}
+
 .wp-block-woocommerce-legacy-template__placeholder-wireframe {
 	width: 100%;
 	height: 250px;

assets/js/blocks/legacy-template/index.tsx

@@ -34,14 +34,28 @@ const Edit = ( { attributes }: Props ) => {
 				className="wp-block-woocommerce-legacy-template__placeholder"
 			>
 				<div className="wp-block-woocommerce-legacy-template__placeholder-copy">
-					{ sprintf(
-						/* translators: %s is the template title */
-						__(
-							'This is an editor placeholder for the %s. On your store this will be replaced by the template and display with your product image(s), title, price, etc. You can move this placeholder around and add further blocks around it to extend the template.',
+					<p className="wp-block-woocommerce-legacy-template__placeholder-warning">
+						<strong>
+							{ __(
+								'Attention: Do not remove this block!',
+								'woo-gutenberg-products-block'
+							) }
+						</strong>{ ' ' }
+						{ __(
+							'Removal will cause unintended effects on your store.',
 							'woo-gutenberg-products-block'
-						),
-						templateTitle
-					) }
+						) }
+					</p>
+					<p>
+						{ sprintf(
+							/* translators: %s is the template title */
+							__(
+								'This is an editor placeholder for the %s. On your store this will be replaced by the template and display with your product image(s), title, price, etc. You can move this placeholder around and add further blocks around it to extend the template.',
+								'woo-gutenberg-products-block'
+							),
+							templateTitle
+						) }
+					</p>
 				</div>
 				<div className="wp-block-woocommerce-legacy-template__placeholder-wireframe">
 					<img

assets/js/editor-components/feedback-prompt/index.js

@@ -60,3 +60,13 @@ export const CartCheckoutFeedbackPrompt = () => (
 		url="https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?template=--cart-checkout-feedback.md"
 	/>
 );
+
+export const LegacyFeedbackPrompt = () => (
+	<FeedbackPrompt
+		text={ __(
+			'We are working on a better editing experience that will replace legacy blocks. Keep an eye out for updates!',
+			'woo-gutenberg-products-block'
+		) }
+		url="https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?template=--legacy-block-feedback.md"
+	/>
+);

bin/hook-docs/actions/index.js

@@ -15,6 +15,7 @@ const {
 	returns,
 	example,
 	related,
+	files,
 } = require( '../format-hook-doc' );
 const {
 	createDocs,
@@ -52,9 +53,8 @@ const generate = ( hooks ) => {
 				...sectionWithHeading( exceptions( hookDocs ), 'Exceptions' ),
 				...sectionWithHeading( returns( hookDocs ), 'Returns' ),
 				...sectionWithHeading( example( hookDocs ), 'Example' ),
-				...sectionWithHeading( related( hookDocs ), 'Related' ),
-				{ h3: `Source` },
-				{ p: `File: [${ hook.file }](../src/${ hook.file })` },
+				...sectionWithHeading( related( hookDocs ), 'See' ),
+				...sectionWithHeading( files( hook.file ), 'Source' ),
 				{ hr: '' },
 			].filter( Boolean );
 		} ),