Checkout Block: Avoid using editor buttons in the post content to prevent inheriting global styles

assets/js/blocks/cart-checkout-shared/payment-methods/no-payment-methods/index.js

@@ -2,10 +2,6 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Placeholder, Button } from 'wordpress-components';
-import { Icon, payment } from '@wordpress/icons';
-import { ADMIN_URL } from '@woocommerce/settings';
-import { useEditorContext } from '@woocommerce/base-context';
 import NoticeBanner from '@woocommerce/base-components/notice-banner';
 
 /**
@@ -17,50 +13,6 @@ import './style.scss';
  * Render content when no payment methods are found depending on context.
  */
 const NoPaymentMethods = () => {
-	const { isEditor } = useEditorContext();
-
-	return isEditor ? (
-		<NoPaymentMethodsPlaceholder />
-	) : (
-		<NoPaymentMethodsNotice />
-	);
-};
-
-/**
- * Renders a placeholder in the editor.
- */
-const NoPaymentMethodsPlaceholder = () => {
-	return (
-		<Placeholder
-			icon={ <Icon icon={ payment } /> }
-			label={ __( 'Payment methods', 'woo-gutenberg-products-block' ) }
-			className="wc-block-checkout__no-payment-methods-placeholder"
-		>
-			<span className="wc-block-checkout__no-payment-methods-placeholder-description">
-				{ __(
-					'Your store does not have any payment methods that support the Checkout block. Once you have configured a compatible payment method it will be displayed here.',
-					'woo-gutenberg-products-block'
-				) }
-			</span>
-			<Button
-				isSecondary
-				href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=checkout` }
-				target="_blank"
-				rel="noopener noreferrer"
-			>
-				{ __(
-					'Configure Payment Methods',
-					'woo-gutenberg-products-block'
-				) }
-			</Button>
-		</Placeholder>
-	);
-};
-
-/**
- * Renders a notice on the frontend.
- */
-const NoPaymentMethodsNotice = () => {
 	return (
 		<NoticeBanner
 			isDismissible={ false }

assets/js/blocks/cart-checkout-shared/payment-methods/no-payment-methods/style.scss

@@ -1,25 +1,3 @@
-.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;
-
-		.components-button {
-			background-color: $gray-900;
-			color: $white;
-		}
-
-		.wc-block-checkout__no-payment-methods-placeholder-description {
-			display: block;
-			margin: 0.25em 0 1em 0;
-		}
-	}
-}
-
 .components-notice.wc-block-checkout__no-payment-methods-notice {
-	margin-bottom: $gap;
+	margin: 0 0 $gap;
 }

assets/js/blocks/cart-checkout-shared/sidebar-notices/index.tsx

@@ -9,14 +9,12 @@ import {
 import { addFilter, hasFilter } from '@wordpress/hooks';
 import type { StoreDescriptor } from '@wordpress/data';
 import { CartCheckoutSidebarCompatibilityNotice } from '@woocommerce/editor-components/sidebar-compatibility-notice';
-import {
-	DefaultNotice,
-	LegacyNotice,
-} from '@woocommerce/editor-components/default-notice';
+import { NoPaymentMethodsNotice } from '@woocommerce/editor-components/no-payment-methods-notice';
+import { PAYMENT_STORE_KEY } from '@woocommerce/block-data';
+import { DefaultNotice } from '@woocommerce/editor-components/default-notice';
 import { IncompatiblePaymentGatewaysNotice } from '@woocommerce/editor-components/incompatible-payment-gateways-notice';
 import { useSelect } from '@wordpress/data';
 import { CartCheckoutFeedbackPrompt } from '@woocommerce/editor-components/feedback-prompt';
-import { isWcVersion } from '@woocommerce/settings';
 import { useState } from '@wordpress/element';
 declare module '@wordpress/editor' {
 	let store: StoreDescriptor;
@@ -32,7 +30,11 @@ declare module '@wordpress/block-editor' {
 
 const withSidebarNotices = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const { name: blockName, isSelected: isBlockSelected } = props;
+		const {
+			clientId,
+			name: blockName,
+			isSelected: isBlockSelected,
+		} = props;
 
 		const [
 			isIncompatiblePaymentGatewaysNoticeDismissed,
@@ -45,15 +47,8 @@ const withSidebarNotices = createHigherOrderComponent(
 			setIsIncompatiblePaymentGatewaysNoticeDismissed( isDismissed );
 		};
 
-		const addressFieldOrAccountBlocks = [
-			'woocommerce/checkout-shipping-address-block',
-			'woocommerce/checkout-billing-address-block',
-			'woocommerce/checkout-contact-information-block',
-			'woocommerce/checkout-fields-block',
-		];
-		const { clientId } = props;
-		const { isCart, isCheckout, isAddressFieldBlock } = useSelect(
-			( select ) => {
+		const { isCart, isCheckout, isPaymentMethodsBlock, hasPaymentMethods } =
+			useSelect( ( select ) => {
 				const { getBlockParentsByBlockName, getBlockName } =
 					select( blockEditorStore );
 				const parent = getBlockParentsByBlockName( clientId, [
@@ -68,58 +63,61 @@ const withSidebarNotices = createHigherOrderComponent(
 					isCheckout:
 						parent.includes( 'woocommerce/checkout' ) ||
 						currentBlockName === 'woocommerce/checkout',
-					isAddressFieldBlock:
-						addressFieldOrAccountBlocks.includes(
-							currentBlockName
-						),
+					isPaymentMethodsBlock:
+						currentBlockName ===
+						'woocommerce/checkout-payment-block',
+					hasPaymentMethods:
+						select(
+							PAYMENT_STORE_KEY
+						).paymentMethodsInitialized() &&
+						Object.keys(
+							select(
+								PAYMENT_STORE_KEY
+							).getAvailablePaymentMethods()
+						).length > 0,
 				};
-			}
-		);
-		const MakeAsDefaultNotice = () => (
-			<>
-				{ isWcVersion( '6.9.0', '>=' ) ? (
-					<DefaultNotice block={ isCheckout ? 'checkout' : 'cart' } />
-				) : (
-					<LegacyNotice block={ isCheckout ? 'checkout' : 'cart' } />
-				) }
-			</>
-		);
+			} );
 
 		// Show sidebar notices only when a WooCommerce block is selected.
-		if ( ! blockName.startsWith( 'woocommerce/' ) || ! isBlockSelected ) {
+		if (
+			! blockName.startsWith( 'woocommerce/' ) ||
+			! isBlockSelected ||
+			! ( isCart || isCheckout )
+		) {
 			return <BlockEdit key="edit" { ...props } />;
 		}
 
 		return (
 			<>
-				{ ( isCart || isCheckout ) && (
-					<InspectorControls>
-						<IncompatiblePaymentGatewaysNotice
-							toggleDismissedStatus={
-								toggleIncompatiblePaymentGatewaysNoticeDismissedStatus
-							}
-							block={
-								isCheckout
-									? 'woocommerce/checkout'
-									: 'woocommerce/cart'
-							}
-						/>
+				<InspectorControls>
+					<IncompatiblePaymentGatewaysNotice
+						toggleDismissedStatus={
+							toggleIncompatiblePaymentGatewaysNoticeDismissedStatus
+						}
+						block={
+							isCheckout
+								? 'woocommerce/checkout'
+								: 'woocommerce/cart'
+						}
+					/>
 
-						{ isIncompatiblePaymentGatewaysNoticeDismissed ? (
-							<>
-								<MakeAsDefaultNotice />
-								<CartCheckoutSidebarCompatibilityNotice
-									block={ isCheckout ? 'checkout' : 'cart' }
-								/>
-							</>
-						) : null }
+					{ isIncompatiblePaymentGatewaysNoticeDismissed ? (
+						<>
+							<DefaultNotice
+								block={ isCheckout ? 'checkout' : 'cart' }
+							/>
+							<CartCheckoutSidebarCompatibilityNotice
+								block={ isCheckout ? 'checkout' : 'cart' }
+							/>
+						</>
+					) : null }
 
-						{ isAddressFieldBlock ? null : (
-							<CartCheckoutFeedbackPrompt />
-						) }
-					</InspectorControls>
-				) }
+					{ isPaymentMethodsBlock && ! hasPaymentMethods && (
+						<NoPaymentMethodsNotice />
+					) }
 
+					<CartCheckoutFeedbackPrompt />
+				</InspectorControls>
 				<BlockEdit key="edit" { ...props } />
 			</>
 		);

assets/js/blocks/cart/inner-blocks/cart-express-payment-block/edit.tsx

@@ -1,12 +1,8 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { useBlockProps } from '@wordpress/block-editor';
-import { Placeholder, Button } from '@wordpress/components';
 import { useExpressPaymentMethods } from '@woocommerce/base-context/hooks';
-import { Icon, payment } from '@wordpress/icons';
-import { ADMIN_URL } from '@woocommerce/settings';
 import classnames from 'classnames';
 
 /**
@@ -15,38 +11,6 @@ import classnames from 'classnames';
 import Block from './block';
 import './editor.scss';
 
-/**
- * Renders a placeholder in the editor.
- */
-const NoExpressPaymentMethodsPlaceholder = () => {
-	return (
-		<Placeholder
-			icon={ <Icon icon={ payment } /> }
-			label={ __( 'Express Checkout', 'woo-gutenberg-products-block' ) }
-			className="wp-block-woocommerce-checkout-express-payment-block-placeholder"
-		>
-			<span className="wp-block-woocommerce-checkout-express-payment-block-placeholder__description">
-				{ __(
-					'Your store does not have any payment methods that support the Express Checkout block. Once you have configured a compatible payment method, it will be displayed here.',
-					'woo-gutenberg-products-block'
-				) }
-			</span>
-			<Button
-				isPrimary
-				href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=checkout` }
-				target="_blank"
-				rel="noopener noreferrer"
-				className="wp-block-woocommerce-checkout-express-payment-block-placeholder__button"
-			>
-				{ __(
-					'Configure Payment Methods',
-					'woo-gutenberg-products-block'
-				) }
-			</Button>
-		</Placeholder>
-	);
-};
-
 export const Edit = ( {
 	attributes,
 }: {
@@ -62,17 +26,13 @@ export const Edit = ( {
 	} );
 	const { className } = attributes;
 
-	if ( ! isInitialized ) {
+	if ( ! isInitialized || ! hasExpressPaymentMethods ) {
 		return null;
 	}
 
 	return (
 		<div { ...blockProps }>
-			{ hasExpressPaymentMethods ? (
-				<Block className={ className } />
-			) : (
-				<NoExpressPaymentMethodsPlaceholder />
-			) }
+			<Block className={ className } />
 		</div>
 	);
 };

assets/js/blocks/checkout/edit.tsx

@@ -21,7 +21,6 @@ import {
 } from '@wordpress/components';
 import { SlotFillProvider } from '@woocommerce/blocks-checkout';
 import type { TemplateArray } from '@wordpress/blocks';
-import { CartCheckoutFeedbackPrompt } from '@woocommerce/editor-components/feedback-prompt';
 
 /**
  * Internal dependencies
@@ -134,7 +133,6 @@ export const Edit = ( {
 					/>
 				) }
 			</PanelBody>
-			<CartCheckoutFeedbackPrompt />
 		</InspectorControls>
 	);
 	const blockProps = useBlockPropsWithLocking();

assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/edit.tsx

@@ -8,7 +8,6 @@ import { PanelBody, ExternalLink } from '@wordpress/components';
 import { ADMIN_URL } from '@woocommerce/settings';
 import { innerBlockAreas } from '@woocommerce/blocks-checkout';
 import Noninteractive from '@woocommerce/base-components/noninteractive';
-import { CartCheckoutFeedbackPrompt } from '@woocommerce/editor-components/feedback-prompt';
 
 /**
  * Internal dependencies
@@ -60,7 +59,6 @@ export const Edit = ( {
 						) }
 					</ExternalLink>
 				</PanelBody>
-				<CartCheckoutFeedbackPrompt />
 			</InspectorControls>
 			<Noninteractive>
 				<Block />