From 346ac023f42c5f44cb52998dd8f26c7b61750378 Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Wed, 8 Nov 2023 16:05:27 +1300
Subject: [PATCH] Revert "Global Header: Try unsticking the global header,
making local navigation sticky (#466)"
This reverts commit 826fb7fb254d4caa08d30eb1f3605219b6b45990.
---
.../global-header-footer/postcss/_common.pcss | 5 ++
.../postcss/header/get-wordpress.pcss | 8 +--
.../postcss/header/header.pcss | 9 +++
.../blocks/local-navigation-bar/index.php | 26 ++++++++-
.../local-navigation-bar/postcss/style.pcss | 57 +++++--------------
.../blocks/local-navigation-bar/render.php | 16 ------
.../local-navigation-bar/src/block.json | 4 +-
.../blocks/local-navigation-bar/src/view.js | 41 -------------
.../site-breadcrumbs/postcss/style.pcss | 4 ++
9 files changed, 59 insertions(+), 111 deletions(-)
delete mode 100644 mu-plugins/blocks/local-navigation-bar/render.php
delete mode 100644 mu-plugins/blocks/local-navigation-bar/src/view.js
diff --git a/mu-plugins/blocks/global-header-footer/postcss/_common.pcss b/mu-plugins/blocks/global-header-footer/postcss/_common.pcss
index 67f0f3145..d444a4ac1 100644
--- a/mu-plugins/blocks/global-header-footer/postcss/_common.pcss
+++ b/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);
+ }
}
/**
diff --git a/mu-plugins/blocks/global-header-footer/postcss/header/get-wordpress.pcss b/mu-plugins/blocks/global-header-footer/postcss/header/get-wordpress.pcss
index 34f3782a8..12e4c671d 100644
--- a/mu-plugins/blocks/global-header-footer/postcss/header/get-wordpress.pcss
+++ b/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,8 +35,6 @@
/* 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) {
@@ -46,8 +42,8 @@
}
@media (--short-screen) {
- padding-top: 12px;
- padding-bottom: 12px;
+ padding-top: 18px;
+ padding-bottom: 18px;
}
& a:hover,
diff --git a/mu-plugins/blocks/global-header-footer/postcss/header/header.pcss b/mu-plugins/blocks/global-header-footer/postcss/header/header.pcss
index 70c27d6a9..65b7ae9d7 100644
--- a/mu-plugins/blocks/global-header-footer/postcss/header/header.pcss
+++ b/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);
diff --git a/mu-plugins/blocks/local-navigation-bar/index.php b/mu-plugins/blocks/local-navigation-bar/index.php
index 0165b456c..ffbf31b31 100644
--- a/mu-plugins/blocks/local-navigation-bar/index.php
+++ b/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(
+ '%2$s
',
+ $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.
diff --git a/mu-plugins/blocks/local-navigation-bar/postcss/style.pcss b/mu-plugins/blocks/local-navigation-bar/postcss/style.pcss
index cfe754f40..0c024ff84 100644
--- a/mu-plugins/blocks/local-navigation-bar/postcss/style.pcss
+++ b/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. */
diff --git a/mu-plugins/blocks/local-navigation-bar/render.php b/mu-plugins/blocks/local-navigation-bar/render.php
deleted file mode 100644
index 0c11fa7f0..000000000
--- a/mu-plugins/blocks/local-navigation-bar/render.php
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
- >
-
-
-
diff --git a/mu-plugins/blocks/local-navigation-bar/src/block.json b/mu-plugins/blocks/local-navigation-bar/src/block.json
index e2ad611e4..6d38aa89b 100644
--- a/mu-plugins/blocks/local-navigation-bar/src/block.json
+++ b/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"
}
diff --git a/mu-plugins/blocks/local-navigation-bar/src/view.js b/mu-plugins/blocks/local-navigation-bar/src/view.js
deleted file mode 100644
index 588177553..000000000
--- a/mu-plugins/blocks/local-navigation-bar/src/view.js
+++ /dev/null
@@ -1,41 +0,0 @@
-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 );
diff --git a/mu-plugins/blocks/site-breadcrumbs/postcss/style.pcss b/mu-plugins/blocks/site-breadcrumbs/postcss/style.pcss
index 141e426b6..bbd7852c9 100644
--- a/mu-plugins/blocks/site-breadcrumbs/postcss/style.pcss
+++ b/mu-plugins/blocks/site-breadcrumbs/postcss/style.pcss
@@ -25,4 +25,8 @@
}
}
}
+
+ & .is-current-page {
+ color: var(--wp--preset--color--charcoal-1);
+ }
}