Update handbook wide layout (#364)

* Collapse chapter list by default on mobile * Adjust vertical spacing around chapter list * Move pagination into article column * Update handbook layout on wide screens Centre article content with max width of 960px
WordPress · Nov 13, 2023 · 5a83c69 · 5a83c69
1 parent f4b90c2
commit 5a83c69
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 40 deletions.
diff --git a/source/wp-content/themes/wporg-developer-2023/patterns/article-meta.php b/source/wp-content/themes/wporg-developer-2023/patterns/article-meta.php
@@ -7,8 +7,9 @@
 
 ?>
 
-<!-- wp:group {"align":"left","style":{"spacing":{"padding":{"top":"var:preset|spacing|40"},"margin":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|20"},"border":{"top":{"color":"var:preset|color|light-grey-1","width":"1px"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"top"},"className":"entry-meta"} -->
-<div class="wp-block-group entry-meta" style="border-top-color:var(--wp--preset--color--light-grey-1);border-top-width:1px;margin-top:var(--wp--preset--spacing--40);padding-top:var(--wp--preset--spacing--40)">
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40"},"margin":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|20"},"border":{"top":{"color":"var:preset|color|light-grey-1","width":"1px"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"top"},"className":"entry-meta"} -->
+<div class="wp-block-group entry-meta" style="border-top-color:var(--wp--preset--color--light-grey-1);border-top-width:1px;margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40);padding-top:var(--wp--preset--spacing--40)">
+
 	<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
 	<div class="wp-block-group">
 		<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} -->

diff --git a/source/wp-content/themes/wporg-developer-2023/patterns/handbook-pagination.php b/source/wp-content/themes/wporg-developer-2023/patterns/handbook-pagination.php
@@ -7,8 +7,8 @@
 
 ?>
 
-<!-- wp:group {"classname":"has-three-columns__pagination","align":"full","style":{"border":{"top":{"color":"var:preset|color|light-grey-1","width":"1px","style":"solid"},"bottom":{"color":"var:preset|color|light-grey-1","width":"1px"}},"spacing":{"margin":{"top":"var:preset|spacing|20"},"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
-<div class="wp-block-group alignfull has-three-columns__pagination" style="border-top-color:var(--wp--preset--color--light-grey-1);border-top-style:solid;border-top-width:1px;border-bottom-color:var(--wp--preset--color--light-grey-1);border-bottom-width:1px;margin-top:var(--wp--preset--spacing--20);padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
+<!-- wp:group {"align":"full","style":{"border":{"top":{"color":"var:preset|color|light-grey-1","width":"1px","style":"solid"}},"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"},"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
+<div class="wp-block-group alignfull" style="border-top-color:var(--wp--preset--color--light-grey-1);border-top-style:solid;border-top-width:1px;margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20);padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
 	<!-- wp:post-navigation-link {"type":"previous","label":"<?php esc_html_e( 'Previous ', 'wporg' ); ?>","showTitle":true,"linkLabel":true} /-->
 	<!-- wp:post-navigation-link {"label":"<?php esc_html_e( 'Next ', 'wporg' ); ?>","showTitle":true,"linkLabel":true} /-->
 </div>

diff --git a/source/wp-content/themes/wporg-developer-2023/src/chapter-list/block.php b/source/wp-content/themes/wporg-developer-2023/src/chapter-list/block.php
@@ -57,17 +57,22 @@ function render( $attributes, $content, $block ) {
 
 	$content = wp_list_pages( $args );
 
-	$title = do_blocks(
+	$header = '<div class="wporg-chapter-list__header">';
+	$header .= do_blocks(
 		'<!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}},"fontSize":"small","fontFamily":"inter"} -->
-		<h2 class="wp-block-heading has-inter-font-family has-small-font-size" style="font-style:normal;font-weight:400">' . __( 'Chapters', 'wporg' ) . '</h2>
+		<h2 class="wp-block-heading has-inter-font-family has-small-font-size" style="font-style:normal;font-weight:400">' . esc_html__( 'Chapters', 'wporg' ) . '</h2>
 		<!-- /wp:heading -->'
 	);
+	$header .= '<button type="button" class="wporg-chapter-list__toggle" aria-expanded="false">';
+	$header .= '<span class="screen-reader-text">' . esc_html__( 'Chapter list', 'wporg' ) . '</span>';
+	$header .= '</button>';
+	$header .= '</div>';
 
 	$wrapper_attributes = get_block_wrapper_attributes();
 	return sprintf(
-		'<nav %1$s>%2$s<ul>%3$s</ul></nav>',
+		'<nav %1$s>%2$s<ul class="wporg-chapter-list__list">%3$s</ul></nav>',
 		$wrapper_attributes,
-		$title,
+		$header,
 		$content
 	);
 }
diff --git a/source/wp-content/themes/wporg-developer-2023/src/chapter-list/style.scss b/source/wp-content/themes/wporg-developer-2023/src/chapter-list/style.scss
@@ -3,6 +3,35 @@
 	--local--icon-size: calc(var(--local--line-height) * 1em);
 	line-height: var(--local--line-height);
 
+	@media (max-width: 767px) {
+		border: 1px solid var(--wp--preset--color--light-grey-1);
+		padding: 15px var(--wp--preset--spacing--20);
+
+		.wporg-chapter-list__list {
+			display: none;
+		}
+	}
+
+	@media (min-width: 768px) {
+		.wporg-chapter-list__toggle {
+			display: none;
+		}
+	}
+
+	.wporg-chapter-list__header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		.wp-block-heading {
+			margin-bottom: 0;
+		}
+	}
+
+	.wporg-chapter-list__list {
+		margin-top: var(--wp--preset--spacing--20);
+	}
+
 	ul {
 		margin-top: 0;
 		margin-bottom: 0;
@@ -58,12 +87,13 @@
 		}
 	}
 
-	.wporg-chapter-list--button-group {
+	.wporg-chapter-list__button-group {
 		display: flex;
 		align-items: flex-start;
 	}
 
-	.wporg-chapter-list--button-group > button {
+	.wporg-chapter-list__toggle,
+	.wporg-chapter-list__button-group > button {
 		font-size: inherit;
 		background-color: transparent;
 		border: none;
@@ -92,6 +122,12 @@
 		}
 	}
 
+	.wporg-chapter-list__toggle {
+		&[aria-expanded="true"]::before {
+			background-color: var(--wp--preset--color--charcoal-1);
+		}
+	}
+
 	// Descendent is `span` if there are children, or `a` if not.
 	.current_page_item,
 	.current_page_item > span a,

diff --git a/source/wp-content/themes/wporg-developer-2023/src/chapter-list/view.js b/source/wp-content/themes/wporg-developer-2023/src/chapter-list/view.js
@@ -4,9 +4,24 @@
 import { __, sprintf } from '@wordpress/i18n';
 
 const init = () => {
-	const container = document.querySelector( '.wp-block-wporg-chapter-list > ul' );
+	const container = document.querySelector( '.wp-block-wporg-chapter-list' );
+	const toggleButton = container?.querySelector( '.wporg-chapter-list__toggle' );
+	const list = container?.querySelector( '.wporg-chapter-list__list' );
+
+	if ( toggleButton && list ) {
+		toggleButton.addEventListener( 'click', function () {
+			if ( toggleButton.getAttribute( 'aria-expanded' ) === 'true' ) {
+				toggleButton.setAttribute( 'aria-expanded', false );
+				list.removeAttribute( 'style' );
+			} else {
+				toggleButton.setAttribute( 'aria-expanded', true );
+				list.setAttribute( 'style', 'display:block;' );
+			}
+		} );
+	}
+
 	if ( container ) {
-		container.parentNode.classList.toggle( 'has-js-control' );
+		container.classList.toggle( 'has-js-control' );
 
 		const parents = container.querySelectorAll( '.page_item_has_children' );
 		parents.forEach( ( item ) => {
@@ -43,7 +58,7 @@ const init = () => {
 			};
 
 			const buttonGroup = document.createElement( 'span' );
-			buttonGroup.className = 'wporg-chapter-list--button-group';
+			buttonGroup.className = 'wporg-chapter-list__button-group';
 			buttonGroup.append( button, link );
 
 			item.insertBefore( buttonGroup, submenu );

diff --git a/source/wp-content/themes/wporg-developer-2023/src/style/style.scss b/source/wp-content/themes/wporg-developer-2023/src/style/style.scss
@@ -67,8 +67,6 @@ body[class] {
 	--local--column-gap: 40px;
 
 	@media (min-width: 768px) {
-		--wp--style--global--wide-size: 1760px;
-
 		display: grid;
 		/* stylelint-disable-next-line max-line-length */
 		grid-template-columns: var(--local--sidebar--width) calc(100% - var(--local--sidebar--width) - var(--local--column-gap));
@@ -78,18 +76,20 @@ body[class] {
 		.wp-block-wporg-sidebar-container {
 			--local--block-end-sidebar--width: var(--local--sidebar--width);
 		}
-
-		.has-three-columns__pagination {
-			grid-row-start: 2;
-			grid-column-start: 2;
-		}
 	}
 
 	@media (min-width: 1200px) {
+		width: calc(100% - var(--local--sidebar--width) - var(--local--column-gap));
+
 		article {
-			// Width must be calculated to fit absolute positioned ToC.
-			// Scales between 496px at 1200px wide and 1216px at 1920px wide, based on sidebar and gap dimensions above.
-			width: clamp(31rem, -44rem + 100vw, 76rem);
+			width: 100%;
+			max-width: 960px;
+			margin-left: auto;
+			margin-right: auto;
+		}
+
+		.wp-block-wporg-sidebar-container {
+			right: var(--wp--preset--spacing--edge-space);
 		}
 	}
 }

diff --git a/source/wp-content/themes/wporg-developer-2023/templates/single-handbook-github.html b/source/wp-content/themes/wporg-developer-2023/templates/single-handbook-github.html
@@ -1,29 +1,30 @@
 <!-- wp:template-part {"slug":"header","className":"has-display-contents"} /-->
 
-<!-- wp:group {"tagName":"main","layout":{"type":"constrained","wideSize":"1760px","contentSize":"680px"},"style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space"}}}} -->
-<main class="wp-block-group alignfull" style="padding-left:var(--wp--preset--spacing--edge-space);padding-right:var(--wp--preset--spacing--edge-space)">
+<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space"}}},"className":"alignfull","layout":{"type":"default"}} -->
+<main class="wp-block-group alignfull" style="padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)">
 
 	<!-- wp:pattern {"slug":"wporg-developer-2023/search-field"} /-->
 
-	<!-- wp:group {"className":"has-three-columns","align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}}} -->
-	<div class="wp-block-group alignwide has-three-columns" style="margin-top:var(--wp--preset--spacing--40)">
+	<!-- wp:group {"className":"has-three-columns","align":"wide","style":{"spacing":{"margin":{"top":"40px"},"blockGap":"var:preset|spacing|50"}}}}} -->
+	<div class="wp-block-group alignwide has-three-columns" style="margin-top:40px">
 
-		<!-- wp:wporg/chapter-list {"style":{"spacing":{"margin":{"bottom":"80px"}}}} /-->
+		<!-- wp:wporg/chapter-list {"style":{"spacing":{"margin":{"bottom":"40px"}}}} /-->
 
 		<!-- wp:group {"tagName":"article","style":{"spacing":{"margin":{"top":"0px"}}}} -->
 		<article class="wp-block-group" style="margin-top:0px">
-			<!-- wp:post-title {"level":1,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"}}}} /-->
+			<!-- wp:post-title {"level":1,"style":{"spacing":{"margin":{"bottom":"40px"}}}} /-->
 
 			<!-- wp:pattern {"slug":"wporg-developer-2023/article-sidebar"} /-->
 
 			<!-- wp:post-content /-->
 
 			<!-- wp:pattern {"slug":"wporg-developer-2023/article-meta-github"} /-->
+
+			<!-- wp:pattern {"slug":"wporg-developer-2023/handbook-pagination"} /-->
+
 		</article>
 		<!-- /wp:group -->
 
-		<!-- wp:pattern {"slug":"wporg-developer-2023/handbook-pagination"} /-->
-
 	</div>
 	<!-- /wp:group -->
 

diff --git a/source/wp-content/themes/wporg-developer-2023/templates/single-handbook.html b/source/wp-content/themes/wporg-developer-2023/templates/single-handbook.html
@@ -1,29 +1,29 @@
 <!-- wp:template-part {"slug":"header","className":"has-display-contents"} /-->
 
-<!-- wp:group {"tagName":"main","layout":{"type":"constrained","wideSize":"1760px","contentSize":"680px"},"style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space"}}}} -->
-<main class="wp-block-group alignfull" style="padding-left:var(--wp--preset--spacing--edge-space);padding-right:var(--wp--preset--spacing--edge-space)">
+<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space"}}},"className":"alignfull","layout":{"type":"default"}} -->
+<main class="wp-block-group alignfull" style="padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)">
 
 	<!-- wp:pattern {"slug":"wporg-developer-2023/search-field"} /-->
 
-	<!-- wp:group {"className":"has-three-columns","align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}}} -->
-	<div class="wp-block-group alignwide has-three-columns" style="margin-top:var(--wp--preset--spacing--40)">
+	<!-- wp:group {"className":"has-three-columns","align":"wide","style":{"spacing":{"margin":{"top":"40px"},"blockGap":"var:preset|spacing|50"}}}}} -->
+	<div class="wp-block-group alignwide has-three-columns" style="margin-top:40px">
 
-		<!-- wp:wporg/chapter-list {"style":{"spacing":{"margin":{"bottom":"80px"}}}} /-->
+		<!-- wp:wporg/chapter-list {"style":{"spacing":{"margin":{"bottom":"40px"}}}} /-->
 
 		<!-- wp:group {"tagName":"article","style":{"spacing":{"margin":{"top":"0px"}}}} -->
 		<article class="wp-block-group" style="margin-top:0px">
-			<!-- wp:post-title {"level":1,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"}}}} /-->
+			<!-- wp:post-title {"level":1,"style":{"spacing":{"margin":{"bottom":"40px"}}}} /-->
 
 			<!-- wp:pattern {"slug":"wporg-developer-2023/article-sidebar"} /-->
 
 			<!-- wp:post-content /-->
 
 			<!-- wp:pattern {"slug":"wporg-developer-2023/article-meta"} /-->
+
+			<!-- wp:pattern {"slug":"wporg-developer-2023/handbook-pagination"} /-->
 		</article>
 		<!-- /wp:group -->
 
-		<!-- wp:pattern {"slug":"wporg-developer-2023/handbook-pagination"} /-->
-
 	</div>
 	<!-- /wp:group -->
 

diff --git a/source/wp-content/themes/wporg-developer-2023/theme.json b/source/wp-content/themes/wporg-developer-2023/theme.json
@@ -148,7 +148,7 @@
 			"wporg-sidebar-container": {
 				"spacing": {
 					"margin": {
-						"top": "170px"
+						"top": "150px"
 					}
 				}
 			}