Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update handbook layout #299

Merged
merged 9 commits into from
Oct 26, 2023
Merged

Update handbook layout #299

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
119c1fa
Add search field to github handbook template
adamwoodnz Oct 6, 2023
eec9b91
Update handbook layout
adamwoodnz Oct 6, 2023
ba549cc
Vertically align meta fields top
adamwoodnz Oct 8, 2023
efacf85
Wrap tables in handbooks with block markup
adamwoodnz Oct 9, 2023
aec4980
Add more handbooks to table filter
adamwoodnz Oct 18, 2023
dbb3b8a
Fix sidebar overlapping pagination
adamwoodnz Oct 19, 2023
8c4d41a
Adjust top position of cli command archive sidebar
adamwoodnz Oct 19, 2023
7848ec2
Update handbook plugin version
adamwoodnz Oct 19, 2023
cdd9390
Use borderless style for tables
adamwoodnz Oct 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions composer.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/",
Expand All @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions composer.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

36 changes: 36 additions & 0 deletions source/wp-content/themes/wporg-developer-2023/functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion source/wp-content/themes/wporg-developer-2023/patterns/article-meta-github.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion source/wp-content/themes/wporg-developer-2023/patterns/article-sidebar.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down
15 changes: 15 additions & 0 deletions source/wp-content/themes/wporg-developer-2023/patterns/handbook-pagination.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 -->
4 changes: 2 additions & 2 deletions source/wp-content/themes/wporg-developer-2023/src/chapter-list/block.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->'
);

Expand Down
4 changes: 0 additions & 4 deletions source/wp-content/themes/wporg-developer-2023/src/chapter-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
34 changes: 26 additions & 8 deletions source/wp-content/themes/wporg-developer-2023/src/style/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,17 +42,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;
}
}
}

Expand Down Expand Up @@ -342,6 +356,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);
Expand Down
20 changes: 7 additions & 13 deletions source/wp-content/themes/wporg-developer-2023/templates/single-handbook-github.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"}}}} /-->

Expand All @@ -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"} /-->
18 changes: 5 additions & 13 deletions source/wp-content/themes/wporg-developer-2023/templates/single-handbook.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"}}}} /-->

Expand All @@ -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"} /-->
7 changes: 7 additions & 0 deletions source/wp-content/themes/wporg-developer-2023/theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
Loading