Chapters and ToC: Internal scroll (#469)

* Adjust content layout for internally scroll ToC

* Wrap chapter list with sidebar container

* Improve sidebar descriptions

* Remove space from top of chapter list

* Increase space at bottom of single page

* Adjust sidebar margins

* Add breakpoint config for chapter list sidebar container

* Increase sidebar width to allow for custom scrollbars

source/wp-content/themes/wporg-developer-2023/patterns/article-sidebar.php

@@ -7,7 +7,7 @@
 
 ?>
 
-<!-- wp:wporg/sidebar-container {"style":{"spacing":{"margin":{"bottom":"40px"}}}} -->
+<!-- wp:wporg/sidebar-container -->
 
 	<!-- wp:wporg/table-of-contents /-->
 

source/wp-content/themes/wporg-developer-2023/src/chapter-list/style.scss

@@ -21,7 +21,6 @@
 	}
 
 	.wporg-chapter-list__list {
-		margin-top: var(--wp--preset--spacing--20);
 
 		@media (max-width: 767px) {
 			display: none;

source/wp-content/themes/wporg-developer-2023/src/code-comment-form/style.scss

@@ -1,26 +1,8 @@
-.wp-block-wporg-code-reference-comment-form p {
-	margin-block-start: var(--wp--style--block-gap);
-	margin-block-end: var(--wp--style--block-gap);
-}
-
-.wp-block-wporg-code-reference-comment-form-content {
-	display: flex;
-	flex-direction: column;
-	max-width: var(--wp--style--global--content-size);
-
-	@media screen and (min-width: 1200px) {
-		max-width: unset;
-		flex-direction: row;
-		justify-content: space-between;
-		gap: var(--wp--preset--spacing--40);
+.wp-block-wporg-code-reference-comment-form {
+	padding-bottom: var(--wp--style--block-gap);
 
-		.comment-respond {
-			min-width: var(--wp--style--global--content-size);
-		}
-
-		.comment-rules {
-			padding-top: var(--wp--preset--spacing--30);
-		}
+	p {
+		margin-block-start: var(--wp--style--block-gap);
+		margin-block-end: var(--wp--style--block-gap);
 	}
 }
-

source/wp-content/themes/wporg-developer-2023/src/style/style.scss

@@ -69,8 +69,9 @@ pre {
 }
 
 .has-three-columns {
-	--local--sidebar--width: 232px;
+	--local--sidebar--width: 248px;
 	--local--column-gap: 40px;
+	justify-content: flex-end;
 
 	> * {
 		width: 100%;
@@ -80,12 +81,23 @@ pre {
 		order: 1;
 	}
 
+	/* Left sidebar: Chapter List */
+	> .wp-block-wporg-sidebar-container {
+		margin-top: var(--wp--preset--spacing--20);
+	}
+
+	/* Right sidebar: ToC */
+	article .wp-block-wporg-sidebar-container {
+		margin-bottom: var(--wp--preset--spacing--50);
+	}
+
 	@media (min-width: 768px) {
 		flex-direction: row !important;
 		column-gap: var(--local--column-gap);
 
-		aside {
+		> .wp-block-wporg-sidebar-container {
 			width: var(--local--sidebar--width);
+			inset-inline-start: var(--wp--preset--spacing--edge-space);
 		}
 
 		main {
@@ -105,10 +117,10 @@ pre {
 			max-width: 960px;
 			margin-left: auto;
 			margin-right: auto;
-		}
 
-		.wp-block-wporg-sidebar-container {
-			inset-inline-end: var(--wp--preset--spacing--edge-space);
+			.wp-block-wporg-sidebar-container {
+				inset-inline-end: var(--wp--preset--spacing--edge-space);
+			}
 		}
 	}
 }

source/wp-content/themes/wporg-developer-2023/templates/single-handbook.html

@@ -5,11 +5,11 @@
 <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space"}}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-group alignfull" style="padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)">
 
-	<!-- wp:group {"align":"full","className":"has-three-columns","layout":{"type":"flex","flexWrap":"wrap","orientation":"vertical"},"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}}} -->
-	<div class="wp-block-group alignfull has-three-columns" style="margin-top:var(--wp--preset--spacing--20)">
+	<!-- wp:group {"align":"full","className":"has-three-columns","layout":{"type":"flex","flexWrap":"wrap","orientation":"vertical"}} -->
+	<div class="wp-block-group alignfull has-three-columns">
 
-		<!-- wp:group {"tagName":"main","className":"alignwide"} -->
-		<main class="wp-block-group alignwide">
+		<!-- wp:group {"tagName":"main","className":"alignwide","style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}}} -->
+		<main class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--20)">
 
 			<!-- wp:group {"tagName":"article","style":{"spacing":{"margin":{"top":"0px"}}}} -->
 			<article class="wp-block-group" style="margin-top:0px">
@@ -29,7 +29,11 @@
 		</main>
 		<!-- /wp:group -->
 
-		<!-- wp:wporg/chapter-list {"style":{"spacing":{"margin":{"bottom":"20px"}}}} /-->
+		<!-- wp:wporg/sidebar-container {"hasBackToTop":false,"inlineBreakpoint": "768px"} -->
+
+			<!-- wp:wporg/chapter-list /-->
+
+		<!-- /wp:wporg/sidebar-container -->
 
 	</div>
 	<!-- /wp:group -->

source/wp-content/themes/wporg-developer-2023/templates/single.html

@@ -16,10 +16,13 @@
 			<!-- wp:pattern {"slug":"wporg-developer-2023/article-sidebar"} /-->
 
 			<!-- wp:wporg/code-reference-deprecated /-->
+
 			<!-- wp:wporg/code-reference-private-access /-->
 
 			<!-- wp:pattern {"slug":"wporg-developer-2023/single-content"} /-->
 
+			<!-- wp:wporg/code-reference-comment-form /-->
+
 		</article>
 		<!-- /wp:group -->
 
@@ -29,10 +32,4 @@
 </main>
 <!-- /wp:group -->
 
-<!-- wp:group {"layout":{"type":"constrained","wideSize":"1280px","contentSize":"680px"},"tagName":"div","style":{"spacing":{"padding":{"top":"var:preset|spacing|40", "bottom":"var:preset|spacing|40", "left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space"}}}} -->
-<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--edge-space);padding-right:var(--wp--preset--spacing--edge-space)">
-	<!-- wp:wporg/code-reference-comment-form {"align":"wide"} /-->
-</div>
-<!-- /wp:group -->
-
 <!-- wp:template-part {"slug":"footer"} /-->