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,10 +64,8 @@ export const Edit = ( {
 					/>
 				) }
 			</InspectorControls>
-			<Button className="wc-block-cart__submit-button">
+			<EditableButton
-				<RichText
+				className="wc-block-cart__submit-button"
-					multiline={ false }
-					allowedFormats={ [] }
 				value={ buttonLabel }
 				placeholder={ defaultButtonLabel }
 				onChange={ ( content ) => {
@@ -80,7 +74,6 @@ export const Edit = ( {
 					} );
 				} }
 			/>
-			</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,10 +100,8 @@ 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 }
-						allowedFormats={ [] }
 					value={ placeOrderButtonLabel }
 					placeholder={ defaultPlaceOrderButtonLabel }
 					onChange={ ( content ) => {
@@ -116,7 +110,6 @@ export const Edit = ( {
 						} );
 					} }
 				/>
-				</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,13 +64,9 @@ export const Edit = ( {
 					) }
 				/>
 				<div className="wc-block-mini-cart__footer-actions">
-					<Button
+					<EditableButton
 						className="wc-block-mini-cart__footer-cart"
 						variant="outlined"
-					>
-						<RichText
-							multiline={ false }
-							allowedFormats={ [] }
 						value={ cartButtonLabel }
 						placeholder={ defaultCartButtonLabel }
 						onChange={ ( content ) => {
@@ -79,11 +75,8 @@ export const Edit = ( {
 							} );
 						} }
 					/>
-					</Button>
+					<EditableButton
-					<Button className="wc-block-mini-cart__footer-checkout">
+						className="wc-block-mini-cart__footer-checkout"
-						<RichText
-							multiline={ false }
-							allowedFormats={ [] }
 						value={ checkoutButtonLabel }
 						placeholder={ defaultCheckoutButtonLabel }
 						onChange={ ( content ) => {
@@ -92,7 +85,6 @@ export const Edit = ( {
 							} );
 						} }
 					/>
-					</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,13 +23,9 @@ export const Edit = ( {
 
 	return (
 		<div className="wp-block-button aligncenter">
-			<Button
+			<EditableButton
 				{ ...blockProps }
 				className="wc-block-mini-cart__shopping-button"
-			>
-				<RichText
-					multiline={ false }
-					allowedFormats={ [] }
 				value={ startShoppingButtonLabel }
 				placeholder={ defaultStartShoppingButtonLabel }
 				onChange={ ( content ) => {
@@ -38,7 +34,6 @@ export const Edit = ( {
 					} );
 				} }
 			/>
-			</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;