Fix issue that prevented spaces being added to Mini Cart, Cart and Checkout buttons (https://github.com/woocommerce/woocommerce-blocks/pull/8777)

* Fix issue that prevented spaces being added to Mini Cart, Cart and Checkout buttons

* Fix a couple of comments

plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx

@@ -4,12 +4,8 @@
 import { useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import Button from '@woocommerce/base-components/button';
+import EditableButton from '@woocommerce/editor-components/editable-button';
-import {
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
-	InspectorControls,
-	RichText,
-	useBlockProps,
-} from '@wordpress/block-editor';
 import PageSelector from '@woocommerce/editor-components/page-selector';
 import { CART_PAGE_ID } from '@woocommerce/block-settings';
 
@@ -68,19 +64,16 @@ export const Edit = ( {
 					/>
 				) }
 			</InspectorControls>
-			<Button className="wc-block-cart__submit-button">
+			<EditableButton
-				<RichText
+				className="wc-block-cart__submit-button"
-					multiline={ false }
+				value={ buttonLabel }
-					allowedFormats={ [] }
+				placeholder={ defaultButtonLabel }
-					value={ buttonLabel }
+				onChange={ ( content ) => {
-					placeholder={ defaultButtonLabel }
+					setAttributes( {
-					onChange={ ( content ) => {
+						buttonLabel: content,
-						setAttributes( {
+					} );
-							buttonLabel: content,
+				} }
-						} );
+			/>
-					} }
-				/>
-			</Button>
 		</div>
 	);
 };

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/edit.tsx

