From 1ff9b24343978b276be42cbb812e96fd315f3940 Mon Sep 17 00:00:00 2001 From: Alex Florisca Date: Tue, 22 Nov 2022 16:58:10 +0000 Subject: [PATCH 1/4] Edit Proceed to Checkout button --- .../proceed-to-checkout-block/attributes.tsx | 4 +++ .../proceed-to-checkout-block/block.tsx | 5 +++- .../proceed-to-checkout-block/edit.tsx | 30 +++++++++++++------ 3 files changed, 29 insertions(+), 10 deletions(-) diff --git a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx index 845d3af9f5f..54afad72520 100644 --- a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx +++ b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx @@ -10,4 +10,8 @@ export default { remove: true, }, }, + buttonLabel: { + type: 'string', + default: 'Proceed to Checkout', + }, }; diff --git a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx index 86ffa47fc25..a3c139f62b3 100644 --- a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx +++ b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx @@ -22,9 +22,11 @@ import './style.scss'; const Block = ( { checkoutPageId, className, + buttonLabel, }: { checkoutPageId: number; className: string; + buttonLabel: string; } ): JSX.Element => { const link = getSetting( 'page-' + checkoutPageId, false ); const isCalculating = useSelect( ( select ) => @@ -64,7 +66,8 @@ const Block = ( { onClick={ () => setShowSpinner( true ) } showSpinner={ showSpinner } > - { __( 'Proceed to Checkout', 'woo-gutenberg-products-block' ) } + { buttonLabel || + __( 'Proceed to Checkout', 'woo-gutenberg-products-block' ) } ); diff --git a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx index 8e247fbbb49..020db900472 100644 --- a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx +++ b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx @@ -4,14 +4,18 @@ import { useRef } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; -import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; +import Button from '@woocommerce/base-components/button'; +import { + InspectorControls, + RichText, + useBlockProps, +} from '@wordpress/block-editor'; import PageSelector from '@woocommerce/editor-components/page-selector'; import { CART_PAGE_ID } from '@woocommerce/block-settings'; -import Noninteractive from '@woocommerce/base-components/noninteractive'; + /** * Internal dependencies */ -import Block from './block'; export const Edit = ( { attributes, setAttributes, @@ -19,12 +23,16 @@ export const Edit = ( { attributes: { checkoutPageId: number; className: string; + buttonLabel: string; }; setAttributes: ( attributes: Record< string, unknown > ) => void; } ): JSX.Element => { const blockProps = useBlockProps(); - const { checkoutPageId = 0, className } = attributes; + const { checkoutPageId = 0, buttonLabel } = attributes; const { current: savedCheckoutPageId } = useRef( checkoutPageId ); + + // console.log( 'buttonLabel', buttonLabel ); + const currentPostId = useSelect( ( select ) => { if ( ! savedCheckoutPageId ) { @@ -60,12 +68,16 @@ export const Edit = ( { /> ) } - - + + setAttributes( { buttonLabel: content } ) + } /> - + ); }; From 76808ec86ad7997990230f6fc3c0e7445ed0c7da Mon Sep 17 00:00:00 2001 From: Alex Florisca Date: Mon, 28 Nov 2022 17:16:09 +0000 Subject: [PATCH 2/4] Don't allow empty button and remove console log --- .../proceed-to-checkout-block/attributes.tsx | 7 ++++++- .../proceed-to-checkout-block/edit.tsx | 19 ++++++++++++++----- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx index 54afad72520..429e4c89ea8 100644 --- a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx +++ b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; + export default { checkoutPageId: { type: 'number', @@ -12,6 +17,6 @@ export default { }, buttonLabel: { type: 'string', - default: 'Proceed to Checkout', + default: __( 'Proceed to Checkout', 'woo-gutenberg-products-block' ), }, }; diff --git a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx index 020db900472..7fff22df1f3 100644 --- a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx +++ b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx @@ -31,8 +31,6 @@ export const Edit = ( { const { checkoutPageId = 0, buttonLabel } = attributes; const { current: savedCheckoutPageId } = useRef( checkoutPageId ); - // console.log( 'buttonLabel', buttonLabel ); - const currentPostId = useSelect( ( select ) => { if ( ! savedCheckoutPageId ) { @@ -73,9 +71,20 @@ export const Edit = ( { multiline={ false } allowedFormats={ [] } value={ buttonLabel } - onChange={ ( content ) => - setAttributes( { buttonLabel: content } ) - } + onChange={ ( content ) => { + if ( content === '' ) { + setAttributes( { + buttonLabel: __( + 'Proceed to Checkout', + 'woo-gutenberg-products-block' + ), + } ); + } else { + setAttributes( { + buttonLabel: content, + } ); + } + } } /> From 1fbb6081ee35c807c0ff1650bb9ded516655a2b1 Mon Sep 17 00:00:00 2001 From: Alex Florisca Date: Mon, 28 Nov 2022 17:23:04 +0000 Subject: [PATCH 3/4] extract default button label into a variable --- .../proceed-to-checkout-block/attributes.tsx | 6 +++--- .../inner-blocks/proceed-to-checkout-block/block.tsx | 8 ++++++-- .../cart/inner-blocks/proceed-to-checkout-block/edit.tsx | 9 ++++----- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx index 429e4c89ea8..2caffddf401 100644 --- a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx +++ b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx @@ -1,7 +1,7 @@ /** - * External dependencies + * Internal dependencies */ -import { __ } from '@wordpress/i18n'; +import { defaultButtonLabel } from './block'; export default { checkoutPageId: { @@ -17,6 +17,6 @@ export default { }, buttonLabel: { type: 'string', - default: __( 'Proceed to Checkout', 'woo-gutenberg-products-block' ), + default: defaultButtonLabel, }, }; diff --git a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx index a3c139f62b3..fb6d1599dc7 100644 --- a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx +++ b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx @@ -16,6 +16,11 @@ import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data'; */ import './style.scss'; +export const defaultButtonLabel = __( + 'Proceed to Checkout', + 'woo-gutenberg-products-block' +); + /** * Checkout button rendered in the full cart page. */ @@ -66,8 +71,7 @@ const Block = ( { onClick={ () => setShowSpinner( true ) } showSpinner={ showSpinner } > - { buttonLabel || - __( 'Proceed to Checkout', 'woo-gutenberg-products-block' ) } + { buttonLabel || defaultButtonLabel } ); diff --git a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx index 7fff22df1f3..3a121cc7226 100644 --- a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx +++ b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx @@ -16,6 +16,8 @@ import { CART_PAGE_ID } from '@woocommerce/block-settings'; /** * Internal dependencies */ +import { defaultButtonLabel } from './block'; + export const Edit = ( { attributes, setAttributes, @@ -50,7 +52,7 @@ export const Edit = ( { ) && ( + setPageId={ ( id: number ) => setAttributes( { checkoutPageId: id } ) } labels={ { @@ -74,10 +76,7 @@ export const Edit = ( { onChange={ ( content ) => { if ( content === '' ) { setAttributes( { - buttonLabel: __( - 'Proceed to Checkout', - 'woo-gutenberg-products-block' - ), + buttonLabel: defaultButtonLabel, } ); } else { setAttributes( { From 7fbca4ba305269d7f21fca0c28b6929c92333891 Mon Sep 17 00:00:00 2001 From: Alex Florisca Date: Wed, 30 Nov 2022 12:50:58 +0000 Subject: [PATCH 4/4] Feedback from Nadir & Niels --- .../proceed-to-checkout-block/attributes.tsx | 2 +- .../proceed-to-checkout-block/block.tsx | 7 +------ .../proceed-to-checkout-block/constants.tsx | 9 +++++++++ .../proceed-to-checkout-block/edit.tsx | 15 +++++---------- 4 files changed, 16 insertions(+), 17 deletions(-) create mode 100644 assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/constants.tsx diff --git a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx index 2caffddf401..af502dd51c4 100644 --- a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx +++ b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import { defaultButtonLabel } from './block'; +import { defaultButtonLabel } from './constants'; export default { checkoutPageId: { diff --git a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx index fb6d1599dc7..7b217647ebf 100644 --- a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx +++ b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx @@ -1,7 +1,6 @@ /** * External dependencies */ -import { __ } from '@wordpress/i18n'; import classnames from 'classnames'; import { useState, useEffect } from '@wordpress/element'; import Button from '@woocommerce/base-components/button'; @@ -15,11 +14,7 @@ import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data'; * Internal dependencies */ import './style.scss'; - -export const defaultButtonLabel = __( - 'Proceed to Checkout', - 'woo-gutenberg-products-block' -); +import { defaultButtonLabel } from './constants'; /** * Checkout button rendered in the full cart page. diff --git a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/constants.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/constants.tsx new file mode 100644 index 00000000000..f538e9d5c35 --- /dev/null +++ b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/constants.tsx @@ -0,0 +1,9 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; + +export const defaultButtonLabel = __( + 'Proceed to Checkout', + 'woo-gutenberg-products-block' +); diff --git a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx index 3a121cc7226..62e9d5376d3 100644 --- a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx +++ b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx @@ -16,7 +16,7 @@ import { CART_PAGE_ID } from '@woocommerce/block-settings'; /** * Internal dependencies */ -import { defaultButtonLabel } from './block'; +import { defaultButtonLabel } from './constants'; export const Edit = ( { attributes, @@ -73,16 +73,11 @@ export const Edit = ( { multiline={ false } allowedFormats={ [] } value={ buttonLabel } + placeholder={ defaultButtonLabel } onChange={ ( content ) => { - if ( content === '' ) { - setAttributes( { - buttonLabel: defaultButtonLabel, - } ); - } else { - setAttributes( { - buttonLabel: content, - } ); - } + setAttributes( { + buttonLabel: content, + } ); } } />