Skip to content

Commit

Permalink
Improve consistency of layouts (#499)
Browse files Browse the repository at this point in the history
* Use 3 column layout for CLI Commands

* Use 3 column layout for single command

* Only create left column on really wide screens when there is no left column content

* Use 3 column layout for single code ref

* Update the global content size to 960px

* Remove has-three-columns class

This has been ported to the parent theme for reuse

* Left align non 3 column layouts

* Revert change to code reference layout

* Revert removing bottom space from cli commands
  • Loading branch information
adamwoodnz authored Feb 19, 2024
1 parent c6df78a commit 2d6df69
Show file tree
Hide file tree
Showing 11 changed files with 66 additions and 106 deletions.
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!-- wp:group {"layout":{"type":"constrained","wideSize":"1280px","contentSize":"680px"},"style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space"}}}} -->
<!-- wp:group {"layout":{"type":"constrained","justifyContent":"left"},"style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space"}}}} -->
<div 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"} /-->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,17 @@

?>

<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|60"}}},"className":"alignfull","layout":{"type":"constrained","wideSize":"1280px","contentSize":"680px"}} -->
<main class="wp-block-group alignfull" style="padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--edge-space)">

<!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--20)">
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|60"}}},"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);padding-bottom:var(--wp--preset--spacing--60)">

<!-- wp:group {"tagName":"article"} -->
<article class="wp-block-group">
<!-- 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","style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}}} -->
<main class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--20)">

<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide">
<!-- wp:group {"tagName":"article","style":{"spacing":{"margin":{"top":"0px"}}}} -->
<article class="wp-block-group" style="margin-top:0px">

<!-- wp:heading {"level":1,"style":{"typography":{"fontSize":"36px","fontStyle":"normal","fontWeight":"400"},"spacing":{"margin":{"bottom":"40px"}}},"fontFamily":"eb-garamond"} -->
<h1 class="wp-block-heading has-eb-garamond-font-family" style="font-size:36px;font-style:normal;font-weight:400;margin-bottom:40px"><?php esc_html_e( 'WP-CLI Commands', 'wporg' ); ?></h1>
Expand Down Expand Up @@ -61,14 +61,15 @@
</div>
<!-- /wp:group -->

</div>

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

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

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

</main>
</div>
<!-- /wp:group -->
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,4 @@
// See: https://github.com/WordPress/wporg-developer/pull/194
?>

<!-- wp:post-content {"layout":{"inherit":true},"style":{"spacing":{"blockGap":"var:preset|spacing|40"}}} /-->
<!-- wp:post-content {"style":{"spacing":{"blockGap":"var:preset|spacing|40"}}} /-->
57 changes: 0 additions & 57 deletions source/wp-content/themes/wporg-developer-2023/src/style/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -68,63 +68,6 @@ pre {
margin-inline-start: 0;
}

.has-three-columns {
--local--sidebar--width: 248px;
--local--column-gap: 40px;
justify-content: flex-end;

> * {
width: 100%;
}

main {
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);

> .wp-block-wporg-sidebar-container {
width: var(--local--sidebar--width);
inset-inline-start: var(--wp--preset--spacing--edge-space);
}

main {
width: calc(100% - var(--local--sidebar--width) - var(--local--column-gap));
}

.wp-block-wporg-sidebar-container {
--local--block-end-sidebar--width: var(--local--sidebar--width);
}
}

@media (min-width: 1300px) {
width: calc(100% - var(--local--sidebar--width) - var(--local--column-gap));

article {
width: 100%;
max-width: 960px;
margin-left: auto;
margin-right: auto;

.wp-block-wporg-sidebar-container {
inset-inline-end: var(--wp--preset--spacing--edge-space);
}
}
}
}

