From 96bd0432cd5e74d68c81936c809b15d11f9408e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <contact@albertjuhe.com>
Date: Tue, 25 Apr 2023 18:54:35 +0200
Subject: [PATCH] Mini Cart Contents block: set minimum width
 (https://github.com/woocommerce/woocommerce-blocks/pull/9196)

* Mini Cart Contents block: set minimum width

* Mini Cart Contents block: allow changing the width only in the feature plugin

* Allow resetting the Mini Cart Contents width to the default

* Update assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx

Co-authored-by: Karol Manijak <karol.manijak@automattic.com>

---------

Co-authored-by: Karol Manijak <karol.manijak@automattic.com>
---
 .../mini-cart/mini-cart-contents/edit.tsx     | 62 ++++++++++++-------
 1 file changed, 41 insertions(+), 21 deletions(-)

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx
index 775b7be6948..dc7927b911b 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx
@@ -8,9 +8,10 @@ import {
 	InspectorControls,
 } from '@wordpress/block-editor';
 import { EditorProvider } from '@woocommerce/base-context';
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
 import type { TemplateArray } from '@wordpress/blocks';
 import { useEffect } from '@wordpress/element';
-import type { ReactElement } from 'react';
+import type { FocusEvent, ReactElement } from 'react';
 import { __ } from '@wordpress/i18n';
 import {
 	PanelBody,
@@ -31,6 +32,7 @@ const ALLOWED_BLOCKS = [
 	'woocommerce/filled-mini-cart-contents-block',
 	'woocommerce/empty-mini-cart-contents-block',
 ];
+const MIN_WIDTH = 300;
 
 interface Props {
 	clientId: string;
@@ -124,26 +126,44 @@ const Edit = ( {
 
 	return (
 		<>
-			<InspectorControls key="inspector">
-				<PanelBody
-					title={ __( 'Dimensions', 'woo-gutenberg-products-block' ) }
-					initialOpen
-				>
-					<UnitControl
-						onChange={ ( value ) => {
-							setAttributes( { width: value } );
-						} }
-						value={ width }
-						units={ [
-							{
-								value: 'px',
-								label: 'px',
-								default: defaultAttributes.width.default,
-							},
-						] }
-					/>
-				</PanelBody>
-			</InspectorControls>
+			{ isFeaturePluginBuild() && (
+				<InspectorControls key="inspector">
+					<PanelBody
+						title={ __(
+							'Dimensions',
+							'woo-gutenberg-products-block'
+						) }
+						initialOpen
+					>
+						<UnitControl
+							onChange={ ( value ) => {
+								setAttributes( { width: value } );
+							} }
+							onBlur={ ( e: FocusEvent< HTMLInputElement > ) => {
+								if ( e.target.value === '' ) {
+									setAttributes( {
+										width: defaultAttributes.width.default,
+									} );
+								} else if (
+									Number( e.target.value ) < MIN_WIDTH
+								) {
+									setAttributes( {
+										width: MIN_WIDTH + 'px',
+									} );
+								}
+							} }
+							value={ width }
+							units={ [
+								{
+									value: 'px',
+									label: 'px',
+									default: defaultAttributes.width.default,
+								},
+							] }
+						/>
+					</PanelBody>
+				</InspectorControls>
+			) }
 			<div
 				className="wc-block-components-drawer__screen-overlay"
 				aria-hidden="true"