fix: prevent classic checkout CSS from loading on blocks checkout

jimmyn · jimmyn · commit 0f25185077ec · 2025-10-09T16:49:41.000+02:00
- Added is_block_checkout_page() method to base WCMoneiPaymentGateway
  class
- Added check in WCGatewayMoneiCC and WCGatewayMoneiAppleGoogle to
  skip classic CSS enqueuing on blocks checkout
- Uses WC_Blocks_Utils::has_block_in_page() to detect blocks checkout
  at script enqueue time
- Prevents CSS conflicts between classic and blocks checkout
diff --git a/assets/css/monei-blocks-checkout.css b/assets/css/monei-blocks-checkout.css
@@ -10,7 +10,6 @@
 	font-size: 1em;
 	height: 3.125em;
 	line-height: 1;
-	margin: 0 0 0.75em 0;
 	min-height: 0;
 	padding: 0;
 	width: 100%;
@@ -68,9 +67,7 @@
 
 /* Label Container */
 .monei-label-container {
-	display: flex;
-	align-items: center;
-	gap: 1em;
+	display: block;
 }
 
 .monei-text {
diff --git a/src/Gateways/Abstracts/WCMoneiPaymentGateway.php b/src/Gateways/Abstracts/WCMoneiPaymentGateway.php
@@ -12,6 +12,7 @@
 use WC_Admin_Settings;
 use WC_Monei_Logger;
 use WC_Payment_Gateway;
+use WC_Blocks_Utils;
 
 if ( ! defined( 'ABSPATH' ) ) {
 	exit;
@@ -362,6 +363,30 @@ public function isBlockCheckout() {
 		return ( isset( $_POST['monei_is_block_checkout'] ) ) ? wc_clean( wp_unslash( $_POST['monei_is_block_checkout'] ) ) === 'yes' : false; // WPCS: CSRF ok.
 	}
 
+	/**
+	 * Check if the checkout page is using WooCommerce Blocks.
+	 * Used for script enqueuing to differentiate between classic and blocks checkout.
+	 *
+	 * @return bool
+	 */
+	public function is_block_checkout_page() {
+		if ( ! is_checkout() ) {
+			return false;
+		}
+		if ( ! class_exists( 'WC_Blocks_Utils' ) ) {
+			return false;
+		}
+		// Check if the checkout block is present
+		$has_block = WC_Blocks_Utils::has_block_in_page( wc_get_page_id( 'checkout' ), 'woocommerce/checkout' );
+
+		// Additional check: see if the traditional checkout shortcode is present
+		$checkout_page = get_post( wc_get_page_id( 'checkout' ) );
+		$has_shortcode = $checkout_page ? has_shortcode( $checkout_page->post_content, 'woocommerce_checkout' ) : false;
+
+		// If the block is present and the shortcode is not, we can be more confident it's a block checkout
+		return $has_block && ! $has_shortcode;
+	}
+
 	/**
 	 * Frontend MONEI generated token.
 	 *
diff --git a/src/Gateways/Abstracts/WCMoneiPaymentGatewayComponent.php b/src/Gateways/Abstracts/WCMoneiPaymentGatewayComponent.php
@@ -10,6 +10,7 @@
 use WC_Order;
 use WC_Payment_Tokens;
 use WC_Monei_Logger;
+use WC_Blocks_Utils;
 
 if ( ! defined( 'ABSPATH' ) ) {
 	exit;
@@ -292,6 +293,30 @@ public function isBlockCheckout() {
 		return ( isset( $_POST['monei_is_block_checkout'] ) ) ? wc_clean( wp_unslash( $_POST['monei_is_block_checkout'] ) ) === 'yes' : false; // WPCS: CSRF ok.
 	}
 
+	/**
+	 * Check if the checkout page is using WooCommerce Blocks.
+	 * Used for script enqueuing to differentiate between classic and blocks checkout.
+	 *
+	 * @return bool
+	 */
+	public function is_block_checkout_page() {
+		if ( ! is_checkout() ) {
+			return false;
+		}
+		if ( ! class_exists( 'WC_Blocks_Utils' ) ) {
+			return false;
+		}
+		// Check if the checkout block is present
+		$has_block = WC_Blocks_Utils::has_block_in_page( wc_get_page_id( 'checkout' ), 'woocommerce/checkout' );
+
+		// Additional check: see if the traditional checkout shortcode is present
+		$checkout_page = get_post( wc_get_page_id( 'checkout' ) );
+		$has_shortcode = $checkout_page ? has_shortcode( $checkout_page->post_content, 'woocommerce_checkout' ) : false;
+
+		// If the block is present and the shortcode is not, we can be more confident it's a block checkout
+		return $has_block && ! $has_shortcode;
+	}
+
 	/**
 	 * Frontend MONEI cardholderName.
 	 *
diff --git a/src/Gateways/PaymentMethods/WCGatewayMoneiAppleGoogle.php b/src/Gateways/PaymentMethods/WCGatewayMoneiAppleGoogle.php
@@ -170,6 +170,11 @@ public function monei_scripts() {
 			return;
 		}
 
+		// Don't load classic CSS on blocks checkout
+		if ( $this->is_block_checkout_page() ) {
+			return;
+		}
+
 		// Register and enqueue classic checkout CSS
 		wp_register_style(
 			'monei-classic-checkout',
diff --git a/src/Gateways/PaymentMethods/WCGatewayMoneiCC.php b/src/Gateways/PaymentMethods/WCGatewayMoneiCC.php
@@ -420,6 +420,11 @@ public function monei_scripts() {
 			return;
 		}
 
+		// Don't load classic CSS on blocks checkout
+		if ( $this->is_block_checkout_page() ) {
+			return;
+		}
+
 		// Register and enqueue classic checkout CSS
 		wp_register_style(
 			'monei-classic-checkout',
