Skatepark: simplify nav (#5190)
* Skatepark: simplify nav * Add a block gap between the logo and other branding * align the mobile menu to the botton * Simplify skatepark's header to just use the Blockbase one * refactor the social navigation code to make it eassier to pinpoint errors * Skatepark: simplify nav * Add a block gap between the logo and other branding * align the mobile menu to the botton * Simplify skatepark's header to just use the Blockbase one * Remove header css * update skatepark to have a wide header
This commit is contained in:
Ben Dwyer
GitHub
parent
eed0d5171d
commit
f546817e73
14 changed files with 55 additions and 250 deletions
27
blockbase/block-template-parts/header-wide.html
Normal file
27
blockbase/block-template-parts/header-wide.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<!-- wp:group {"className":"gapless-group","layout":{"inherit":"true"}} -->
|
||||
<div class="wp-block-group gapless-group">
|
||||
<!-- wp:group {"align":"wide","className":"site-header","layout":{"type":"flex","justifyContent":"space-between"},"style":{"spacing":{"padding":{"bottom":"var(--wp--custom--gap--vertical)","top":"var(--wp--custom--gap--vertical)"}}}} -->
|
||||
<div class="wp-block-group site-header alignwide" style="padding-bottom:var(--wp--custom--gap--vertical);padding-top:var(--wp--custom--gap--vertical)">
|
||||
|
||||
<!-- wp:group {"className":"site-brand","layout":{"type":"flex"}} -->
|
||||
<div class="wp-block-group site-brand">
|
||||
<!-- wp:site-logo {"width":64} /-->
|
||||
|
||||
<!-- wp:group -->
|
||||
<div class="wp-block-group">
|
||||
<!-- wp:site-title /-->
|
||||
<!-- wp:site-tagline /-->
|
||||
</div>
|
||||
<!-- /wp:group -->
|
||||
</div>
|
||||
<!-- /wp:group -->
|
||||
|
||||
<!-- wp:navigation {"__unstableLocation":"primary","__unstableSocialLinks":"social","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"}}}} /-->
|
||||
|
||||
</div>
|
||||
<!-- /wp:group -->
|
||||
|
||||
<!-- wp:template-part {"slug":"header-spacer"} /-->
|
||||
|
||||
</div>
|
||||
<!-- /wp:group -->
|
||||
|
|
@ -21,6 +21,15 @@ function blockbase_condition_to_render_social_menu( $block_content, $block ) {
|
|||
return true;
|
||||
}
|
||||
|
||||
function blockbase_theme_has_navigation_social_links_settings( $theme_data ) {
|
||||
return $theme_data
|
||||
&& array_key_exists( 'settings', $theme_data )
|
||||
&& array_key_exists( 'custom', $theme_data['settings'] )
|
||||
&& array_key_exists( 'navigation/social-links', $theme_data['settings']['custom'] )
|
||||
&& array_key_exists( 'color', $theme_data['settings']['custom']['navigation/social-links'] )
|
||||
&& array_key_exists( 'text', $theme_data['settings']['custom']['navigation/social-links']['color'] );
|
||||
}
|
||||
|
||||
function get_social_menu_as_social_links_block( $block ) {
|
||||
if ( empty( $block['attrs']['__unstableSocialLinks'] ) ) {
|
||||
return false;
|
||||
|
|
@ -38,7 +47,8 @@ function get_social_menu_as_social_links_block( $block ) {
|
|||
$theme_data = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_raw_data();
|
||||
$social_links_icon_color_value = "var(--wp--custom--color--primary)";
|
||||
$social_links_icon_color = 'primary';
|
||||
if ( array_key_exists( 'settings', $theme_data ) && array_key_exists( 'custom', $theme_data['settings'] ) && array_key_exists( 'navigation/social-links', $theme_data['settings']['custom'] ) && array_key_exists( 'color', $theme_data['settings']['custom']['navigation/social-links'] ) && array_key_exists( 'text', $theme_data['settings']['custom']['navigation/social-links']['color'] ) ) {
|
||||
|
||||
if ( blockbase_theme_has_navigation_social_links_settings( $theme_data ) ) {
|
||||
$social_links_icon_color_value = $theme_data['settings']['custom']['navigation/social-links']['color']['text'];
|
||||
$social_links_icon_color = preg_replace( '/var\(--wp--custom--color--(.+)\)/', '$0 --> $2 $1', $social_links_icon_color_value );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -494,123 +494,6 @@ a:not(.ab-item):not(.screen-reader-shortcut):focus {
|
|||
mask-image: url(svg/post-tag.svg);
|
||||
}
|
||||
|
||||
.wp-site-blocks .site-header-ollie {
|
||||
max-width: var(--wp--custom--layout--wide-size);
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
margin-top: calc( 0.5 * var(--wp--custom--gap--vertical));
|
||||
gap: 0;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
.wp-site-blocks .site-header-ollie {
|
||||
grid-row-gap: calc( 0.25 * var(--wp--custom--gap--vertical));
|
||||
display: grid;
|
||||
grid-template-areas: "brand menu" "social social";
|
||||
border-bottom: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--color--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.wp-site-blocks .site-header-ollie > * {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.wp-site-blocks .site-header-ollie > * > * {
|
||||
margin-top: calc( 0.5 * var(--wp--custom--gap--vertical));
|
||||
margin-bottom: calc( 0.5 * var(--wp--custom--gap--vertical));
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
.wp-site-blocks .site-header-ollie > * > * {
|
||||
margin-top: calc( 0.125 * var(--wp--custom--gap--vertical));
|
||||
margin-bottom: calc( 0.125 * var(--wp--custom--gap--vertical));
|
||||
}
|
||||
}
|
||||
|
||||
.wp-site-blocks .site-header-ollie .wp-block-social-links {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-site-blocks .site-header-ollie .wp-block-social-links.is-style-logos-only > .wp-social-link {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wp-site-blocks .site-header-ollie .wp-block-social-links.is-style-logos-only > .wp-social-link:last-child a {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.wp-site-blocks .site-header-ollie .site-brand {
|
||||
margin-top: calc( 0.5 * var(--wp--custom--gap--vertical));
|
||||
display: grid;
|
||||
grid-template-areas: "logo title" "logo tagline";
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.wp-site-blocks .site-header-ollie .site-brand {
|
||||
grid-template-rows: 35px auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
.wp-site-blocks .site-header-ollie .site-brand {
|
||||
grid-template-areas: "logo" "title" "tagline";
|
||||
grid-area: brand;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-site-blocks .site-header-ollie .site-brand .wp-block-site-logo {
|
||||
grid-area: logo;
|
||||
margin: 0 var(--wp--custom--gap--horizontal) 0 0;
|
||||
max-width: 120px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
.wp-site-blocks .site-header-ollie .site-brand .wp-block-site-logo {
|
||||
margin-bottom: calc( 0.75 * var(--wp--custom--gap--vertical));
|
||||
}
|
||||
}
|
||||
|
||||
.wp-site-blocks .site-header-ollie .site-brand .wp-block-site-title {
|
||||
grid-area: title;
|
||||
margin: 0 0 0.5em;
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
.wp-site-blocks .site-header-ollie .site-brand .wp-block-site-title {
|
||||
margin: 0 0 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-site-blocks .site-header-ollie .site-brand .wp-block-site-tagline {
|
||||
grid-area: tagline;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
.wp-site-blocks .site-header-ollie .site-brand .wp-block-site-tagline {
|
||||
margin-bottom: calc( 0.25 * var(--wp--custom--gap--vertical));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
.nav-links {
|
||||
display: contents;
|
||||
}
|
||||
.nav-links .wp-block-navigation__responsive-container-open {
|
||||
margin-top: calc( 0.5 * var(--wp--custom--gap--vertical) - 3px);
|
||||
}
|
||||
.nav-links .wp-block-navigation {
|
||||
grid-area: menu;
|
||||
}
|
||||
.nav-links .wp-block-social-links {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.archive .wp-block-post-excerpt__excerpt,
|
||||
.blog .wp-block-post-excerpt__excerpt,
|
||||
.home .wp-block-post-excerpt__excerpt {
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
<!-- wp:group {"className":"site-header-ollie","layout":{"type":"flex","justifyContent":"space-between"}} -->
|
||||
<div class="wp-block-group site-header-ollie">
|
||||
<!-- wp:group {"className":"site-brand"} -->
|
||||
<div class="wp-block-group site-brand">
|
||||
<!-- wp:site-logo /-->
|
||||
<!-- wp:site-title /-->
|
||||
<!-- 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 {"__unstableLocation":"primary","__unstableSocialLinks":"social","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"typography":{"fontStyle":"normal","fontWeight":"900","textTransform":"uppercase"},"spacing":{"blockGap":"40px"}}} /-->
|
||||
</div>
|
||||
<!-- /wp:group -->
|
||||
</div>
|
||||
<!-- /wp:group -->
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<!-- wp:template-part {"slug":"header-ollie","tagName":"header"} /-->
|
||||
<!-- wp:template-part {"slug":"header-wide","tagName":"header"} /-->
|
||||
|
||||
<!-- wp:spacer {"height":170} -->
|
||||
<div style="height:170px" aria-hidden="true" class="wp-block-spacer"></div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!-- wp:template-part {"slug":"header-ollie","tagName":"header"} /-->
|
||||
<!-- wp:template-part {"slug":"header-wide","tagName":"header"} /-->
|
||||
|
||||
<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"4em","bottom":"2.5em"}}},"layout":{"inherit":true}} -->
|
||||
<main class="wp-block-group" style="padding-top:4em;padding-bottom:2.5em">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!-- wp:template-part {"slug":"header-ollie","tagName":"header"} /-->
|
||||
<!-- wp:template-part {"slug":"header-wide","tagName":"header"} /-->
|
||||
|
||||
<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"4em","bottom":"2.5em"}}},"layout":{"inherit":true}} -->
|
||||
<main class="wp-block-group" style="padding-top:4em;padding-bottom:2.5em">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!-- wp:template-part {"slug":"header-ollie","tagName":"header"} /-->
|
||||
<!-- wp:template-part {"slug":"header-wide","tagName":"header"} /-->
|
||||
|
||||
<!-- wp:group {"layout":{"inherit":true},"style":{"spacing":{"padding":{"top":"4em"}}}} -->
|
||||
<div class="wp-block-group" style="padding-top:4em"><!-- wp:post-title {"level":1,"align":"wide"} /--></div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!-- wp:template-part {"slug":"header-ollie","tagName":"header"} /-->
|
||||
<!-- wp:template-part {"slug":"header-wide","tagName":"header"} /-->
|
||||
|
||||
<!-- wp:group {"layout":{"inherit":true}, "tagName":"main"} -->
|
||||
<main class="wp-block-group">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!-- wp:template-part {"slug":"header-ollie","tagName":"header"} /-->
|
||||
<!-- wp:template-part {"slug":"header-wide","tagName":"header"} /-->
|
||||
|
||||
<!-- wp:group {"layout":{"inherit":true},"style":{"spacing":{"padding":{"top":"4em"}}}} -->
|
||||
<div class="wp-block-group" style="padding-top:4em"><!-- wp:post-title {"level":1,"align":"wide"} /--></div>
|
||||
|
|
|
|||
2
skatepark/package-lock.json
generated
2
skatepark/package-lock.json
generated
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "skatepark",
|
||||
"version": "1.0.16",
|
||||
"version": "1.0.25",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -1,103 +0,0 @@
|
|||
.wp-site-blocks .site-header-ollie {
|
||||
|
||||
max-width: var(--wp--custom--layout--wide-size); // Layouts can be flex OR flow/default (inherit), not both. So we need to mimick the wide width alignment supplied by Gutenberg here.
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
margin-top: calc( 0.5 * var(--wp--custom--gap--vertical) );
|
||||
gap: 0;
|
||||
justify-content: space-between; // Apply a cluster (flex?) layout
|
||||
align-items: flex-start;
|
||||
|
||||
@include break-small-only(){
|
||||
grid-row-gap: calc( 0.25 * var(--wp--custom--gap--vertical) );
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"brand menu"
|
||||
"social social";
|
||||
border-bottom: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--color--primary);
|
||||
}
|
||||
> * {
|
||||
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: calc( 0.5 * var(--wp--custom--gap--vertical) );
|
||||
margin-bottom: calc( 0.5 * var(--wp--custom--gap--vertical) );
|
||||
@include break-small-only(){
|
||||
margin-top: calc( 0.125 * var(--wp--custom--gap--vertical) );
|
||||
margin-bottom: calc( 0.125 * var(--wp--custom--gap--vertical) );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-social-links {
|
||||
margin: 0;
|
||||
|
||||
&.is-style-logos-only {
|
||||
> .wp-social-link {
|
||||
padding: 0; // Needed to override Gutenberg default padding on this block style variation
|
||||
|
||||
&:last-child a {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-brand {
|
||||
margin-top: calc( 0.5 * var(--wp--custom--gap--vertical) );
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"logo title"
|
||||
"logo tagline";
|
||||
grid-template-columns: auto 1fr;
|
||||
|
||||
@include break-small(){
|
||||
grid-template-rows: 35px auto;
|
||||
}
|
||||
|
||||
@include break-small-only(){
|
||||
grid-template-areas:
|
||||
"logo"
|
||||
"title"
|
||||
"tagline";
|
||||
grid-area: brand;
|
||||
}
|
||||
.wp-block-site-logo {
|
||||
grid-area: logo;
|
||||
margin: 0 var(--wp--custom--gap--horizontal) 0 0;
|
||||
max-width: 120px;
|
||||
align-self: center;
|
||||
@include break-small-only(){
|
||||
margin-bottom: calc( 0.75 * var(--wp--custom--gap--vertical) );
|
||||
}
|
||||
}
|
||||
.wp-block-site-title {
|
||||
grid-area: title;
|
||||
margin: 0 0 0.5em;
|
||||
@include break-small-only(){
|
||||
margin: 0 0 0.25em;
|
||||
}
|
||||
}
|
||||
.wp-block-site-tagline {
|
||||
grid-area: tagline;
|
||||
margin: 0;
|
||||
@include break-small-only(){
|
||||
margin-bottom: calc( 0.25 * var(--wp--custom--gap--vertical) );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include break-small-only(){
|
||||
.nav-links {
|
||||
display: contents;
|
||||
.wp-block-navigation__responsive-container-open {
|
||||
margin-top: calc( 0.5 * var(--wp--custom--gap--vertical) - 3px );
|
||||
}
|
||||
.wp-block-navigation {
|
||||
grid-area: menu;
|
||||
}
|
||||
.wp-block-social-links {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -23,5 +23,4 @@
|
|||
@import "elements/headings";
|
||||
@import "elements/links";
|
||||
@import "elements/post-meta";
|
||||
@import "templates/header";
|
||||
@import "templates/index";
|
||||
|
|
|
|||
|
|
@ -287,6 +287,16 @@
|
|||
"duotone": "var(--wp--preset--duotone--default-filter)"
|
||||
}
|
||||
},
|
||||
"core/navigation": {
|
||||
"typography": {
|
||||
"letterSpacing": "0.05em",
|
||||
"fontWeight": "900",
|
||||
"textTransform": "uppercase"
|
||||
},
|
||||
"spacing": {
|
||||
"blockGap": "var(--wp--custom--gap--horizontal)"
|
||||
}
|
||||
},
|
||||
"core/post-author": {
|
||||
"filter": {
|
||||
"duotone": "var(--wp--preset--duotone--default-filter)"
|
||||
|
|
@ -341,11 +351,6 @@
|
|||
"letterSpacing": "0.05em",
|
||||
"textTransform": "uppercase"
|
||||
}
|
||||
},
|
||||
"core/navigation": {
|
||||
"typography": {
|
||||
"letterSpacing": "0.05em"
|
||||
}
|
||||
}
|
||||
},
|
||||
"elements": {
|
||||
|
|
|
|||
Loading…
Reference in a new issue