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

package/build-style/gallery/style.css

@@ -92,7 +92,6 @@
   flex-direction: column;
   justify-content: center;
   position: relative;
-  align-self: flex-start;
   width: calc(50% - 1em);
 }
 .wp-block-gallery .blocks-gallery-image:nth-of-type(even),
@@ -107,16 +106,9 @@
 .blocks-gallery-grid .blocks-gallery-item figure {
   margin: 0;
   height: 100%;
-}
-@supports (position: sticky) {
-  .wp-block-gallery .blocks-gallery-image figure,
-.wp-block-gallery .blocks-gallery-item figure,
-.blocks-gallery-grid .blocks-gallery-image figure,
-.blocks-gallery-grid .blocks-gallery-item figure {
-    display: flex;
-    align-items: flex-end;
-    justify-content: flex-start;
-  }
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-start;
 }
 .wp-block-gallery .blocks-gallery-image img,
 .wp-block-gallery .blocks-gallery-item img,
@@ -125,15 +117,7 @@
   display: block;
   max-width: 100%;
   height: auto;
-  width: 100%;
-}
-@supports (position: sticky) {
-  .wp-block-gallery .blocks-gallery-image img,
-.wp-block-gallery .blocks-gallery-item img,
-.blocks-gallery-grid .blocks-gallery-image img,
-.blocks-gallery-grid .blocks-gallery-item img {
-    width: auto;
-  }
+  width: auto;
 }
 .wp-block-gallery .blocks-gallery-image figcaption,
 .wp-block-gallery .blocks-gallery-item figcaption,
@@ -151,6 +135,7 @@
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.3) 70%, transparent);
   box-sizing: border-box;
   margin: 0;
+  z-index: 2;
 }
 .wp-block-gallery .blocks-gallery-image figcaption img,
 .wp-block-gallery .blocks-gallery-item figcaption img,
@@ -162,11 +147,6 @@
 .blocks-gallery-grid figcaption {
   flex-grow: 1;
 }
-.wp-block-gallery.is-cropped .blocks-gallery-image, .wp-block-gallery.is-cropped .blocks-gallery-item,
-.blocks-gallery-grid.is-cropped .blocks-gallery-image,
-.blocks-gallery-grid.is-cropped .blocks-gallery-item {
-  align-self: inherit;
-}
 .wp-block-gallery.is-cropped .blocks-gallery-image a,
 .wp-block-gallery.is-cropped .blocks-gallery-image img, .wp-block-gallery.is-cropped .blocks-gallery-item a,
 .wp-block-gallery.is-cropped .blocks-gallery-item img,
