Mini-cart: add setting to not render the block on the cart & checkout pages

assets/js/blocks/mini-cart/edit.tsx

@@ -14,6 +14,7 @@ import { getSetting } from '@woocommerce/settings';
 import { __ } from '@wordpress/i18n';
 import Noninteractive from '@woocommerce/base-components/noninteractive';
 import type { ReactElement } from 'react';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -23,6 +24,7 @@ import QuantityBadge from './quantity-badge';
 interface Attributes {
 	addToCartBehaviour: string;
 	hasHiddenPrice: boolean;
+	cartAndCheckoutRenderStyle: boolean;
 }
 
 interface Props {
@@ -31,11 +33,14 @@ interface Props {
 }
 
 const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
-	const { addToCartBehaviour, hasHiddenPrice } = attributes;
+	const { addToCartBehaviour, hasHiddenPrice, cartAndCheckoutRenderStyle } =
+		attributes;
 	const blockProps = useBlockProps( {
 		className: `wc-block-mini-cart`,
 	} );
 
+	const isSiteEditor = useSelect( 'core/edit-site' ) !== undefined;
+
 	const templatePartEditUri = getSetting(
 		'templatePartEditUri',
 		''
@@ -54,6 +59,7 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
 					) }
 				>
 					<ToggleGroupControl
+						className="wc-block-mini-cart__add-to-cart-behaviour-toggle"
 						label={ __(
 							'Add-to-Cart behaviour',
 							'woo-gutenberg-products-block'
@@ -98,6 +104,40 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
 							} )
 						}
 					/>
+					{ isSiteEditor && (
+						<ToggleGroupControl
+							className="wc-block-mini-cart__render-in-cart-and-checkout-toggle"
+							label={ __(
+								'Mini Cart in cart and checkout pages',
+								'woo-gutenberg-products-block'
+							) }
+							value={ cartAndCheckoutRenderStyle }
+							onChange={ ( value ) => {
+								setAttributes( {
+									cartAndCheckoutRenderStyle: value,
+								} );
+							} }
+							help={ __(
+								'Select how the Mini Cart behaves in the Cart and Checkout pages. This might affect the header layout.',
+								'woo-gutenberg-products-block'
+							) }
+						>
+							<ToggleGroupControlOption
+								value={ 'hidden' }
+								label={ __(
+									'Hide',
+									'woo-gutenberg-products-block'
+								) }
+							/>
+							<ToggleGroupControlOption
+								value={ 'removed' }
+								label={ __(
+									'Remove',
+									'woo-gutenberg-products-block'
+								) }
+							/>
+						</ToggleGroupControl>
+					) }
 				</PanelBody>
 				{ templatePartEditUri && (
 					<PanelBody

assets/js/blocks/mini-cart/index.tsx

@@ -61,10 +61,12 @@ const settings: BlockConfiguration = {
 			type: 'boolean',
 			default: false,
 		},
+		cartAndCheckoutRenderStyle: {
+			type: 'string',
+			default: 'hidden',
+		},
 	},
-
 	edit,
-
 	save() {
 		return null;
 	},

assets/js/blocks/mini-cart/style.scss

@@ -219,3 +219,8 @@ h2.wc-block-mini-cart__title {
 		height: calc(100dvh - 32px);
 	}
 }
+
+.wc-block-mini-cart__add-to-cart-behaviour-toggle,
+.wc-block-mini-cart__render-in-cart-and-checkout-toggle {
+	width: 100%;
+}

src/BlockTypes/MiniCart.php

@@ -420,6 +420,10 @@ protected function get_markup( $attributes ) {
 		</span>';
 
 		if ( is_cart() || is_checkout() ) {
+			if ( $this->should_not_render_mini_cart( $attributes ) ) {
+				return '';
+			}
+
 			// It is not necessary to load the Mini Cart Block on Cart and Checkout page.
 			return '<div class="' . $wrapper_classes . '" style="visibility:hidden" aria-hidden="true">
 				<button class="wc-block-mini-cart__button" aria-label="' . esc_attr( $aria_label ) . '" disabled>' . $button_html . '</button>
@@ -567,4 +571,15 @@ public function register_empty_cart_message_block_pattern() {
 			)
 		);
 	}
+
+	/**
+	 * Returns whether the mini cart should be rendered or not.
+	 *
+	 * @param array $attributes Block attributes.
+	 *
+	 * @return bool
+	 */
+	public function should_not_render_mini_cart( array $attributes ) {
+		return isset( $attributes['cartAndCheckoutRenderStyle'] ) && 'hidden' !== $attributes['cartAndCheckoutRenderStyle'];
+	}
 }