Merge branch 'develop' into dev/hack-logging-enhancements

changelog/add-round-to-nearest-lowest-denomination-before-applying-rounding-from-settings

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+round to nearest lowest denominator instead of ceiling before applying currency rounding settings.

changelog/dev-10113-bump-e2e-dockerfile-php-xdebug-versions

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Update the PHP version and the Xdebug version used in the E2E testing environment.

changelog/dev-9966-e2e-convert-payment-gateways-confirmation-spec

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Update the Playwright Payment Gateways Confirmation spec and remove the Puppeteer Payment Gateways Confirmation spec.

changelog/dev-9967-convert-merchant-payment-settings-manual-capture-spec

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Converted a puppeteer spec to playwright
+
+

changelog/fix-10033-wporg-readme-updates

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Update WordPress.org readme.txt file

changelog/fix-change-font-size-pmme-checkout

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Checkout: Make sure the font size for PMME is smaller than the labels

changelog/fix-ece-refresh-blocks-on-cancel

@@ -0,0 +1,5 @@
+Significance: patch
+Type: update
+Comment: refactor: ECE refreshes blocks UI in all scenarios, taking into account selected shipping option
+
+

changelog/fix-tokenized-ece-applepay-delay

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fix
+Comment: fix: ensure the "add to cart" ECE call is completed before other calls are made.
+
+

changelog/improve-pmme-placement-shortcode

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Improve BNPL PMME and icon placement in shortcode checkout

client/checkout/api/test/index.test.js

