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

Add Navigation styling to BCB #3460

Merged
merged 10 commits into from
Mar 16, 2021
Merged

Add Navigation styling to BCB #3460

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7159e9a
Add navigation style configuration to theme.json & add drop-shadow to…
pbking Mar 12, 2021
b4b1fe0
Adding mobile menu option
pbking Mar 16, 2021
bd33898
Refactored to target mobile navigation styles exclusively for navigat…
pbking Mar 16, 2021
7b4728a
Update blank-canvas-blocks/functions.php
pbking Mar 16, 2021
40df2dc
Added a close button to modal mobile menu.
pbking Mar 16, 2021
cb33a51
Update blank-canvas-blocks/assets/navigation.js
pbking Mar 16, 2021
9b8d320
Update blank-canvas-blocks/assets/navigation.js
pbking Mar 16, 2021
2e06893
Update blank-canvas-blocks/assets/navigation.js
pbking Mar 16, 2021
4c6ffc7
Update blank-canvas-blocks/assets/navigation.js
pbking Mar 16, 2021
caa40fc
refactored to use null checks instead of optional chaining for es5 co…
pbking Mar 16, 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
50 changes: 50 additions & 0 deletions blank-canvas-blocks/assets/navigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/**
* File navigation.js.
*
* Required to open the mobile navigation.
*/
(function () {

function mobalizeNavigationBlock( navMenu ) {
pbking marked this conversation as resolved.
Show resolved Hide resolved
if( !navMenu ){
return;
}
addMobileMenuOpenButton( navMenu );
addMobileMenuCloseButton( navMenu );
}

function addMobileMenuOpenButton( navMenu ) {
const menuContainer = navMenu.querySelector( '.wp-block-navigation__container' );
const openButton = document.createElement( 'button' );
const openButtonLabel = getComputedStyle(menuContainer).getPropertyValue( '--wp--custom--navigation--mobile--menu--open-label' );
openButton.classList.add( 'wp-block-navigation__mobile-menu-open-button' );
openButton.innerText = openButtonLabel;
openButton.addEventListener( 'click', (clickEvent) => {
console.log('clickEvent', clickEvent);
pbking marked this conversation as resolved.
Show resolved Hide resolved
navMenu.classList.add( 'show' );
menuContainer.scrollTop = 0;
if( 0 === clickEvent.detail) {
pbking marked this conversation as resolved.
Show resolved Hide resolved
// Menu was opened with keyboard, apply focus to close button.
menuContainer.querySelector('button:first-of-type')?.focus();
Copy link
Contributor

Choose a reason for hiding this comment

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

To confirm, we can use optional chaining (?.) because we are not supporting IE, correct?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oh, man, force of habit. Previously I ran all JS code through Babel to transpile it for IE.
None of this would work in IE though since it's so dependent on CSS Variables. Easy enough to add a null check instead though in case the CSS vars polyfill can do the trick here.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Refactored out the cool stuff.
Replaced with boring 'ol null checks.

}
});
navMenu.appendChild( openButton );
}

function addMobileMenuCloseButton( navMenu ) {
const menuContainer = navMenu.querySelector( '.wp-block-navigation__container' );
const closeButton = document.createElement( 'button' );
const closeButtonLabel = getComputedStyle(menuContainer).getPropertyValue( '--wp--custom--navigation--mobile--menu--close-label' );
closeButton.classList.add( 'wp-block-navigation__mobile-menu-close-button' );
closeButton.innerText = closeButtonLabel;
closeButton.addEventListener( 'click', () => {
navMenu.classList.remove( 'show' );
});
menuContainer.prepend( closeButton );
}

window.addEventListener( 'load', () => {
mobalizeNavigationBlock(document.querySelector( 'header .wp-block-navigation' ) );
pbking marked this conversation as resolved.
Show resolved Hide resolved
});

})();
71 changes: 71 additions & 0 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: 2 additions & 0 deletions blank-canvas-blocks/block-template-parts/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
<!-- /wp:navigation -->
2 changes: 2 additions & 0 deletions blank-canvas-blocks/block-templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:query -->
<!-- wp:query-loop -->
<!-- wp:post-title {"isLink":true} /-->
Expand Down
47 changes: 47 additions & 0 deletions blank-canvas-blocks/experimental-theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,53 @@
"padding": {
"left": "calc( 2 * var(--wp--custom--padding--horizontal) )"
}
},
"navigation": {
"mobile": {
"menu": {
"openLabel": "☰",
"closeLabel": "╳",
"color": {
"text": "var(--wp--custom--color--foreground)"
},
"typography": {
"fontWeight": 500,
"fontSize": "24px",
"fontFamily": "var(--wp--custom--font-family--base)"
}
},
"padding": "10px",
"verticalAlignment": "center",
"horizontalAlignment": "center",
"typography": {
"fontWeight": 200,
"fontSize": "20px",
"fontFamily": "var(--wp--custom--font-family--base)"
}
},
"padding": "10px",
"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)"
},
"submenu": {
"padding": "8px",
"shadow": "1px 1px 3px 0px rgba(0,0,0,.2)",
"border": {
"radius": "0",
"color": "0",
"width": "1px",
"style": "none"
},
"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)"
}
}
}
}
}
Expand Down
1 change: 1 addition & 0 deletions blank-canvas-blocks/functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ 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', 11 );
Expand Down
102 changes: 86 additions & 16 deletions blank-canvas-blocks/sass/blocks/_navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,27 @@
.wp-block-navigation {


.wp-block-navigation {
a {
border-bottom: none;
pbking marked this conversation as resolved.
Show resolved Hide resolved
}

.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 {
.wp-block-navigation-link {

color: var(--wp--custom--navigation--color--text);
background-color: var(--wp--custom--navigation--color--background);
:hover {
color: var(--wp--custom--navigation--color--hover-text);
background-color: var(--wp--custom--navigation--color--hover-background);
}

color: var(--wp--custom--navigation--color--text);
background-color: var(--wp--custom--navigation--color--background);
:hover {
color: var(--wp--custom--navigation--color--hover-text);
background-color: var(--wp--custom--navigation--color--hover-background);
}
}
.has-child {
.wp-block-navigation-link__container {
Expand All @@ -39,6 +32,7 @@
border-color: var(--wp--custom--navigation--submenu--border--color);
color: var(--wp--custom--navigation--submenu--color--text);
background-color: var(--wp--custom--navigation--submenu--color--background);
box-shadow: var(--wp--custom--navigation--submenu--shadow);
:hover {
color: var(--wp--custom--navigation--submenu--color--hover-text);
background-color: var(--wp--custom--navigation--submenu--color--hover-background);
Expand All @@ -49,5 +43,81 @@
}
}
}
}

@include media(mobile) {
header .wp-block-navigation {
.wp-block-navigation__mobile-menu-open-button,
.wp-block-navigation__mobile-menu-close-button {
display:none;
}
}
}

@include media(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;
}
}

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);
}
}
}
}