MOOSE-333: Scroll vertical tabs into view on mobile after selection #306

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

Jan 29, 2026

CHANGELOG.md

-Original file line number
+Diff line change
@@ Expand Up / @@ -6,6 +6,7 @@ item (Added, Changed, Depreciated, Removed, Fixed, Security). @@
     ## [2026.01]
+    - Fixed: Vertical Tabs block now scrolls the selected tab into view on mobile, respecting reduced motion preferences. [MOOSE-333](https://moderntribe.atlassian.net/browse/MOOSE-333)
     - Fixed: Removed top margin from spacer block
     - Added: Yoast Duplicate Post plugin v4.5 for easier content duplication in the editor.
     - Updated: Login logo styling
@@ Expand Down @@

wp-content/themes/core/assets/js/utils/tabs.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -194,6 +194,17 @@ const switchTabs = ( targetTabButton ) => { @@
     			tabButton
     		);
     	} );
+    	// On mobile, scroll the selected tab into view so the user doesn't have to scroll back up
+    	if ( config.isMobile && config.contentMergesOnMobile ) {
+    		const prefersReducedMotion = window.matchMedia(
+    			'(prefers-reduced-motion: reduce)'
+    		).matches;
+    		targetTabButton.scrollIntoView( {
+    			behavior: prefersReducedMotion ? 'auto' : 'smooth',
+    			block: 'start',
+    		} );
+    	}
     };
     /**
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -41,6 +41,11 @@ @@
     	border-left: 3px solid var(--vertical-tabs-border-color);
     	transition: var(--transition);
+    	/* Account for sticky header when scrolling tab into view on mobile */
+    	@media (--mq-wp-small-max) {
+    		scroll-margin-top: calc(var(--masthead-mobile-height) + var(--spacer-20));
+    	}
     	&[aria-selected="true"],
       	&.editor-is-selected {
     		pointer-events: none;
@@ Expand Down @@

Provide feedback