Update handbook layout (#299)

* Add search field to github handbook template * Update handbook layout * Vertically align meta fields top * Wrap tables in handbooks with block markup * Add more handbooks to table filter * Fix sidebar overlapping pagination * Adjust top position of cli command archive sidebar * Update handbook plugin version Version 2 required to disable old ToC using `wporg_handbook_toc_should_add_toc` * Use borderless style for tables
WordPress · Oct 26, 2023 · 905ae78 · 905ae78
1 parent 089e5a3
commit 905ae78
Show file tree

Hide file tree

Showing 12 changed files with 104 additions and 46 deletions.
diff --git a/composer.json b/composer.json
@@ -74,7 +74,7 @@
 				{
 					"name": "wordpress-meta/handbook",
 					"type": "wordpress-plugin",
-					"version": "1",
+					"version": "2",
 					"source": {
 						"type": "svn",
 						"url": "https://meta.svn.wordpress.org/sites/",
@@ -93,7 +93,7 @@
 		"wpackagist-plugin/jetpack": "*",
 		"wordpress-meta/pub": "1",
 		"wordpress-meta/wporg-markdown": "1",
-		"wordpress-meta/handbook": "1",
+		"wordpress-meta/handbook": "2",
 		"wporg/wporg-repo-tools": "dev-trunk",
 		"wporg/wporg-mu-plugins": "dev-build",
 		"wordpress/phpdoc-parser": "dev-master",

diff --git a/composer.lock b/composer.lock
diff --git a/source/wp-content/themes/wporg-developer-2023/functions.php b/source/wp-content/themes/wporg-developer-2023/functions.php
@@ -189,6 +189,7 @@
 add_filter( 'next_post_link', __NAMESPACE__ . '\get_adjacent_handbook_post_link', 10, 5 );
 add_filter( 'previous_post_link', __NAMESPACE__ . '\get_adjacent_handbook_post_link', 10, 5 );
 add_filter( 'get_the_archive_title_prefix', __NAMESPACE__ . '\get_reference_since_title_prefix' );
+add_filter( 'the_content', __NAMESPACE__ . '\filter_standards_content' );
 
 // Priority must be lower than 5 to precede table of contents filter.
 // See: https://github.com/WordPress/wporg-mu-plugins/blob/3867a4ff6fa81de5f1e2e7b1ed4b123e4b4915b3/mu-plugins/blocks/table-of-contents/index.php#L94
@@ -591,6 +592,41 @@ function filter_code_content( $content ) {
 	);
 }
 
+/**
+ * Filters content for the github handbooks to wrap tables with block markup for styles.
+ *
+ * @param string $content
+ * @return string
+ */
+function filter_standards_content( $content ) {
+	$post_type = get_post_type();
+	$handbooks  = array(
+		'wpcs-handbook',
+		'blocks-handbook',
+		'apis-handbook',
+		'theme-handbook',
+		'plugin-handbook',
+		'rest-api-handbook',
+		'cli-handbook',
+		'adv-admin-handbook',
+	);
+
+	if ( ! in_array( $post_type, $handbooks ) ) {
+		return $content;
+	}
+
+	// Find table elements in the content and wrap with figure.wp-block-table
+	$content = preg_replace_callback(
+		'!<table.*?</table>!is',
+		function( $matches ) {
+			return '<figure class="wp-block-table is-style-borderless">' . $matches[0] . '</figure>';
+		},
+		$content
+	);
+
+	return $content;
+}
+
 
 /**
  * Filters content for the command content blocks so Table of Contents can be added.

diff --git a/source/wp-content/themes/wporg-developer-2023/patterns/article-meta-github.php b/source/wp-content/themes/wporg-developer-2023/patterns/article-meta-github.php
@@ -7,7 +7,7 @@
 
 ?>
 
-<!-- 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"},"className":"entry-meta"} -->
+<!-- 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">

diff --git a/source/wp-content/themes/wporg-developer-2023/patterns/article-sidebar.php b/source/wp-content/themes/wporg-developer-2023/patterns/article-sidebar.php
@@ -12,7 +12,7 @@
 	<!-- wp:group {"tagName":"article"} -->
 	<div class="wp-block-group">
 
-		<!-- wp:wporg/table-of-contents {"style":{"spacing":{"margin":{"top":"var:preset|spacing|edge-space"}}}} /-->
+		<!-- wp:wporg/table-of-contents /-->
 
 	</div>
 	<!-- /wp:group -->

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
@@ -0,0 +1,15 @@
+<?php
+/**
+ * Title: Handbook Pagination
+ * Slug: wporg-developer-2023/handbook-pagination
+ * Inserter: no
+ */
+
+?>
+
+<!-- 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: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>
+<!-- /wp:group -->
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
@@ -58,8 +58,8 @@ function render( $attributes, $content, $block ) {
 	$content = wp_list_pages( $args );
 
 	$title = do_blocks(
-		'<!-- wp:heading {"fontFamily":"inter"} -->
-		<h2 class="wp-block-heading has-inter-font-family">' . __( 'Chapters', 'wporg' ) . '</h2>
+		'<!-- wp:heading {"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|20"}}},"fontFamily":"inter"} -->
+			<h2 class="wp-block-heading has-inter-font-family" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--20)">' . __( 'Chapters', 'wporg' ) . '</h2>
 		<!-- /wp:heading -->'
 	);
 

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,10 +3,6 @@
 	--local--button-size: calc(var(--local--line-height) * 1em);
 	line-height: var(--local--line-height);
 
-	h2 {
-		margin-bottom: var(--wp--preset--spacing--20);
-	}
-
 	ul {
 		margin-top: 0;
 		margin-bottom: 0;

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
@@ -51,17 +51,31 @@ body[class] {
 	}
 }
 
-@media (min-width: 1440px) {
-	.has-three-columns .wp-block-wporg-sidebar-container {
-		--local--block-end-sidebar--width: 300px;
-		--wp--style--global--wide-size: 1280px;
-	}
-
+@media (min-width: 1320px) {
 	.has-three-columns {
-		--local--block-start-sidebar--width: 260px;
+		--wp--style--global--wide-size: 1760px;
+
+		--local--block-start-sidebar--width: 300px;
+
 		display: grid;
 		grid-template-columns: var(--local--block-start-sidebar--width) 1fr;
-		gap: var(--wp--preset--spacing--20);
+		grid-template-rows: auto auto;
+		column-gap: 40px;
+
+		.wp-block-wporg-sidebar-container {
+			--local--block-end-sidebar--width: 300px;
+		}
+
+		article {
+			--wp--style--global--content-size: 1080px;
+
+			width: clamp(30rem, -52.5rem + 100vw, 67.5rem);
+		}
+
+		.has-three-columns__pagination {
+			grid-row-start: 2;
+			grid-column-start: 2;
+		}
 	}
 }
 
@@ -351,6 +365,10 @@ body[class] {
 	}
 }
 
+.post-type-archive-command .wp-block-wporg-sidebar-container {
+	--wp--custom--wporg-sidebar-container--spacing--margin--top: 110px;
+}
+
 .single-command {
 	h3 {
 		margin-bottom: var(--wp--preset--spacing--20);

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,10 +1,12 @@
 <!-- wp:template-part {"slug":"header","className":"has-display-contents"} /-->
 
-<!-- wp:group {"tagName":"main","layout":{"type":"constrained","wideSize":"1280px","contentSize":"680px"},"style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space"}}}} -->
+<!-- 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 {"className":"has-three-columns","layout":{"type":"constrained","justifyContent":"left"},"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|edge-space"}}}} -->
-	<div class="wp-block-group alignwide has-three-columns" style="margin-top:var(--wp--preset--spacing--edge-space)">
+	<!-- wp:pattern {"slug":"wporg-developer-2023/search-field"} /-->
+
+	<!-- wp:group {"className":"has-three-columns","layout":{"type":"constrained","justifyContent":"left"},"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:wporg/chapter-list {"style":{"spacing":{"margin":{"bottom":"80px"}}}} /-->
 
@@ -20,20 +22,12 @@
 		</article>
 		<!-- /wp:group -->
 
+		<!-- wp:pattern {"slug":"wporg-developer-2023/handbook-pagination"} /-->
+
 	</div>
 	<!-- /wp:group -->
 
-	<!-- wp:spacer {"height":"40px"} -->
-	<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
-	<!-- /wp:spacer -->
 </main>
 <!-- /wp:group -->
 
-<!-- wp:group {"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":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"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;border-bottom-color:var(--wp--preset--color--light-grey-1);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)">
-	<!-- wp:post-navigation-link {"type":"previous","label":"Previous ","showTitle":true,"linkLabel":true} /-->
-	<!-- wp:post-navigation-link {"label":"Next ","showTitle":true,"linkLabel":true} /-->
-</div>
-<!-- /wp:group -->
-
 <!-- wp:template-part {"slug":"footer"} /-->
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,12 +1,12 @@
 <!-- wp:template-part {"slug":"header","className":"has-display-contents"} /-->
 
-<!-- wp:group {"tagName":"main","layout":{"type":"constrained","wideSize":"1280px","contentSize":"680px"},"style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space"}}}} -->
+<!-- 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:pattern {"slug":"wporg-developer-2023/search-field"} /-->
 
