@wordpress/block-library 6.0.2 → 6.0.6

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;
 }
 
 /**
@@ -1184,6 +1179,7 @@ figure.wp-block-image:not(.wp-block) {
 .wp-block-navigation__container.is-parent-of-selected-block {
   visibility: visible;
   opacity: 1;
+  overflow: visible;
 }
 
 .wp-block-navigation__container,
@@ -1310,6 +1306,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 +1325,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 +1351,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 +1359,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 {
+.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;
 }
 
@@ -1377,62 +1382,48 @@ figure.wp-block-image:not(.wp-block) {
 .wp-block-navigation.is-selected .wp-block-navigation-placeholder__controls {
   display: flex;
 }
-.is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions, .is-medium .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions, .is-vertical .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions {
+.is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions, .is-medium .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions {
   flex-direction: column;
 }
-.is-selected.is-vertical .wp-block-navigation-placeholder__controls {
-  display: inline-flex;
-  padding: 12px;
+.is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions hr, .is-medium .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions hr {
+  display: none;
 }
 .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__icon {
   margin-left: 12px;
   height: 36px;
 }
 .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator {
-  margin-left: 12px;
-  padding: 0;
+  display: flex;
+  padding: 0 0 0 6px;
   align-items: center;
   justify-content: flex-start;
   line-height: 0;
-  margin-right: 5px;
-  display: none;
+  min-height: 36px;
+  margin-right: 4px;
 }
 .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator svg {
   margin-left: 4px;
 }
-.is-vertical .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator {
-  margin-bottom: 4px;
-  margin-right: 0;
-}
-.is-large .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator {
-  display: inline-flex;
-}
-
-.is-vertical .wp-block-navigation-placeholder,
-.is-vertical .wp-block-navigation-placeholder__preview,
-.is-vertical .wp-block-navigation-placeholder__controls {
-  min-height: 156px;
-}
-
-.is-vertical .wp-block-navigation-placeholder__preview,
-.is-vertical .wp-block-navigation-placeholder__controls {
-  flex-direction: column;
-  align-items: flex-start;
-}
 
 .wp-block-navigation-placeholder__actions {
   display: flex;
   font-size: 13px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-}
-.wp-block-navigation-placeholder__actions .components-button.components-dropdown-menu__toggle.has-icon {
-  padding: 6px 12px 6px 4px;
-  display: flex;
-  flex-direction: row-reverse;
+  gap: 6px;
+  height: 100%;
 }
 .wp-block-navigation-placeholder__actions .components-dropdown,
 .wp-block-navigation-placeholder__actions > .components-button {
-  margin-left: 12px;
+  margin-left: 0;
+}
+.wp-block-navigation-placeholder__actions.wp-block-navigation-placeholder__actions hr {
+  border: 0;
+  min-height: 1px;
+  min-width: 1px;
+  background-color: #1e1e1e;
+  margin: auto 0;
+  height: 100%;
+  max-height: 16px;
 }
 
 /**
@@ -1529,9 +1520,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;
 }
 
 /**
@@ -1552,14 +1576,12 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   min-width: 200px !important;
   height: auto !important;
   width: auto !important;
+  overflow: visible !important;
 }
 
 /**
  * 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 +1595,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 +1619,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;
 }
 
 /**
@@ -1189,6 +1184,7 @@ figure.wp-block-image:not(.wp-block) {
 .wp-block-navigation__container.is-parent-of-selected-block {
   visibility: visible;
   opacity: 1;
+  overflow: visible;
 }
 
 .wp-block-navigation__container,
@@ -1315,6 +1311,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 +1330,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 +1356,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 +1364,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 {
+.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;
 }
 
@@ -1382,62 +1387,48 @@ figure.wp-block-image:not(.wp-block) {
 .wp-block-navigation.is-selected .wp-block-navigation-placeholder__controls {
   display: flex;
 }
-.is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions, .is-medium .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions, .is-vertical .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions {
+.is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions, .is-medium .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions {
   flex-direction: column;
 }
-.is-selected.is-vertical .wp-block-navigation-placeholder__controls {
-  display: inline-flex;
-  padding: 12px;
+.is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions hr, .is-medium .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions hr {
+  display: none;
 }
 .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__icon {
   margin-right: 12px;
   height: 36px;
 }
 .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator {
-  margin-right: 12px;
-  padding: 0;
+  display: flex;
+  padding: 0 6px 0 0;
   align-items: center;
   justify-content: flex-start;
   line-height: 0;
-  margin-left: 5px;
-  display: none;
+  min-height: 36px;
+  margin-left: 4px;
 }
 .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator svg {
   margin-right: 4px;
 }
-.is-vertical .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator {
-  margin-bottom: 4px;
-  margin-left: 0;
-}
-.is-large .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator {
-  display: inline-flex;
-}
-
-.is-vertical .wp-block-navigation-placeholder,
-.is-vertical .wp-block-navigation-placeholder__preview,
-.is-vertical .wp-block-navigation-placeholder__controls {
-  min-height: 156px;
-}
-
-.is-vertical .wp-block-navigation-placeholder__preview,
-.is-vertical .wp-block-navigation-placeholder__controls {
-  flex-direction: column;
-  align-items: flex-start;
-}
 
 .wp-block-navigation-placeholder__actions {
   display: flex;
   font-size: 13px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-}
-.wp-block-navigation-placeholder__actions .components-button.components-dropdown-menu__toggle.has-icon {
-  padding: 6px 4px 6px 12px;
-  display: flex;
-  flex-direction: row-reverse;
+  gap: 6px;
+  height: 100%;
 }
 .wp-block-navigation-placeholder__actions .components-dropdown,
 .wp-block-navigation-placeholder__actions > .components-button {
-  margin-right: 12px;
+  margin-right: 0;
+}
+.wp-block-navigation-placeholder__actions.wp-block-navigation-placeholder__actions hr {
+  border: 0;
+  min-height: 1px;
+  min-width: 1px;
+  background-color: #1e1e1e;
+  margin: auto 0;
+  height: 100%;
+  max-height: 16px;
 }
 
 /**
@@ -1534,9 +1525,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;
 }
 
 /**
@@ -1557,14 +1581,12 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   min-width: 200px !important;
   height: auto !important;
   width: auto !important;
+  overflow: visible !important;
 }
 
 /**
  * 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 +1600,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 +1624,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/image/style-rtl.css

@@ -82,6 +82,7 @@
   max-width: 100%;
   vertical-align: bottom;
 }
+.wp-block-image:not(.is-style-rounded) > a,
 .wp-block-image:not(.is-style-rounded) img {
   border-radius: inherit;
 }

package/build-style/image/style.css

@@ -82,6 +82,7 @@
   max-width: 100%;
   vertical-align: bottom;
 }
+.wp-block-image:not(.is-style-rounded) > a,
 .wp-block-image:not(.is-style-rounded) img {
   border-radius: inherit;
 }