WordPress.org

Make WordPress Core

Ticket #48763: 48763.diff

File 48763.diff, 5.3 KB (added by audrasjb, 6 months ago)

48763.diff - Remove SmoothScroll JS bit and replace it with a CSS scroll-behavior property

  • src/wp-content/themes/twentytwenty/assets/js/index.js

    diff --git a/src/wp-content/themes/twentytwenty/assets/js/index.js b/src/wp-content/themes/twentytwenty/assets/js/index.js
    index 9234f11976..bfb37cfb8d 100644
    a b twentytwenty.intrinsicRatioVideos = { 
    322322
    323323}; // twentytwenty.instrinsicRatioVideos
    324324
    325 /*      -----------------------------------------------------------------------------------------------
    326         Smooth Scroll
    327 --------------------------------------------------------------------------------------------------- */
    328 
    329 twentytwenty.smoothScroll = {
    330 
    331         init: function() {
    332                 // Scroll to anchor
    333                 this.scrollToAnchor();
    334 
    335                 // Scroll to element
    336                 this.scrollToElement();
    337         },
    338 
    339         // Scroll to anchor
    340         scrollToAnchor: function() {
    341                 var anchorElements = document.querySelectorAll( 'a[href*="#"]' );
    342                 var anchorElementsList = Array.prototype.slice.call( anchorElements );
    343                 anchorElementsList.filter( function( element ) {
    344                         if ( element.href === '#' || element.href === '#0' || element.id === 'cancel-comment-reply-link' || element.classList.contains( 'do-not-scroll' ) || element.classList.contains( 'skip-link' ) ) {
    345                                 return false;
    346                         }
    347                         return true;
    348                 } ).forEach( function( element ) {
    349                         element.addEventListener( 'click', function( event ) {
    350                                 var target, scrollOffset, originalOffset, adminBar, scrollSpeed, additionalOffset;
    351 
    352                                 // On-page links
    353                                 if ( window.location.hostname === event.target.hostname ) {
    354                                         // Figure out element to scroll to
    355                                         target = window.location.hash !== '' && document.querySelector( window.location.hash );
    356                                         target = target ? target : event.target.hash !== '' && document.querySelector( event.target.hash );
    357 
    358                                         // Does a scroll target exist?
    359                                         if ( target ) {
    360                                                 // Only prevent default if animation is actually gonna happen
    361                                                 event.preventDefault();
    362 
    363                                                 // Get options
    364                                                 additionalOffset = event.target.dataset.additionalOffset;
    365                                                 scrollSpeed = event.target.dataset.scrollSpeed ? event.target.dataset.scrollSpeed : 500;
    366 
    367                                                 // Determine offset
    368 
    369                                                 adminBar = document.querySelector( '#wpadminbar' );
    370 
    371                                                 originalOffset = target.getBoundingClientRect().top + window.pageYOffset;
    372                                                 scrollOffset = additionalOffset ? originalOffset + additionalOffset : originalOffset;
    373 
    374                                                 if ( adminBar && event.target.className === 'to-the-top' ) {
    375                                                         scrollOffset = scrollOffset - adminBar.getBoundingClientRect().height;
    376                                                 }
    377 
    378                                                 twentytwentyScrollTo( scrollOffset, null, scrollSpeed );
    379 
    380                                                 window.location.hash = event.target.hash.slice( 1 );
    381                                         }
    382                                 }
    383                         } );
    384                 } );
    385         },
    386 
    387         // Scroll to element
    388         scrollToElement: function() {
    389                 var scrollToElement = document.querySelector( '*[data-scroll-to]' );
    390 
    391                 if ( scrollToElement ) {
    392                         scrollToElement.addEventListener( 'click', function( event ) {
    393                                 var originalOffset, additionalOffset, scrollOffset, scrollSpeed,
    394                                         // Figure out element to scroll to
    395                                         target = event.target.dataset.twentytwentyScrollTo;
    396 
    397                                 // Make sure said element exists
    398                                 if ( target ) {
    399                                         event.preventDefault();
    400 
    401                                         // Get options
    402                                         additionalOffset = event.target.dataset.additionalOffset;
    403                                         scrollSpeed = event.target.dataset.scrollSpeed ? event.target.dataset.scrollSpeed : 500;
    404 
    405                                         // Determine offset
    406                                         originalOffset = target.getBoundingClientRect().top + window.pageYOffset;
    407                                         scrollOffset = additionalOffset ? originalOffset + additionalOffset : originalOffset;
    408 
    409                                         twentytwentyScrollTo( scrollOffset, null, scrollSpeed );
    410                                 }
    411                         } );
    412                 }
    413         }
    414 
    415 }; // twentytwenty.smoothScroll
    416 
    417325/*      -----------------------------------------------------------------------------------------------
    418326        Modal Menu
    419327--------------------------------------------------------------------------------------------------- */
    twentytwentyDomReady( function() { 
    745653        twentytwenty.toggles.init();    // Handle toggles
    746654        twentytwenty.coverModals.init();        // Handle cover modals
    747655        twentytwenty.intrinsicRatioVideos.init();       // Retain aspect ratio of videos on window resize
    748         twentytwenty.smoothScroll.init();       // Smooth scroll to anchor link or a specific element
    749656        twentytwenty.modalMenu.init();  // Modal Menu
    750657        twentytwenty.primaryMenu.init();        // Primary Menu
    751658        twentytwenty.touchEnabled.init();       // Add class to body if device is touch-enabled
  • src/wp-content/themes/twentytwenty/style-rtl.css

    diff --git a/src/wp-content/themes/twentytwenty/style-rtl.css b/src/wp-content/themes/twentytwenty/style-rtl.css
    index 269ddab62f..c1a80fd864 100644
    a b blockquote::after { 
    115115
    116116html {
    117117        font-size: 62.5%; /* 1rem = 10px */
     118        scroll-behavior: smooth;
     119}
     120
     121@media (prefers-reduced-motion: reduce) {
     122        html {
     123                scroll-behavior: auto;
     124        }
    118125}
    119126
    120127body {
  • src/wp-content/themes/twentytwenty/style.css

    diff --git a/src/wp-content/themes/twentytwenty/style.css b/src/wp-content/themes/twentytwenty/style.css
    index 4edd09fb12..93e35ae11c 100644
    a b blockquote::after { 
    115115
    116116html {
    117117        font-size: 62.5%; /* 1rem = 10px */
     118        scroll-behavior: smooth;
     119}
     120
     121@media (prefers-reduced-motion: reduce) {
     122        html {
     123                scroll-behavior: auto;
     124        }
    118125}
    119126
    120127body {