@wordpress/block-library 8.22.0 → 8.24.0

package/build-style/editor.css

@@ -3093,6 +3093,15 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   height: 100%;
   width: 100%;
 }
+.wp-block-post-featured-image > a {
+  cursor: default;
+}
+.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-button,
+.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__instructions,
+.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__label {
+  opacity: 1;
+  pointer-events: auto;
+}
 
 div[data-type="core/post-featured-image"] img {
   max-width: 100%;
@@ -3159,24 +3168,24 @@ div[data-type="core/post-featured-image"] img {
   background: linear-gradient(135deg, #020381 0%, #2874fc 100%);
 }
 
-.editor-styles-wrapper {
+:where(.editor-styles-wrapper) {
   --wp--preset--font-size--normal: 16px;
   --wp--preset--font-size--huge: 42px;
 }
 
-.editor-styles-wrapper .has-regular-font-size {
+:where(.editor-styles-wrapper) .has-regular-font-size {
   font-size: 16px;
 }
 
-.editor-styles-wrapper .has-larger-font-size {
+:where(.editor-styles-wrapper) .has-larger-font-size {
   font-size: 42px;
 }
 
-.editor-styles-wrapper .has-normal-font-size {
+:where(.editor-styles-wrapper) .has-normal-font-size {
   font-size: var(--wp--preset--font-size--normal);
 }
 
-.editor-styles-wrapper .has-huge-font-size {
+:where(.editor-styles-wrapper) .has-huge-font-size {
   font-size: var(--wp--preset--font-size--huge);
 }
 
@@ -3186,6 +3195,6 @@ div[data-type="core/post-featured-image"] img {
  * These are only output in the editor, but styles here are NOT prefixed .editor-styles-wrapper.
  * This allows us to create normalization styles that are easily overridden by editor styles.
  */
-.editor-styles-wrapper iframe:not([frameborder]) {
+:where(.editor-styles-wrapper) iframe:not([frameborder]) {
   border: 0;
 }

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

@@ -320,6 +320,34 @@ figure.wp-block-gallery.has-nested-images {
   text-align: center;
   width: 100%;
   box-sizing: border-box;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable both-edges;
+  scrollbar-color: transparent transparent;
+  will-change: transform;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image figcaption:hover::-webkit-scrollbar-thumb, .wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus::-webkit-scrollbar-thumb, .wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus-within::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.8);
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image figcaption:hover, .wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus, .wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus-within {
+  scrollbar-color: rgba(255, 255, 255, 0.8) transparent;
+}
+@media (hover: none) {
+  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
+    scrollbar-color: rgba(255, 255, 255, 0.8) transparent;
+  }
 }
 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption img {
   display: inline;

package/build-style/gallery/style.css

@@ -320,6 +320,34 @@ figure.wp-block-gallery.has-nested-images {
   text-align: center;
   width: 100%;
   box-sizing: border-box;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable both-edges;
+  scrollbar-color: transparent transparent;
+  will-change: transform;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image figcaption:hover::-webkit-scrollbar-thumb, .wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus::-webkit-scrollbar-thumb, .wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus-within::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.8);
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image figcaption:hover, .wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus, .wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus-within {
+  scrollbar-color: rgba(255, 255, 255, 0.8) transparent;
+}
+@media (hover: none) {
+  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
+    scrollbar-color: rgba(255, 255, 255, 0.8) transparent;
+  }
 }
 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption img {
   display: inline;

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

@@ -213,22 +213,28 @@
 .wp-lightbox-container button {
   opacity: 0;
   border: none;
-  background: #000;
+  background-color: rgba(90, 90, 90, 0.25);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+          backdrop-filter: blur(16px) saturate(180%);
   cursor: zoom-in;
-  width: 24px;
-  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
   position: absolute;
   z-index: 100;
-  top: 10px;
-  left: 10px;
+  top: 16px;
+  left: 16px;
   text-align: center;
   padding: 0;
-  border-radius: 10%;
+  border-radius: 4px;
+  transition: opacity 0.2s ease;
 }
 .wp-lightbox-container button:focus-visible {
-  outline: 5px auto #212121;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: 5px;
+  outline: 3px auto rgba(90, 90, 90, 0.25);
+  outline: 3px auto -webkit-focus-ring-color;
+  outline-offset: 3px;
 }
 .wp-lightbox-container button:hover {
   cursor: pointer;
@@ -238,7 +244,7 @@
   opacity: 1;
 }
 .wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
-  background: #000;
+  background-color: rgba(90, 90, 90, 0.25);
   border: none;
 }
 
@@ -248,7 +254,7 @@
   right: 0;
   z-index: 100000;
   overflow: hidden;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   box-sizing: border-box;
   visibility: hidden;
@@ -381,7 +387,7 @@
 }
 @keyframes lightbox-zoom-in {
   0% {
-    transform: translate(calc(-1*(-50vw + var(--wp--lightbox-initial-left-position))), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
+    transform: translate(calc(-1*((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position))), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
   }
   100% {
     transform: translate(50%, -50%) scale(1, 1);
@@ -397,6 +403,6 @@
   }
   100% {
     visibility: hidden;
-    transform: translate(calc(-1*(-50vw + var(--wp--lightbox-initial-left-position))), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
+    transform: translate(calc(-1*((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position))), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
   }
 }

package/build-style/image/style.css

@@ -219,22 +219,28 @@
 .wp-lightbox-container button {
   opacity: 0;
   border: none;
-  background: #000;
+  background-color: rgba(90, 90, 90, 0.25);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+          backdrop-filter: blur(16px) saturate(180%);
   cursor: zoom-in;
-  width: 24px;
-  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
   position: absolute;
   z-index: 100;
-  top: 10px;
-  right: 10px;
+  top: 16px;
+  right: 16px;
   text-align: center;
   padding: 0;
-  border-radius: 10%;
+  border-radius: 4px;
+  transition: opacity 0.2s ease;
 }
 .wp-lightbox-container button:focus-visible {
-  outline: 5px auto #212121;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: 5px;
+  outline: 3px auto rgba(90, 90, 90, 0.25);
+  outline: 3px auto -webkit-focus-ring-color;
+  outline-offset: 3px;
 }
 .wp-lightbox-container button:hover {
   cursor: pointer;
@@ -244,7 +250,7 @@
   opacity: 1;
 }
 .wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
-  background: #000;
+  background-color: rgba(90, 90, 90, 0.25);
   border: none;
 }
 
@@ -254,7 +260,7 @@
   left: 0;
   z-index: 100000;
   overflow: hidden;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   box-sizing: border-box;
   visibility: hidden;
@@ -387,7 +393,7 @@
 }
 @keyframes lightbox-zoom-in {
   0% {
-    transform: translate(calc(-50vw + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
+    transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
   }
   100% {
     transform: translate(-50%, -50%) scale(1, 1);
@@ -403,6 +409,6 @@
   }
   100% {
     visibility: hidden;
-    transform: translate(calc(-50vw + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
+    transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
   }
 }

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

@@ -178,6 +178,15 @@
   height: 100%;
   width: 100%;
 }
+.wp-block-post-featured-image > a {
+  cursor: default;
+}
+.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-button,
+.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__instructions,
+.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__label {
+  opacity: 1;
+  pointer-events: auto;
+}
 
 div[data-type="core/post-featured-image"] img {
   max-width: 100%;

package/build-style/post-featured-image/editor.css

@@ -178,6 +178,15 @@
   height: 100%;
   width: 100%;
 }
+.wp-block-post-featured-image > a {
+  cursor: default;
+}
+.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-button,
+.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__instructions,
+.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__label {
+  opacity: 1;
+  pointer-events: auto;
+}
 
 div[data-type="core/post-featured-image"] img {
   max-width: 100%;

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

@@ -104,4 +104,7 @@
 .wp-block-quote.is-large:where(:not(.is-style-plain)) footer {
   font-size: 1.125em;
   text-align: left;
+}
+.wp-block-quote > cite {
+  display: block;
 }

package/build-style/quote/style.css

@@ -104,4 +104,7 @@
 .wp-block-quote.is-large:where(:not(.is-style-plain)) footer {
   font-size: 1.125em;
   text-align: right;
+}
+.wp-block-quote > cite {
+  display: block;
 }

package/build-style/read-more/style-rtl.css

@@ -91,9 +91,9 @@
   width: -moz-fit-content;
   width: fit-content;
 }
-.wp-block-read-more:not([style*=text-decoration]) {
+.wp-block-read-more:where(:not([style*="text-decoration"])) {
   text-decoration: none;
 }
-.wp-block-read-more:not([style*=text-decoration]):focus, .wp-block-read-more:not([style*=text-decoration]):active {
+.wp-block-read-more:where(:not([style*="text-decoration"])):focus, .wp-block-read-more:where(:not([style*="text-decoration"])):active {
   text-decoration: none;
 }

package/build-style/read-more/style.css

@@ -91,9 +91,9 @@
   width: -moz-fit-content;
   width: fit-content;
 }
-.wp-block-read-more:not([style*=text-decoration]) {
+.wp-block-read-more:where(:not([style*="text-decoration"])) {
   text-decoration: none;
 }
-.wp-block-read-more:not([style*=text-decoration]):focus, .wp-block-read-more:not([style*=text-decoration]):active {
+.wp-block-read-more:where(:not([style*="text-decoration"])):focus, .wp-block-read-more:where(:not([style*="text-decoration"])):active {
   text-decoration: none;
 }

package/build-style/style-rtl.css

@@ -833,20 +833,20 @@
   z-index: 1;
   color: inherit; direction: rtl;
 }
-.wp-block-cover-image p:not(.has-text-color),
-.wp-block-cover-image h1:not(.has-text-color),
-.wp-block-cover-image h2:not(.has-text-color),
-.wp-block-cover-image h3:not(.has-text-color),
-.wp-block-cover-image h4:not(.has-text-color),
-.wp-block-cover-image h5:not(.has-text-color),
-.wp-block-cover-image h6:not(.has-text-color),
-.wp-block-cover p:not(.has-text-color),
-.wp-block-cover h1:not(.has-text-color),
-.wp-block-cover h2:not(.has-text-color),
-.wp-block-cover h3:not(.has-text-color),
-.wp-block-cover h4:not(.has-text-color),
-.wp-block-cover h5:not(.has-text-color),
-.wp-block-cover h6:not(.has-text-color) {
+.wp-block-cover-image p:where(:not(.has-text-color)),
+.wp-block-cover-image h1:where(:not(.has-text-color)),
+.wp-block-cover-image h2:where(:not(.has-text-color)),
+.wp-block-cover-image h3:where(:not(.has-text-color)),
+.wp-block-cover-image h4:where(:not(.has-text-color)),
+.wp-block-cover-image h5:where(:not(.has-text-color)),
+.wp-block-cover-image h6:where(:not(.has-text-color)),
+.wp-block-cover p:where(:not(.has-text-color)),
+.wp-block-cover h1:where(:not(.has-text-color)),
+.wp-block-cover h2:where(:not(.has-text-color)),
+.wp-block-cover h3:where(:not(.has-text-color)),
+.wp-block-cover h4:where(:not(.has-text-color)),
+.wp-block-cover h5:where(:not(.has-text-color)),
+.wp-block-cover h6:where(:not(.has-text-color)) {
   color: inherit;
 }
 .wp-block-cover-image.is-position-top-left,
@@ -1431,6 +1431,34 @@ figure.wp-block-gallery.has-nested-images {
   text-align: center;
   width: 100%;
   box-sizing: border-box;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable both-edges;
+  scrollbar-color: transparent transparent;
+  will-change: transform;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image figcaption:hover::-webkit-scrollbar-thumb, .wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus::-webkit-scrollbar-thumb, .wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus-within::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.8);
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image figcaption:hover, .wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus, .wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus-within {
+  scrollbar-color: rgba(255, 255, 255, 0.8) transparent;
+}
+@media (hover: none) {
+  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
+    scrollbar-color: rgba(255, 255, 255, 0.8) transparent;
+  }
 }
 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption img {
   display: inline;
@@ -1672,22 +1700,28 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 .wp-lightbox-container button {
   opacity: 0;
   border: none;
-  background: #000;
+  background-color: rgba(90, 90, 90, 0.25);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+          backdrop-filter: blur(16px) saturate(180%);
   cursor: zoom-in;
-  width: 24px;
-  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
   position: absolute;
   z-index: 100;
-  top: 10px;
-  left: 10px;
+  top: 16px;
+  left: 16px;
   text-align: center;
   padding: 0;
-  border-radius: 10%;
+  border-radius: 4px;
+  transition: opacity 0.2s ease;
 }
 .wp-lightbox-container button:focus-visible {
-  outline: 5px auto #212121;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: 5px;
+  outline: 3px auto rgba(90, 90, 90, 0.25);
+  outline: 3px auto -webkit-focus-ring-color;
+  outline-offset: 3px;
 }
 .wp-lightbox-container button:hover {
   cursor: pointer;
@@ -1697,7 +1731,7 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
   opacity: 1;
 }
 .wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
-  background: #000;
+  background-color: rgba(90, 90, 90, 0.25);
   border: none;
 }
 
@@ -1707,7 +1741,7 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
   right: 0;
   z-index: 100000;
   overflow: hidden;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   box-sizing: border-box;
   visibility: hidden;
@@ -1840,7 +1874,7 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 }
 @keyframes lightbox-zoom-in {
   0% {
-    transform: translate(calc(-1*(-50vw + var(--wp--lightbox-initial-left-position))), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
+    transform: translate(calc(-1*((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position))), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
   }
   100% {
     transform: translate(50%, -50%) scale(1, 1);
@@ -1856,7 +1890,7 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
   }
   100% {
     visibility: hidden;
-    transform: translate(calc(-1*(-50vw + var(--wp--lightbox-initial-left-position))), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
+    transform: translate(calc(-1*((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position))), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
   }
 }
 ol.wp-block-latest-comments {
@@ -3118,16 +3152,19 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   font-size: 1.125em;
   text-align: left;
 }
+.wp-block-quote > cite {
+  display: block;
+}
 
 .wp-block-read-more {
   display: block;
   width: -moz-fit-content;
   width: fit-content;
 }
-.wp-block-read-more:not([style*=text-decoration]) {
+.wp-block-read-more:where(:not([style*="text-decoration"])) {
   text-decoration: none;
 }
-.wp-block-read-more:not([style*=text-decoration]):focus, .wp-block-read-more:not([style*=text-decoration]):active {
+.wp-block-read-more:where(:not([style*="text-decoration"])):focus, .wp-block-read-more:where(:not([style*="text-decoration"])):active {
   text-decoration: none;
 }