Revert "Global Header: Try unsticking the global header, making local…

… navigation sticky (#466)"

This reverts commit 826fb7f.

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

@@ -25,6 +25,11 @@ 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,14 +5,12 @@
 .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;
@@ -37,17 +35,15 @@
 	/* 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: 12px;
-			padding-bottom: 12px;
+			padding-top: 18px;
+			padding-bottom: 18px;
 		}
 
 		& a:hover,

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

@@ -26,6 +26,15 @@ 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,7 +20,12 @@
  * @see https://developer.wordpress.org/reference/functions/register_block_type/
  */
 function init() {
-	register_block_type( __DIR__ . '/build' );
+	register_block_type(
+		__DIR__ . '/build',
+		array(
+			'render_callback' => __NAMESPACE__ . '\render',
+		)
+	);
 
 	// Add the Brush Stroke block style.
 	register_block_style(
@@ -32,6 +37,25 @@ 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,44 +4,15 @@
 
 	padding-right: var(--wp--preset--spacing--edge-space);
 	padding-left: var(--wp--preset--spacing--edge-space);
-	padding-top: 18px;
-	padding-bottom: 18px;
+	padding-top: 16px;
+	padding-bottom: 16px;
 
-	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);
-	}
+	top: var(--wp-global-header-offset, 0);
 }
 
 .wp-block-wporg-local-navigation-bar {
-
-	@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;
-		}
+	& > *:nth-child(3) {
+		flex-basis: 100%;
 	}
 
 	/* Reset the sticky position on small screens. */
@@ -51,20 +22,11 @@
 
 		/* 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: 8px !important; /* Override element style */
+		padding-bottom: 0 !important; /* Override element style */
 
 		&::before {
 			content: "";
@@ -82,6 +44,13 @@
 		}
 	}
 
+	/* 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/src/block.json

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

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

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