.is-toc-heading a::after {
/* stylelint-disable-next-line function-url-quotes */
background-image: url("data:image/svg+xml,%3Csvg width='24' height='13' viewBox='0 0 24 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.083 9.91H6.32a3.069 3.069 0 0 1 0-6.139h3.764v1.5H6.32a1.569 1.569 0 0 0 0 3.138h3.764v1.5Zm3.834-6.138h3.764a3.069 3.069 0 0 1 0 6.137h-3.764v-1.5h3.764a1.569 1.569 0 0 0 0-3.137h-3.764v-1.5ZM9.333 7.304h5.334v-1.5H9.333v1.5Z' fill='%233858E9'/%3E%3C/svg%3E%0A");
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!-- wp:template-part {"slug":"header","className":"has-display-contents"} /-->

<!-- wp:template-part {"slug":"search","className":"has-display-contents"} /-->
<!-- wp:template-part {"slug":"search-wide","className":"has-display-contents"} /-->

<!-- wp:pattern {"slug":"wporg-developer-2023/cli-commands"} /-->

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<!-- wp:template-part {"slug":"search","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","justifyContent":"left"},"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:query {"queryId":0,"query":{"inherit":true,"perPage":10},"align":"wide"} -->
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!-- 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","justifyContent":"left"},"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-content"} /-->
</main>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,25 +1,31 @@
<!-- wp:template-part {"slug":"header","className":"has-display-contents"} /-->

<!-- wp:template-part {"slug":"search","className":"has-display-contents"} /-->
<!-- wp:template-part {"slug":"search-wide","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"}}}} -->
<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 {"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"}} -->
<div class="wp-block-group alignfull has-three-columns">

<!-- 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 {"layout":{"type":"constrained","justifyContent":"left"},"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}}} -->
<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--20)">
<!-- wp:group {"tagName":"article"} -->
<article class="wp-block-group">

<!-- wp:group {"tagName":"article"} -->
<article class="wp-block-group">
<!-- wp:wporg/command-title {"style":{"spacing":{"margin":{"bottom":"40px"}}}} /-->

<!-- wp:wporg/command-title {"style":{"spacing":{"margin":{"bottom":"40px"}}}} /-->
<!-- wp:pattern {"slug":"wporg-developer-2023/article-sidebar"} /-->

<!-- wp:pattern {"slug":"wporg-developer-2023/single-content"} /-->

<!-- wp:pattern {"slug":"wporg-developer-2023/article-sidebar"} /-->

<!-- wp:pattern {"slug":"wporg-developer-2023/single-content"} /-->
<!-- wp:pattern {"slug":"wporg-developer-2023/command-meta"} /-->

<!-- wp:pattern {"slug":"wporg-developer-2023/command-meta"} /-->
</article>
<!-- /wp:group -->

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

</div>
Expand All @@ -28,7 +34,8 @@
<!-- 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"} /-->
38 changes: 22 additions & 16 deletions source/wp-content/themes/wporg-developer-2023/templates/single.html
Original file line number Diff line number Diff line change
@@ -1,35 +1,41 @@
<!-- wp:template-part {"slug":"header","className":"has-display-contents"} /-->

<!-- wp:template-part {"slug":"search","className":"has-display-contents"} /-->
<!-- wp:template-part {"slug":"search-wide","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"}}}} -->
<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 {"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"}} -->
<div class="wp-block-group alignfull has-three-columns">

<!-- 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 {"layout":{"type":"constrained","justifyContent":"left"},"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}}} -->
<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--20)">
<!-- wp:group {"tagName":"article"} -->
<article class="wp-block-group">

<!-- wp:wporg/code-reference-title {"style":{"spacing":{"margin":{"bottom":"40px"}}}} /-->

<!-- wp:group {"tagName":"article"} -->
<article class="wp-block-group">

<!-- wp:wporg/code-reference-title {"style":{"spacing":{"margin":{"bottom":"40px"}}}} /-->
<!-- wp:pattern {"slug":"wporg-developer-2023/article-sidebar"} /-->

<!-- wp:pattern {"slug":"wporg-developer-2023/article-sidebar"} /-->
<!-- wp:wporg/code-reference-deprecated /-->

<!-- wp:wporg/code-reference-deprecated /-->
<!-- wp:wporg/code-reference-private-access /-->

<!-- wp:wporg/code-reference-private-access /-->
<!-- wp:pattern {"slug":"wporg-developer-2023/single-content"} /-->

<!-- wp:pattern {"slug":"wporg-developer-2023/single-content"} /-->
<!-- wp:wporg/code-reference-comment-form /-->

<!-- wp:wporg/code-reference-comment-form /-->
</article>
<!-- /wp:group -->

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

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

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

<!-- wp:template-part {"slug":"footer"} /-->
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<!-- wp:template-part {"slug":"search","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","justifyContent":"left"},"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:query {"queryId":0,"query":{"inherit":true,"perPage":10},"align":"wide"} -->
Expand Down
3 changes: 3 additions & 0 deletions source/wp-content/themes/wporg-developer-2023/theme.json
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,9 @@
}
}
},
"layout": {
"contentSize": "960px"
},
"typography": {
"fontSizes": [
{
Expand Down

0 comments on commit 2d6df69

Please sign in to comment.