@wordpress/block-library 8.12.0 → 8.12.2

package/build-style/editor-rtl.css

@@ -1901,23 +1901,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   right: 0;
 }
 
-@media (min-width: 600px) {
-  .wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-container,
-.wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-close {
-    pointer-events: none;
-  }
-  .wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close,
-.wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-container .block-editor-block-list__layout *,
-.wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-close,
-.wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-close .block-editor-block-list__layout * {
-    pointer-events: all;
-  }
-}
-.wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-container .wp-block-pages-list__item__link,
-.wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-close .wp-block-pages-list__item__link {
-  pointer-events: none;
-}
-
 .components-button.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open,
 .components-button.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
   padding: 0;

package/build-style/editor.css

@@ -1909,23 +1909,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   left: 0;
 }
 
-@media (min-width: 600px) {
-  .wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-container,
-.wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-close {
-    pointer-events: none;
-  }
-  .wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close,
-.wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-container .block-editor-block-list__layout *,
-.wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-close,
-.wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-close .block-editor-block-list__layout * {
-    pointer-events: all;
-  }
-}
-.wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-container .wp-block-pages-list__item__link,
-.wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-close .wp-block-pages-list__item__link {
-  pointer-events: none;
-}
-
 .components-button.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open,
 .components-button.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
   padding: 0;

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

