@wordpress/block-library 6.0.1-next.253d9b6e21.0 → 6.0.3

package/build-style/navigation/editor.css

@@ -83,9 +83,13 @@
   margin-left: 0;
   padding-left: 0;
 }
+.editor-styles-wrapper .wp-block-navigation .wp-block-navigation-item.wp-block {
+  margin-left: revert;
+  margin-right: revert;
+}
 
-.wp-block-navigation-link__label {
-  display: inline-block;
+.wp-block-navigation-item__label {
+  display: inline;
 }
 
 /**
@@ -97,22 +101,22 @@
 }
 
 .wp-block-navigation__container,
-.wp-block-navigation-link {
+.wp-block-navigation-item {
   background-color: inherit;
 }
 
-.wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover > .wp-block-navigation-link__container {
+.wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover > .wp-block-navigation__submenu-container {
   opacity: 0;
   visibility: hidden;
 }
 
-.has-child.is-selected > .wp-block-navigation-link__container, .has-child.has-child-selected > .wp-block-navigation-link__container {
+.has-child.is-selected > .wp-block-navigation__submenu-container, .has-child.has-child-selected > .wp-block-navigation__submenu-container {
   display: flex;
   opacity: 1;
   visibility: visible;
 }
 
-.is-dragging-components-draggable .has-child.is-dragging-within > .wp-block-navigation-link__container {
+.is-dragging-components-draggable .has-child.is-dragging-within > .wp-block-navigation__submenu-container {
   opacity: 1;
   visibility: visible;
 }
@@ -220,6 +224,17 @@
   margin-right: 7px;
 }
 
+@keyframes loadingpulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 .wp-block-navigation-placeholder__preview {
   display: flex;
   flex-direction: row;
@@ -228,11 +243,15 @@
   width: 100%;
   overflow: hidden;
 }
-.wp-block-navigation-placeholder__preview .wp-block-navigation-link.wp-block-navigation-link {
+.wp-block-navigation-placeholder__preview.is-loading {
+  animation: loadingpulse 1s linear infinite;
+  animation-delay: 0.5s;
+}
+.wp-block-navigation-placeholder__preview .wp-block-navigation-item.wp-block-navigation-item {
   position: relative;
   min-width: 72px;
 }
-.wp-block-navigation-placeholder__preview .wp-block-navigation-link.wp-block-navigation-link::before {
+.wp-block-navigation-placeholder__preview .wp-block-navigation-item.wp-block-navigation-item::before {
   display: block;
   content: "";
   border-radius: 2px;
@@ -246,24 +265,19 @@
 .wp-block-navigation-placeholder__preview .wp-block-navigation-placeholder__preview-search-icon svg {
   fill: currentColor;
 }
-.wp-block-navigation-placeholder__preview .wp-block-navigation-link.wp-block-navigation-link,
+.wp-block-navigation-placeholder__preview .wp-block-navigation-item.wp-block-navigation-item,
 .wp-block-navigation-placeholder__preview .wp-block-navigation-placeholder__preview-search-icon {
   opacity: 0.3;
 }
-.wp-block-navigation.is-selected .wp-block-navigation-placeholder__preview {
+.wp-block-navigation.is-selected .wp-block-navigation-placeholder__preview:not(.is-loading) {
   display: flex;
   opacity: 0;
   width: 0;
   overflow: hidden;
   flex-wrap: nowrap;
+  flex: 0;
 }
-.is-vertical.is-selected .wp-block-navigation-placeholder__preview {
-  display: none;
-}
-.wp-block-navigation.is-selected .is-small .wp-block-navigation-placeholder__preview {
-  display: none;
-}
-.wp-block-navigation.is-selected .is-medium .wp-block-navigation-placeholder__preview {
+.is-vertical.is-selected .wp-block-navigation-placeholder__preview:not(.is-loading), .wp-block-navigation.is-selected .is-small .wp-block-navigation-placeholder__preview:not(.is-loading), .wp-block-navigation.is-selected .is-medium .wp-block-navigation-placeholder__preview:not(.is-loading) {
   display: none;
 }
 
@@ -353,12 +367,6 @@
   }
 }
 
-@media (min-width: 600px) {
-  .components-button.wp-block-navigation__responsive-container-open {
-    display: none;
-  }
-}
-
 .wp-block-navigation__responsive-container.is-menu-open {
   position: fixed;
   top: 155px;
@@ -442,4 +450,42 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 
 .is-menu-open .wp-block-navigation__responsive-container-content * .block-list-appender {
   margin-top: 16px;
+}
+
+@keyframes fadein {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.wp-block-navigation__unsaved-changes {
+  position: relative;
+}
+.wp-block-navigation__unsaved-changes .components-spinner {
+  position: absolute;
+  top: calc(50% - 18px / 2);
+  left: calc(50% - 18px / 2);
+  opacity: 0;
+  animation: 0.5s linear 2s normal forwards fadein;
+}
+
+@keyframes fadeouthalf {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.5;
+  }
+}
+.wp-block-navigation__unsaved-changes-overlay.is-saving {
+  opacity: 1;
+  animation: 0.5s linear 2s normal forwards fadeouthalf;
+}
+
+.wp-block-navigation-delete-menu-button {
+  width: 100%;
+  justify-content: center;
+  margin-bottom: 16px;
 }

package/build-style/navigation/style-rtl.css

@@ -76,36 +76,33 @@
  */
 .wp-block-navigation {
   position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
 }
-.wp-block-navigation.is-vertical {
-  flex-direction: column;
-  align-items: flex-start;
+.wp-block-navigation ul {
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-right: 0;
+  padding-right: 0;
 }
 .wp-block-navigation ul,
 .wp-block-navigation ul li {
   list-style: none;
   padding: 0;
 }
-.wp-block-navigation .wp-block-pages-list__item,
-.wp-block-navigation .wp-block-navigation-link {
+.wp-block-navigation .wp-block-navigation-item {
   display: flex;
   align-items: center;
   position: relative;
 }
-.wp-block-navigation .wp-block-pages-list__item .wp-block-navigation-link__container:empty,
-.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__container:empty {
+.wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container:empty {
   display: none;
 }
-.wp-block-navigation.wp-block-navigation a {
+.wp-block-navigation .wp-block-navigation-item__content {
   color: inherit;
   display: block;
+  padding: 0;
 }
-.wp-block-navigation[style*=text-decoration] .wp-block-pages-list__item,
-.wp-block-navigation[style*=text-decoration] .wp-block-navigation-link__container,
-.wp-block-navigation[style*=text-decoration] .wp-block-navigation-link {
+.wp-block-navigation[style*=text-decoration] .wp-block-navigation-item,
+.wp-block-navigation[style*=text-decoration] .wp-block-navigation__submenu-container {
   text-decoration: inherit;
 }
 .wp-block-navigation[style*=text-decoration] a {
@@ -120,17 +117,22 @@
 .wp-block-navigation:not([style*=text-decoration]) a:focus, .wp-block-navigation:not([style*=text-decoration]) a:active {
   text-decoration: none;
 }
-.wp-block-navigation .wp-block-page-list__submenu-icon,
-.wp-block-navigation .wp-block-navigation-link__submenu-icon {
+.wp-block-navigation .wp-block-navigation__submenu-icon {
+  align-self: center;
   height: inherit;
+  line-height: 0;
   margin-right: 6px;
+  padding: 0;
+  background-color: inherit;
+  color: currentColor;
+  border: none;
 }
-.wp-block-navigation .wp-block-page-list__submenu-icon svg,
-.wp-block-navigation .wp-block-navigation-link__submenu-icon svg {
+.wp-block-navigation .wp-block-navigation__submenu-icon svg {
+  display: inline-block;
   stroke: currentColor;
 }
 
-.wp-block-navigation .has-child :where(.submenu-container, .wp-block-navigation-link__container) {
+.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) {
   background-color: inherit;
   color: inherit;
   position: absolute;
@@ -138,36 +140,32 @@
   display: flex;
   flex-direction: column;
   align-items: normal;
-  min-width: 200px;
   opacity: 0;
   transition: opacity 0.1s linear;
   visibility: hidden;
-  right: -1em;
+  width: 0;
+  height: 0;
+  right: -1px;
   top: 100%;
 }
-.wp-block-navigation .has-child :where(.submenu-container, .wp-block-navigation-link__container) > .wp-block-pages-list__item > a,
-.wp-block-navigation .has-child :where(.submenu-container, .wp-block-navigation-link__container) > .wp-block-navigation-link > a {
+.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) > .wp-block-navigation-item > .wp-block-navigation-item__content {
   display: flex;
   flex-grow: 1;
+  white-space: nowrap;
 }
-.wp-block-navigation .has-child :where(.submenu-container, .wp-block-navigation-link__container) > .wp-block-pages-list__item > a .wp-block-page-list__submenu-icon,
-.wp-block-navigation .has-child :where(.submenu-container, .wp-block-navigation-link__container) > .wp-block-pages-list__item > a .wp-block-navigation-link__submenu-icon,
-.wp-block-navigation .has-child :where(.submenu-container, .wp-block-navigation-link__container) > .wp-block-navigation-link > a .wp-block-page-list__submenu-icon,
-.wp-block-navigation .has-child :where(.submenu-container, .wp-block-navigation-link__container) > .wp-block-navigation-link > a .wp-block-navigation-link__submenu-icon {
+.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
   margin-left: 0;
   margin-right: auto;
 }
-.wp-block-navigation .has-child :where(.submenu-container, .wp-block-navigation-link__container) a {
+.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content {
   margin: 0;
 }
 @media (min-width: 782px) {
-  .wp-block-navigation .has-child :where(.submenu-container, .wp-block-navigation-link__container) .submenu-container,
-.wp-block-navigation .has-child :where(.submenu-container, .wp-block-navigation-link__container) .wp-block-navigation-link__container {
+  .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-container {
     right: 100%;
     top: -1px;
   }
-  .wp-block-navigation .has-child :where(.submenu-container, .wp-block-navigation-link__container) .submenu-container::before,
-.wp-block-navigation .has-child :where(.submenu-container, .wp-block-navigation-link__container) .wp-block-navigation-link__container::before {
+  .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-container::before {
     content: "";
     position: absolute;
     left: 100%;
@@ -176,44 +174,38 @@
     width: 0.5em;
     background: transparent;
   }
-  .wp-block-navigation .has-child :where(.submenu-container, .wp-block-navigation-link__container) .wp-block-page-list__submenu-icon svg,
-.wp-block-navigation .has-child :where(.submenu-container, .wp-block-navigation-link__container) .wp-block-navigation-link__submenu-icon svg {
+  .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-icon svg {
     transform: rotate(90deg);
   }
 }
-.wp-block-navigation .has-child:hover > .wp-block-navigation-link__container {
-  visibility: visible;
-  opacity: 1;
-}
-.wp-block-navigation .has-child:focus-within > .wp-block-navigation-link__container {
+.wp-block-navigation .has-child:where(:not(.open-on-click)):hover > .wp-block-navigation__submenu-container {
   visibility: visible;
   opacity: 1;
+  width: auto;
+  height: auto;
+  min-width: 200px;
 }
-.wp-block-navigation .has-child:hover {
-  cursor: pointer;
-}
-.wp-block-navigation .has-child:hover > .submenu-container {
+.wp-block-navigation .has-child:where(:not(.open-on-click):not(.open-on-hover-click)):focus-within > .wp-block-navigation__submenu-container {
   visibility: visible;
   opacity: 1;
+  width: auto;
+  height: auto;
+  min-width: 200px;
 }
-.wp-block-navigation .has-child:focus-within {
-  cursor: pointer;
-}
-.wp-block-navigation .has-child:focus-within > .submenu-container {
+.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] + .wp-block-navigation__submenu-container {
   visibility: visible;
   opacity: 1;
+  width: auto;
+  height: auto;
+  min-width: 200px;
 }
 
-.wp-block-navigation.has-background .has-child .submenu-container,
-.wp-block-navigation.has-background .has-child .wp-block-navigation-link__container {
+.wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container {
   right: 0;
   top: 100%;
 }
 @media (min-width: 782px) {
-  .wp-block-navigation.has-background .has-child .submenu-container .submenu-container,
-.wp-block-navigation.has-background .has-child .submenu-container .wp-block-navigation-link__container,
-.wp-block-navigation.has-background .has-child .wp-block-navigation-link__container .submenu-container,
-.wp-block-navigation.has-background .has-child .wp-block-navigation-link__container .wp-block-navigation-link__container {
+  .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
     right: 100%;
     top: 0;
   }
@@ -221,127 +213,64 @@
 
 /**
  * Margins
- * @todo: refactor this to use gap.
  */
-.wp-block-page-list,
-.wp-block-page-list > .wp-block-pages-list__item,
-.wp-block-navigation__container > .wp-block-navigation-link {
-  margin: 0 0 0 2em;
-}
-.wp-block-page-list:last-child,
-.wp-block-page-list > .wp-block-pages-list__item:last-child,
-.wp-block-navigation__container > .wp-block-navigation-link:last-child {
-  margin-left: 0;
+.wp-block-navigation,
+.wp-block-navigation .wp-block-page-list,
+.wp-block-navigation__container,
+.wp-block-navigation__responsive-container-content {
+  gap: var(--wp--style--block-gap, 2em);
 }
 
-.wp-block-navigation:where(.has-background) .wp-block-page-list,
-.wp-block-navigation:where(.has-background) .wp-block-page-list > .wp-block-pages-list__item,
-.wp-block-navigation:where(.has-background) .wp-block-navigation__container > .wp-block-navigation-link {
-  margin: 0 0 0 0.5em;
-}
-.wp-block-navigation:where(.has-background) .wp-block-page-list:last-child,
-.wp-block-navigation:where(.has-background) .wp-block-page-list > .wp-block-pages-list__item:last-child,
-.wp-block-navigation:where(.has-background) .wp-block-navigation__container > .wp-block-navigation-link:last-child {
-  margin: 0;
+.wp-block-navigation:where(.has-background),
+.wp-block-navigation:where(.has-background) .wp-block-navigation .wp-block-page-list,
+.wp-block-navigation:where(.has-background) .wp-block-navigation__container {
+  gap: var(--wp--style--block-gap, 0.5em);
 }
 
 /**
  * Paddings
  */
-.wp-block-navigation a {
-  padding: 0;
-}
-
-.wp-block-navigation:where(.has-background) a {
+.wp-block-navigation:where(.has-background) .wp-block-navigation-item__content {
   padding: 0.5em 1em;
 }
 
-.wp-block-navigation :where(.submenu-container, .wp-block-navigation-link__container) a {
+.wp-block-navigation :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content {
   padding: 0.5em 1em;
 }
 
 /**
  * Justifications.
  */
-.wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .submenu-container,
-.wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation-link__container,
-.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .submenu-container,
-.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation-link__container,
-.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .submenu-container,
-.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation-link__container,
-.wp-block-navigation.items-justified-right > .wp-block-navigation__container .has-child .submenu-container,
-.wp-block-navigation.items-justified-right > .wp-block-navigation__container .has-child .wp-block-navigation-link__container {
-  right: auto;
-  left: 0;
-}
-.wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .submenu-container .submenu-container,
-.wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .submenu-container .wp-block-navigation-link__container,
-.wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation-link__container .submenu-container,
-.wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation-link__container .wp-block-navigation-link__container,
-.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .submenu-container .submenu-container,
-.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .submenu-container .wp-block-navigation-link__container,
-.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation-link__container .submenu-container,
-.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation-link__container .wp-block-navigation-link__container,
-.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .submenu-container .submenu-container,
-.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .submenu-container .wp-block-navigation-link__container,
-.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation-link__container .submenu-container,
-.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation-link__container .wp-block-navigation-link__container,
-.wp-block-navigation.items-justified-right > .wp-block-navigation__container .has-child .submenu-container .submenu-container,
-.wp-block-navigation.items-justified-right > .wp-block-navigation__container .has-child .submenu-container .wp-block-navigation-link__container,
-.wp-block-navigation.items-justified-right > .wp-block-navigation__container .has-child .wp-block-navigation-link__container .submenu-container,
-.wp-block-navigation.items-justified-right > .wp-block-navigation__container .has-child .wp-block-navigation-link__container .wp-block-navigation-link__container {
-  right: auto;
-  left: 100%;
+@media (min-width: 782px) {
+  .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation__submenu-container,
+.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation__submenu-container,
+.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container,
+.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
+    right: auto;
+    left: 0;
+  }
+  .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,
+.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,
+.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,
+.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
+    right: auto;
+    left: 100%;
+  }
 }
-
-.wp-block-navigation:not(.has-background) .submenu-container,
-.wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation-link__container {
+.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
   background-color: #fff;
   color: #000;
   border: 1px solid rgba(0, 0, 0, 0.15);
 }
 
 .wp-block-navigation__container {
-  align-items: center;
   list-style: none;
   margin: 0;
   padding-right: 0;
-  display: flex;
-  flex-wrap: wrap;
 }
 .wp-block-navigation__container .is-responsive {
   display: none;
 }
-.is-vertical .wp-block-navigation__container {
-  display: block;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.items-justified-center .wp-block-navigation__container {
-  justify-content: center;
-}
-
-.items-justified-right .wp-block-navigation__container {
-  justify-content: flex-end;
-}
-
-.items-justified-space-between .wp-block-navigation__container {
-  justify-content: space-between;
-}
-
-.is-vertical.items-justified-center > ul {
-  align-items: center;
-}
-
-.is-vertical.items-justified-right > ul {
-  align-items: flex-end;
-}
-.is-vertical.items-justified-right > ul .wp-block-navigation-link,
-.is-vertical.items-justified-right > ul .wp-block-pages-list__item {
-  margin-left: 0;
-  justify-content: flex-end;
-}
 
 /**
  * Mobile menu.
@@ -353,49 +282,83 @@
   right: 0;
   left: 0;
   bottom: 0;
-  z-index: 1;
-  align-items: flex-start;
-  justify-content: flex-start;
+}
+.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
+  display: contents;
 }
 .wp-block-navigation__responsive-container.is-menu-open {
   display: flex;
   flex-direction: column;
   overflow: auto;
   z-index: 100000;
-  padding: 24px;
+  padding: 72px 24px 24px 24px;
   background-color: inherit;
+  align-items: inherit;
 }
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
   display: flex;
   flex-direction: column;
-  margin-right: auto;
-  margin-left: auto;
-  align-items: flex-start;
-  line-height: 48px;
+  align-items: var(--justification-setting, inherit);
+  overflow: auto;
   padding: 0;
 }
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .wp-block-page-list {
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
+  display: none;
+}
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .submenu-container,
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
+  opacity: 1;
+  visibility: visible;
+  height: auto;
+  width: auto;
+  overflow: initial;
+  min-width: 200px;
+  position: static;
+  border: none;
+  padding-right: 32px;
+  padding-left: 32px;
+}
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container,
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
+  gap: var(--wp--style--block-gap, 2em);
+}
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation__container,
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation__submenu-container,
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation__container {
+  padding-top: var(--wp--style--block-gap, 2em);
+}
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
+  padding: 0;
+}
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
+  display: flex;
   flex-direction: column;
+  align-items: var(--justification-setting, inherit);
 }
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-pages-list__item .submenu-container,
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link .wp-block-navigation-link__container,
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-pages-list__item,
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link {
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container,
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
   color: inherit !important;
   background: transparent !important;
 }
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
+  left: auto;
+  right: auto;
+}
 @media (min-width: 600px) {
-  .wp-block-navigation__responsive-container:not(.is-menu-open) {
-    display: flex;
-    flex-direction: row;
+  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
+    display: contents;
+    width: 100%;
     position: relative;
+    z-index: 2;
     background-color: inherit;
   }
-  .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
+  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
     display: none;
   }
-  .wp-block-navigation__responsive-container.is-menu-open .submenu-container.submenu-container.submenu-container.submenu-container,
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link__container.wp-block-navigation-link__container.wp-block-navigation-link__container.wp-block-navigation-link__container {
+  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
     right: 0;
   }
 }
@@ -428,22 +391,10 @@
   display: flex;
 }
 @media (min-width: 600px) {
-  .wp-block-navigation__responsive-container-open {
+  .wp-block-navigation__responsive-container-open:not(.always-shown) {
     display: none;
   }
 }
-.items-justified-left .wp-block-navigation__responsive-container-open {
-  margin-right: 0;
-  margin-left: auto;
-}
-.items-justified-center .wp-block-navigation__responsive-container-open {
-  margin-right: auto;
-  margin-left: auto;
-}
-.items-justified-right .wp-block-navigation__responsive-container-open {
-  margin-right: auto;
-  margin-left: 0;
-}
 
 .wp-block-navigation__responsive-container-close {
   position: absolute;
@@ -463,24 +414,17 @@
   height: 100%;
 }
 
-.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list__submenu-icon,
-.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link__submenu-icon {
-  display: none;
-}
-.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .has-child .submenu-container,
-.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation-link__container {
-  position: relative;
-  opacity: 1;
-  visibility: visible;
-  padding: 0 32px 0 0;
-  border: none;
-}
-.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link,
-.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-pages-list__item {
-  flex-direction: column;
-  align-items: flex-start;
-}
-
 html.has-modal-open {
   overflow: hidden;
+}
+
+.wp-block-navigation__responsive-close,
+.wp-block-navigation__responsive-dialog,
+.wp-block-navigation__container {
+  display: contents;
+}
+.is-menu-open .wp-block-navigation__responsive-close,
+.is-menu-open .wp-block-navigation__responsive-dialog,
+.is-menu-open .wp-block-navigation__container {
+  align-items: inherit;
 }