@wordpress/block-library 6.0.3 → 6.0.7

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

@@ -98,6 +98,7 @@
 .wp-block-navigation__container.is-parent-of-selected-block {
   visibility: visible;
   opacity: 1;
+  overflow: visible;
 }
 
 .wp-block-navigation__container,
@@ -277,7 +278,7 @@
   flex-wrap: nowrap;
   flex: 0;
 }
-.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) {
+.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;
 }
 
@@ -300,62 +301,48 @@
 .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;
 }
 
 /**

package/build-style/navigation/editor.css

@@ -98,6 +98,7 @@
 .wp-block-navigation__container.is-parent-of-selected-block {
   visibility: visible;
   opacity: 1;
+  overflow: visible;
 }
 
 .wp-block-navigation__container,
@@ -277,7 +278,7 @@
   flex-wrap: nowrap;
   flex: 0;
 }
-.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) {
+.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;
 }
 
@@ -300,62 +301,48 @@
 .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;
 }
 
 /**

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

@@ -145,13 +145,13 @@
   visibility: hidden;
   width: 0;
   height: 0;
+  overflow: hidden;
   right: -1px;
   top: 100%;
 }
 .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(.wp-block-navigation__submenu-container) > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
   margin-left: 0;
@@ -180,6 +180,7 @@
 }
 .wp-block-navigation .has-child:where(:not(.open-on-click)):hover > .wp-block-navigation__submenu-container {
   visibility: visible;
+  overflow: visible;
   opacity: 1;
   width: auto;
   height: auto;
@@ -187,6 +188,7 @@
 }
 .wp-block-navigation .has-child:where(:not(.open-on-click):not(.open-on-hover-click)):focus-within > .wp-block-navigation__submenu-container {
   visibility: visible;
+  overflow: visible;
   opacity: 1;
   width: auto;
   height: auto;
@@ -194,6 +196,7 @@
 }
 .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] + .wp-block-navigation__submenu-container {
   visibility: visible;
+  overflow: visible;
   opacity: 1;
   width: auto;
   height: auto;
@@ -241,14 +244,21 @@
 /**
  * Justifications.
  */
-@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-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;
-  }
+  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: -1px;
+  left: -1px;
+}
+@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__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,
@@ -257,6 +267,7 @@
     left: 100%;
   }
 }
+
 .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
   background-color: #fff;
   color: #000;
@@ -264,6 +275,11 @@
 }
 
 .wp-block-navigation__container {
+  display: flex;
+  flex-wrap: var(--layout-wrap, wrap);
+  flex-direction: var(--layout-direction, initial);
+  justify-content: var(--layout-justify, initial);
+  align-items: var(--layout-align, initial);
   list-style: none;
   margin: 0;
   padding-right: 0;
@@ -284,7 +300,11 @@
   bottom: 0;
 }
 .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
-  display: contents;
+  display: flex;
+  flex-wrap: var(--layout-wrap, wrap);
+  flex-direction: var(--layout-direction, initial);
+  justify-content: var(--layout-justify, initial);
+  align-items: var(--layout-align, initial);
 }
 .wp-block-navigation__responsive-container.is-menu-open {
   display: flex;
@@ -293,12 +313,12 @@
   z-index: 100000;
   padding: 72px 24px 24px 24px;
   background-color: inherit;
-  align-items: inherit;
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
   display: flex;
   flex-direction: column;
-  align-items: var(--justification-setting, inherit);
+  align-items: var(--layout-justification-setting, inherit);
+  justify-content: flex-start;
   overflow: auto;
   padding: 0;
 }
@@ -336,7 +356,7 @@
 .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);
+  align-items: var(--layout-justification-setting, initial);
 }
 .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 {
@@ -349,10 +369,10 @@
 }
 @media (min-width: 600px) {
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
-    display: contents;
+    display: block;
     width: 100%;
     position: relative;
-    z-index: 2;
+    z-index: auto;
     background-color: inherit;
   }
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
@@ -416,15 +436,4 @@
 
 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;
 }

package/build-style/navigation/style.css

@@ -145,13 +145,13 @@
   visibility: hidden;
   width: 0;
   height: 0;
+  overflow: hidden;
   left: -1px;
   top: 100%;
 }
 .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(.wp-block-navigation__submenu-container) > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
   margin-right: 0;
