@wordpress/block-library 6.0.2 → 6.0.3

package/build-module/verse/index.js

@@ -38,7 +38,16 @@ const metadata = {
     },
     typography: {
       fontSize: true,
-      __experimentalFontFamily: true
+      __experimentalFontFamily: true,
+      lineHeight: true,
+      __experimentalFontStyle: true,
+      __experimentalFontWeight: true,
+      __experimentalLetterSpacing: true,
+      __experimentalTextTransform: true,
+      __experimentalDefaultControls: {
+        fontSize: true,
+        fontAppearance: true
+      }
     },
     spacing: {
       padding: true

package/build-module/verse/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/verse/index.js"],"names":["__","verse","icon","deprecated","edit","save","transforms","name","metadata","settings","example","attributes","content","merge","attributesToMerge"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,KAAK,IAAIC,IAAlB,QAA8B,kBAA9B;AAEA;AACA;AACA;;AACA,OAAOC,UAAP,MAAuB,cAAvB;AACA,OAAOC,IAAP,MAAiB,QAAjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,OAAOC,IAAP,MAAiB,QAAjB;AACA,OAAOC,UAAP,MAAuB,cAAvB;AAEA,MAAM;AAAEC,EAAAA;AAAF,IAAWC,QAAjB;AAEA,SAASA,QAAT,EAAmBD,IAAnB;AAEA,OAAO,MAAME,QAAQ,GAAG;AACvBP,EAAAA,IADuB;AAEvBQ,EAAAA,OAAO,EAAE;AACRC,IAAAA,UAAU,EAAE;AACX;AACA;AACAC,MAAAA,OAAO,EAAEZ,EAAE,CACV,yOADU;AAGX;;AANW;AADJ,GAFc;AAYvBM,EAAAA,UAZuB;AAavBH,EAAAA,UAbuB;;AAcvBU,EAAAA,KAAK,CAAEF,UAAF,EAAcG,iBAAd,EAAkC;AACtC,WAAO;AACNF,MAAAA,OAAO,EAAED,UAAU,CAACC,OAAX,GAAqBE,iBAAiB,CAACF;AAD1C,KAAP;AAGA,GAlBsB;;AAmBvBR,EAAAA,IAnBuB;AAoBvBC,EAAAA;AApBuB,CAAjB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { verse as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport deprecated from './deprecated';\nimport edit from './edit';\nimport metadata from './block.json';\nimport save from './save';\nimport transforms from './transforms';\n\nconst { name } = metadata;\n\nexport { metadata, name };\n\nexport const settings = {\n\ticon,\n\texample: {\n\t\tattributes: {\n\t\t\t/* eslint-disable @wordpress/i18n-no-collapsible-whitespace */\n\t\t\t// translators: Sample content for the Verse block. Can be replaced with a more locale-adequate work.\n\t\t\tcontent: __(\n\t\t\t\t'WHAT was he doing, the great god Pan,\\n\tDown in the reeds by the river?\\nSpreading ruin and scattering ban,\\nSplashing and paddling with hoofs of a goat,\\nAnd breaking the golden lilies afloat\\n    With the dragon-fly on the river.'\n\t\t\t),\n\t\t\t/* eslint-enable @wordpress/i18n-no-collapsible-whitespace */\n\t\t},\n\t},\n\ttransforms,\n\tdeprecated,\n\tmerge( attributes, attributesToMerge ) {\n\t\treturn {\n\t\t\tcontent: attributes.content + attributesToMerge.content,\n\t\t};\n\t},\n\tedit,\n\tsave,\n};\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/verse/index.js"],"names":["__","verse","icon","deprecated","edit","save","transforms","name","metadata","settings","example","attributes","content","merge","attributesToMerge"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,KAAK,IAAIC,IAAlB,QAA8B,kBAA9B;AAEA;AACA;AACA;;AACA,OAAOC,UAAP,MAAuB,cAAvB;AACA,OAAOC,IAAP,MAAiB,QAAjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,OAAOC,IAAP,MAAiB,QAAjB;AACA,OAAOC,UAAP,MAAuB,cAAvB;AAEA,MAAM;AAAEC,EAAAA;AAAF,IAAWC,QAAjB;AAEA,SAASA,QAAT,EAAmBD,IAAnB;AAEA,OAAO,MAAME,QAAQ,GAAG;AACvBP,EAAAA,IADuB;AAEvBQ,EAAAA,OAAO,EAAE;AACRC,IAAAA,UAAU,EAAE;AACX;AACA;AACAC,MAAAA,OAAO,EAAEZ,EAAE,CACV,yOADU;AAGX;;AANW;AADJ,GAFc;AAYvBM,EAAAA,UAZuB;AAavBH,EAAAA,UAbuB;;AAcvBU,EAAAA,KAAK,CAAEF,UAAF,EAAcG,iBAAd,EAAkC;AACtC,WAAO;AACNF,MAAAA,OAAO,EAAED,UAAU,CAACC,OAAX,GAAqBE,iBAAiB,CAACF;AAD1C,KAAP;AAGA,GAlBsB;;AAmBvBR,EAAAA,IAnBuB;AAoBvBC,EAAAA;AApBuB,CAAjB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { verse as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport deprecated from './deprecated';\nimport edit from './edit';\nimport metadata from './block.json';\nimport save from './save';\nimport transforms from './transforms';\n\nconst { name } = metadata;\n\nexport { metadata, name };\n\nexport const settings = {\n\ticon,\n\texample: {\n\t\tattributes: {\n\t\t\t/* eslint-disable @wordpress/i18n-no-collapsible-whitespace */\n\t\t\t// translators: Sample content for the Verse block. Can be replaced with a more locale-adequate work.\n\t\t\tcontent: __(\n\t\t\t\t'WHAT was he doing, the great god Pan,\\n\tDown in the reeds by the river?\\nSpreading ruin and scattering ban,\\nSplashing and paddling with hoofs of a goat,\\nAnd breaking the golden lilies afloat\\n    With the dragon-fly on the river.'\n\t\t\t),\n\t\t\t/* eslint-enable @wordpress/i18n-no-collapsible-whitespace */\n\t\t},\n\t},\n\ttransforms,\n\tdeprecated,\n\tmerge( attributes, attributesToMerge ) {\n\t\treturn {\n\t\t\tcontent: attributes.content + attributesToMerge.content,\n\t\t};\n\t},\n\tedit,\n\tsave,\n};\n"]}

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

@@ -141,8 +141,8 @@
   border-radius: 0 !important;
 }
 
-.is-style-outline > .wp-block-button__link,
-.wp-block-button__link.is-style-outline {
+.is-style-outline > :where(.wp-block-button__link),
+:where(.wp-block-button__link).is-style-outline {
   border: 2px solid currentColor;
   padding: 0.667em 1.333em;
 }

package/build-style/button/style.css

@@ -142,8 +142,8 @@
   border-radius: 0 !important;
 }
 
-.is-style-outline > .wp-block-button__link,
-.wp-block-button__link.is-style-outline {
+.is-style-outline > :where(.wp-block-button__link),
+:where(.wp-block-button__link).is-style-outline {
   border: 2px solid currentColor;
   padding: 0.667em 1.333em;
 }

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

@@ -74,11 +74,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block > .wp-block-buttons {
-  display: flex;
-  flex-wrap: wrap;
-}
-
 .wp-block-buttons {
   /* stylelint-disable indentation */
 }

package/build-style/buttons/editor.css

@@ -74,11 +74,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block > .wp-block-buttons {
-  display: flex;
-  flex-wrap: wrap;
-}
-
 .wp-block-buttons {
   /* stylelint-disable indentation */
 }

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

@@ -75,10 +75,6 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 .wp-block-buttons {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: var(--wp--style--block-gap, 0.5em);
   /* stylelint-disable indentation */
 }
 .wp-block-buttons.is-vertical {

package/build-style/buttons/style.css

@@ -75,10 +75,6 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 .wp-block-buttons {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: var(--wp--style--block-gap, 0.5em);
   /* stylelint-disable indentation */
 }
 .wp-block-buttons.is-vertical {

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

@@ -88,7 +88,7 @@
     flex-wrap: nowrap;
   }
 }
-.wp-block-columns.has-background {
+.wp-block-columns:where(.has-background) {
   padding: 1.25em 2.375em;
 }
 .wp-block-columns.are-vertically-aligned-top {

package/build-style/columns/style.css

@@ -88,7 +88,7 @@
     flex-wrap: nowrap;
   }
 }
-.wp-block-columns.has-background {
+.wp-block-columns:where(.has-background) {
   padding: 1.25em 2.375em;
 }
 .wp-block-columns.are-vertically-aligned-top {

package/build-style/editor-rtl.css

@@ -161,11 +161,6 @@ div[data-type="core/button"] {
   display: table;
 }
 
-.wp-block > .wp-block-buttons {
-  display: flex;
-  flex-wrap: wrap;
-}
-
 .wp-block-buttons {
   /* stylelint-disable indentation */
 }
@@ -1175,7 +1170,7 @@ figure.wp-block-image:not(.wp-block) {
 }
 
 .wp-block-navigation-item__label {
-  display: inline-block;
+  display: inline;
 }
 
 /**
@@ -1310,6 +1305,17 @@ figure.wp-block-image:not(.wp-block) {
   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;
@@ -1318,6 +1324,10 @@ figure.wp-block-image:not(.wp-block) {
   width: 100%;
   overflow: hidden;
 }
+.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;
@@ -1340,7 +1350,7 @@ figure.wp-block-image:not(.wp-block) {
 .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;
@@ -1348,13 +1358,7 @@ figure.wp-block-image:not(.wp-block) {
   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;
 }
 
@@ -1529,9 +1533,42 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   margin-top: 16px;
 }
 
-.wp-block-navigation__submenu-container {
-  border-radius: 0;
-  min-height: 36px;
+@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;
 }
 
 /**
@@ -1557,9 +1594,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 /**
  * Navigation Items.
  */
-.wp-block-navigation-item .wp-block-navigation__submenu-container {
-  display: block;
-}
 .wp-block-navigation-item .wp-block-navigation-item__content {
   cursor: text;
 }
@@ -1573,10 +1607,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   margin-right: 16px;
 }
 
-.wp-block-navigation .block-editor-block-list__block[data-type="core/navigation-link"] > .block-editor-block-list__insertion-point {
-  display: none;
-}
-
 /**
  * Menu item setup state. Is shown when a menu item has no URL configured.
  */
@@ -1601,6 +1631,34 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   cursor: pointer;
 }
 
+/**
+* Link Control Transforms
+*/
+.link-control-transform {
+  border-top: 1px solid #ccc;
+  padding: 0 16px 8px 16px;
+}
+
+.link-control-transform__subheading {
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+  color: #1e1e1e;
+  margin-bottom: 1.5em;
+}
+
+.link-control-transform__items {
+  display: flex;
+  justify-content: space-between;
+}
+
+.link-control-transform__item {
+  flex-basis: 33%;
+  flex-direction: column;
+  gap: 8px;
+  height: auto;
+}
+
 .wp-block-navigation-submenu {
   display: block;
 }

package/build-style/editor.css

@@ -162,11 +162,6 @@ div[data-type="core/button"] {
   display: table;
 }
 
-.wp-block > .wp-block-buttons {
-  display: flex;
-  flex-wrap: wrap;
-}
-
 .wp-block-buttons {
   /* stylelint-disable indentation */
 }
@@ -1180,7 +1175,7 @@ figure.wp-block-image:not(.wp-block) {
 }
 
 .wp-block-navigation-item__label {
-  display: inline-block;
+  display: inline;
 }
 
 /**
@@ -1315,6 +1310,17 @@ figure.wp-block-image:not(.wp-block) {
   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;
@@ -1323,6 +1329,10 @@ figure.wp-block-image:not(.wp-block) {
   width: 100%;
   overflow: hidden;
 }
+.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;
@@ -1345,7 +1355,7 @@ figure.wp-block-image:not(.wp-block) {
 .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;
@@ -1353,13 +1363,7 @@ figure.wp-block-image:not(.wp-block) {
   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;
 }
 
@@ -1534,9 +1538,42 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   margin-top: 16px;
 }
 
-.wp-block-navigation__submenu-container {
-  border-radius: 0;
-  min-height: 36px;
+@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;
 }
 
 /**
@@ -1562,9 +1599,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 /**
  * Navigation Items.
  */
-.wp-block-navigation-item .wp-block-navigation__submenu-container {
-  display: block;
-}
 .wp-block-navigation-item .wp-block-navigation-item__content {
   cursor: text;
 }
@@ -1578,10 +1612,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   margin-left: 16px;
 }
 
-.wp-block-navigation .block-editor-block-list__block[data-type="core/navigation-link"] > .block-editor-block-list__insertion-point {
-  display: none;
-}
-
 /**
  * Menu item setup state. Is shown when a menu item has no URL configured.
  */
@@ -1606,6 +1636,34 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   cursor: pointer;
 }
 
+/**
+* Link Control Transforms
+*/
+.link-control-transform {
+  border-top: 1px solid #ccc;
+  padding: 0 16px 8px 16px;
+}
+
+.link-control-transform__subheading {
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+  color: #1e1e1e;
+  margin-bottom: 1.5em;
+}
+
+.link-control-transform__items {
+  display: flex;
+  justify-content: space-between;
+}
+
+.link-control-transform__item {
+  flex-basis: 33%;
+  flex-direction: column;
+  gap: 8px;
+  height: auto;
+}
+
 .wp-block-navigation-submenu {
   display: block;
 }

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

@@ -89,7 +89,7 @@
 }
 
 .wp-block-navigation-item__label {
-  display: inline-block;
+  display: inline;
 }
 
 /**
@@ -224,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;
@@ -232,6 +243,10 @@
   width: 100%;
   overflow: hidden;
 }
+.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;
@@ -254,7 +269,7 @@
 .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;
@@ -262,13 +277,7 @@
   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;
 }
 
@@ -441,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;
 }

package/build-style/navigation/editor.css

@@ -89,7 +89,7 @@
 }
 
 .wp-block-navigation-item__label {
-  display: inline-block;
+  display: inline;
 }
 
 /**
@@ -224,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;
@@ -232,6 +243,10 @@
   width: 100%;
   overflow: hidden;
 }
+.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;
@@ -254,7 +269,7 @@
 .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;
@@ -262,13 +277,7 @@
   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;
 }
 
@@ -441,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;
 }