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

Skatepark: add the header #4354

Merged
merged 13 commits into from
Aug 11, 2021
Merged

Skatepark: add the header #4354

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
62bd392
Create the scaffolding for header template part.
jffng Aug 2, 2021
c24f5a7
Use intrinsic design layouts for the primary header container.
jffng Aug 3, 2021
0c83ec1
Simplify flex wrapping rules.
jffng Aug 3, 2021
110e4c0
Comments for everylayout.dev pages.
jffng Aug 3, 2021
54e9894
Use the Gutenberg flex layout.
jffng Aug 3, 2021
c78bd36
Refine header styles and translate the menu label.
jffng Aug 4, 2021
be538f1
Add site logo.
jffng Aug 4, 2021
35010fd
Use css var instead of baked color.
jffng Aug 5, 2021
e8ec881
Move flex layout to group so we can reuse templates from blockbase.
jffng Aug 10, 2021
f5a511b
Comment why flex grow is needed.
jffng Aug 10, 2021
bf7a9b2
Use font-weight support in Gutenberg.
jffng Aug 10, 2021
aaf1c80
Remove menu label in favor of adding it in Gutenberg.
jffng Aug 10, 2021
b57cf3c
Remove hard coded nav links.
jffng Aug 10, 2021
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
32 changes: 32 additions & 0 deletions skatepark/assets/theme.css
View file
Open in desktop

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

23 changes: 23 additions & 0 deletions skatepark/block-template-parts/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!-- wp:group { "layout":{"type":"flex"},"align":"full"} -->
<div class="wp-block-group">
<!-- wp:group -->
<div class="wp-block-group">
<!-- wp:site-logo /-->
<!-- wp:site-title {"style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"900"}},"fontSize":"large"} /-->
<!-- wp:site-tagline {"fontSize":"small","style":{"typography":{"fontWeight":"500"}}} /--></div>
<!-- /wp:group -->

<!-- wp:group {"className":"nav-links"} -->
<div class="wp-block-group nav-links"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","style":{"typography":{"fontStyle":"normal","fontWeight":"900","textTransform":"uppercase"}},"fontSize":"small"} -->
<!-- /wp:navigation -->

<!-- wp:social-links {"iconColor":"primary","iconColorValue":"var(--wp--custom--color--primary)","className":"items-justified-right is-style-logos-only"} -->
<ul class="wp-block-social-links has-icon-color items-justified-right is-style-logos-only"><!-- wp:social-link {"url":"twitter.com","service":"twitter"} /-->

<!-- wp:social-link {"url":"facebook.com","service":"facebook"} /-->

<!-- wp:social-link {"url":"instagram.com","service":"instagram"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
21 changes: 21 additions & 0 deletions skatepark/block-templates/singular.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group">
<!-- wp:post-title /-->
</div>
<!-- /wp:group -->

<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
<!-- wp:post-featured-image {"align":"full"} /-->

<!-- wp:post-content {"layout":{"inherit":true}} /-->
</main>
<!-- /wp:group -->

<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group"><!-- wp:post-comments /--></div>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->
5 changes: 5 additions & 0 deletions skatepark/child-theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,11 @@
"letterSpacing": "0.05em",
"textTransform": "uppercase"
}
},
"core/navigation": {
"typography": {
"letterSpacing": "0.05em"
}
}
},
"elements": {
Expand Down
28 changes: 28 additions & 0 deletions skatepark/sass/templates/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
header.wp-block-template-part > .wp-block-group {
align-items: flex-end; // Needed until theme.json layout lets me specify
justify-content: space-between; // Apply a cluster (flex?) layout
flex-wrap: wrap-reverse;
MaggieCabrera marked this conversation as resolved.
Show resolved Hide resolved
> * {
flex-grow: 1; // Needed to maintain alignment when the containers stack
> * { // Apply a stack layout (page 69 of the every-layout.dev PDF)
margin-top: 20px;
margin-bottom: 20px;
}
Comment on lines +7 to +10
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is cool, I love the idea of styling the context rather than the element itself.

}

.wp-block-social-links.is-style-logos-only {
margin-right: calc( -1 * ( 8px + 0.25em ) ); // Visually align social links to the right
> .wp-social-link {
padding: 0; // Needed to override Gutenberg default padding on this block style variation
}
}
}

@include break-small-only(){
.nav-links {
display: flex;
justify-content: space-between;
width: 100%;
border-bottom: 2px solid var(--wp--custom--color--primary);
}
}
1 change: 1 addition & 0 deletions skatepark/sass/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@
@import "blocks/search";
@import "block-patterns/pre-footer";
@import "elements/links";
@import "templates/header";
3 changes: 2 additions & 1 deletion skatepark/theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -380,7 +380,8 @@
},
"core/navigation": {
"typography": {
"fontSize": "var(--wp--preset--font-size--normal)"
"fontSize": "var(--wp--preset--font-size--normal)",
"letterSpacing": "0.05em"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@melchoyce I added the letter spacing for all navigation blocks — is that okay, or do you think it should be targeted to the navigation block in the header only?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also 0.1em for letter spacing looked like a lot compared to the comps, so I used 0.05 but let me know if you think it should be 0.1em.

}
},
"core/post-title": {
Expand Down