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:
parent
28c7bfc801
commit
ec19838355
|
@ -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 {
|
||||
InspectorControls,
|
||||
RichText,
|
||||
useBlockProps,
|
||||
} from '@wordpress/block-editor';
|
||||
import EditableButton from '@woocommerce/editor-components/editable-button';
|
||||
import { InspectorControls, 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">
|
||||
<RichText
|
||||
multiline={ false }
|
||||
allowedFormats={ [] }
|
||||
<EditableButton
|
||||
className="wc-block-cart__submit-button"
|
||||
value={ buttonLabel }
|
||||
placeholder={ defaultButtonLabel }
|
||||
onChange={ ( content ) => {
|
||||
|
@ -80,7 +74,6 @@ export const Edit = ( {
|
|||
} );
|
||||
} }
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -4,17 +4,13 @@
|
|||
import { useRef } from '@wordpress/element';
|
||||
import { useSelect } from '@wordpress/data';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import {
|
||||
InspectorControls,
|
||||
useBlockProps,
|
||||
RichText,
|
||||
} from '@wordpress/block-editor';
|
||||
import { InspectorControls, useBlockProps } 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">
|
||||
<RichText
|
||||
multiline={ false }
|
||||
allowedFormats={ [] }
|
||||
<EditableButton
|
||||
className="wc-block-cart__submit-button wc-block-components-checkout-place-order-button"
|
||||
value={ placeOrderButtonLabel }
|
||||
placeholder={ defaultPlaceOrderButtonLabel }
|
||||
onChange={ ( content ) => {
|
||||
|
@ -116,7 +110,6 @@ export const Edit = ( {
|
|||
} );
|
||||
} }
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -3,8 +3,8 @@
|
|||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { TotalsItem } from '@woocommerce/blocks-checkout';
|
||||
import Button from '@woocommerce/base-components/button';
|
||||
import { useBlockProps, RichText } from '@wordpress/block-editor';
|
||||
import EditableButton from '@woocommerce/editor-components/editable-button';
|
||||
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>
|
||||
<Button className="wc-block-mini-cart__footer-checkout">
|
||||
<RichText
|
||||
multiline={ false }
|
||||
allowedFormats={ [] }
|
||||
<EditableButton
|
||||
className="wc-block-mini-cart__footer-checkout"
|
||||
value={ checkoutButtonLabel }
|
||||
placeholder={ defaultCheckoutButtonLabel }
|
||||
onChange={ ( content ) => {
|
||||
|
@ -92,7 +85,6 @@ export const Edit = ( {
|
|||
} );
|
||||
} }
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
<PaymentEventsProvider>
|
||||
<PaymentMethodIconsElement />
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { useBlockProps, RichText } from '@wordpress/block-editor';
|
||||
import Button from '@woocommerce/base-components/button';
|
||||
import { useBlockProps } from '@wordpress/block-editor';
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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;
|
Loading…
Reference in New Issue