Skip to content
This repository was archived by the owner on Feb 17, 2025. It is now read-only.

BCB + children: use nav block responsive control #3870

Merged
pbking merged 15 commits into from
May 21, 2021
Merged

BCB + children: use nav block responsive control #3870

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
6f8fb26
Replace responsive logic + styles with the blocks native responsiveness.
jffng May 17, 2021
7322967
Pass 'isResponsive' block attribute so that responsive mobile navigat…
pbking May 17, 2021
ac3c3a6
Style/position mobile navigation open button
pbking May 18, 2021
143270a
Styled mobile navigation modal to match theme.
pbking May 18, 2021
ce20bd3
Further styled and positioned mobile menu block.
pbking May 18, 2021
2e04162
Removed unused variable
pbking May 18, 2021
0e93e6a
Styled navigation links (submenus)
pbking May 18, 2021
834716c
Rebuild child themes
pbking May 18, 2021
5c13247
remove unused custom navigation variables
pbking May 21, 2021
0c8ad94
compiled with navigation variables removed
pbking May 21, 2021
f2b9ab8
cleaned up quadrat navigation styles
pbking May 21, 2021
ae6dc6c
Changed hamburger menu position to match 'close' button
pbking May 21, 2021
4087b93
tweak to desktop navigation styles
pbking May 21, 2021
5d339b6
Added responsive flag and removed default links for navigation blocks
pbking May 21, 2021
c5b2189
Added backup solution to mobile nav to quadrat
pbking May 21, 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
58 changes: 0 additions & 58 deletions blank-canvas-blocks/assets/navigation.js
View file
Open in desktop

This file was deleted.

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

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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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