diff --git a/mu-plugins/blocks/sidebar-container/postcss/style.pcss b/mu-plugins/blocks/sidebar-container/postcss/style.pcss index 3af2b873a..d923d2239 100644 --- a/mu-plugins/blocks/sidebar-container/postcss/style.pcss +++ b/mu-plugins/blocks/sidebar-container/postcss/style.pcss @@ -21,7 +21,7 @@ /* Right offset should be "edge spacing" at minimum, otherwise calculate it to be centered. */ right: max(var(--wp--preset--spacing--edge-space), calc((100% - var(--wp--style--global--wide-size)) / 2)); width: var(--local--block-end-sidebar--width); - margin-top: var(--wp--preset--spacing--edge-space) !important; + margin-top: var(--wp--custom--wporg-sidebar-container--spacing--margin--top) !important; &.is-fixed-sidebar { position: fixed; @@ -44,3 +44,8 @@ scroll-margin-top: var(--wp-local-header-offset, 0); } } + +/* Set up the custom properties. These can be overridden by settings in theme.json. */ +:where(body) { + --wp--custom--wporg-sidebar-container--spacing--margin--top: var(--wp--preset--spacing--edge-space); +} diff --git a/mu-plugins/blocks/sidebar-container/src/view.js b/mu-plugins/blocks/sidebar-container/src/view.js index 13a68fb2b..e15b617f5 100644 --- a/mu-plugins/blocks/sidebar-container/src/view.js +++ b/mu-plugins/blocks/sidebar-container/src/view.js @@ -36,7 +36,7 @@ function onScroll() { const mainEl = document.getElementById( 'wp--skip-link--target' ); const footerStart = mainEl.offsetTop + mainEl.offsetHeight; - const gap = getCustomPropValue( '--wp--preset--spacing--edge-space' ); + const gap = parseInt( window.getComputedStyle( sidebarContainer ).marginTop, 10 ); const viewportYOffset = window .getComputedStyle( document.documentElement ) .getPropertyValue( 'margin-top' ) @@ -71,7 +71,7 @@ function onScroll() { function isSidebarWithinViewport( container ) { // Margin offset from the top of the sidebar. - const gap = getCustomPropValue( '--wp--preset--spacing--edge-space' ); + const gap = parseInt( window.getComputedStyle( container ).marginTop, 10 ); // Usable viewport height. const viewHeight = window.innerHeight - FIXED_HEADER_HEIGHT; // Get the height of the sidebar, plus the top margin and 50px for the