Changeset 13306

Timestamp:

03/11/2024 11:26:16 PM (6 months ago)

Author:

adamwood

Message:

wporg-bbp-also-viewing: Handle block themes

Insert the banner below the local nav or lang guess blocks if present

File:

• sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-bbp-also-viewing/wporg-bbp-also-viewing.js (modified) (4 diffs)

sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-bbp-also-viewing/wporg-bbp-also-viewing.js

@@ -12 +12 @@
         $adminbar = false,
         $header = false,
+        $localNavBar = false,
+        $langBanner = false,
         bannerOffset = 200,
         isTyping = false,
@@ -25 +27 @@
         $adminbar = jQuery('#wpadminbar');
         $header = jQuery('header.global-header');
+        $localNavBar = jQuery('.wp-block-wporg-local-navigation-bar');
+        $langBanner = jQuery('.wp-block-wporg-language-suggest');
 
         maybeDisplay();
@@ -48 +52 @@
             }
 
-            jQuery('#main').before(
-                '<div id="also-viewing-banner" style="display: none; font-size: 0.8rem; color: #fff; line-height: 2rem; background: #d54e21; width:100%; text-align: center; position: initial; top: 32px; left: 0; z-index: 150;"></div>'
-            );
+            // If using a block based theme with the local nav bar block
+            if ( $localNavBar.length ) {
+                // Insert the banner after the language banner if present,
+                // otherwise after the local nav
+                $element = $langBanner.length ? $langBanner : $localNavBar;
+
+                $element.after(
+                    '<div id="also-viewing-banner" style="display: none; font-size: var(--wp--preset--font-size--extra-small, 12px); color: var(--wp--preset--color--charcoal-1, #1E1E1E); line-height: 18px; padding-top: 8px; padding-bottom: 8px; background: var(--wp--preset--color--acid-green-3, #E2FFED); width: 100%; text-align: center; position: initial; top: 32px; left: 0; z-index: 150;"></div>'
+                );
+            } else {
+                jQuery('#main').before( 
+                    '<div id="also-viewing-banner" style="display: none; font-size: 0.8rem; color: #fff; line-height: 2rem; background: #d54e21; width:100%; text-align: center; position: initial; top: 32px; left: 0; z-index: 150;"></div>'
+                );
+            }
+
             banner = jQuery( '#also-viewing-banner' );
         }
@@ -106 +122 @@
         }
 
-        var offset = 'var(--wp-admin--admin-bar--height, 0px)';
-        if ( 'fixed' === $header.css('position') ) {
-            offset = 'var(--wp-global-header-offset, 0px)';
-        }
-
-        if ( jQuery(window).scrollTop() > bannerOffset ) {
-            banner.css( 'position', 'fixed' );
-            banner.css( 'top', offset );
+        if ( $localNavBar.length ) {
+            // Local nav bar position is set to relative on small screens to stop it being sticky
+            if ( $localNavBar.hasClass( 'is-sticking' ) && $localNavBar.css( 'position' ) !== 'relative' ) {
+                banner.css( 'position', 'sticky' );
+                banner.css( 'top', 'calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--custom--local-navigation-bar--spacing--height, 60px))' );
+            } else {
+                banner.css( 'position', 'initial' );
+                banner.css( 'top', '' );
+            }
         } else {
-            banner.css( 'position', 'initial' );
-            banner.css( 'top', '' );
+            var offset = 'var(--wp-admin--admin-bar--height, 0px)';
+            if ( 'fixed' === $header.css('position') ) {
+                offset = 'var(--wp-global-header-offset, 0px)';
+            }
+
+            if ( jQuery(window).scrollTop() > bannerOffset ) {
+                banner.css( 'position', 'fixed' );
+                banner.css( 'top', offset );
+            } else {
+                banner.css( 'position', 'initial' );
+                banner.css( 'top', '' );
+            }
         }
     } );