@@ -175,20 +155,10 @@
 .blocks-gallery-grid.is-cropped .blocks-gallery-item a,
 .blocks-gallery-grid.is-cropped .blocks-gallery-item img {
   width: 100%;
-}
-@supports (position: sticky) {
-  .wp-block-gallery.is-cropped .blocks-gallery-image a,
-.wp-block-gallery.is-cropped .blocks-gallery-image img, .wp-block-gallery.is-cropped .blocks-gallery-item a,
-.wp-block-gallery.is-cropped .blocks-gallery-item img,
-.blocks-gallery-grid.is-cropped .blocks-gallery-image a,
-.blocks-gallery-grid.is-cropped .blocks-gallery-image img,
-.blocks-gallery-grid.is-cropped .blocks-gallery-item a,
-.blocks-gallery-grid.is-cropped .blocks-gallery-item img {
-    height: 100%;
-    flex: 1;
-    -o-object-fit: cover;
-       object-fit: cover;
-  }
+  height: 100%;
+  flex: 1;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 .wp-block-gallery.columns-1 .blocks-gallery-image, .wp-block-gallery.columns-1 .blocks-gallery-item,
 .blocks-gallery-grid.columns-1 .blocks-gallery-image,
@@ -289,4 +259,197 @@
 .wp-block-gallery.aligncenter .blocks-gallery-item figure,
 .blocks-gallery-grid.aligncenter .blocks-gallery-item figure {
   justify-content: center;
+}
+
+.wp-block-gallery:not(.is-cropped) .blocks-gallery-item {
+  align-self: flex-start;
+}
+
+.wp-block-gallery.has-nested-images {
+  display: flex;
+  flex-wrap: wrap;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
+  margin: 0 var(--gallery-block--gutter-size, 16px) var(--gallery-block--gutter-size, 16px) 0;
+  width: calc(50% - (var(--gallery-block--gutter-size, 16px) / 2));
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):last-of-type:not(#individual-image) {
+  margin-right: 0;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-of-type(even) {
+  margin-right: 0;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image {
+  display: flex;
+  flex-grow: 1;
+  justify-content: center;
+  position: relative;
+  margin-top: auto;
+  margin-bottom: auto;
+  flex-direction: column;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image > div,
+.wp-block-gallery.has-nested-images figure.wp-block-image > a {
+  margin: 0;
+  flex-direction: column;
+  flex-grow: 1;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image img {
+  display: block;
+  height: auto;
+  max-width: 100%;
+  width: auto;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.3) 70%, transparent);
+  bottom: 0;
+  color: #fff;
+  font-size: 13px;
+  left: 0;
+  margin-bottom: 0;
+  max-height: 60%;
+  overflow: auto;
+  padding: 0 8px 8px;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image figcaption img {
+  display: inline;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded > div,
+.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded > a {
+  flex: 1 1 auto;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded figcaption {
+  flex: initial;
+  background: none;
+  color: inherit;
+  margin: 0;
+  padding: 10px 10px 9px;
+  position: relative;
+}
+.wp-block-gallery.has-nested-images figcaption {
+  flex-grow: 1;
+  flex-basis: 100%;
+  text-align: center;
+}
+.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) {
+  margin-top: 0;
+  margin-bottom: auto;
+}
+.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) img {
+  margin-bottom: var(--gallery-block--gutter-size, 16px);
+}
+.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) figcaption {
+  bottom: var(--gallery-block--gutter-size, 16px);
+}
+.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) {
+  align-self: inherit;
+}
+.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > div:not(.components-drop-zone),
+.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > a {
+  display: flex;
+}
+.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a,
+.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
+  width: 100%;
+  flex: 1 0 0%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) {
+  margin-right: 0;
+  width: 100%;
+}
+@media (min-width: 600px) {
+  .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) {
+    margin-right: var(--gallery-block--gutter-size, 16px);
+    width: calc(33.3333333333% - (var(--gallery-block--gutter-size, 16px) * 0.6666666667));
+  }
+  .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image).is-dragging ~ figure.wp-block-image:not(#individual-image) {
+    margin-right: var(--gallery-block--gutter-size, 16px);
+  }
+  .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) {
+    margin-right: var(--gallery-block--gutter-size, 16px);
+    width: calc(25% - (var(--gallery-block--gutter-size, 16px) * 0.75));
+  }
+  .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image).is-dragging ~ figure.wp-block-image:not(#individual-image) {
+    margin-right: var(--gallery-block--gutter-size, 16px);
+  }
+  .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image) {
+    margin-right: var(--gallery-block--gutter-size, 16px);
+    width: calc(20% - (var(--gallery-block--gutter-size, 16px) * 0.8));
+  }
+  .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image).is-dragging ~ figure.wp-block-image:not(#individual-image) {
+    margin-right: var(--gallery-block--gutter-size, 16px);
+  }
+  .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image) {
+    margin-right: var(--gallery-block--gutter-size, 16px);
+    width: calc(16.6666666667% - (var(--gallery-block--gutter-size, 16px) * 0.8333333333));
+  }
+  .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image).is-dragging ~ figure.wp-block-image:not(#individual-image) {
+    margin-right: var(--gallery-block--gutter-size, 16px);
+  }
+  .wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image) {
+    margin-right: var(--gallery-block--gutter-size, 16px);
+    width: calc(14.2857142857% - (var(--gallery-block--gutter-size, 16px) * 0.8571428571));
+  }
+  .wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image).is-dragging ~ figure.wp-block-image:not(#individual-image) {
+    margin-right: var(--gallery-block--gutter-size, 16px);
+  }
+  .wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image) {
+    margin-right: var(--gallery-block--gutter-size, 16px);
+    width: calc(12.5% - (var(--gallery-block--gutter-size, 16px) * 0.875));
+  }
+  .wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image).is-dragging ~ figure.wp-block-image:not(#individual-image) {
+    margin-right: var(--gallery-block--gutter-size, 16px);
+  }
+  .wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image):nth-of-type(1n) {
+    margin-right: 0;
+  }
+  .wp-block-gallery.has-nested-images.columns-2 figure.wp-block-image:not(#individual-image):nth-of-type(2n) {
+    margin-right: 0;
+  }
+  .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image):nth-of-type(3n) {
+    margin-right: 0;
+  }
+  .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image):nth-of-type(4n) {
+    margin-right: 0;
+  }
+  .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image):nth-of-type(5n) {
+    margin-right: 0;
+  }
+  .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image):nth-of-type(6n) {
+    margin-right: 0;
+  }
+  .wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image):nth-of-type(7n) {
+    margin-right: 0;
+  }
+  .wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image):nth-of-type(8n) {
+    margin-right: 0;
+  }
+  .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
+    margin-right: var(--gallery-block--gutter-size, 16px);
+    width: calc(33.33% - (var(--gallery-block--gutter-size, 16px) * 0.6666666667));
+  }
+  .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):nth-of-type(3n+3) {
+    margin-right: 0;
+  }
+  .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
+.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2) ~ figure.wp-block-image:not(#individual-image) {
+    width: calc(50% - (var(--gallery-block--gutter-size, 16px) * 0.5));
+  }
+  .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) {
+    width: 100%;
+  }
+}
+.wp-block-gallery.has-nested-images.alignleft, .wp-block-gallery.has-nested-images.alignright {
+  max-width: 420px;
+  width: 100%;
+}
+.wp-block-gallery.has-nested-images.aligncenter {
+  justify-content: center;
 }

