diff --git a/mu-plugins/blocks/global-header-footer/postcss/_common.pcss b/mu-plugins/blocks/global-header-footer/postcss/_common.pcss
index d444a4ac1..67f0f3145 100644
--- a/mu-plugins/blocks/global-header-footer/postcss/_common.pcss
+++ b/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);
- }
}
/**
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 12e4c671d..34f3782a8 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,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,6 +37,8 @@
/* 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) {
@@ -42,8 +46,8 @@
}
@media (--short-screen) {
- padding-top: 18px;
- padding-bottom: 18px;
+ padding-top: 12px;
+ padding-bottom: 12px;
}
& 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 65b7ae9d7..70c27d6a9 100644
--- a/mu-plugins/blocks/global-header-footer/postcss/header/header.pcss
+++ b/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);
diff --git a/mu-plugins/blocks/local-navigation-bar/index.php b/mu-plugins/blocks/local-navigation-bar/index.php
index ffbf31b31..0165b456c 100644
--- a/mu-plugins/blocks/local-navigation-bar/index.php
+++ b/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(
- '
%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 0c024ff84..cfe754f40 100644
--- a/mu-plugins/blocks/local-navigation-bar/postcss/style.pcss
+++ b/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. */
diff --git a/mu-plugins/blocks/local-navigation-bar/render.php b/mu-plugins/blocks/local-navigation-bar/render.php
new file mode 100644
index 000000000..0c11fa7f0
--- /dev/null
+++ b/mu-plugins/blocks/local-navigation-bar/render.php
@@ -0,0 +1,16 @@
+
+
+ >
+
+
+
diff --git a/mu-plugins/blocks/local-navigation-bar/src/block.json b/mu-plugins/blocks/local-navigation-bar/src/block.json
index 6d38aa89b..e2ad611e4 100644
--- a/mu-plugins/blocks/local-navigation-bar/src/block.json
+++ b/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"
}
diff --git a/mu-plugins/blocks/local-navigation-bar/src/view.js b/mu-plugins/blocks/local-navigation-bar/src/view.js
new file mode 100644
index 000000000..588177553
--- /dev/null
+++ b/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 );
diff --git a/mu-plugins/blocks/site-breadcrumbs/postcss/style.pcss b/mu-plugins/blocks/site-breadcrumbs/postcss/style.pcss
index bbd7852c9..141e426b6 100644
--- a/mu-plugins/blocks/site-breadcrumbs/postcss/style.pcss
+++ b/mu-plugins/blocks/site-breadcrumbs/postcss/style.pcss
@@ -25,8 +25,4 @@
}
}
}
-
- & .is-current-page {
- color: var(--wp--preset--color--charcoal-1);
- }
}