@@ -4,17 +4,13 @@
 import { useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import {
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
-	InspectorControls,
-	useBlockProps,
-	RichText,
-} from '@wordpress/block-editor';
 import PageSelector from '@woocommerce/editor-components/page-selector';
 import { PanelBody, ToggleControl } from '@wordpress/components';
 import { CHECKOUT_PAGE_ID } from '@woocommerce/block-settings';
 import { getSetting } from '@woocommerce/settings';
 import { ReturnToCartButton } from '@woocommerce/base-components/cart-checkout';
-import Button from '@woocommerce/base-components/button';
+import EditableButton from '@woocommerce/editor-components/editable-button';
 import Noninteractive from '@woocommerce/base-components/noninteractive';
 
 /**
@@ -104,19 +100,16 @@ export const Edit = ( {
 						/>
 					) }
 				</Noninteractive>
-				<Button className="wc-block-cart__submit-button wc-block-components-checkout-place-order-button">
+				<EditableButton
-					<RichText
+					className="wc-block-cart__submit-button wc-block-components-checkout-place-order-button"
-						multiline={ false }
+					value={ placeOrderButtonLabel }
-						allowedFormats={ [] }
+					placeholder={ defaultPlaceOrderButtonLabel }
-						value={ placeOrderButtonLabel }
+					onChange={ ( content ) => {
-						placeholder={ defaultPlaceOrderButtonLabel }
+						setAttributes( {
-						onChange={ ( content ) => {
+							placeOrderButtonLabel: content,
-							setAttributes( {
+						} );
-								placeOrderButtonLabel: content,
+					} }
-							} );
+				/>
-						} }
-					/>
-				</Button>
 			</div>
 		</div>
 	);

plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx

@@ -3,8 +3,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import { TotalsItem } from '@woocommerce/blocks-checkout';
-import Button from '@woocommerce/base-components/button';
+import EditableButton from '@woocommerce/editor-components/editable-button';
-import { useBlockProps, RichText } from '@wordpress/block-editor';
+import { useBlockProps } from '@wordpress/block-editor';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import {
 	usePaymentMethods,
@@ -64,35 +64,27 @@ export const Edit = ( {
 					) }
 				/>
 				<div className="wc-block-mini-cart__footer-actions">
-					<Button
+					<EditableButton
 						className="wc-block-mini-cart__footer-cart"
 						variant="outlined"
-					>
+						value={ cartButtonLabel }
-						<RichText
+						placeholder={ defaultCartButtonLabel }
-							multiline={ false }
+						onChange={ ( content ) => {
-							allowedFormats={ [] }
+							setAttributes( {
-							value={ cartButtonLabel }
+								cartButtonLabel: content,
-							placeholder={ defaultCartButtonLabel }
+							} );
-							onChange={ ( content ) => {
+						} }
-								setAttributes( {
+					/>
-									cartButtonLabel: content,
+					<EditableButton
-								} );
+						className="wc-block-mini-cart__footer-checkout"
-							} }
+						value={ checkoutButtonLabel }
-						/>
+						placeholder={ defaultCheckoutButtonLabel }
-					</Button>
+						onChange={ ( content ) => {
-					<Button className="wc-block-mini-cart__footer-checkout">
+							setAttributes( {
-						<RichText
+								checkoutButtonLabel: content,
-							multiline={ false }
+							} );
-							allowedFormats={ [] }
+						} }
-							value={ checkoutButtonLabel }
+					/>
-							placeholder={ defaultCheckoutButtonLabel }
-							onChange={ ( content ) => {
-								setAttributes( {
-									checkoutButtonLabel: content,
-								} );
-							} }
-						/>
-					</Button>
 				</div>
 				<PaymentEventsProvider>
 					<PaymentMethodIconsElement />

plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/edit.tsx

@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import { useBlockProps, RichText } from '@wordpress/block-editor';
+import { useBlockProps } from '@wordpress/block-editor';
-import Button from '@woocommerce/base-components/button';
+import EditableButton from '@woocommerce/editor-components/editable-button';
 
 /**
  * Internal dependencies
@@ -23,22 +23,17 @@ export const Edit = ( {
 
 	return (
 		<div className="wp-block-button aligncenter">
-			<Button
+			<EditableButton
 				{ ...blockProps }
 				className="wc-block-mini-cart__shopping-button"
-			>
+				value={ startShoppingButtonLabel }
-				<RichText
+				placeholder={ defaultStartShoppingButtonLabel }
-					multiline={ false }
+				onChange={ ( content ) => {
-					allowedFormats={ [] }
+					setAttributes( {
-					value={ startShoppingButtonLabel }
+						startShoppingButtonLabel: content,
-					placeholder={ defaultStartShoppingButtonLabel }
+					} );
-					onChange={ ( content ) => {
+				} }
-						setAttributes( {
+			/>
-							startShoppingButtonLabel: content,
-						} );
-					} }
-				/>
-			</Button>
 		</div>
 	);
 };

plugins/woocommerce-blocks/assets/js/editor-components/editable-button/index.tsx

@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+import Button, { ButtonProps } from '@woocommerce/base-components/button';
+import { RichText } from '@wordpress/block-editor';
+import type { RefObject } from 'react';
+
+export interface EditableButtonProps
+	extends Omit< ButtonProps, 'onChange' | 'placeholder' | 'value' > {
+	/**
+	 * On change callback.
+	 */
+	onChange: ( value: string ) => void;
+	/**
+	 * The placeholder of the editable button.
+	 */
+	placeholder?: string;
+	/**
+	 * The current value of the editable button.
+	 */
+	value: string;
+}
+
+const EditableButton = ( {
+	onChange,
+	placeholder,
+	value,
+	...props
+}: EditableButtonProps ) => {
+	const button: RefObject< HTMLButtonElement > = useRef( null );
+
+	// Fix a bug in Firefox that didn't allow to type spaces in editable buttons.
+	// @see https://github.com/woocommerce/woocommerce-blocks/issues/8734
+	useEffect( () => {
+		const buttonEl = button?.current;
+
+		if ( ! buttonEl ) {
+			return;
+		}
+
+		const onKeyDown = ( event: KeyboardEvent ) => {
+			// If the user typed something different than space, do nothing.
+			if ( event.code !== 'Space' ) {
+				return;
+			}
+			event.preventDefault();
+			const selection = buttonEl.ownerDocument.getSelection();
+			if ( selection && selection.rangeCount > 0 ) {
+				// Get the caret position and insert a space.
+				const range = selection.getRangeAt( 0 );
+				range.deleteContents();
+				const textNode = document.createTextNode( ' ' );
+				range.insertNode( textNode );
+				// Set the caret position after the space.
+				range.setStartAfter( textNode );
+				range.setEndAfter( textNode );
+				selection.removeAllRanges();
+				selection.addRange( range );
+			}
+		};
+
+		buttonEl.addEventListener( 'keydown', onKeyDown );
+
+		return () => {
+			if ( ! buttonEl ) {
+				return;
+			}
+			buttonEl.removeEventListener( 'keydown', onKeyDown );
+		};
+	}, [ onChange, value ] );
+
+	return (
+		<Button { ...props }>
+			<span ref={ button }>
+				<RichText
+					multiline={ false }
+					allowedFormats={ [] }
+					value={ value }
+					placeholder={ placeholder }
+					onChange={ onChange }
+				/>
+			</span>
+		</Button>
+	);
+};
+
+export default EditableButton;