diff --git a/CHANGELOG.md b/CHANGELOG.md index 9b258a97..ab836ccf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/wp-content/themes/core/assets/js/utils/tabs.js b/wp-content/themes/core/assets/js/utils/tabs.js index a130f9b9..60a178c4 100644 --- a/wp-content/themes/core/assets/js/utils/tabs.js +++ b/wp-content/themes/core/assets/js/utils/tabs.js @@ -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', + } ); + } }; /** diff --git a/wp-content/themes/core/blocks/tribe/vertical-tabs/style.pcss b/wp-content/themes/core/blocks/tribe/vertical-tabs/style.pcss index 45105d42..3ee74edf 100644 --- a/wp-content/themes/core/blocks/tribe/vertical-tabs/style.pcss +++ b/wp-content/themes/core/blocks/tribe/vertical-tabs/style.pcss @@ -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;