Make top margin of container configurable via theme.json

WordPress · Oct 19, 2023 · 7930f56 · 7930f56
1 parent 1c4013e
commit 7930f56
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git 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
@@ -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