@wordpress/block-library 8.9.0 → 8.11.0

package/build-style/image/style.css

@@ -203,4 +203,102 @@
 
 .wp-block-image figure {
   margin: 0;
+}
+
+.wp-lightbox-container .img-container {
+  position: relative;
+}
+.wp-lightbox-container button {
+  border: none;
+  background: none;
+  cursor: zoom-in;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 100;
+}
+.wp-lightbox-container button:focus-visible {
+  outline: 5px auto #212121;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: 5px;
+}
+
+.wp-lightbox-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100000;
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+  visibility: hidden;
+}
+.wp-lightbox-overlay .close-button {
+  font-size: 40px;
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  cursor: pointer;
+  z-index: 5000000;
+}
+.wp-lightbox-overlay .wp-block-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 3000000;
+  position: absolute;
+  flex-direction: column;
+}
+.wp-lightbox-overlay button {
+  border: none;
+  background: none;
+}
+.wp-lightbox-overlay .scrim {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 2000000;
+  background-color: white;
+  opacity: 0.9;
+}
+.wp-lightbox-overlay.initialized {
+  animation: both turn-off-visibility 300ms;
+}
+.wp-lightbox-overlay.initialized img {
+  animation: both turn-off-visibility 250ms;
+}
+.wp-lightbox-overlay.initialized.active {
+  visibility: visible;
+  animation: both turn-on-visibility 250ms;
+}
+.wp-lightbox-overlay.initialized.active img {
+  animation: both turn-on-visibility 300ms;
+}
+
+@keyframes turn-on-visibility {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes turn-off-visibility {
+  0% {
+    opacity: 1;
+    visibility: visible;
+  }
+  99% {
+    opacity: 0;
+    visibility: visible;
+  }
+  100% {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+html.has-lightbox-open {
+  overflow: hidden;
 }

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

@@ -585,4 +585,40 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 
 .wp-block-navigation__responsive-container-open.components-button {
   opacity: 1;
+}
+
+.wp-block-navigation__menu-inspector-controls {
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable both-edges;
+  scrollbar-color: transparent transparent;
+  will-change: transform;
+}
+.wp-block-navigation__menu-inspector-controls::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+.wp-block-navigation__menu-inspector-controls::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+.wp-block-navigation__menu-inspector-controls::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+.wp-block-navigation__menu-inspector-controls:hover::-webkit-scrollbar-thumb, .wp-block-navigation__menu-inspector-controls:focus::-webkit-scrollbar-thumb, .wp-block-navigation__menu-inspector-controls:focus-within::-webkit-scrollbar-thumb {
+  background-color: #949494;
+}
+.wp-block-navigation__menu-inspector-controls:hover, .wp-block-navigation__menu-inspector-controls:focus, .wp-block-navigation__menu-inspector-controls:focus-within {
+  scrollbar-color: #949494 transparent;
+}
+@media (hover: none) {
+  .wp-block-navigation__menu-inspector-controls {
+    scrollbar-color: #949494 transparent;
+  }
+}
+
+.wp-block-navigation__menu-inspector-controls__empty-message {
+  margin-right: 24px;
 }

package/build-style/navigation/editor.css

@@ -585,4 +585,40 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 
 .wp-block-navigation__responsive-container-open.components-button {
   opacity: 1;
+}
+
+.wp-block-navigation__menu-inspector-controls {
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable both-edges;
+  scrollbar-color: transparent transparent;
+  will-change: transform;
+}
+.wp-block-navigation__menu-inspector-controls::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+.wp-block-navigation__menu-inspector-controls::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+.wp-block-navigation__menu-inspector-controls::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+.wp-block-navigation__menu-inspector-controls:hover::-webkit-scrollbar-thumb, .wp-block-navigation__menu-inspector-controls:focus::-webkit-scrollbar-thumb, .wp-block-navigation__menu-inspector-controls:focus-within::-webkit-scrollbar-thumb {
+  background-color: #949494;
+}
+.wp-block-navigation__menu-inspector-controls:hover, .wp-block-navigation__menu-inspector-controls:focus, .wp-block-navigation__menu-inspector-controls:focus-within {
+  scrollbar-color: #949494 transparent;
+}
+@media (hover: none) {
+  .wp-block-navigation__menu-inspector-controls {
+    scrollbar-color: #949494 transparent;
+  }
+}
+
+.wp-block-navigation__menu-inspector-controls__empty-message {
+  margin-left: 24px;
 }

package/build-style/post-comments-form/style-rtl.css

@@ -125,7 +125,7 @@
   padding: calc(0.667em + 2px);
 }
 .wp-block-post-comments-form .comment-form textarea,
-.wp-block-post-comments-form .comment-form input:not([type=submit]):not([type=checkbox]) {
+.wp-block-post-comments-form .comment-form input:not([type=submit]):not([type=checkbox]):not([type=hidden]) {
   display: block;
   box-sizing: border-box;
   width: 100%;

package/build-style/post-comments-form/style.css

@@ -125,7 +125,7 @@
   padding: calc(0.667em + 2px);
 }
 .wp-block-post-comments-form .comment-form textarea,
-.wp-block-post-comments-form .comment-form input:not([type=submit]):not([type=checkbox]) {
+.wp-block-post-comments-form .comment-form input:not([type=submit]):not([type=checkbox]):not([type=hidden]) {
   display: block;
   box-sizing: border-box;
   width: 100%;

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

@@ -95,6 +95,7 @@
   border-radius: initial;
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 .wp-block-search__components-button-group {
   margin-top: 10px;

package/build-style/search/editor.css

@@ -95,6 +95,7 @@
   border-radius: initial;
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 .wp-block-search__components-button-group {
   margin-top: 10px;

package/build-style/site-logo/editor-rtl.css

@@ -190,6 +190,7 @@
 }
 .block-library-site-logo__inspector-media-replace-container img {
   width: 20px;
+  min-width: 20px;
   aspect-ratio: 1;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
   border-radius: 50% !important;

package/build-style/site-logo/editor.css

@@ -190,6 +190,7 @@
 }
 .block-library-site-logo__inspector-media-replace-container img {
   width: 20px;
+  min-width: 20px;
   aspect-ratio: 1;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
   border-radius: 50% !important;

package/build-style/style-rtl.css

@@ -609,6 +609,8 @@
   justify-content: center;
   align-items: center;
   padding: 1em;
+  overflow: hidden;
+  overflow: clip;
   box-sizing: border-box; direction: ltr;
   /**
    * Set a default background color for has-background-dim _unless_ it includes another
@@ -908,8 +910,7 @@
   height: 100%;
   max-width: none;
   max-height: none;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
   outline: none;
   border: none;
   box-shadow: none;
@@ -1019,13 +1020,23 @@ section.wp-block-cover-image > h2,
 }
 
 .wp-block-details {
+  box-sizing: border-box;
   overflow: hidden;
 }
 
-.wp-block-details-summary {
+.wp-block-details summary {
   cursor: pointer;
 }
 
+.wp-block-details > *:not(summary) {
+  margin-block-start: var(--wp--style--block-gap);
+  margin-block-end: 0;
+}
+
+.wp-block-details > *:last-child {
+  margin-bottom: 0;
+}
+
 .wp-block[data-align=left] > [data-type="core/embed"],
 .wp-block[data-align=right] > [data-type="core/embed"],
 .wp-block-embed.alignleft,
@@ -1213,8 +1224,7 @@ section.wp-block-cover-image > h2,
   width: 100%;
   height: 100%;
   flex: 1;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item,
 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image,
@@ -1408,8 +1418,7 @@ figure.wp-block-gallery.has-nested-images {
   width: 100%;
   flex: 1 0 0%;
   height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) {
   width: 100%;
@@ -1578,6 +1587,104 @@ h6.has-background {
   margin: 0;
 }
 
+.wp-lightbox-container .img-container {
+  position: relative;
+}
+.wp-lightbox-container button {
+  border: none;
+  background: none;
+  cursor: zoom-in;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 100;
+}
+.wp-lightbox-container button:focus-visible {
+  outline: 5px auto #212121;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: 5px;
+}
+
+.wp-lightbox-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 100000;
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+  visibility: hidden;
+}
+.wp-lightbox-overlay .close-button {
+  font-size: 40px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  cursor: pointer;
+  z-index: 5000000;
+}
+.wp-lightbox-overlay .wp-block-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 3000000;
+  position: absolute;
+  flex-direction: column;
+}
+.wp-lightbox-overlay button {
+  border: none;
+  background: none;
+}
+.wp-lightbox-overlay .scrim {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 2000000;
+  background-color: white;
+  opacity: 0.9;
+}
+.wp-lightbox-overlay.initialized {
+  animation: both turn-off-visibility 300ms;
+}
+.wp-lightbox-overlay.initialized img {
+  animation: both turn-off-visibility 250ms;
+}
+.wp-lightbox-overlay.initialized.active {
+  visibility: visible;
+  animation: both turn-on-visibility 250ms;
+}
+.wp-lightbox-overlay.initialized.active img {
+  animation: both turn-on-visibility 300ms;
+}
+
+@keyframes turn-on-visibility {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes turn-off-visibility {
+  0% {
+    opacity: 1;
+    visibility: visible;
+  }
+  99% {
+    opacity: 0;
+    visibility: visible;
+  }
+  100% {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+html.has-lightbox-open {
+  overflow: hidden;
+}
+
 ol.wp-block-latest-comments {
   margin-right: 0;
   box-sizing: border-box;
@@ -2477,7 +2584,7 @@ p.has-background {
   padding: calc(0.667em + 2px);
 }
 .wp-block-post-comments-form .comment-form textarea,
-.wp-block-post-comments-form .comment-form input:not([type=submit]):not([type=checkbox]) {
+.wp-block-post-comments-form .comment-form input:not([type=submit]):not([type=checkbox]):not([type=hidden]) {
   display: block;
   box-sizing: border-box;
   width: 100%;
@@ -3556,8 +3663,7 @@ pre.wp-block-verse {
 }
 @supports (position: sticky) {
   .wp-block-video [poster] {
-    -o-object-fit: cover;
-       object-fit: cover;
+    object-fit: cover;
   }
 }
 .wp-block-video.aligncenter {

package/build-style/style.css

@@ -614,6 +614,8 @@
   justify-content: center;
   align-items: center;
   padding: 1em;
+  overflow: hidden;
+  overflow: clip;
   box-sizing: border-box;
   /*rtl:raw: direction: ltr; */
   /**
@@ -915,8 +917,7 @@
   height: 100%;
   max-width: none;
   max-height: none;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
   outline: none;
   border: none;
   box-shadow: none;
@@ -1026,13 +1027,23 @@ section.wp-block-cover-image > h2,
 }
 
 .wp-block-details {
+  box-sizing: border-box;
   overflow: hidden;
 }
 
-.wp-block-details-summary {
+.wp-block-details summary {
   cursor: pointer;
 }
 
+.wp-block-details > *:not(summary) {
+  margin-block-start: var(--wp--style--block-gap);
+  margin-block-end: 0;
+}
+
+.wp-block-details > *:last-child {
+  margin-bottom: 0;
+}
+
 .wp-block[data-align=left] > [data-type="core/embed"],
 .wp-block[data-align=right] > [data-type="core/embed"],
 .wp-block-embed.alignleft,
@@ -1221,8 +1232,7 @@ section.wp-block-cover-image > h2,
   width: 100%;
   height: 100%;
   flex: 1;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item,
 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image,
@@ -1416,8 +1426,7 @@ figure.wp-block-gallery.has-nested-images {
   width: 100%;
   flex: 1 0 0%;
   height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) {
   width: 100%;
@@ -1592,6 +1601,104 @@ h6.has-background {
   margin: 0;
 }
 
+.wp-lightbox-container .img-container {
+  position: relative;
+}
+.wp-lightbox-container button {
+  border: none;
+  background: none;
+  cursor: zoom-in;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 100;
+}
+.wp-lightbox-container button:focus-visible {
+  outline: 5px auto #212121;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: 5px;
+}
+
+.wp-lightbox-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100000;
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+  visibility: hidden;
+}
+.wp-lightbox-overlay .close-button {
+  font-size: 40px;
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  cursor: pointer;
+  z-index: 5000000;
+}
+.wp-lightbox-overlay .wp-block-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 3000000;
+  position: absolute;
+  flex-direction: column;
+}
+.wp-lightbox-overlay button {
+  border: none;
+  background: none;
+}
+.wp-lightbox-overlay .scrim {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 2000000;
+  background-color: white;
+  opacity: 0.9;
+}
+.wp-lightbox-overlay.initialized {
+  animation: both turn-off-visibility 300ms;
+}
+.wp-lightbox-overlay.initialized img {
+  animation: both turn-off-visibility 250ms;
+}
+.wp-lightbox-overlay.initialized.active {
+  visibility: visible;
+  animation: both turn-on-visibility 250ms;
+}
+.wp-lightbox-overlay.initialized.active img {
+  animation: both turn-on-visibility 300ms;
+}
+
+@keyframes turn-on-visibility {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes turn-off-visibility {
+  0% {
+    opacity: 1;
+    visibility: visible;
+  }
+  99% {
+    opacity: 0;
+    visibility: visible;
+  }
+  100% {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+html.has-lightbox-open {
+  overflow: hidden;
+}
+
 ol.wp-block-latest-comments {
   margin-left: 0;
   box-sizing: border-box;
@@ -2507,7 +2614,7 @@ p.has-background {
   padding: calc(0.667em + 2px);
 }
 .wp-block-post-comments-form .comment-form textarea,
-.wp-block-post-comments-form .comment-form input:not([type=submit]):not([type=checkbox]) {
+.wp-block-post-comments-form .comment-form input:not([type=submit]):not([type=checkbox]):not([type=hidden]) {
   display: block;
   box-sizing: border-box;
   width: 100%;
@@ -3591,8 +3698,7 @@ pre.wp-block-verse {
 }
 @supports (position: sticky) {
   .wp-block-video [poster] {
-    -o-object-fit: cover;
-       object-fit: cover;
+    object-fit: cover;
   }
 }
 .wp-block-video.aligncenter {

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

@@ -94,8 +94,7 @@
 }
 @supports (position: sticky) {
   .wp-block-video [poster] {
-    -o-object-fit: cover;
-       object-fit: cover;
+    object-fit: cover;
   }
 }
 .wp-block-video.aligncenter {

package/build-style/video/style.css

@@ -94,8 +94,7 @@
 }
 @supports (position: sticky) {
   .wp-block-video [poster] {
-    -o-object-fit: cover;
-       object-fit: cover;
+    object-fit: cover;
   }
 }
 .wp-block-video.aligncenter {