Feature/WDSBT-12 - Mobile Menu

assets/scss/abstracts/_utility.scss

@@ -87,7 +87,10 @@ figure[class*=' blur-'] {
 .js-enabled {
  .site-header {
  position: sticky;
- top: 0;
+ top: var(
+ --wp-admin--admin-bar--height,
+ 0
+ ) !important; /* stylelint-disable-line declaration-no-important */
  transition: top 0.5s;
  z-index: 100;
  }

assets/scss/blocks/core/button.scss

@@ -6,7 +6,6 @@
  align-items: center;
  display: inline-flex;
  justify-content: center;
- padding: 0.75rem 2.5rem 0.75rem 1rem;
  position: relative;
  z-index: 1;
 
@@ -76,8 +75,6 @@
 .is-style-outline.is-style-outline.wp-block-button,
 .is-style-minimal.is-style-minimal.wp-block-button {
  .wp-block-button__link {
- padding: 0.75rem 2.5rem 0.75rem 1rem;
-
  &:hover {
  background-color: var(--wp--preset--color--primary-50);
  border: 1px solid var(--wp--preset--color--primary-500);

assets/scss/blocks/core/group.scss

@@ -26,4 +26,8 @@
  }
  }
  }
+
+ .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow & {
+ margin-block-start: var(--wp--preset--spacing--30);
+ }
 }

assets/scss/blocks/core/navigation.scss

@@ -13,7 +13,14 @@
 
 .wp-block-navigation {
  .wp-block-navigation-item {
+ cursor: pointer;
  padding: 0.5rem 0.625rem;
+
+ &:hover {
+ .wp-block-navigation__submenu-icon {
+ transform: rotate(-180deg);
+ }
+ }
  }
 
  .wp-block-navigation-item__content {
@@ -71,6 +78,61 @@
  .wp-block-navigation__responsive-container-open {
  display: flex;
  }
+
+ .wp-block-navigation {
+ .wp-block-navigation-item {
+ padding: 0;
+ }
+
+ .has-child {
+ cursor: pointer;
+ position: relative;
+
+ > .wp-block-navigation-item__content {
+ display: flex;
+ align-items: center;
+ gap: var(--wp--preset--spacing--30);
+
+ &::after {
+ border: solid var(--wp--preset--color--black);
+ border-width: 0 2px 2px 0;
+ content: '';
+ display: inline-block;
+ height: 0.5rem;
+ padding: 0;
+ transform: rotate(45deg);
+ transition: 100ms linear all;
+ width: 0.5rem;
+ will-change: transform;
+ }
+ }
+
+ .wp-block-navigation__submenu-container {
+ display: none;
+ overflow: hidden;
+ }
+
+ &:focus-within,
+ &:active {
+ > .wp-block-navigation-item__content {
+ &::after {
+ transform: rotate(-135deg);
+ }
+ }
+
+ .wp-block-navigation__submenu-container {
+ display: block;
+ overflow: visible;
+
+ .wp-block-navigation-item {
+ .wp-block-navigation-link {
+ padding: 0;
+ }
+ }
+ }
+ }
+ }
+ }
 }
 
 @include responsive-min(834px) {

patterns/header-default.php

@@ -9,21 +9,23 @@
  */
 
 // Determine whether to display site logo or site title.
-$wds_site_info = has_custom_logo() ? '<!-- wp:site-logo {"width":150,"shouldSyncIcon":true,"style":{"layout":{"selfStretch":"fixed","flexSize":"25%"}}} /-->' : '<!-- wp:site-title /-->';
+$wds_site_info = has_custom_logo() ? '<!-- wp:site-logo {"width":150,"shouldSyncIcon":true,"style":{"layout":{"selfStretch":"fit","flexSize":null}}} /-->' : '<!-- wp:site-title /-->';
 
 ?>
 
-<!-- wp:group {"align":"full","style":{"spacing":{"margin":{"top":"0px"},"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"backgroundColor":"white","layout":{"inherit":true,"type":"constrained"},"metadata":{"name":"Header"}} -->
-<div class="wp-block-group alignfull has-white-background-color has-background" style="margin-top:0px;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px">
+<!-- wp:group {"metadata":{"name":"Header"},"align":"full","style":{"spacing":{"margin":{"top":"0px"},"padding":{"top":"30px","bottom":"30px"}}},"backgroundColor":"white","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull has-white-background-color has-background" style="margin-top:0px;padding-top:30px;padding-bottom:30px">
 
- <!-- wp:group {"align":"wide","layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap"}} -->
+ <!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
  <div class="wp-block-group alignwide">
 
  <?php echo wp_kses_post( $wds_site_info ); ?>
 
- <!-- wp:group {"style":{"layout":{"selfStretch":"fixed","flexSize":"75%"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"},"metadata":{"name":"Primary Menu"}} -->
+ <!-- wp:group {"templateLock":false,"lock":{"move":false,"remove":false},"metadata":{"name":"Primary Menu"},"style":{"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
  <div class="wp-block-group">
- <!-- wp:navigation {"icon":"menu","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","flexWrap":"wrap"}} /-->
+
+ <!-- wp:navigation {"icon":"menu","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","flexWrap":"nowrap","orientation":"horizontal"}} /-->
+
  </div>
  <!-- /wp:group -->
 

theme.json

@@ -417,6 +417,14 @@
  },
  "color": {
  "text": "var(--wp--preset--color--primary-500)"
+ },
+ "spacing": {
+ "padding": {
+ "top": "0.5rem",
+ "right": "2.5rem",
+ "bottom": "0.5rem",
+ "left": "1rem"
+ }
  }
  }
  }
@@ -480,6 +488,10 @@
  "right": "var(--wp--preset--spacing--30)",
  "bottom": "var(--wp--preset--spacing--30)",
  "left": "var(--wp--preset--spacing--30)"
+ },
+ "margin": {
+ "bottom": "0",
+ "top": "0"
  }
  },
  "elements": {
@@ -705,6 +717,9 @@
  "core/search": {
  "elements": {
  "button": {
+ "border": {
+ "width": "0"
+ },
  "spacing": {
  "padding": {
  "top": "0.5rem",
@@ -770,7 +785,10 @@
  "elements": {
  "button": {
  "border": {
- "radius": "4px"
+ "color": "transparent",
+ "radius": "4px",
+ "style": "solid",
+ "width": "1px"
  },
  "color": {
  "background": "var(--wp--preset--color--primary-500)",
@@ -779,7 +797,7 @@
  "spacing": {
  "padding": {
  "top": "0.5rem",
- "right": "2rem",
+ "right": "2.5rem",
  "bottom": "0.5rem",
  "left": "1rem"
  }