Templates: Move sidebar code to "sidebar container" block (#63)

source/wp-content/themes/wporg-documentation-2022/patterns/article-sidebar.php

@@ -0,0 +1,13 @@
+<?php
+/**
+ * Title: Article Sidebar
+ * Slug: wporg-documentation-2022/article-sidebar
+ * Inserter: no
+ */
+
+?>
+<!-- wp:wporg/sidebar-container -->
+	<!-- wp:template-part {"slug":"search","theme":"wporg-documentation-2022"} /-->
+
+	<!-- wp:wporg/table-of-contents {"style":{"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}},"spacing":{"padding":{"top":"var:preset|spacing|20","right":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|20"}}},"backgroundColor":"blueberry-4","textColor":"blueberry-1"} /-->
+<!-- /wp:wporg/sidebar-container -->

source/wp-content/themes/wporg-documentation-2022/src/style/style.scss

@@ -34,40 +34,6 @@ p.has-background {
 	}
 }
 
-.sidebar-container .is-link-to-top {
-	display: none;
-}
-
-// Slot the search & table of contents into a floating sidebar on large screens.
-@media (min-width: 1200px) {
-	.sidebar-container {
-		// Size of remaining space in the wide center column.
-		--local--size-diff: calc(var(--wp--style--global--wide-size) - var(--wp--style--global--content-size));
-		// This is a little bit of a magic number, the max space between content & sidebar.
-		--local--content-gap: 145px;
-
-		position: absolute;
-		top: calc(var(--wp-global-header-offset, 0px) + var(--wp-local-header-offset, 0px));
-		// 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: calc(var(--local--size-diff) - var(--local--content-gap));
-		margin-top: var(--wp--preset--spacing--edge-space) !important;
-
-		&.is-fixed-sidebar {
-			position: fixed;
-		}
-
-		&.is-bottom-sidebar {
-			position: absolute;
-		}
-
-		&.is-fixed-sidebar .is-link-to-top,
-		&.is-bottom-sidebar .is-link-to-top {
-			display: block;
-		}
-	}
-}
-
 .wp-block-search.is-style-secondary-search-control {
 	// Update border color in secondary search style, this site uses a light grey.
 	--local--border-color: var(--wp--preset--color--light-grey-1);

source/wp-content/themes/wporg-documentation-2022/templates/single.html

@@ -10,17 +10,7 @@
 		<article class="wp-block-group">
 			<!-- wp:post-title {"level":1,"style":{"spacing":{"margin":{"top":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|40"}}}} /-->
 
-			<!-- wp:group {"tagName":"aside","className":"sidebar-container"} -->
-			<aside class="wp-block-group sidebar-container">
-				<!-- wp:template-part {"slug":"search"} /-->
-
-				<!-- wp:wporg/table-of-contents {"style":{"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}},"spacing":{"padding":{"top":"var:preset|spacing|20","right":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|20"}}},"backgroundColor":"blueberry-4","textColor":"blueberry-1"} /-->
-
-				<!-- wp:paragraph {"fontSize":"small","className":"is-link-to-top"} -->
-				<p class="has-small-font-size is-link-to-top"><a href="#wp--skip-link--target">↑ Back to top</a></p>
-				<!-- /wp:paragraph -->
-			</aside>
-			<!-- /wp:group -->
+			<!-- wp:pattern {"slug":"wporg-documentation-2022/article-sidebar"} /-->
 
 			<!-- wp:post-content {"layout":{"inherit":true}} /-->
 		</article>

source/wp-content/themes/wporg-documentation-2022/theme.json

@@ -41,11 +41,6 @@
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--normal)"
 				}
-			},
-			"wporg/table-of-contents": {
-				"color": {
-					"text": "var(--wp--preset--color--blueberry-1)"
-				}
 			}
 		}
 	},