diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/index.js b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/index.js
index 1dc806a58f1..74fffaae9cf 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/index.js
+++ b/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';
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/no-payment-methods/index.js b/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/no-payment-methods/index.js
index bc5c16c72eb..b4b867c0561 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/no-payment-methods/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/no-payment-methods/index.js
@@ -34,9 +34,9 @@ const NoPaymentMethodsPlaceholder = () => {
}
label={ __( 'Payment methods', 'woo-gutenberg-products-block' ) }
- className="wc-block-checkout__no-payment-methods"
+ className="wc-block-checkout__no-payment-methods-placeholder"
>
-
+
{ __(
'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'
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/no-payment-methods/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/no-payment-methods/style.scss
index 244f706d8f1..71713e6648d 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/no-payment-methods/style.scss
+++ b/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;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss
index 0501ceb6881..ad22fe83163 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss
+++ b/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
+}
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js
index 28354dd1650..f3f62598e2b 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js
+++ b/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 ? (
-
+
) : (
{
'woo-gutenberg-products-block'
) }
>
-
+
+
+
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/no-shipping/index.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/no-shipping-placeholder/index.js
similarity index 81%
rename from plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/no-shipping/index.js
rename to plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/no-shipping-placeholder/index.js
index dd1adc2fca9..a38b7bcbf49 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/no-shipping/index.js
+++ b/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 (
}
label={ __( 'Shipping options', 'woo-gutenberg-products-block' ) }
- className="wc-block-checkout__no-shipping"
+ className="wc-block-checkout__no-shipping-placeholder"
>
-
+
{ __(
'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;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/no-shipping/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/no-shipping-placeholder/style.scss
similarity index 51%
rename from plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/no-shipping/style.scss
rename to plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/no-shipping-placeholder/style.scss
index 0c6d13fb8d0..4e96852a889 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/no-shipping/style.scss
+++ b/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;