diff --git a/blank-canvas-blocks/assets/navigation.js b/blank-canvas-blocks/assets/navigation.js
deleted file mode 100644
index 6100b60029..0000000000
--- a/blank-canvas-blocks/assets/navigation.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * File navigation.js.
- *
- * Required to open the mobile navigation.
- */
-(function () {
-
- function mobilizeNavigationBlock( navMenu ) {
- if( !navMenu ){
- return;
- }
- addMobileMenuOpenButton( navMenu );
- addMobileMenuCloseButton( navMenu );
- }
-
- function addMobileMenuOpenButton( navMenu ) {
- const menuContainer = navMenu.querySelector( '.wp-block-navigation__container' );
- if( !menuContainer ) {
- return;
- }
- 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) => {
- navMenu.classList.add( 'show' );
- menuContainer.scrollTop = 0;
- if( 0 === clickEvent.detail ) {
- // Menu was opened with keyboard, apply focus to close button.
- const firstButton = menuContainer.querySelector('.wp-block-navigation__mobile-menu-close-button');
- if( firstButton ) {
- firstButton.focus();
- }
- }
- });
- navMenu.appendChild( openButton );
- }
-
- function addMobileMenuCloseButton( navMenu ) {
- const menuContainer = navMenu.querySelector( '.wp-block-navigation__container' );
- if( !menuContainer ) {
- return;
- }
- 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', () => {
- mobilizeNavigationBlock( document.querySelector( 'header .wp-block-navigation' ) );
- });
-
-})();
diff --git a/blank-canvas-blocks/assets/ponyfill.css b/blank-canvas-blocks/assets/ponyfill.css
index b3542826a2..e7f210ab88 100644
--- a/blank-canvas-blocks/assets/ponyfill.css
+++ b/blank-canvas-blocks/assets/ponyfill.css
@@ -349,103 +349,27 @@ ol {
padding-left: var(--wp--custom--list--padding--left);
}
-.wp-block-navigation a {
- border-bottom: none;
+body.admin-bar .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container-open {
+ top: calc( 46px + 24px);
}
-.wp-block-navigation .wp-block-navigation-link {
- padding: 0;
-}
-
-.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content {
- padding: var(--wp--custom--navigation--padding);
-}
-
-.wp-block-navigation .wp-block-navigation-link__submenu-icon {
- padding: 0;
- text-indent: -8px;
+.wp-block-navigation.is-responsive {
+ position: static;
}
-.wp-block-navigation .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.is-responsive .wp-block-navigation__responsive-container-open {
+ position: absolute;
+ top: 24px;
+ right: 24px;
}
-.wp-block-navigation .wp-block-navigation__container .has-child .wp-block-navigation-link__container .wp-block-navigation-link__content {
- padding: var(--wp--custom--navigation--submenu--padding);
-}
-
-@media (min-width: 480px) {
- header .wp-block-navigation .wp-block-navigation__mobile-menu-open-button,
- header .wp-block-navigation .wp-block-navigation__mobile-menu-close-button {
- display: none;
- }
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open {
+ background-color: var(--wp--custom--color--background);
+ color: var(--wp--custom--color--foreground);
}
-@media (max-width: 479px) {
- header .wp-block-navigation:not(.show) {
- text-align: right;
- padding-left: var(--wp--custom--margin--horizontal);
- padding-right: var(--wp--custom--margin--horizontal);
- }
- header .wp-block-navigation:not(.show) .wp-block-navigation__container {
- display: none;
- }
- header .wp-block-navigation:not(.show) .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;
- }
- header .wp-block-navigation:not(.show) .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%;
- }
- header .wp-block-navigation.show .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;
- }
- header .wp-block-navigation.show .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;
- }
- header .wp-block-navigation.show .wp-block-navigation-link {
- padding: 0;
- }
- header .wp-block-navigation.show .wp-block-navigation-link .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.is-responsive .wp-block-navigation-link__content {
+ color: var(--wp--custom--color--foreground) !important;
}
p.has-text-color a {
diff --git a/blank-canvas-blocks/block-template-parts/navigation.html b/blank-canvas-blocks/block-template-parts/navigation.html
index e8be968039..c997daae9f 100644
--- a/blank-canvas-blocks/block-template-parts/navigation.html
+++ b/blank-canvas-blocks/block-template-parts/navigation.html
@@ -1,4 +1,4 @@
-
+
diff --git a/blank-canvas-blocks/experimental-theme.json b/blank-canvas-blocks/experimental-theme.json
index 4cf9a8c9c3..9c232a7ff7 100644
--- a/blank-canvas-blocks/experimental-theme.json
+++ b/blank-canvas-blocks/experimental-theme.json
@@ -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",
@@ -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": {
diff --git a/blank-canvas-blocks/functions.php b/blank-canvas-blocks/functions.php
index 7d7915010e..1577b48f82 100644
--- a/blank-canvas-blocks/functions.php
+++ b/blank-canvas-blocks/functions.php
@@ -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' );
diff --git a/blank-canvas-blocks/sass/blocks/_navigation.scss b/blank-canvas-blocks/sass/blocks/_navigation.scss
index 121b9ec4ae..b50da01922 100644
--- a/blank-canvas-blocks/sass/blocks/_navigation.scss
+++ b/blank-canvas-blocks/sass/blocks/_navigation.scss
@@ -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;
}
-}
+}
\ No newline at end of file
diff --git a/mayland-blocks/block-template-parts/header.html b/mayland-blocks/block-template-parts/header.html
index 172833078b..401d5b3690 100644
--- a/mayland-blocks/block-template-parts/header.html
+++ b/mayland-blocks/block-template-parts/header.html
@@ -4,20 +4,7 @@
-
\ No newline at end of file
diff --git a/mayland-blocks/experimental-theme.json b/mayland-blocks/experimental-theme.json
index 0f41da2e96..d31a2b4590 100644
--- a/mayland-blocks/experimental-theme.json
+++ b/mayland-blocks/experimental-theme.json
@@ -150,47 +150,6 @@
"horizontal": "32px",
"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",
@@ -385,6 +344,11 @@
"fontSize": "var(--wp--preset--font-size--small)"
}
},
+ "core/navigation-link": {
+ "color": {
+ "background": "var(--wp--custom--color--background)"
+ }
+ },
"core/post-content": {
"spacing": {
"padding": {
diff --git a/quadrat/assets/navigation.js b/quadrat/assets/navigation.js
new file mode 100644
index 0000000000..c23cee8893
--- /dev/null
+++ b/quadrat/assets/navigation.js
@@ -0,0 +1,76 @@
+/**
+ * File navigation.js.
+ *
+ * Required to open the mobile navigation.
+ */
+( function () {
+ function mobilizeNavigationBlock( navMenu ) {
+ if ( ! navMenu ) {
+ return;
+ }
+ addMobileMenuOpenButton( navMenu );
+ addMobileMenuCloseButton( navMenu );
+ }
+
+ function addMobileMenuOpenButton( navMenu ) {
+ const menuContainer = navMenu.querySelector(
+ '.wp-block-navigation__container'
+ );
+ if ( ! menuContainer ) {
+ return;
+ }
+ 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 ) => {
+ navMenu.classList.add( 'show' );
+ menuContainer.scrollTop = 0;
+ if ( 0 === clickEvent.detail ) {
+ // Menu was opened with keyboard, apply focus to close button.
+ const firstButton = menuContainer.querySelector(
+ '.wp-block-navigation__mobile-menu-close-button'
+ );
+ if ( firstButton ) {
+ firstButton.focus();
+ }
+ }
+ } );
+ navMenu.appendChild( openButton );
+ }
+
+ function addMobileMenuCloseButton( navMenu ) {
+ const menuContainer = navMenu.querySelector(
+ '.wp-block-navigation__container'
+ );
+ if ( ! menuContainer ) {
+ return;
+ }
+ 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', () => {
+ mobilizeNavigationBlock(
+ document.querySelector( 'header .wp-block-navigation' )
+ );
+ } );
+} )();
diff --git a/quadrat/assets/theme.css b/quadrat/assets/theme.css
index cb2541babb..73c7f11e16 100644
--- a/quadrat/assets/theme.css
+++ b/quadrat/assets/theme.css
@@ -168,10 +168,120 @@ ul ul {
text-decoration: underline;
}
+.wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation-link__container {
+ background-color: var(--wp--custom--color--background);
+ border-color: var(--wp--custom--color--foreground);
+}
+
.wp-block-navigation__mobile-menu-open-button {
color: var(--wp--custom--color--primary);
}
+.wp-block-navigation a {
+ border-bottom: none;
+}
+
+.wp-block-navigation .wp-block-navigation-link {
+ padding: 0;
+}
+
+.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content {
+ padding: var(--wp--custom--navigation--padding);
+}
+
+.wp-block-navigation .wp-block-navigation-link__submenu-icon {
+ padding: 0;
+ text-indent: -8px;
+}
+
+.wp-block-navigation .wp-block-navigation__container {
+ padding: 20px;
+}
+
+.wp-block-navigation .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 .wp-block-navigation__container .has-child .wp-block-navigation-link__container .wp-block-navigation-link__content {
+ padding: var(--wp--custom--navigation--submenu--padding);
+}
+
+@media (min-width: 480px) {
+ header .wp-block-navigation .wp-block-navigation__mobile-menu-open-button,
+ header .wp-block-navigation .wp-block-navigation__mobile-menu-close-button {
+ display: none;
+ }
+}
+
+@media (max-width: 479px) {
+ header .wp-block-navigation:not(.show) {
+ text-align: right;
+ padding-left: var(--wp--custom--margin--horizontal);
+ padding-right: var(--wp--custom--margin--horizontal);
+ }
+ header .wp-block-navigation:not(.show) .wp-block-navigation__container {
+ display: none;
+ }
+ header .wp-block-navigation:not(.show) .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;
+ }
+ header .wp-block-navigation:not(.show) .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%;
+ }
+ header .wp-block-navigation.show .wp-block-navigation__mobile-menu-close-button {
+ display: inline-block;
+ position: absolute;
+ top: var(--wp--custom--margin--vertical);
+ right: var(--wp--custom--margin--horizontal);
+ color: var(--wp--custom--navigation--mobile--menu--color--text);
+ 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;
+ }
+ header .wp-block-navigation.show .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;
+ }
+ header .wp-block-navigation.show .wp-block-navigation-link {
+ padding: 0;
+ }
+ header .wp-block-navigation.show .wp-block-navigation-link .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);
+ line-height: var(--wp--custom--navigation--mobile--typography--line-height);
+ }
+}
+
.wp-block-post-comments .reply a, .wp-block-post-comments .reply a:hover, .wp-block-post-comments .reply a:focus, .wp-block-post-comments .reply a:active {
font-size: 1em;
line-height: 1.2;
diff --git a/quadrat/child-experimental-theme.json b/quadrat/child-experimental-theme.json
index cb1132e9c1..312c180575 100644
--- a/quadrat/child-experimental-theme.json
+++ b/quadrat/child-experimental-theme.json
@@ -100,6 +100,46 @@
"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",
+ "lineHeight": "40px",
+ "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": "var(--wp--custom--color--foreground)",
+ "radius": "0",
+ "style": "solid",
+ "width": "2px"
+ },
+ "padding": "8px",
+ "shadow": "1px 1px 3px 0px rgba(0,0,0,.2)"
+ },
"color": {
"hoverText": "var(--wp--custom--color--primary)"
}
@@ -224,6 +264,17 @@
"fontFamily": "var(--wp--preset--font-family--base)"
}
},
+ "core/navigation": {
+ "typography": {
+ "fontSize": "18px"
+ }
+ },
+ "core/navigation-link": {
+ "color": {
+ "background": "transparent",
+ "text": "var(--wp--custom--color--foreground)"
+ }
+ },
"core/post-title": {
"typography": {
"fontSize": "var(--wp--custom--heading--h1--font-size)",
@@ -288,11 +339,6 @@
"fontSize": "18px",
"fontWeight": 700
}
- },
- "core/navigation": {
- "typography": {
- "fontSize": "18px"
- }
}
},
"elements": {
diff --git a/quadrat/experimental-theme.json b/quadrat/experimental-theme.json
index 6e4bdd7ca3..00b86f8b4f 100644
--- a/quadrat/experimental-theme.json
+++ b/quadrat/experimental-theme.json
@@ -150,50 +150,6 @@
"horizontal": "20px",
"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)"
- },
- "color": {
- "hoverText": "var(--wp--custom--color--primary)"
- }
- },
"paragraph": {
"dropcap": {
"margin": "0 .2em .2em 0",
@@ -276,6 +232,51 @@
"h5": 1.4,
"h6": 1.4
}
+ },
+ "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",
+ "lineHeight": "40px",
+ "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": "var(--wp--custom--color--foreground)",
+ "radius": "0",
+ "style": "solid",
+ "width": "2px"
+ },
+ "padding": "8px",
+ "shadow": "1px 1px 3px 0px rgba(0,0,0,.2)"
+ },
+ "color": {
+ "hoverText": "var(--wp--custom--color--primary)"
+ }
}
},
"layout": {
@@ -394,6 +395,12 @@
"fontSize": "18px"
}
},
+ "core/navigation-link": {
+ "color": {
+ "background": "transparent",
+ "text": "var(--wp--custom--color--foreground)"
+ }
+ },
"core/post-content": {
"spacing": {
"padding": {
diff --git a/quadrat/functions.php b/quadrat/functions.php
index 65bf725952..8a0ad4f871 100644
--- a/quadrat/functions.php
+++ b/quadrat/functions.php
@@ -43,6 +43,7 @@ function quadrat_support() {
function quadrat_scripts() {
// Enqueue front-end styles.
wp_enqueue_style( 'quadrat-styles', get_stylesheet_directory_uri() . '/assets/theme.css', array( 'blank_canvas_blocks-ponyfill' ), wp_get_theme()->get( 'Version' ) );
+ wp_enqueue_script( 'quadrat-navigation-script', get_stylesheet_directory_uri() . '/assets/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'quadrat_scripts' );
diff --git a/quadrat/inc/render-navigation-block.php b/quadrat/inc/render-navigation-block.php
index f083d37a73..31f9493ef9 100644
--- a/quadrat/inc/render-navigation-block.php
+++ b/quadrat/inc/render-navigation-block.php
@@ -6,13 +6,17 @@ function render_navigation_block( $menu_location ) {
return;
}
+ $block_attributes = array();
+ $block_attributes['isResponsive'] = true;
+
$nav_items = wp_nav_menu(
array(
- 'echo' => false,
- 'theme_location' => $menu_location,
- 'container' => '',
- 'items_wrap' => '%3$s',
- 'fallback_cb' => false,
+ 'echo' => false,
+ 'block_attributes' => $block_attributes,
+ 'theme_location' => $menu_location,
+ 'container' => '',
+ 'items_wrap' => '%3$s',
+ 'fallback_cb' => false,
)
);
diff --git a/quadrat/sass/blocks/_navigation.scss b/quadrat/sass/blocks/_navigation.scss
index 5c8a5a2418..a82efab9a0 100644
--- a/quadrat/sass/blocks/_navigation.scss
+++ b/quadrat/sass/blocks/_navigation.scss
@@ -8,7 +8,126 @@
text-decoration: underline;
}
}
+.wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation-link__container {
+ background-color: var(--wp--custom--color--background);
+ border-color: var(--wp--custom--color--foreground);
+}
.wp-block-navigation__mobile-menu-open-button {
color: var(--wp--custom--color--primary);
-}
\ No newline at end of file
+}
+
+// Ponyfill for mobile navigation. Can be removed when this is resolved: https://github.com/WordPress/gutenberg/pull/31911
+.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 {
+ padding: 20px;
+ .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);
+ }
+ }
+ }
+ }
+}
+
+@include break-mobile {
+ header .wp-block-navigation {
+ .wp-block-navigation__mobile-menu-open-button,
+ .wp-block-navigation__mobile-menu-close-button {
+ display:none;
+ }
+ }
+}
+
+@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;
+ }
+ }
+
+ 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);
+ color: var(--wp--custom--navigation--mobile--menu--color--text);
+ 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);
+ line-height: var(--wp--custom--navigation--mobile--typography--line-height);
+ }
+ }
+ }
+}
+
+//end mobile navigation
\ No newline at end of file
diff --git a/seedlet-blocks/block-template-parts/header.html b/seedlet-blocks/block-template-parts/header.html
index 3394a5dbf5..8b0be9c2de 100644
--- a/seedlet-blocks/block-template-parts/header.html
+++ b/seedlet-blocks/block-template-parts/header.html
@@ -8,8 +8,7 @@
-
-
+
diff --git a/seedlet-blocks/experimental-theme.json b/seedlet-blocks/experimental-theme.json
index 114cc8e128..bdaf6cc7f2 100644
--- a/seedlet-blocks/experimental-theme.json
+++ b/seedlet-blocks/experimental-theme.json
@@ -188,47 +188,6 @@
"horizontal": "25px",
"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",
@@ -415,6 +374,11 @@
"fontSize": "var(--wp--preset--font-size--small)"
}
},
+ "core/navigation-link": {
+ "color": {
+ "background": "var(--wp--custom--color--background)"
+ }
+ },
"core/post-content": {
"spacing": {
"padding": {