Skip to content

Commit

Permalink
BCB + children: use nav block responsive control (#3870)
Browse files Browse the repository at this point in the history 
* Replace responsive logic + styles with the blocks native responsiveness.
* Added responsive flag and removed default links for navigation blocks
* Added backup solution to mobile nav to quadrat

Co-authored-by: Jason Crist <[email protected]>
  • Loading branch information
@jffng @pbking
jffng and pbking authored May 21, 2021
1 parent b081797 commit 655b1fe
Show file tree
Hide file tree
Showing 17 changed files with 466 additions and 445 deletions.
58 changes: 0 additions & 58 deletions blank-canvas-blocks/assets/navigation.js
View file

This file was deleted.

102 changes: 13 additions & 89 deletions blank-canvas-blocks/assets/ponyfill.css
View file

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

2 changes: 1 addition & 1 deletion blank-canvas-blocks/block-template-parts/navigation.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!-- wp:navigation {"orientation":"horizontal","itemsJustification":"center"} -->
<!-- wp:navigation {"orientation":"horizontal","itemsJustification":"center","isResponsive":true} -->
<!-- /wp:navigation -->
<!-- wp:spacer {"height":60} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
Expand Down
46 changes: 5 additions & 41 deletions blank-canvas-blocks/experimental-theme.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,47 +143,6 @@
"horizontal": "30px",
"vertical": "30px"
},
"navigation": {
"mobile": {
"menu": {
"color": {
"text": "var(--wp--custom--color--foreground)"
},
"closeLabel": "╳",
"openLabel": "☰",
"typography": {
"fontWeight": 500,
"fontSize": "24px",
"fontFamily": "var(--wp--custom--font-family--base)"
}
},
"padding": "10px",
"typography": {
"fontWeight": 200,
"fontSize": "20px",
"fontFamily": "var(--wp--custom--font-family--base)"
},
"horizontalAlignment": "center",
"verticalAlignment": "center"
},
"padding": "10px",
"submenu": {
"color": {
"text": "var(--wp--custom--color--foreground)",
"background": "var(--wp--custom--color--background)",
"hoverText": "var(--wp--custom--color--secondary)",
"hoverBackground": "var(--wp--custom--color--background)"
},
"border": {
"color": "0",
"radius": "0",
"style": "none",
"width": "1px"
},
"padding": "8px",
"shadow": "1px 1px 3px 0px rgba(0,0,0,.2)"
}
},
"paragraph": {
"dropcap": {
"margin": ".1em .1em 0 0",
Expand Down Expand Up @@ -356,6 +315,11 @@
"fontSize": "var(--wp--preset--font-size--small)"
}
},
"core/navigation-link": {
"color": {
"background": "var(--wp--custom--color--background)"
}
},
"core/post-content": {
"spacing": {
"padding": {
Expand Down
1 change: 0 additions & 1 deletion blank-canvas-blocks/functions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@ function blank_canvas_editor_styles() {
function blank_canvas_blocks_scripts() {
// Enqueue Google fonts
wp_enqueue_style( 'blank-canvas-blocks-fonts', blank_canvas_blocks_fonts_url(), array(), null );
wp_enqueue_script( 'blank-canvas-navigation-script', get_template_directory_uri() . '/assets/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
wp_enqueue_style( 'blank_canvas_blocks-ponyfill', get_template_directory_uri() . '/assets/ponyfill.css', array(), wp_get_theme()->get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'blank_canvas_blocks_scripts' );
Expand Down
119 changes: 17 additions & 102 deletions blank-canvas-blocks/sass/blocks/_navigation.scss
View file
Original file line number Diff line number Diff line change
@@ -1,108 +1,23 @@
.wp-block-navigation {
a {
border-bottom: none;
}
.wp-block-navigation-link {
padding: 0;
.wp-block-navigation-link__content {
padding: var(--wp--custom--navigation--padding);
}
}
.wp-block-navigation-link__submenu-icon {
padding: 0;
text-indent: -8px;
}
.wp-block-navigation__container {
.has-child {
.wp-block-navigation-link__container {
padding: 0;
border-radius: var(--wp--custom--navigation--submenu--border--radius);
border-style: var(--wp--custom--navigation--submenu--border--style);
border-width: var(--wp--custom--navigation--submenu--border--width);
border-color: var(--wp--custom--navigation--submenu--border--color);
box-shadow: var(--wp--custom--navigation--submenu--shadow);

.wp-block-navigation-link__content {
padding: var(--wp--custom--navigation--submenu--padding);
}
}
body.admin-bar {
.wp-block-navigation.is-responsive {
.wp-block-navigation__responsive-container-open {
top: calc( 46px + 24px);
}
}
}
}

@include break-mobile {
header .wp-block-navigation {
.wp-block-navigation__mobile-menu-open-button,
.wp-block-navigation__mobile-menu-close-button {
display:none;
}
.wp-block-navigation.is-responsive {
position: static;
.wp-block-navigation__responsive-container-open {
position: absolute;
top: 24px;
right: 24px;
}
}

@include break-mobile-only {
header .wp-block-navigation:not(.show) {
text-align: right;
padding-left: var(--wp--custom--margin--horizontal);
padding-right: var(--wp--custom--margin--horizontal);

.wp-block-navigation__container {
display: none;
}

.wp-block-navigation__mobile-menu-open-button {
font-size: var(--wp--custom--navigation--mobile--menu--typography--font-size);
font-weight: var(--wp--custom--navigation--mobile--menu--typography--font-weight);
font-family: var(--wp--custom--navigation--mobile--menu--typography--font-family);
background-color: transparent;
border: none;
}

.wp-block-navigation__mobile-menu-close-button {
display: none;
}
.wp-block-navigation__responsive-container.is-menu-open {
background-color: var(--wp--custom--color--background);
color: var(--wp--custom--color--foreground);
}

header .wp-block-navigation.show {
opacity: 1;
position:absolute;
top: 0;
bottom: 0;
right: 0;
width: 100%;

.wp-block-navigation__mobile-menu-close-button {
display: inline-block;
position: absolute;
top: var(--wp--custom--margin--vertical);
right: var(--wp--custom--margin--horizontal);
font-size: var(--wp--custom--navigation--mobile--menu--typography--font-size);
font-weight: var(--wp--custom--navigation--mobile--menu--typography--font-weight);
font-family: var(--wp--custom--navigation--mobile--menu--typography--font-family);
background-color: transparent;
border: none;
}

.wp-block-navigation__container {
background-color: var(--wp--custom--navigation--submenu--color--background);
flex-direction: column;
align-items: var(--wp--custom--navigation--mobile--horizontal-alignment);
justify-content: var(--wp--custom--navigation--mobile--vertical-alignment);
position:fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 99999;
overflow-y: scroll;
}
.wp-block-navigation-link {
padding: 0;
.wp-block-navigation-link__content {
padding: var(--wp--custom--navigation--mobile--padding);
font-family: var(--wp--custom--navigation--mobile--typography--font-family);
font-size: var(--wp--custom--navigation--mobile--typography--font-size);
font-weight: var(--wp--custom--navigation--mobile--typography--font-weight);
}
}
.wp-block-navigation-link__content {
color: var(--wp--custom--color--foreground) !important;
}
}
}
15 changes: 1 addition & 14 deletions mayland-blocks/block-template-parts/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,7 @@
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
<!-- wp:navigation-link {"label":"Home","url":"#"} /-->

<!-- wp:navigation-link {"label":"About","url":"#"} /-->

<!-- wp:navigation-link {"label":"Blog","url":"#"} /-->

<!-- wp:navigation-link {"label":"Contact","url":"#"} /-->

<!-- wp:social-links {"iconColor":"black","iconColorValue":"#000000","className":"is-style-logos-only"} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"instagram.com/wordpress","service":"instagram"} /-->

<!-- wp:social-link {"url":"twitter.com/wordpress","service":"twitter"} /--></ul>
<!-- /wp:social-links -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right","isResponsive":true} -->
<!-- /wp:navigation --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
Loading

0 comments on commit 655b1fe

Please sign in to comment.