@@ -28,6 +28,7 @@ const mockAppearance = {
 		'.Input': {},
 		'.Input--invalid': {},
 		'.Label': {},
+		'.Label--resting': {},
 		'.Tab': {},
 		'.Tab--selected': {},
 		'.Tab:hover': {},

client/checkout/blocks/payment-method-label.js

@@ -10,8 +10,8 @@ import { useStripeForUPE } from 'wcpay/hooks/use-stripe-async';
 import { getUPEConfig } from 'wcpay/utils/checkout';
 import { __ } from '@wordpress/i18n';
 import './style.scss';
-import { useEffect, useState } from '@wordpress/element';
-import { getAppearance } from 'wcpay/checkout/upe-styles';
+import { useEffect, useMemo, useState } from '@wordpress/element';
+import { getAppearance, getFontRulesFromPage } from 'wcpay/checkout/upe-styles';
 
 const bnplMethods = [ 'affirm', 'afterpay_clearpay', 'klarna' ];
 const PaymentMethodMessageWrapper = ( {
@@ -57,6 +57,8 @@ export default ( { api, title, countries, iconLight, iconDark, upeName } ) => {
 		getUPEConfig( 'wcBlocksUPEAppearanceTheme' )
 	);
 
+	const fontRules = useMemo( () => getFontRulesFromPage(), [] );
+
 	// Stripe expects the amount to be sent as the minor unit of 2 digits.
 	const amount = parseInt(
 		normalizeCurrencyToMinorUnit(
@@ -123,6 +125,7 @@ export default ( { api, title, countries, iconLight, iconDark, upeName } ) => {
 					stripe={ stripe }
 					options={ {
 						appearance: appearance,
+						fonts: fontRules,
 					} }
 				>
 					<PaymentMethodMessagingElement

client/checkout/classic/event-handlers.js

@@ -176,13 +176,39 @@ jQuery( function ( $ ) {
 				}
 
 				if ( targetLabel ) {
+					// wrapInner target label in a span.woopayments-inner-label if it's not already
+					let targetLabelInnerSpan = targetLabel.querySelector(
+						'span.woopayments-inner-label'
+					);
+					if ( ! targetLabelInnerSpan ) {
+						const targetLabelInner = targetLabel.innerHTML;
+						targetLabel.innerHTML = '';
+						targetLabelInnerSpan = document.createElement( 'span' );
+						targetLabelInnerSpan.classList.add(
+							'woopayments-inner-label'
+						);
+						targetLabelInnerSpan.innerHTML = targetLabelInner;
+						targetLabel.appendChild( targetLabelInnerSpan );
+					}
+
+					let spacer = targetLabel.querySelector( 'span.spacer' );
+					if ( ! spacer ) {
+						spacer = document.createElement( 'span' );
+						spacer.classList.add( 'spacer' );
+						spacer.innerHTML = ' ';
+						targetLabel.insertBefore(
+							spacer,
+							targetLabelInnerSpan
+						);
+					}
+
 					let container = document.getElementById( containerID );
 					if ( ! container ) {
 						container = document.createElement( 'span' );
 						container.id = containerID;
 						container.dataset.paymentMethodType = method;
 						container.classList.add( 'stripe-pmme-container' );
-						targetLabel.appendChild( container );
+						targetLabelInnerSpan.appendChild( container );
 					}
 
 					const currentCountry =

client/checkout/classic/style.scss

@@ -18,6 +18,7 @@
 	position: relative;
 }
 
+// Stripe Link button styles.
 .wcpay-checkout-email-field button.wcpay-stripelink-modal-trigger {
 	display: none;
 	position: absolute;
@@ -30,66 +31,111 @@
 	border: none;
 }
 
+// Logo styles.
 #payment .payment_methods {
-	li[class*='payment_method_woocommerce_payments'] label img {
-		float: right;
-		border: 0;
-		padding: 0;
-		height: 24px !important;
-		max-height: 24px !important;
+	li[class*='payment_method_woocommerce_payments'] label {
+		display: inline;
+		img {
+			float: right;
+			border: 0;
+			padding: 0;
+			height: 24px !important;
+			max-height: 24px !important;
+		}
 	}
 }
 
-li.wc_payment_method:has( .input-radio:not( :checked )
-		+ label
-		.stripe-pmme-container ) {
+// Payment methods with PMME styles.
+li.wc_payment_method:has( label .stripe-pmme-container ) {
 	display: grid;
-	grid-template-columns: min-content 1fr;
-	grid-template-rows: auto auto;
+	grid-template-columns: max-content 1fr;
+	grid-template-areas: 'li-input li-label'; // List Item grid.
 	align-items: baseline;
 
 	.input-radio {
-		grid-row: 1;
-		grid-column: 1;
+		grid-area: li-input;
 	}
 
-	label {
-		grid-column: 2;
-		grid-row: 1;
-	}
+	> label {
+		grid-area: li-label;
 
-	img {
-		grid-row: 1 / span 2;
-		align-self: center;
-	}
+		display: grid !important;
+		grid-template-columns: max-content 1fr;
+		grid-template-areas: 'label-spacer label-inner'; // Label grid.
 
-	.stripe-pmme-container {
-		width: 100%;
-		grid-column: 1;
-		grid-row-start: 2;
-		pointer-events: none;
-	}
+		> span.spacer {
+			grid-area: label-spacer;
+		}
+
+		> .woopayments-inner-label {
+			grid-area: label-inner;
+			display: grid;
+			grid-template-columns: 1fr max-content;
+			grid-template-areas:
+				'inner-text inner-logo'
+				'inner-pmme inner-logo'; // Inner label grid.
+			align-items: center;
+
+			> img {
+				grid-area: inner-logo;
+				justify-self: right;
+			}
 
-	.payment_box {
-		flex: 0 0 100%;
-		grid-row: 2;
-		grid-column: 1 / span 2;
+			> .stripe-pmme-container {
+				width: 100%;
+				grid-area: inner-pmme;
+				pointer-events: none;
+			}
+		}
 	}
 }
 
+// Hide the PMMe container when the payment method is checked.
 li.wc_payment_method:has( .input-radio:checked
 		+ label
 		.stripe-pmme-container ) {
-	display: block;
-
 	.input-radio:checked {
 		+ label {
 			.stripe-pmme-container {
 				display: none;
 			}
+		}
+	}
+}
+
+// Pseudo-element radio button compatibility.
+// Unfortunately, there is no direct way to detect the existence of pseudo-elements like ::before using CSS selectors,
+// so we use the theme class to add the necessary styles.
+.theme-storefront,
+.theme-twentytwenty,
+.theme-twentytwentyone,
+.theme-twentytwentytwo,
+.theme-twentytwentythree {
+	#payment {
+		.payment_methods {
+			> li.wc_payment_method {
+				// Storefront does not render the input radio button.
+				grid-template-areas: 'li-label'; // List Item grid for Storefront.
+				grid-template-columns: 1fr;
+
+				> input + label {
+					// Storefront uses a label::before for the radio button so we need to adjust the grid.
+					grid-template-areas: 'label-before label-spacer label-inner'; // Label grid for Storefront.
+					grid-template-columns: max-content max-content 1fr;
+				}
+
+				> input + label {
+					&::before {
+						grid-area: label-before;
+					}
+				}
+			}
 
-			img {
-				grid-column: 2;
+			// This makes sure labels that don't have the pmme container are displayed correctly.
+			li[class*='payment_method_woocommerce_payments'] {
+				> input + label {
+					display: block;
+				}
 			}
 		}
 	}