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
This commit is contained in:
Albert Juhé Lluveras 2023-03-17 13:26:34 +01:00 committed by GitHub
parent 28c7bfc801
commit ec19838355
5 changed files with 144 additions and 83 deletions

View File

@ -4,12 +4,8 @@
import { useRef } from '@wordpress/element'; import { useRef } from '@wordpress/element';
import { useSelect } from '@wordpress/data'; import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n'; 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 PageSelector from '@woocommerce/editor-components/page-selector';
import { CART_PAGE_ID } from '@woocommerce/block-settings'; import { CART_PAGE_ID } from '@woocommerce/block-settings';
@ -68,19 +64,16 @@ export const Edit = ( {
/> />
) } ) }
</InspectorControls> </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> </div>
); );
}; };

View File

@ -4,17 +4,13 @@
import { useRef } from '@wordpress/element'; import { useRef } from '@wordpress/element';
import { useSelect } from '@wordpress/data'; import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n'; 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 PageSelector from '@woocommerce/editor-components/page-selector';
import { PanelBody, ToggleControl } from '@wordpress/components'; import { PanelBody, ToggleControl } from '@wordpress/components';
import { CHECKOUT_PAGE_ID } from '@woocommerce/block-settings'; import { CHECKOUT_PAGE_ID } from '@woocommerce/block-settings';
import { getSetting } from '@woocommerce/settings'; import { getSetting } from '@woocommerce/settings';
import { ReturnToCartButton } from '@woocommerce/base-components/cart-checkout'; 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'; import Noninteractive from '@woocommerce/base-components/noninteractive';
/** /**
@ -104,19 +100,16 @@ export const Edit = ( {
/> />
) } ) }
</Noninteractive> </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>
</div> </div>
); );

View File

@ -3,8 +3,8 @@
*/ */
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { TotalsItem } from '@woocommerce/blocks-checkout'; 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 { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
import { import {
usePaymentMethods, usePaymentMethods,
@ -64,35 +64,27 @@ export const Edit = ( {
) } ) }
/> />
<div className="wc-block-mini-cart__footer-actions"> <div className="wc-block-mini-cart__footer-actions">
<Button <EditableButton
className="wc-block-mini-cart__footer-cart" className="wc-block-mini-cart__footer-cart"
variant="outlined" 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> </div>
<PaymentEventsProvider> <PaymentEventsProvider>
<PaymentMethodIconsElement /> <PaymentMethodIconsElement />

View File

@ -1,8 +1,8 @@
/** /**
* External dependencies * 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 * Internal dependencies
@ -23,22 +23,17 @@ export const Edit = ( {
return ( return (
<div className="wp-block-button aligncenter"> <div className="wp-block-button aligncenter">
<Button <EditableButton
{ ...blockProps } { ...blockProps }
className="wc-block-mini-cart__shopping-button" 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> </div>
); );
}; };

View File

@ -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;