-	<!-- wp:group {"className":"has-three-columns","layout":{"type":"constrained","justifyContent":"left"},"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|edge-space"}}}} -->
-	<div class="wp-block-group alignwide has-three-columns" style="margin-top:var(--wp--preset--spacing--edge-space)">
+	<!-- wp:group {"className":"has-three-columns","layout":{"type":"constrained","justifyContent":"left"},"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:wporg/chapter-list {"style":{"spacing":{"margin":{"bottom":"80px"}}}} /-->
 
@@ -22,20 +22,12 @@
 		</article>
 		<!-- /wp:group -->
 
+		<!-- wp:pattern {"slug":"wporg-developer-2023/handbook-pagination"} /-->
+
 	</div>
 	<!-- /wp:group -->
 
-	<!-- wp:spacer {"height":"40px"} -->
-	<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
-	<!-- /wp:spacer -->
 </main>
 <!-- /wp:group -->
 
-<!-- wp:group {"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":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"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;border-bottom-color:var(--wp--preset--color--light-grey-1);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)">
-	<!-- wp:post-navigation-link {"type":"previous","label":"Previous ","showTitle":true,"linkLabel":true} /-->
-	<!-- wp:post-navigation-link {"label":"Next ","showTitle":true,"linkLabel":true} /-->
-</div>
-<!-- /wp:group -->
-
 <!-- wp:template-part {"slug":"footer"} /-->
diff --git a/source/wp-content/themes/wporg-developer-2023/theme.json b/source/wp-content/themes/wporg-developer-2023/theme.json
@@ -144,6 +144,13 @@
 				"lineHeight": "var(--wp--custom--body--typography--line-height)",
 				"paddingVertical": "calc(( var(--wp--custom--select--height) - (var(--wp--custom--select--font-size) * var(--wp--custom--select--line-height))) / 2)",
 				"borderRadius": "var(--wp--custom--button--border--radius)"
+			},
+			"wporg-sidebar-container": {
+				"spacing": {
+					"margin": {
+						"top": "170px"
+					}
+				}
 			}
 		},
 		"typography": {