Add custom className support to Checkout Inner Blocks (#4978)

* Pass classname from DOM to react components * Actions Block ClassName support * Form step field classname support * Payment block className support * Classname support for fields and totals * Order summary classname support * Classname support for order note block * Express payment classname support * Terms block custom class * Let useBlockProps handle class in actions block
woocommerce · Oct 20, 2021 · d761be1 · d761be1
1 parent 2204176
commit d761be1
Show file tree

Hide file tree

Showing 35 changed files with 237 additions and 66 deletions.
diff --git a/assets/js/atomic/utils/render-parent-block.tsx b/assets/js/atomic/utils/render-parent-block.tsx
@@ -123,6 +123,7 @@ const renderInnerBlocks = ( {
 		const { blockName = '', ...componentProps } = {
 			key: `${ block }_${ depth }_${ index }`,
 			...( element instanceof HTMLElement ? element.dataset : {} ),
+			className: element.className || '',
 		};
 
 		const InnerBlockComponent = getBlockComponentFromMap(

diff --git a/assets/js/base/components/sidebar-layout/main.js b/assets/js/base/components/sidebar-layout/main.js
@@ -1,19 +1,18 @@
 /**
  * External dependencies
  */
+import { forwardRef } from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 
-const Main = ( { children, className } ) => {
+const Main = forwardRef( ( { children, className = '' }, ref ) => {
 	return (
-		<div className={ classNames( 'wc-block-components-main', className ) }>
+		<div
+			ref={ ref }
+			className={ classNames( 'wc-block-components-main', className ) }
+		>
 			{ children }
 		</div>
 	);
-};
-
-Main.propTypes = {
-	className: PropTypes.string,
-};
+} );
 
 export default Main;
diff --git a/assets/js/base/components/sidebar-layout/sidebar.js b/assets/js/base/components/sidebar-layout/sidebar.js
@@ -1,21 +1,18 @@
 /**
  * External dependencies
  */
+import { forwardRef } from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 
-const Sidebar = ( { children, className } ) => {
+const Sidebar = forwardRef( ( { children, className = '' }, ref ) => {
 	return (
 		<div
+			ref={ ref }
 			className={ classNames( 'wc-block-components-sidebar', className ) }
 		>
 			{ children }
 		</div>
 	);
-};
-
-Sidebar.propTypes = {
-	className: PropTypes.string,
-};
+} );
 
 export default Sidebar;
diff --git a/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-actions-block/attributes.tsx b/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-actions-block/attributes.tsx
@@ -7,6 +7,10 @@ export default {
 		type: 'boolean',
 		default: true,
 	},
+	className: {
+		type: 'string',
+		default: '',
+	},
 	lock: {
 		type: 'object',
 		default: {

diff --git a/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-actions-block/block.tsx b/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-actions-block/block.tsx
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { getSetting } from '@woocommerce/settings';
 import {
 	PlaceOrderButton,
@@ -15,12 +16,16 @@ import './style.scss';
 const Block = ( {
 	cartPageId,
 	showReturnToCart,
+	className,
 }: {
 	cartPageId: number;
 	showReturnToCart: boolean;
+	className?: string;
 } ): JSX.Element => {
 	return (
-		<div className="wc-block-checkout__actions">
+		<div
+			className={ classnames( 'wc-block-checkout__actions', className ) }
+		>
 			{ showReturnToCart && (
 				<ReturnToCartButton
 					link={ getSetting( 'page-' + cartPageId, false ) }

diff --git a/.../blocks/cart-checkout/checkout/inner-blocks/checkout-billing-address-block/attributes.tsx b/.../blocks/cart-checkout/checkout/inner-blocks/checkout-billing-address-block/attributes.tsx
@@ -16,6 +16,10 @@ export default {
 			'woo-gutenberg-products-block'
 		),
 	} ),
+	className: {
+		type: 'string',
+		default: '',
+	},
 	lock: {
 		type: 'object',
 		default: {

diff --git a/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-billing-address-block/edit.tsx b/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-billing-address-block/edit.tsx
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { useBlockProps } from '@wordpress/block-editor';
 import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
 import { innerBlockAreas } from '@woocommerce/blocks-checkout';
@@ -27,6 +28,7 @@ export const Edit = ( {
 		title: string;
 		description: string;
 		showStepNumber: boolean;
+		className: string;
 	};
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 } ): JSX.Element | null => {
@@ -50,7 +52,10 @@ export const Edit = ( {
 		<FormStepBlock
 			setAttributes={ setAttributes }
 			attributes={ attributes }
-			className="wc-block-checkout__billing-fields"
+			className={ classnames(
+				'wc-block-checkout__billing-fields',
+				attributes?.className
+			) }
 		>
 			<Controls />
 			<Block

diff --git a/...js/blocks/cart-checkout/checkout/inner-blocks/checkout-billing-address-block/frontend.tsx b/...js/blocks/cart-checkout/checkout/inner-blocks/checkout-billing-address-block/frontend.tsx
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import withFilteredAttributes from '@woocommerce/base-hocs/with-filtered-attributes';
 import { FormStep } from '@woocommerce/base-components/cart-checkout';
 import { useCheckoutContext } from '@woocommerce/base-context';
@@ -18,11 +19,13 @@ const FrontendBlock = ( {
 	description,
 	showStepNumber,
 	children,
+	className,
 }: {
 	title: string;
 	description: string;
 	showStepNumber: boolean;
 	children: JSX.Element;
+	className?: string;
 } ): JSX.Element | null => {
 	const { isProcessing: checkoutIsProcessing } = useCheckoutContext();
 	const { showBillingFields } = useCheckoutAddress();
@@ -42,7 +45,10 @@ const FrontendBlock = ( {
 		<FormStep
 			id="billing-fields"
 			disabled={ checkoutIsProcessing }
-			className="wc-block-checkout__billing-fields"
+			className={ classnames(
+				'wc-block-checkout__billing-fields',
+				className
+			) }
 			title={ title }
 			description={ description }
 			showStepNumber={ showStepNumber }

diff --git a/...cks/cart-checkout/checkout/inner-blocks/checkout-contact-information-block/attributes.tsx b/...cks/cart-checkout/checkout/inner-blocks/checkout-contact-information-block/attributes.tsx
@@ -19,6 +19,10 @@ export default {
 			'woo-gutenberg-products-block'
 		),
 	} ),
+	className: {
+		type: 'string',
+		default: '',
+	},
 	lock: {
 		type: 'object',
 		default: {

diff --git a/...js/blocks/cart-checkout/checkout/inner-blocks/checkout-contact-information-block/edit.tsx b/...js/blocks/cart-checkout/checkout/inner-blocks/checkout-contact-information-block/edit.tsx
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { useBlockProps } from '@wordpress/block-editor';
 import { Disabled } from '@wordpress/components';
 import { innerBlockAreas } from '@woocommerce/blocks-checkout';
@@ -27,6 +28,7 @@ export const Edit = ( {
 		title: string;
 		description: string;
 		showStepNumber: boolean;
+		className: string;
 	};
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 } ): JSX.Element => {
@@ -36,6 +38,10 @@ export const Edit = ( {
 		<FormStepBlock
 			attributes={ attributes }
 			setAttributes={ setAttributes }
+			className={ classnames(
+				'wc-block-checkout__contact-fields',
+				attributes?.className
+			) }
 		>
 			<Controls />
 			<Disabled>

diff --git a/...locks/cart-checkout/checkout/inner-blocks/checkout-contact-information-block/frontend.tsx b/...locks/cart-checkout/checkout/inner-blocks/checkout-contact-information-block/frontend.tsx
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import withFilteredAttributes from '@woocommerce/base-hocs/with-filtered-attributes';
 import { FormStep } from '@woocommerce/base-components/cart-checkout';
 import { useCheckoutContext } from '@woocommerce/base-context';
@@ -18,12 +19,14 @@ const FrontendBlock = ( {
 	description,
 	showStepNumber,
 	children,
+	className,
 }: {
 	title: string;
 	description: string;
 	allowCreateAccount: boolean;
 	showStepNumber: boolean;
 	children: JSX.Element;
+	className?: string;
 } ) => {
 	const { isProcessing: checkoutIsProcessing } = useCheckoutContext();
 	const { allowCreateAccount } = useCheckoutBlockContext();
@@ -32,7 +35,10 @@ const FrontendBlock = ( {
 		<FormStep
 			id="contact-fields"
 			disabled={ checkoutIsProcessing }
-			className="wc-block-checkout__contact-fields"
+			className={ classnames(
+				'wc-block-checkout__contact-fields',
+				className
+			) }
 			title={ title }
 			description={ description }
 			showStepNumber={ showStepNumber }

diff --git a/...s/js/blocks/cart-checkout/checkout/inner-blocks/checkout-express-payment-block/block.json b/...s/js/blocks/cart-checkout/checkout/inner-blocks/checkout-express-payment-block/block.json
@@ -12,6 +12,10 @@
 		"inserter": false
 	},
 	"attributes": {
+		"className": {
+			"type": "string",
+			"default": ""
+		},
 		"lock": {
 			"type": "object",
 			"default": {

diff --git a/...ts/js/blocks/cart-checkout/checkout/inner-blocks/checkout-express-payment-block/block.tsx b/...ts/js/blocks/cart-checkout/checkout/inner-blocks/checkout-express-payment-block/block.tsx
@@ -8,14 +8,18 @@ import { useStoreCart } from '@woocommerce/base-context/hooks';
  */
 import { CheckoutExpressPayment } from '../../../payment-methods';
 
-const Block = (): JSX.Element | null => {
+const Block = ( { className }: { className?: string } ): JSX.Element | null => {
 	const { cartNeedsPayment } = useStoreCart();
 
 	if ( ! cartNeedsPayment ) {
 		return null;
 	}
 
-	return <CheckoutExpressPayment />;
+	return (
+		<div className={ className }>
+			<CheckoutExpressPayment />
+		</div>
+	);
 };
 
 export default Block;
diff --git a/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-express-payment-block/edit.tsx b/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-express-payment-block/edit.tsx
@@ -51,6 +51,7 @@ export const Edit = ( {
 	attributes,
 }: {
 	attributes: {
+		className?: string;
 		lock: {
 			move: boolean;
 			remove: boolean;
@@ -60,9 +61,12 @@ export const Edit = ( {
 	const { paymentMethods, isInitialized } = useExpressPaymentMethods();
 	const hasExpressPaymentMethods = Object.keys( paymentMethods ).length > 0;
 	const blockProps = useBlockProps( {
-		className: classnames( {
-			'wp-block-woocommerce-checkout-express-payment-block--has-express-payment-methods': hasExpressPaymentMethods,
-		} ),
+		className: classnames(
+			{
+				'wp-block-woocommerce-checkout-express-payment-block--has-express-payment-methods': hasExpressPaymentMethods,
+			},
+			attributes?.className
+		),
 		attributes,
 	} );
 

diff --git a/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-fields-block/block.json b/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-fields-block/block.json
@@ -12,6 +12,10 @@
 		"inserter": false
 	},
 	"attributes": {
+		"className": {
+			"type": "string",
+			"default": ""
+		},
 		"lock": {
 			"type": "object",
 			"default": {

diff --git a/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-fields-block/edit.tsx b/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-fields-block/edit.tsx
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 import { Main } from '@woocommerce/base-components/sidebar-layout';
 import { innerBlockAreas } from '@woocommerce/blocks-checkout';
@@ -16,8 +17,21 @@ import {
 import { useForcedLayout, getAllowedBlocks } from '../../../shared';
 import './style.scss';
 
-export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
-	const blockProps = useBlockProps();
+export const Edit = ( {
+	clientId,
+	attributes,
+}: {
+	clientId: string;
+	attributes: {
+		className?: string;
+	};
+} ): JSX.Element => {
+	const blockProps = useBlockProps( {
+		className: classnames(
+			'wc-block-checkout__main',
+			attributes?.className
+		),
+	} );
 	const {
 		showOrderNotes,
 		showPolicyLinks,
@@ -60,18 +74,16 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 	} );
 
 	return (
-		<Main className="wc-block-checkout__main">
-			<div { ...blockProps }>
-				<Controls />
-				<form className="wc-block-components-form wc-block-checkout__form">
-					<InnerBlocks
-						allowedBlocks={ allowedBlocks }
-						templateLock={ false }
-						template={ defaultTemplate }
-						renderAppender={ InnerBlocks.ButtonBlockAppender }
-					/>
-				</form>
-			</div>
+		<Main { ...blockProps }>
+			<Controls />
+			<form className="wc-block-components-form wc-block-checkout__form">
+				<InnerBlocks
+					allowedBlocks={ allowedBlocks }
+					templateLock={ false }
+					template={ defaultTemplate }
+					renderAppender={ InnerBlocks.ButtonBlockAppender }
+				/>
+			</form>
 		</Main>
 	);
 };

diff --git a/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-fields-block/frontend.tsx b/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-fields-block/frontend.tsx
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { Main } from '@woocommerce/base-components/sidebar-layout';
 
 /**
@@ -10,11 +11,13 @@ import './style.scss';
 
 const FrontendBlock = ( {
 	children,
+	className,
 }: {
 	children: JSX.Element;
+	className?: string;
 } ): JSX.Element => {
 	return (
-		<Main className="wc-block-checkout__main">
+		<Main className={ classnames( 'wc-block-checkout__main', className ) }>
 			<form className="wc-block-components-form wc-block-checkout__form">
 				{ children }
 			</form>