Disable checkout form in the editor (https://github.com/woocommerce/woocommerce-blocks/pull/2128)

* Move no-shipping-placeholder to block - allow pointer events

* Allow payments placeholder to have pointer events

* Enable pointer events for children

* Wrap checkout with disabled

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/index.js

@@ -2,7 +2,6 @@ export { default as AddressForm } from './address-form';
 export { default as Button } from './button';
 export { default as CheckoutForm } from './form';
 export { default as FormStep } from './form-step';
-export { default as NoShipping } from './no-shipping';
 export { default as PlaceOrderButton } from './place-order-button';
 export { default as Policies } from './policies';
 export { default as ProductImage } from './product-image';

plugins/woocommerce-blocks/assets/js/base/components/payment-methods/no-payment-methods/index.js

@@ -34,9 +34,9 @@ const NoPaymentMethodsPlaceholder = () => {
 		<Placeholder
 			icon={ <Icon srcElement={ card } /> }
 			label={ __( 'Payment methods', 'woo-gutenberg-products-block' ) }
-			className="wc-block-checkout__no-payment-methods"
+			className="wc-block-checkout__no-payment-methods-placeholder"
 		>
-			<span className="wc-block-checkout__no-payment-methods-description">
+			<span className="wc-block-checkout__no-payment-methods-placeholder-description">
 				{ __(
 					'Your store does not have any payment methods configured that support the checkout block. Once you have configured a compatible payment method (e.g. Stripe) it will be shown here.',
 					'woo-gutenberg-products-block'

plugins/woocommerce-blocks/assets/js/base/components/payment-methods/no-payment-methods/style.scss

@@ -1,6 +1,10 @@
-.components-placeholder.wc-block-checkout__no-payment-methods {
+.components-placeholder.wc-block-checkout__no-payment-methods-placeholder {
 	margin-bottom: $gap;
 
+	* {
+		pointer-events: all; // Overrides parent disabled component in editor context
+	}
+
 	.components-placeholder__fieldset {
 		display: block;
 
@@ -9,7 +13,7 @@
 			color: $white;
 		}
 
-		.wc-block-checkout__no-payment-methods-description {
+		.wc-block-checkout__no-payment-methods-placeholder-description {
 			display: block;
 			margin: 0.25em 0 1em 0;
 			font-size: 13px;

plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss

@@ -151,3 +151,7 @@
 .wc-blocks-credit-card-images {
 	padding-top: $gap-small;
 }
+
+.wc-block-components-checkout-payment-methods * {
+	pointer-events: all; // Overrides parent disabled component in editor context
+}

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js

@@ -8,7 +8,6 @@ import {
 	AddressForm,
 	FormStep,
 	CheckoutForm,
-	NoShipping,
 	PlaceOrderButton,
 	Policies,
 	ReturnToCartButton,
@@ -42,8 +41,9 @@ import withScrollToTop from '@woocommerce/base-hocs/with-scroll-to-top';
 /**
  * Internal dependencies
  */
-import CheckoutSidebar from './sidebar/index.js';
-import CheckoutOrderError from './checkout-order-error/index.js';
+import CheckoutSidebar from './sidebar';
+import CheckoutOrderError from './checkout-order-error';
+import NoShippingPlaceholder from './no-shipping-placeholder';
 import './style.scss';
 
 const Block = ( props ) => (
@@ -294,7 +294,7 @@ const Checkout = ( {
 								) }
 							>
 								{ shippingRates.length === 0 && isEditor ? (
-									<NoShipping />
+									<NoShippingPlaceholder />
 								) : (
 									<ShippingRatesControl
 										address={

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/edit.js

@@ -14,6 +14,7 @@ import {
 	CheckboxControl,
 	SelectControl,
 	Notice,
+	Disabled,
 } from '@wordpress/components';
 import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundary';
 import {
@@ -293,15 +294,19 @@ const CheckoutEditor = ( { attributes, setAttributes } ) => {
 						'woo-gutenberg-products-block'
 					) }
 				>
-					<Block
-						attributes={ attributes }
-						cartItems={ previewCart.items }
-						cartTotals={ previewCart.totals }
-						isEditor={ true }
-						shippingRates={
-							SHIPPING_METHODS_EXIST ? previewShippingRates : []
-						}
-					/>
+					<Disabled>
+						<Block
+							attributes={ attributes }
+							cartItems={ previewCart.items }
+							cartTotals={ previewCart.totals }
+							isEditor={ true }
+							shippingRates={
+								SHIPPING_METHODS_EXIST
+									? previewShippingRates
+									: []
+							}
+						/>
+					</Disabled>
 				</BlockErrorBoundary>
 			</div>
 		</EditorProvider>

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/no-shipping-placeholder/index.js

@@ -11,14 +11,14 @@ import { ADMIN_URL } from '@woocommerce/settings';
  */
 import './style.scss';
 
-const NoShipping = () => {
+const NoShippingPlaceholder = () => {
 	return (
 		<Placeholder
 			icon={ <Icon srcElement={ truck } /> }
 			label={ __( 'Shipping options', 'woo-gutenberg-products-block' ) }
-			className="wc-block-checkout__no-shipping"
+			className="wc-block-checkout__no-shipping-placeholder"
 		>
-			<span className="wc-block-checkout__no-shipping-description">
+			<span className="wc-block-checkout__no-shipping-placeholder-description">
 				{ __(
 					'Your store does not have any Shipping Options configured. Once you have added your Shipping Options they will appear here.',
 					'woo-gutenberg-products-block'
@@ -39,4 +39,4 @@ const NoShipping = () => {
 	);
 };
 
-export default NoShipping;
+export default NoShippingPlaceholder;

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/no-shipping-placeholder/style.scss

@@ -1,6 +1,10 @@
-.components-placeholder.wc-block-checkout__no-shipping {
+.components-placeholder.wc-block-checkout__no-shipping-placeholder {
 	margin-bottom: $gap;
 
+	* {
+		pointer-events: all; // Overrides parent disabled component in editor context
+	}
+
 	.components-placeholder__fieldset {
 		display: block;
 
@@ -9,7 +13,7 @@
 			color: $white;
 		}
 
-		.wc-block-checkout__no-shipping-description {
+		.wc-block-checkout__no-shipping-placeholder-description {
 			display: block;
 			margin: 0.25em 0 1em 0;
 			font-size: 13px;