package/build-style/group/theme-rtl.css

@@ -74,8 +74,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-group.has-background {
+.wp-block-group:where(.has-background) {
   padding: 1.25em 2.375em;
-  margin-top: 0;
-  margin-bottom: 0;
 }

package/build-style/group/theme.css

@@ -74,8 +74,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-group.has-background {
+.wp-block-group:where(.has-background) {
   padding: 1.25em 2.375em;
-  margin-top: 0;
-  margin-bottom: 0;
 }

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

@@ -74,6 +74,14 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
 h1.has-background,
 h2.has-background,
 h3.has-background,

package/build-style/heading/style.css

@@ -74,6 +74,14 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
 h1.has-background,
 h2.has-background,
 h3.has-background,

package/build-style/html/editor-rtl.css

@@ -74,9 +74,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.block-library-html__edit {
-  margin-bottom: 28px;
-}
 .block-library-html__edit .block-library-html__preview-overlay {
   position: absolute;
   width: 100%;
@@ -85,20 +82,24 @@
   right: 0;
 }
 .block-library-html__edit .block-editor-plain-text {
-  font-family: Menlo, Consolas, monaco, monospace;
-  color: #1e1e1e;
-  padding: 0.8em 1em;
-  border: 1px solid #ddd;
-  border-radius: 4px;
+  font-family: Menlo, Consolas, monaco, monospace !important;
+  color: #1e1e1e !important;
+  background: #fff !important;
+  padding: 12px !important;
+  border: 1px solid #1e1e1e !important;
+  box-shadow: none !important;
+  border-radius: 2px !important;
   max-height: 250px;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
-  font-size: 16px;
+  font-size: 16px !important;
 }
 @media (min-width: 600px) {
   .block-library-html__edit .block-editor-plain-text {
-    font-size: 13px;
+    font-size: 13px !important;
   }
 }
 .block-library-html__edit .block-editor-plain-text:focus {
-  box-shadow: none;
+  border-color: var(--wp-admin-theme-color) !important;
+  box-shadow: 0 0 0 1px var(--wp-admin-theme-color) !important;
+  outline: 2px solid transparent !important;
 }

package/build-style/html/editor.css

@@ -74,9 +74,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.block-library-html__edit {
-  margin-bottom: 28px;
-}
 .block-library-html__edit .block-library-html__preview-overlay {
   position: absolute;
   width: 100%;
@@ -85,20 +82,24 @@
   left: 0;
 }
 .block-library-html__edit .block-editor-plain-text {
-  font-family: Menlo, Consolas, monaco, monospace;
-  color: #1e1e1e;
-  padding: 0.8em 1em;
-  border: 1px solid #ddd;
-  border-radius: 4px;
+  font-family: Menlo, Consolas, monaco, monospace !important;
+  color: #1e1e1e !important;
+  background: #fff !important;
+  padding: 12px !important;
+  border: 1px solid #1e1e1e !important;
+  box-shadow: none !important;
+  border-radius: 2px !important;
   max-height: 250px;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
-  font-size: 16px;
+  font-size: 16px !important;
 }
 @media (min-width: 600px) {
   .block-library-html__edit .block-editor-plain-text {
-    font-size: 13px;
+    font-size: 13px !important;
   }
 }
 .block-library-html__edit .block-editor-plain-text:focus {
-  box-shadow: none;
+  border-color: var(--wp-admin-theme-color) !important;
+  box-shadow: 0 0 0 1px var(--wp-admin-theme-color) !important;
+  outline: 2px solid transparent !important;
 }

package/build-style/image/editor-rtl.css

@@ -121,6 +121,7 @@ figure.wp-block-image:not(.wp-block) {
 
 [data-align=wide] > .wp-block-image img,
 [data-align=full] > .wp-block-image img {
+  height: auto;
   width: 100%;
 }
 

package/build-style/image/editor.css

@@ -121,6 +121,7 @@ figure.wp-block-image:not(.wp-block) {
 
 [data-align=wide] > .wp-block-image img,
 [data-align=full] > .wp-block-image img {
+  height: auto;
   width: 100%;
 }
 

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

@@ -78,7 +78,9 @@
   margin: 0 0 1em 0;
 }
 .wp-block-image img {
+  height: auto;
   max-width: 100%;
+  vertical-align: bottom;
 }
 .wp-block-image:not(.is-style-rounded) img {
   border-radius: inherit;
@@ -87,6 +89,7 @@
   text-align: center;
 }
 .wp-block-image.alignfull img, .wp-block-image.alignwide img {
+  height: auto;
   width: 100%;
 }
 .wp-block-image .alignleft,

package/build-style/image/style.css

@@ -78,7 +78,9 @@
   margin: 0 0 1em 0;
 }
 .wp-block-image img {
+  height: auto;
   max-width: 100%;
+  vertical-align: bottom;
 }
 .wp-block-image:not(.is-style-rounded) img {
   border-radius: inherit;
@@ -87,6 +89,7 @@
   text-align: center;
 }
 .wp-block-image.alignfull img, .wp-block-image.alignwide img {
+  height: auto;
   width: 100%;
 }
 .wp-block-image .alignleft,

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

@@ -74,6 +74,10 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+ol,
+ul {
+  overflow-wrap: break-word;
+}
 ol.has-background,
 ul.has-background {
   padding: 1.25em 2.375em;

package/build-style/list/style.css

@@ -74,6 +74,10 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+ol,
+ul {
+  overflow-wrap: break-word;
+}
 ol.has-background,
 ul.has-background {
   padding: 1.25em 2.375em;

package/build-style/media-text/style-rtl.css

@@ -127,6 +127,7 @@
 
 .wp-block-media-text__media img,
 .wp-block-media-text__media video {
+  height: auto;
   max-width: unset;
   width: 100%;
   vertical-align: middle;

package/build-style/media-text/style.css

@@ -137,6 +137,7 @@
 
 .wp-block-media-text__media img,
 .wp-block-media-text__media video {
+  height: auto;
   max-width: unset;
   width: 100%;
   vertical-align: middle;

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

@@ -83,9 +83,13 @@
   margin-right: 0;
   padding-right: 0;
 }
+.editor-styles-wrapper .wp-block-navigation .wp-block-navigation-item.wp-block {
+  margin-right: revert;
+  margin-left: 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-left: 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);
+  right: 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;
 }