@@ -0,0 +1,106 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Colors
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Shadows.
+ */
+/**
+ * Editor widths.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
+.editor-styles-wrapper,
+.entry-content {
+  counter-reset: footnotes;
+}
+
+.fn {
+  vertical-align: super;
+  font-size: smaller;
+  counter-increment: footnotes;
+  display: inline-block;
+  text-indent: -9999999px;
+}
+
+.fn::after {
+  content: "[" counter(footnotes) "]";
+  text-indent: 0;
+  float: right;
+}

package/build-style/footnotes/style.css

@@ -0,0 +1,106 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Colors
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Shadows.
+ */
+/**
+ * Editor widths.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
+.editor-styles-wrapper,
+.entry-content {
+  counter-reset: footnotes;
+}
+
+.fn {
+  vertical-align: super;
+  font-size: smaller;
+  counter-increment: footnotes;
+  display: inline-block;
+  text-indent: -9999999px;
+}
+
+.fn::after {
+  content: "[" counter(footnotes) "]";
+  text-indent: 0;
+  float: left;
+}

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

@@ -245,7 +245,6 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  padding: 30px;
 }
 .wp-lightbox-overlay .wp-block-image figcaption {
   display: none;
@@ -267,18 +266,54 @@
   background-color: white;
   opacity: 0.9;
 }
-.wp-lightbox-overlay.initialized {
-  animation: both turn-off-visibility 300ms;
+.wp-lightbox-overlay.fade.active {
+  visibility: visible;
+  animation: both turn-on-visibility 0.25s;
+}
+.wp-lightbox-overlay.fade.active img {
+  animation: both turn-on-visibility 0.3s;
+}
+.wp-lightbox-overlay.fade.hideanimationenabled:not(.active) {
+  animation: both turn-off-visibility 0.3s;
+}
+.wp-lightbox-overlay.fade.hideanimationenabled:not(.active) img {
+  animation: both turn-off-visibility 0.25s;
 }
-.wp-lightbox-overlay.initialized img {
-  animation: both turn-off-visibility 250ms;
+.wp-lightbox-overlay.zoom img {
+  position: absolute;
+  transform-origin: top right;
+  width: var(--lightbox-image-max-width);
+  height: var(--lightbox-image-max-height);
 }
-.wp-lightbox-overlay.initialized.active {
+.wp-lightbox-overlay.zoom.active {
+  opacity: 1;
   visibility: visible;
-  animation: both turn-on-visibility 250ms;
 }
-.wp-lightbox-overlay.initialized.active img {
-  animation: both turn-on-visibility 300ms;
+.wp-lightbox-overlay.zoom.active .wp-block-image img {
+  animation: lightbox-zoom-in 0.4s forwards;
+}
+@media (prefers-reduced-motion) {
+  .wp-lightbox-overlay.zoom.active .wp-block-image img {
+    animation: both turn-on-visibility 0.4s;
+  }
+}
+.wp-lightbox-overlay.zoom.active .scrim {
+  animation: turn-on-visibility 0.4s forwards;
+}
+.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .wp-block-image img {
+  animation: lightbox-zoom-out 0.4s forwards;
+}
+@media (prefers-reduced-motion) {
+  .wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .wp-block-image img {
+    animation: both turn-off-visibility 0.4s;
+  }
+}
+.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .scrim {
+  animation: turn-off-visibility 0.4s forwards;
+}
+
+html.has-lightbox-open {
+  overflow: hidden;
 }
 
 @keyframes turn-on-visibility {
@@ -303,6 +338,31 @@
     visibility: hidden;
   }
 }
-html.has-lightbox-open {
-  overflow: hidden;
+@keyframes lightbox-zoom-in {
+  0% {
+    right: var(--lightbox-initial-left-position);
+    top: var(--lightbox-initial-top-position);
+    transform: scale(var(--lightbox-scale-width), var(--lightbox-scale-height));
+  }
+  100% {
+    right: var(--lightbox-target-left-position);
+    top: var(--lightbox-target-top-position);
+    transform: scale(1, 1);
+  }
+}
+@keyframes lightbox-zoom-out {
+  0% {
+    visibility: visible;
+    right: var(--lightbox-target-left-position);
+    top: var(--lightbox-target-top-position);
+    transform: scale(1, 1);
+  }
+  99% {
+    visibility: visible;
+  }
+  100% {
+    right: var(--lightbox-initial-left-position);
+    top: var(--lightbox-initial-top-position);
+    transform: scale(var(--lightbox-scale-width), var(--lightbox-scale-height));
+  }
 }

package/build-style/image/style.css

@@ -251,7 +251,6 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  padding: 30px;
 }
 .wp-lightbox-overlay .wp-block-image figcaption {
   display: none;
@@ -273,18 +272,54 @@
   background-color: white;
   opacity: 0.9;
 }
-.wp-lightbox-overlay.initialized {
-  animation: both turn-off-visibility 300ms;
+.wp-lightbox-overlay.fade.active {
+  visibility: visible;
+  animation: both turn-on-visibility 0.25s;
+}
+.wp-lightbox-overlay.fade.active img {
+  animation: both turn-on-visibility 0.3s;
+}
+.wp-lightbox-overlay.fade.hideanimationenabled:not(.active) {
+  animation: both turn-off-visibility 0.3s;
+}
+.wp-lightbox-overlay.fade.hideanimationenabled:not(.active) img {
+  animation: both turn-off-visibility 0.25s;
 }
-.wp-lightbox-overlay.initialized img {
-  animation: both turn-off-visibility 250ms;
+.wp-lightbox-overlay.zoom img {
+  position: absolute;
+  transform-origin: top left;
+  width: var(--lightbox-image-max-width);
+  height: var(--lightbox-image-max-height);
 }
-.wp-lightbox-overlay.initialized.active {
+.wp-lightbox-overlay.zoom.active {
+  opacity: 1;
   visibility: visible;
-  animation: both turn-on-visibility 250ms;
 }
-.wp-lightbox-overlay.initialized.active img {
-  animation: both turn-on-visibility 300ms;
+.wp-lightbox-overlay.zoom.active .wp-block-image img {
+  animation: lightbox-zoom-in 0.4s forwards;
+}
+@media (prefers-reduced-motion) {
+  .wp-lightbox-overlay.zoom.active .wp-block-image img {
+    animation: both turn-on-visibility 0.4s;
+  }
+}
+.wp-lightbox-overlay.zoom.active .scrim {
+  animation: turn-on-visibility 0.4s forwards;
+}
+.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .wp-block-image img {
+  animation: lightbox-zoom-out 0.4s forwards;
+}
+@media (prefers-reduced-motion) {
+  .wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .wp-block-image img {
+    animation: both turn-off-visibility 0.4s;
+  }
+}
+.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .scrim {
+  animation: turn-off-visibility 0.4s forwards;
+}
+
+html.has-lightbox-open {
+  overflow: hidden;
 }
 
 @keyframes turn-on-visibility {
@@ -309,6 +344,31 @@
     visibility: hidden;
   }
 }
-html.has-lightbox-open {
-  overflow: hidden;
+@keyframes lightbox-zoom-in {
+  0% {
+    left: var(--lightbox-initial-left-position);
+    top: var(--lightbox-initial-top-position);
+    transform: scale(var(--lightbox-scale-width), var(--lightbox-scale-height));
+  }
+  100% {
+    left: var(--lightbox-target-left-position);
+    top: var(--lightbox-target-top-position);
+    transform: scale(1, 1);
+  }
+}
+@keyframes lightbox-zoom-out {
+  0% {
+    visibility: visible;
+    left: var(--lightbox-target-left-position);
+    top: var(--lightbox-target-top-position);
+    transform: scale(1, 1);
+  }
+  99% {
+    visibility: visible;
+  }
+  100% {
+    left: var(--lightbox-initial-left-position);
+    top: var(--lightbox-initial-top-position);
+    transform: scale(var(--lightbox-scale-width), var(--lightbox-scale-height));
+  }
 }

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

@@ -458,23 +458,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   right: 0;
 }
 
-@media (min-width: 600px) {
-  .wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-container,
-.wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-close {
-    pointer-events: none;
-  }
-  .wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close,
-.wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-container .block-editor-block-list__layout *,
-.wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-close,
-.wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-close .block-editor-block-list__layout * {
-    pointer-events: all;
-  }
-}
-.wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-container .wp-block-pages-list__item__link,
-.wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-close .wp-block-pages-list__item__link {
-  pointer-events: none;
-}
-
 .components-button.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open,
 .components-button.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
   padding: 0;

package/build-style/navigation/editor.css

@@ -458,23 +458,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   left: 0;
 }
 
-@media (min-width: 600px) {
-  .wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-container,
-.wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-close {
-    pointer-events: none;
-  }
-  .wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close,
-.wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-container .block-editor-block-list__layout *,
-.wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-close,
-.wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-close .block-editor-block-list__layout * {
-    pointer-events: all;
-  }
-}
-.wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-container .wp-block-pages-list__item__link,
-.wp-block-navigation:not(.is-editing-disabled) .wp-block-navigation__responsive-close .wp-block-pages-list__item__link {
-  pointer-events: none;
-}
-
 .components-button.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open,
 .components-button.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
   padding: 0;

package/build-style/style-rtl.css

@@ -97,6 +97,7 @@
 
 .wp-block-avatar {
   box-sizing: border-box;
+  line-height: 0;
 }
 .wp-block-avatar img {
   box-sizing: border-box;
@@ -1633,7 +1634,6 @@ h6.has-background {
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  padding: 30px;
 }
 .wp-lightbox-overlay .wp-block-image figcaption {
   display: none;
@@ -1655,18 +1655,54 @@ h6.has-background {
   background-color: white;
   opacity: 0.9;
 }
-.wp-lightbox-overlay.initialized {
-  animation: both turn-off-visibility 300ms;
+.wp-lightbox-overlay.fade.active {
+  visibility: visible;
+  animation: both turn-on-visibility 0.25s;
+}
+.wp-lightbox-overlay.fade.active img {
+  animation: both turn-on-visibility 0.3s;
 }
-.wp-lightbox-overlay.initialized img {
-  animation: both turn-off-visibility 250ms;
+.wp-lightbox-overlay.fade.hideanimationenabled:not(.active) {
+  animation: both turn-off-visibility 0.3s;
+}
+.wp-lightbox-overlay.fade.hideanimationenabled:not(.active) img {
+  animation: both turn-off-visibility 0.25s;
+}
+.wp-lightbox-overlay.zoom img {
+  position: absolute;
+  transform-origin: top right;
+  width: var(--lightbox-image-max-width);
+  height: var(--lightbox-image-max-height);
 }
-.wp-lightbox-overlay.initialized.active {
+.wp-lightbox-overlay.zoom.active {
+  opacity: 1;
   visibility: visible;
-  animation: both turn-on-visibility 250ms;
 }
-.wp-lightbox-overlay.initialized.active img {
-  animation: both turn-on-visibility 300ms;
+.wp-lightbox-overlay.zoom.active .wp-block-image img {
+  animation: lightbox-zoom-in 0.4s forwards;
+}
+@media (prefers-reduced-motion) {
+  .wp-lightbox-overlay.zoom.active .wp-block-image img {
+    animation: both turn-on-visibility 0.4s;
+  }
+}
+.wp-lightbox-overlay.zoom.active .scrim {
+  animation: turn-on-visibility 0.4s forwards;
+}
+.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .wp-block-image img {
+  animation: lightbox-zoom-out 0.4s forwards;
+}
+@media (prefers-reduced-motion) {
+  .wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .wp-block-image img {
+    animation: both turn-off-visibility 0.4s;
+  }
+}
+.wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .scrim {
+  animation: turn-off-visibility 0.4s forwards;
+}
+
+html.has-lightbox-open {
+  overflow: hidden;
 }
 
 @keyframes turn-on-visibility {
@@ -1691,10 +1727,34 @@ h6.has-background {
     visibility: hidden;
   }
 }
-html.has-lightbox-open {
-  overflow: hidden;
+@keyframes lightbox-zoom-in {
+  0% {
+    right: var(--lightbox-initial-left-position);
+    top: var(--lightbox-initial-top-position);
+    transform: scale(var(--lightbox-scale-width), var(--lightbox-scale-height));
+  }
+  100% {
+    right: var(--lightbox-target-left-position);
+    top: var(--lightbox-target-top-position);
+    transform: scale(1, 1);
+  }
+}
+@keyframes lightbox-zoom-out {
+  0% {
+    visibility: visible;
+    right: var(--lightbox-target-left-position);
+    top: var(--lightbox-target-top-position);
+    transform: scale(1, 1);
+  }
+  99% {
+    visibility: visible;
+  }
+  100% {
+    right: var(--lightbox-initial-left-position);
+    top: var(--lightbox-initial-top-position);
+    transform: scale(var(--lightbox-scale-width), var(--lightbox-scale-height));
+  }
 }
-
 ol.wp-block-latest-comments {
   margin-right: 0;
   box-sizing: border-box;
@@ -3733,6 +3793,25 @@ pre.wp-block-verse {
   margin-bottom: 1em;
 }
 
+.editor-styles-wrapper,
+.entry-content {
+  counter-reset: footnotes;
+}
+
+.fn {
+  vertical-align: super;
+  font-size: smaller;
+  counter-increment: footnotes;
+  display: inline-block;
+  text-indent: -9999999px;
+}
+
+.fn::after {
+  content: "[" counter(footnotes) "]";
+  text-indent: 0;
+  float: right;
+}
+
 /**
  * Element styles.
  */