Sync branch [skip ci]

Author: pirate-bot

assets/apps/customizer-controls/src/responsive-range/ResponsiveRangeComponent.js

@@ -36,7 +36,7 @@ const ResponsiveRangeComponent = ({ control }) => {
 	}, []);
 
 	const { label } = control.params;
-	const { hideResponsive, units, defaultVal, min, max } =
+	const { hideResponsive, units, defaultVal, min, max, unitsMax } =
 		control.params.input_attrs;
 
 	const suffixValue = () => {
@@ -58,6 +58,16 @@ const ResponsiveRangeComponent = ({ control }) => {
 
 	const isRelativeUnit = () => ['em', 'rem'].includes(suffixValue());
 
+	// Allow a different max per unit (e.g. 1200 for px but 100 for %).
+	const maxForUnit = (unit) => {
+		if (unitsMax && unit && unitsMax[unit] !== undefined) {
+			return unitsMax[unit];
+		}
+		return max || 100;
+	};
+
+	const currentMax = () => maxForUnit(suffixValue());
+
 	const unitButtons = () => {
 		if (!units) {
 			return null;
@@ -90,6 +100,12 @@ const ResponsiveRangeComponent = ({ control }) => {
 								nextValue[currentDevice]
 							);
 						}
+						// Clamp the value to the new unit's max (e.g. when
+						// switching from px to %, 600 becomes 100).
+						const unitMax = maxForUnit(unit);
+						if (nextValue[currentDevice] > unitMax) {
+							nextValue[currentDevice] = unitMax;
+						}
 						setValue(nextValue);
 						control.setting.set(JSON.stringify(nextValue));
 					}}
@@ -134,7 +150,7 @@ const ResponsiveRangeComponent = ({ control }) => {
 				<RangeControl
 					value={displayValue}
 					min={min || 0}
-					max={max || 100}
+					max={currentMax()}
 					step={isRelativeUnit() ? 0.1 : 1}
 					allowReset
 					onChange={(nextValue) => {

assets/js/src/frontend/navigation.js

@@ -19,6 +19,7 @@ export const initNavigation = () => {
 	handleMobileDropdowns();
 	handleSearch();
 	handleMiniCartPosition();
+	handleMiniCartMobileToggle();
 	window.HFG.initSearch = function () {
 		handleSearch();
 		handleMobileDropdowns();
@@ -224,20 +225,96 @@ function handleSearch() {
  * Handle the mini cart position in nav.
  */
 function handleMiniCartPosition() {
-	const item = document.querySelector('.header--row .menu-item-nav-cart');
-	if (item === null) {
+	const items = document.querySelectorAll('.header--row .menu-item-nav-cart');
+	if (items.length === 0) {
 		return;
 	}
-	const miniCart = item.querySelector('.nv-nav-cart:not(.cart-off-canvas)');
 
-	if (miniCart !== null) {
-		miniCart.style.left =
-			item.getBoundingClientRect().left < 350 ? 0 : null;
-	}
+	const isMobile = window.matchMedia('(max-width: 959px)').matches;
+	const sideSpacing = 2 * 16;
+
+	items.forEach((item) => {
+		const miniCart = item.querySelector(
+			'.nv-nav-cart:not(.cart-off-canvas)'
+		);
+
+		if (miniCart === null) {
+			return;
+		}
+
+		miniCart.style.left = '';
+		miniCart.style.right = '';
+
+		if (isMobile) {
+			const cartWidth = Math.min(360, window.innerWidth - sideSpacing);
+			const itemOffset = item.getBoundingClientRect().left;
+
+			miniCart.style.width = `${cartWidth}px`;
+			miniCart.style.maxWidth = `calc(100vw - ${sideSpacing}px)`;
+			miniCart.style.left = `${
+				(window.innerWidth - cartWidth) / 2 - itemOffset
+			}px`;
+			miniCart.style.right = 'auto';
+			return;
+		}
+
+		miniCart.style.width = '';
+		miniCart.style.maxWidth = '';
+		miniCart.style.left = item.getBoundingClientRect().left < 350 ? 0 : '';
+	});
 }
 
 window.addEventListener('resize', handleMiniCartPosition);
 
+/**
+ * Toggle the dropdown mini cart on tap for mobile.
+ *
+ * On desktop the dropdown mini cart opens on hover. Touch devices have no
+ * hover, so without this the cart icon would just follow its link to the cart
+ * page. Below the laptop breakpoint we toggle a `cart-dropdown-open` class on
+ * tap instead; the dropdown's appearance is reused from the desktop styles
+ * (see the woocommerce nav-cart styles), so customers can preview the cart and
+ * keep shopping. It closes on a second tap or when tapping outside of it.
+ */
+function handleMiniCartMobileToggle() {
+	const carts = document.querySelectorAll('.responsive-nav-cart.dropdown');
+	if (carts.length === 0) {
+		return;
+	}
+
+	// Mirrors the $laptop (960px) breakpoint where the hover dropdown applies.
+	const isMobile = () => window.matchMedia('(max-width: 959px)').matches;
+
+	carts.forEach((cart) => {
+		const openButton = cart.querySelector('.cart-icon-wrapper');
+		if (openButton === null) {
+			return;
+		}
+		openButton.addEventListener('click', function (e) {
+			if (!isMobile() || cart.classList.contains('cart-is-empty')) {
+				return;
+			}
+			e.preventDefault();
+			cart.classList.toggle('cart-dropdown-open');
+		});
+	});
+
+	// Close an open dropdown when tapping outside of it.
+	document.addEventListener('click', function (e) {
+		if (!isMobile()) {
+			return;
+		}
+		carts.forEach((cart) => {
+			if (
+				cart.classList.contains('cart-dropdown-open') &&
+				!cart.contains(e.target)
+			) {
+				cart.classList.remove('cart-dropdown-open');
+			}
+		});
+	});
+}
+
 /**
  * Create an overlay to allow closing.
  *

assets/scss/components/compat/woocommerce/_nav-cart.scss

@@ -165,6 +165,23 @@ $cart-width: 360px;
 	}
 }
 
+// Mobile: tapping the cart icon toggles `cart-dropdown-open` (see
+// navigation.js). The dropdown appearance is already defined above, so we only
+// need to reveal it here — reusing the same element and styles as the desktop.
+@media (max-width: 959px) {
+
+	.responsive-nav-cart.dropdown .nv-nav-cart:not(.cart-off-canvas) {
+		width: min(#{$cart-width}, calc(100vw - #{2 * $spacing-md}));
+		max-width: calc(100vw - #{2 * $spacing-md});
+	}
+
+	.responsive-nav-cart.dropdown.cart-dropdown-open .nv-nav-cart {
+		display: block;
+		opacity: 1;
+		visibility: visible;
+	}
+}
+
 @mixin nav-cart--laptop() {
 
 	.nv-nav-cart {

assets/scss/components/editor/_typography.scss

@@ -90,6 +90,7 @@ ul,
 ol {
 	padding-left: $spacing-md;
 	margin: $spacing-lg 0;
+	font-family: var(--bodyfontfamily);
 
 	li {
 		margin-top: $spacing-xs;
@@ -172,6 +173,7 @@ ol {
 th,
 td {
 	border: 0;
+	font-family: var(--bodyfontfamily);
 
 	// Allow align inside editor but make sure cells are left-aligned default
 	&:not([class*="has-text-align"]) {

assets/scss/components/main/_gutenberg.scss

@@ -46,10 +46,11 @@
 }
 
 .nv-sidebar-left,
-.nv-sidebar-right {
+.nv-sidebar-right,
+[class*="wp-block-"]:has(> [class*="wp-block-"]):not(.alignfull):not(.alignwide) {
 
-	.alignfull,
-	.alignwide {
+	:is(.alignfull, .alignwide) {
+		width: 100%;
 		max-width: 100%;
 		margin-left: auto;
 		margin-right: auto;

assets/scss/gutenberg-editor-style.scss

@@ -4,6 +4,7 @@
 .editor-styles-wrapper {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-family: var(--bodyfontfamily);
 
   &, > *:not(.block-canvas-cover) {
 	background-color: var(--nv-site-bg);

assets/scss/main/_gutenberg.scss

@@ -16,11 +16,25 @@
 body {
   &.nv-sidebar-left,
   &.nv-sidebar-right {
-	  .alignfull, .alignwide {
-		max-width: 100%;
-		margin-left: auto;
-		margin-right: auto;
-	  }
+    .alignfull,
+    .alignwide {
+      width: 100%;
+      max-width: 100%;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+}
+
+.wp-block-column,
+.is-layout-constrained:not(.alignfull):not(.alignwide),
+[class*="wp-block-"]:has(> [class*="wp-block-"]):not(.alignfull):not(.alignwide) {
+  .alignfull,
+  .alignwide {
+    width: 100%;
+    max-width: 100%;
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 

composer.lock

@@ -26,7 +26,7 @@ test.describe('Dashboard Notice', () => {
 
 		// Welcome screen
 		await expect(page.locator('h1')).toContainText(
-			'What type of website are you creating?'
+			'Choose a design'
 		);
 
 		const categories = await page.locator('.ob-cat-wrap .cat');

e2e-tests/specs/admin/tpc-notice-install.spec.ts

@@ -283,14 +283,26 @@ public function track_mm_settings( $menu_id ) {
 			}
 		}
 
-		Tracker::track(
-			array(
+		// Cache the active state and only send when it changes or the refresh window has elapsed.
+		// `wp_update_nav_menu` fires multiple times per save and the value is near-static per site,
+		// so sending unconditionally floods the tracking pipeline with duplicate readings.
+		$last  = get_option( 'neve_mm_active_state', null );
+		$now   = $has_mm ? 'yes' : 'no';
+		$stale = ! get_transient( 'neve_mm_tracked' );
+
+		if ( $now !== $last || $stale ) {
+			update_option( 'neve_mm_active_state', $now );
+			set_transient( 'neve_mm_tracked', 1, MONTH_IN_SECONDS );
+
+			Tracker::track(
 				array(
-					'feature'          => 'mega-menu-free',
-					'featureComponent' => 'is-active',
-					'featureValue'     => $has_mm,
-				),
-			)
-		);
+					array(
+						'feature'          => 'mega-menu-free',
+						'featureComponent' => 'is-active',
+						'featureValue'     => $has_mm,
+					),
+				)
+			);
+		}
 	}
 }