@@ -180,6 +180,7 @@
 }
 .wp-block-navigation .has-child:where(:not(.open-on-click)):hover > .wp-block-navigation__submenu-container {
   visibility: visible;
+  overflow: visible;
   opacity: 1;
   width: auto;
   height: auto;
@@ -187,6 +188,7 @@
 }
 .wp-block-navigation .has-child:where(:not(.open-on-click):not(.open-on-hover-click)):focus-within > .wp-block-navigation__submenu-container {
   visibility: visible;
+  overflow: visible;
   opacity: 1;
   width: auto;
   height: auto;
@@ -194,6 +196,7 @@
 }
 .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] + .wp-block-navigation__submenu-container {
   visibility: visible;
+  overflow: visible;
   opacity: 1;
   width: auto;
   height: auto;
@@ -241,14 +244,21 @@
 /**
  * Justifications.
  */
-@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-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 {
-    left: auto;
-    right: 0;
-  }
+  left: auto;
+  right: 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 {
+  left: -1px;
+  right: -1px;
+}
+@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__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,
@@ -257,6 +267,7 @@
     right: 100%;
   }
 }
+
 .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
   background-color: #fff;
   color: #000;
@@ -264,6 +275,11 @@
 }
 
 .wp-block-navigation__container {
+  display: flex;
+  flex-wrap: var(--layout-wrap, wrap);
+  flex-direction: var(--layout-direction, initial);
+  justify-content: var(--layout-justify, initial);
+  align-items: var(--layout-align, initial);
   list-style: none;
   margin: 0;
   padding-left: 0;
@@ -284,7 +300,11 @@
   bottom: 0;
 }
 .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
-  display: contents;
+  display: flex;
+  flex-wrap: var(--layout-wrap, wrap);
+  flex-direction: var(--layout-direction, initial);
+  justify-content: var(--layout-justify, initial);
+  align-items: var(--layout-align, initial);
 }
 .wp-block-navigation__responsive-container.is-menu-open {
   display: flex;
@@ -293,12 +313,12 @@
   z-index: 100000;
   padding: 72px 24px 24px 24px;
   background-color: inherit;
-  align-items: inherit;
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
   display: flex;
   flex-direction: column;
-  align-items: var(--justification-setting, inherit);
+  align-items: var(--layout-justification-setting, inherit);
+  justify-content: flex-start;
   overflow: auto;
   padding: 0;
 }
@@ -336,7 +356,7 @@
 .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);
+  align-items: var(--layout-justification-setting, initial);
 }
 .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 {
@@ -349,10 +369,10 @@
 }
 @media (min-width: 600px) {
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
-    display: contents;
+    display: block;
     width: 100%;
     position: relative;
-    z-index: 2;
+    z-index: auto;
     background-color: inherit;
   }
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
@@ -416,15 +436,4 @@
 
 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;
 }

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

@@ -92,6 +92,7 @@
   min-width: 200px !important;
   height: auto !important;
   width: auto !important;
+  overflow: visible !important;
 }
 
 /**

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

@@ -92,6 +92,7 @@
   min-width: 200px !important;
   height: auto !important;
   width: auto !important;
+  overflow: visible !important;
 }
 
 /**

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

@@ -88,6 +88,8 @@ button.wp-block-navigation-item__content {
   color: currentColor;
   font-size: inherit;
   font-family: inherit;
+  line-height: inherit;
+  text-align: right;
 }
 
 .wp-block-navigation-submenu__toggle {

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

@@ -88,6 +88,8 @@ button.wp-block-navigation-item__content {
   color: currentColor;
   font-size: inherit;
   font-family: inherit;
+  line-height: inherit;
+  text-align: left;
 }
 
 .wp-block-navigation-submenu__toggle {

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

@@ -75,8 +75,11 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 .wp-block-navigation .wp-block-page-list {
-  display: contents;
-  flex-wrap: wrap;
+  display: flex;
+  flex-direction: var(--layout-direction, initial);
+  justify-content: var(--layout-justify, initial);
+  align-items: var(--layout-align, initial);
+  flex-wrap: var(--layout-wrap, wrap);
   background-color: inherit;
 }
 .wp-block-navigation .wp-block-navigation-item {

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

@@ -75,8 +75,11 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 .wp-block-navigation .wp-block-page-list {
-  display: contents;
-  flex-wrap: wrap;
+  display: flex;
+  flex-direction: var(--layout-direction, initial);
+  justify-content: var(--layout-justify, initial);
+  align-items: var(--layout-align, initial);
+  flex-wrap: var(--layout-wrap, wrap);
   background-color: inherit;
 }
 .wp-block-navigation .wp-block-navigation-item {