Skip to content

Commit

Permalink
Fix the position of the Table of Contents (#97)
Browse files Browse the repository at this point in the history
* Use 3 column layout for single template

* Move search bar to top left of all pages

* Fix search alignment and placeholder cropping

* Move article comments and date meta into middle column
  • Loading branch information
adamwoodnz authored Jun 11, 2024
1 parent c46630a commit 8c3d09f
Show file tree
Hide file tree
Showing 6 changed files with 97 additions and 67 deletions.
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!-- wp:search {"label":"Search documentation","showLabel":false,"width":100,"widthUnit":"%","buttonText":"Search","buttonPosition":"button-inside","buttonUseIcon":true,"className":"is-style-secondary-search-control","placeholder":"Search documentation for…"} /-->
<!-- wp:search {"label":"Search documentation","showLabel":false,"width":235,"widthUnit":"px","buttonText":"Search","buttonPosition":"button-inside","buttonUseIcon":true,"className":"is-style-secondary-search-control","placeholder":"Search documentation"} /-->
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,5 @@

?>
<!-- wp:wporg/sidebar-container {"style":{"spacing":{"margin":{"bottom":"40px"}}}} -->
<!-- wp:template-part {"slug":"search","theme":"wporg-documentation-2022"} /-->

<!-- wp:wporg/table-of-contents /-->
<!-- /wp:wporg/sidebar-container -->
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
<!-- wp:template-part {"slug":"header","className":"has-display-contents"} /-->

<!-- wp:group {"style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space"}}},"className":"alignfull","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull" style="padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)">

<!-- wp:template-part {"slug":"search","theme":"wporg-documentation-2022"} /-->

</div>
<!-- /wp:group -->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"},"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:columns {"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|40"}}}} -->
Expand All @@ -11,12 +19,6 @@
<!-- wp:term-description {"style":{"spacing":{"margin":{"top":"8px"}}},"textColor":"charcoal-4"} /-->
</div>
<!-- /wp:column -->

<!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%">
<!-- wp:template-part {"slug":"search"} /-->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->

Expand Down
Original file line number Diff line number Diff line change
@@ -1,24 +1,25 @@
<!-- wp:template-part {"slug":"header-topic-landing","className":"has-display-contents"} /-->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space"}}},"className":"alignfull","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)">

<!-- wp:template-part {"slug":"search","theme":"wporg-documentation-2022"} /-->

</div>
<!-- /wp:group -->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"},"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:columns {"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|40"}}}} -->
<div class="wp-block-columns alignwide" style="margin-top:var(--wp--preset--spacing--edge-space);margin-bottom:var(--wp--preset--spacing--40)">
<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%">
<!-- wp:post-title {"level":1} /-->

<!-- wp:term-description {"style":{"spacing":{"margin":{"top":"8px"}}},"textColor":"charcoal-4"} /-->
</div>
<!-- /wp:column -->
<main class="wp-block-group alignwide" style="padding-left:var(--wp--preset--spacing--edge-space);padding-right:var(--wp--preset--spacing--edge-space)">

<!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|40"}}}} -->
<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--edge-space);margin-bottom:var(--wp--preset--spacing--40)">

<!-- wp:post-title {"level":1} /-->

<!-- wp:term-description {"style":{"spacing":{"margin":{"top":"8px"}}},"textColor":"charcoal-4"} /-->

<!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%">
<!-- wp:template-part {"slug":"search"} /-->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
<!-- /wp:group -->

<!-- wp:group {"tagName":"article","align":"wide","layout":{"type":"default"}} -->
<article class="wp-block-group alignwide">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,57 +1,77 @@
<!-- wp:template-part {"slug":"header","className":"has-display-contents"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"},"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 {"style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space"}}},"className":"alignfull","layout":{"type":"default"}} -->
<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 {"layout":{"type":"constrained","justifyContent":"left"},"align":"wide"} -->
<div class="wp-block-group alignwide">
<!-- wp:template-part {"slug":"search","theme":"wporg-documentation-2022"} /-->

<!-- wp:group {"tagName":"article"} -->
<article class="wp-block-group">
<!-- wp:post-title {"level":1,"style":{"spacing":{"margin":{"top":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|40"}}}} /-->
</div>
<!-- /wp:group -->

<!-- wp:pattern {"slug":"wporg-documentation-2022/article-sidebar"} /-->
<!-- 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":"left","className":"has-three-columns","layout":{"type":"flex","flexWrap":"wrap","orientation":"vertical"}} -->
<div class="wp-block-group alignleft has-three-columns">

<!-- wp:group {"tagName":"main","className":"alignwide"} -->
<main class="wp-block-group alignwide">

<!-- wp:post-content {"layout":{"inherit":true}} /-->
</article>
<!-- /wp:group -->
<!-- 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":{"top":"0","bottom":"var:preset|spacing|40"}}}} /-->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40"},"margin":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}},"border":{"top":{"color":"var:preset|color|light-grey-1","width":"1px"}}} -->
<div class="wp-block-group" 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:post-comments-form /-->
</div>
<!-- /wp:group -->
<!-- wp:pattern {"slug":"wporg-documentation-2022/article-sidebar"} /-->

<!-- 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|50"},"border":{"top":{"color":"var:preset|color|light-grey-1","width":"1px"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} -->
<div class="wp-block-group" 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"}}} -->
<p style="font-style:normal;font-weight:700">First published</p>
<!-- /wp:paragraph -->

<!-- wp:post-date {"fontSize":"normal"} /-->
</div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} -->
<p style="font-style:normal;font-weight:700">Last updated</p>
<!-- /wp:paragraph -->

<!-- wp:post-date {"displayType":"modified","fontSize":"normal"} /-->
</div>
<!-- wp:post-content {"layout":{"inherit":true}} /-->


<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40"},"margin":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}},"border":{"top":{"color":"var:preset|color|light-grey-1","width":"1px"}}} -->
<div class="wp-block-group" 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:post-comments-form /-->
</div>
<!-- /wp:group -->

<!-- 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|50"},"border":{"top":{"color":"var:preset|color|light-grey-1","width":"1px"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} -->
<div class="wp-block-group" 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"}}} -->
<p style="font-style:normal;font-weight:700">First published</p>
<!-- /wp:paragraph -->

<!-- wp:post-date {"fontSize":"normal"} /-->
</div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} -->
<p style="font-style:normal;font-weight:700">Last updated</p>
<!-- /wp:paragraph -->

<!-- wp:post-date {"displayType":"modified","fontSize":"normal"} /-->
</div>
<!-- /wp:group -->

</div>
<!-- /wp:group -->

</article>
<!-- /wp:group -->
</div>

<!-- wp:spacer {"height":"40px"} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

</main>
<!-- /wp:group -->

</div>
<!-- /wp:group -->

<!-- wp:spacer {"height":"40px"} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
</main>
</div>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer"} /-->
11 changes: 10 additions & 1 deletion source/wp-content/themes/wporg-documentation-2022/theme.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {},
"settings": {
"custom": {
"alignment": {
"aligned-max-width": "100%"
}
},
"layout": {
"contentSize": "960px"
}
},
"styles": {
"blocks": {
"core/preformatted": {
Expand Down

0 comments on commit 8c3d09f

Please sign in to comment.