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); - } }