Global Header: Try unsticking the global header, making local navigation sticky

mu-plugins/blocks/global-header-footer/postcss/_common.pcss

@@ -25,11 +25,6 @@ html {
 	--wp-global-header-offset: calc(var(--wp-global-header-height, 0px) + var(--wp-admin--admin-bar--height, 0px));
 	margin-top: var(--wp-admin--admin-bar--height, 0);
 	height: unset; /* Let height use default browser height. */
-
-	@media (--tablet) {
-		scroll-padding-top: var(--wp-global-header-offset, 0);
-		margin-top: var(--wp-global-header-offset, 0);
-	}
 }
 
 /**

mu-plugins/blocks/global-header-footer/postcss/header/get-wordpress.pcss

@@ -5,12 +5,14 @@
 .wp-block-group.global-header {
 	& .global-header__desktop-get-wordpress,
 	& .global-header__mobile-get-wordpress a {
+		display: block;
 		background-color: var(--wp--preset--color--blueberry-1) !important; /* Override Gutenberg's !important */
 		color: var(--wp--preset--color--white) !important; /* Override the header color scheme */
 		padding: 10px 19px;
 		border-radius: 2px;
 		font-weight: 700;
 		font-size: var(--wp--preset--font-size--small);
+		line-height: 1.15;
 
 		&:hover {
 			cursor: pointer;
@@ -35,15 +37,17 @@
 	/* Desktop - `div` containing `a` */
 	& .global-header__desktop-get-wordpress-container {
 		display: none;
+		padding-top: 27px;
+		padding-bottom: 27px;
 		padding-left: var(--wp--style--block-gap);
 
 		@media (--tablet) {
 			display: inline;
 		}
 
 		@media (--short-screen) {
-			padding-top: 18px;
-			padding-bottom: 18px;
+			padding-top: 12px;
+			padding-bottom: 12px;
 		}
 
 		& a:hover,

mu-plugins/blocks/global-header-footer/postcss/header/header.pcss

@@ -26,15 +26,6 @@ html {
 	position: relative;
 	z-index: 250;
 
-	@media (--tablet) {
-		position: fixed;
-		top: var(--wp-admin--admin-bar--height, 0);
-		left: 0;
-		right: 0;
-		font-size: var(--wp--preset--font-size--small);
-		line-height: 24px;
-	}
-
 	& > * {
 		flex-shrink: 0;
 		padding-left: var(--wp--style--block-gap);

mu-plugins/blocks/local-navigation-bar/index.php

@@ -20,12 +20,7 @@
  * @see https://developer.wordpress.org/reference/functions/register_block_type/
  */
 function init() {
-	register_block_type(
-		__DIR__ . '/build',
-		array(
-			'render_callback' => __NAMESPACE__ . '\render',
-		)
-	);
+	register_block_type( __DIR__ . '/build' );
 
 	// Add the Brush Stroke block style.
 	register_block_style(
@@ -37,25 +32,6 @@ function init() {
 	);
 }
 
-/**
- * Render the block content.
- *
- * @param array    $attributes Block attributes.
- * @param string   $content    Block default content.
- * @param WP_Block $block      Block instance.
- *
- * @return string Returns the block markup.
- */
-function render( $attributes, $content, $block ) {
-	$wrapper_attributes = get_block_wrapper_attributes();
-
-	return sprintf(
-		'<div %1$s>%2$s</div>',
-		$wrapper_attributes,
-		$content
-	);
-}
-
 /**
  * Inject the default block values. In the editor, these are read from block.json.
  * See https://github.com/WordPress/gutenberg/issues/50229.

mu-plugins/blocks/local-navigation-bar/postcss/style.pcss

@@ -4,15 +4,44 @@
 
 	padding-right: var(--wp--preset--spacing--edge-space);
 	padding-left: var(--wp--preset--spacing--edge-space);
-	padding-top: 16px;
-	padding-bottom: 16px;
+	padding-top: 18px;
+	padding-bottom: 18px;
 
-	top: var(--wp-global-header-offset, 0);
+	top: var(--wp-admin--admin-bar--height, 0);
+
+	/* If a sticky element is next, it needs to account for the nav bar offset. */
+	& + :where(.wp-block-group.is-position-sticky) {
+		top: calc(var(--wp-admin--admin-bar--height, 0px) + 60px);
+	}
 }
 
 .wp-block-wporg-local-navigation-bar {
-	& > *:nth-child(3) {
-		flex-basis: 100%;
+
+	@media (min-width: 890px) {
+		& .global-header__wporg-logo-mark {
+			position: absolute;
+			top: -5px;
+			left: 0;
+			opacity: 0;
+			padding: 16px var(--wp--style--block-gap);
+			transition: all 0.2s ease-in-out;
+			visibility: hidden;
+
+			& a {
+				display: block;
+				color: inherit;
+			}
+
+			& svg {
+				fill: currentcolor;
+			}
+		}
+
+		&.is-sticking .global-header__wporg-logo-mark {
+			opacity: 1;
+			top: 0;
+			visibility: visible;
+		}
 	}
 
 	/* Reset the sticky position on small screens. */
@@ -22,11 +51,20 @@
 
 		/* Matches the padding of the global header button. */
 		padding-right: calc(16px + var(--wp--custom--alignment--scroll-bar-width)) !important;
+
+		& .global-header__wporg-logo-mark {
+			display: none;
+		}
+
+		& + .wp-block-group.is-position-sticky {
+			position: static !important;
+			z-index: 0 !important;
+		}
 	}
 
 	&.is-style-brush-stroke {
 		position: sticky;
-		padding-bottom: 0 !important; /* Override element style */
+		padding-bottom: 8px !important; /* Override element style */
 
 		&::before {
 			content: "";
@@ -44,13 +82,6 @@
 		}
 	}
 
-	/* Make sure breadcrumbs inherit the set text color */
-	& .wp-block-wporg-site-breadcrumbs {
-		& a {
-			color: inherit;
-		}
-	}
-
 	/* Navigation. */
 
 	/* Remove padding from menu items with background color, which is used to color the modal background. */

mu-plugins/blocks/local-navigation-bar/render.php

@@ -0,0 +1,16 @@
+<?php
+/**
+ * Render the block content.
+ */
+
+use function WordPressdotorg\MU_Plugins\Global_Header_Footer\get_home_url;
+?>
+
+<div <?php echo get_block_wrapper_attributes(); // phpcs:ignore ?> >
+	<figure class="wp-block-image global-header__wporg-logo-mark">
+		<a href="<?php echo esc_url( get_home_url() ); ?>">
+			<?php require dirname( __DIR__ ) . '/global-header-footer/images/w-mark.svg'; ?>
+		</a>
+	</figure>
+	<?php echo $content // phpcs:ignore ?>
+</div>

mu-plugins/blocks/local-navigation-bar/src/block.json

@@ -82,6 +82,8 @@
 		"__experimentalLayout": true
 	},
 	"editorScript": "file:./index.js",
+	"viewScript": "file:./view.js",
 	"editorStyle": "file:./editor-style.css",
-	"style": "file:./style.css"
+	"style": "file:./style.css",
+	"render": "file:../render.php"
 }

mu-plugins/blocks/local-navigation-bar/src/view.js

@@ -0,0 +1,41 @@
+function debounce( callback ) {
+	// This holds the requestAnimationFrame reference, so we can cancel it if we wish
+	let frame;
+
+	// The debounce function returns a new function that can receive a variable number of arguments
+	return ( ...params ) => {
+		// If the frame variable has been defined, clear it now, and queue for next frame
+		if ( frame ) {
+			window.cancelAnimationFrame( frame );
+		}
+
+		// Queue our function call for the next frame
+		frame = window.requestAnimationFrame( () => {
+			// Call our function and pass any params we received
+			callback( ...params );
+		} );
+	};
+}
+
+function init() {
+	const container = document.querySelector( '.wp-block-wporg-local-navigation-bar' );
+	// The div will hit the "sticky" position when the top offset is 0, or if
+	// the admin bar exists, 32px (height of admin bar). The bar unstickies
+	// on smaller screens, so the admin bar height change does not affect this.
+	const topOffset = document.body.classList.contains( 'admin-bar' ) ? 32 : 0;
+	if ( container ) {
+		const onScroll = () => {
+			const { top } = container.getBoundingClientRect();
+
+			if ( top <= topOffset ) {
+				container.classList.add( 'is-sticking' );
+			} else {
+				container.classList.remove( 'is-sticking' );
+			}
+		};
+
+		document.addEventListener( 'scroll', debounce( onScroll ), { passive: true } );
+		onScroll();
+	}
+}
+window.addEventListener( 'load', init );

mu-plugins/blocks/site-breadcrumbs/postcss/style.pcss

@@ -25,8 +25,4 @@
 			}
 		}
 	}
-
-	& .is-current-page {
-		color: var(--wp--preset--color--charcoal-1);
-	}
 }