@wordpress/block-library 9.15.1 → 9.17.0

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

@@ -108,7 +108,7 @@
   vertical-align: bottom;
   box-sizing: border-box;
 }
-@media (prefers-reduced-motion: no-preference) {
+@media not (prefers-reduced-motion) {
   .wp-block-image img.hide {
     visibility: hidden;
   }
@@ -225,7 +225,11 @@
   text-align: center;
   padding: 0;
   border-radius: 4px;
-  transition: opacity 0.2s ease;
+}
+@media not (prefers-reduced-motion) {
+  .wp-lightbox-container button {
+    transition: opacity 0.2s ease;
+  }
 }
 .wp-lightbox-container button:focus-visible {
   outline: 3px auto rgba(90, 90, 90, 0.25);
@@ -319,18 +323,28 @@
 }
 .wp-lightbox-overlay.active {
   visibility: visible;
-  animation: both turn-on-visibility 0.25s;
 }
-.wp-lightbox-overlay.active img {
-  animation: both turn-on-visibility 0.35s;
+@media not (prefers-reduced-motion) {
+  .wp-lightbox-overlay.active {
+    animation: both turn-on-visibility 0.25s;
+  }
 }
-.wp-lightbox-overlay.show-closing-animation:not(.active) {
-  animation: both turn-off-visibility 0.35s;
+@media not (prefers-reduced-motion) {
+  .wp-lightbox-overlay.active img {
+    animation: both turn-on-visibility 0.35s;
+  }
 }
-.wp-lightbox-overlay.show-closing-animation:not(.active) img {
-  animation: both turn-off-visibility 0.25s;
+@media not (prefers-reduced-motion) {
+  .wp-lightbox-overlay.show-closing-animation:not(.active) {
+    animation: both turn-off-visibility 0.35s;
+  }
+}
+@media not (prefers-reduced-motion) {
+  .wp-lightbox-overlay.show-closing-animation:not(.active) img {
+    animation: both turn-off-visibility 0.25s;
+  }
 }
-@media (prefers-reduced-motion: no-preference) {
+@media not (prefers-reduced-motion) {
   .wp-lightbox-overlay.zoom.active {
     opacity: 1;
     visibility: visible;

package/build-style/image/style.css

@@ -108,7 +108,7 @@
   vertical-align: bottom;
   box-sizing: border-box;
 }
-@media (prefers-reduced-motion: no-preference) {
+@media not (prefers-reduced-motion) {
   .wp-block-image img.hide {
     visibility: hidden;
   }
@@ -231,7 +231,11 @@
   text-align: center;
   padding: 0;
   border-radius: 4px;
-  transition: opacity 0.2s ease;
+}
+@media not (prefers-reduced-motion) {
+  .wp-lightbox-container button {
+    transition: opacity 0.2s ease;
+  }
 }
 .wp-lightbox-container button:focus-visible {
   outline: 3px auto rgba(90, 90, 90, 0.25);
@@ -325,18 +329,28 @@
 }
 .wp-lightbox-overlay.active {
   visibility: visible;
-  animation: both turn-on-visibility 0.25s;
 }
-.wp-lightbox-overlay.active img {
-  animation: both turn-on-visibility 0.35s;
+@media not (prefers-reduced-motion) {
+  .wp-lightbox-overlay.active {
+    animation: both turn-on-visibility 0.25s;
+  }
 }
-.wp-lightbox-overlay.show-closing-animation:not(.active) {
-  animation: both turn-off-visibility 0.35s;
+@media not (prefers-reduced-motion) {
+  .wp-lightbox-overlay.active img {
+    animation: both turn-on-visibility 0.35s;
+  }
 }
-.wp-lightbox-overlay.show-closing-animation:not(.active) img {
-  animation: both turn-off-visibility 0.25s;
+@media not (prefers-reduced-motion) {
+  .wp-lightbox-overlay.show-closing-animation:not(.active) {
+    animation: both turn-off-visibility 0.35s;
+  }
+}
+@media not (prefers-reduced-motion) {
+  .wp-lightbox-overlay.show-closing-animation:not(.active) img {
+    animation: both turn-off-visibility 0.25s;
+  }
 }
-@media (prefers-reduced-motion: no-preference) {
+@media not (prefers-reduced-motion) {
   .wp-lightbox-overlay.zoom.active {
     opacity: 1;
     visibility: visible;

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

@@ -203,7 +203,6 @@
   flex-direction: column;
   align-items: normal;
   opacity: 0;
-  transition: opacity 0.1s linear;
   visibility: hidden;
   width: 0;
   height: 0;
@@ -211,6 +210,11 @@
   right: -1px;
   top: 100%;
 }
+@media not (prefers-reduced-motion) {
+  .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
+    transition: opacity 0.1s linear;
+  }
+}
 .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
   display: flex;
   flex-grow: 1;
@@ -443,8 +447,6 @@ button.wp-block-navigation-item__content {
   display: flex;
   flex-direction: column;
   background-color: inherit;
-  animation: overlay-menu__fade-in-animation 0.1s ease-out;
-  animation-fill-mode: forwards;
   padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
   padding-left: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
   padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);
@@ -452,10 +454,10 @@ button.wp-block-navigation-item__content {
   overflow: auto;
   z-index: 100000;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .wp-block-navigation__responsive-container.is-menu-open {
-    animation-duration: 1ms;
-    animation-delay: 0s;
+    animation: overlay-menu__fade-in-animation 0.1s ease-out;
+    animation-fill-mode: forwards;
   }
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {

package/build-style/navigation/style.css

@@ -203,7 +203,6 @@
   flex-direction: column;
   align-items: normal;
   opacity: 0;
-  transition: opacity 0.1s linear;
   visibility: hidden;
   width: 0;
   height: 0;
@@ -211,6 +210,11 @@
   left: -1px;
   top: 100%;
 }
+@media not (prefers-reduced-motion) {
+  .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
+    transition: opacity 0.1s linear;
+  }
+}
 .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
   display: flex;
   flex-grow: 1;
@@ -443,8 +447,6 @@ button.wp-block-navigation-item__content {
   display: flex;
   flex-direction: column;
   background-color: inherit;
-  animation: overlay-menu__fade-in-animation 0.1s ease-out;
-  animation-fill-mode: forwards;
   padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
   padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
   padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);
@@ -452,10 +454,10 @@ button.wp-block-navigation-item__content {
   overflow: auto;
   z-index: 100000;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .wp-block-navigation__responsive-container.is-menu-open {
-    animation-duration: 1ms;
-    animation-delay: 0s;
+    animation: overlay-menu__fade-in-animation 0.1s ease-out;
+    animation-fill-mode: forwards;
   }
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {

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

@@ -163,6 +163,9 @@
   background-repeat: repeat-x;
   padding-bottom: 0.1em;
 }
+.wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text.is-invalid span, .wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text.is-draft span {
+  --wp-underline-color: var(--wp--preset--color--vivid-red);
+}
 .wp-block-navigation-link__placeholder.wp-block-navigation-item__content {
   cursor: pointer;
 }

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

@@ -163,6 +163,9 @@
   background-repeat: repeat-x;
   padding-bottom: 0.1em;
 }
+.wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text.is-invalid span, .wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text.is-draft span {
+  --wp-underline-color: var(--wp--preset--color--vivid-red);
+}
 .wp-block-navigation-link__placeholder.wp-block-navigation-item__content {
   cursor: pointer;
 }

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

@@ -113,4 +113,8 @@
 .block-editor-block-list__block[data-type="core/paragraph"].has-text-align-right[style*="writing-mode: vertical-rl"],
 .block-editor-block-list__block[data-type="core/paragraph"].has-text-align-left[style*="writing-mode: vertical-lr"] {
   rotate: 180deg;
+}
+
+.is-zoomed-out .block-editor-block-list__block[data-empty=true] [data-rich-text-placeholder] {
+  opacity: 0;
 }

package/build-style/paragraph/editor.css

@@ -113,4 +113,8 @@
 .block-editor-block-list__block[data-type="core/paragraph"].has-text-align-right[style*="writing-mode: vertical-rl"],
 .block-editor-block-list__block[data-type="core/paragraph"].has-text-align-left[style*="writing-mode: vertical-lr"] {
   rotate: 180deg;
+}
+
+.is-zoomed-out .block-editor-block-list__block[data-empty=true] [data-rich-text-placeholder] {
+  opacity: 0;
 }

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

@@ -192,7 +192,7 @@
   width: 100%;
 }
 .wp-block-post-featured-image > a {
-  cursor: default;
+  pointer-events: none;
 }
 .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,

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

@@ -192,7 +192,7 @@
   width: 100%;
 }
 .wp-block-post-featured-image > a {
-  cursor: default;
+  pointer-events: none;
 }
 .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,

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

@@ -98,25 +98,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.block-library-query-toolbar__popover .components-popover__content {
-  min-width: 230px;
-}
-.block-library-query-toolbar__popover .components-popover__content .block-library-query-toolbar__popover-number-control {
-  margin-bottom: 8px;
-}
-
-.block-library-query__pattern-selection-content .block-editor-block-patterns-list {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  grid-gap: 8px;
-}
-.block-library-query__pattern-selection-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
-  margin-bottom: 0;
-}
-.block-library-query__pattern-selection-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__container {
-  max-height: 250px;
-}
-
 .block-library-query-pattern__selection-modal .block-editor-block-patterns-list {
   column-count: 2;
   column-gap: 24px;
@@ -139,20 +120,12 @@
   z-index: 2;
 }
 
-.block-library-query-toolspanel__design .block-library-query-pattern__selection-content {
-  margin-top: 8px;
-}
-
 @media (min-width: 600px) {
   .wp-block-query__enhanced-pagination-modal {
     max-width: 480px;
   }
 }
 
-.wp-block-query__enhanced-pagination-notice {
-  margin: 0;
-}
-
 .block-editor-block-settings-menu__popover.is-expanded {
   overflow-y: scroll;
 }

package/build-style/query/editor.css

@@ -98,25 +98,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.block-library-query-toolbar__popover .components-popover__content {
-  min-width: 230px;
-}
-.block-library-query-toolbar__popover .components-popover__content .block-library-query-toolbar__popover-number-control {
-  margin-bottom: 8px;
-}
-
-.block-library-query__pattern-selection-content .block-editor-block-patterns-list {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  grid-gap: 8px;
-}
-.block-library-query__pattern-selection-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
-  margin-bottom: 0;
-}
-.block-library-query__pattern-selection-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__container {
-  max-height: 250px;
-}
-
 .block-library-query-pattern__selection-modal .block-editor-block-patterns-list {
   column-count: 2;
   column-gap: 24px;
@@ -139,20 +120,12 @@
   z-index: 2;
 }
 
-.block-library-query-toolspanel__design .block-library-query-pattern__selection-content {
-  margin-top: 8px;
-}
-
 @media (min-width: 600px) {
   .wp-block-query__enhanced-pagination-modal {
     max-width: 480px;
   }
 }
 
-.wp-block-query__enhanced-pagination-notice {
-  margin: 0;
-}
-
 .block-editor-block-settings-menu__popover.is-expanded {
   overflow-y: scroll;
 }

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

@@ -177,14 +177,12 @@
   color: inherit;
 }
 
-.block-library-site-logo__inspector-upload-container {
+.block-library-site-logo__inspector-media-replace-container {
   position: relative;
 }
-.block-library-site-logo__inspector-upload-container .components-drop-zone__content-icon {
+.block-library-site-logo__inspector-media-replace-container .components-drop-zone__content-icon {
   display: none;
 }
-
-.block-library-site-logo__inspector-upload-container button.components-button,
 .block-library-site-logo__inspector-media-replace-container button.components-button {
   color: #1e1e1e;
   box-shadow: inset 0 0 0 1px #ccc;
@@ -192,22 +190,18 @@
   display: block;
   height: 40px;
 }
-.block-library-site-logo__inspector-upload-container button.components-button:hover,
 .block-library-site-logo__inspector-media-replace-container button.components-button:hover {
   color: var(--wp-admin-theme-color);
 }
-.block-library-site-logo__inspector-upload-container button.components-button:focus,
 .block-library-site-logo__inspector-media-replace-container button.components-button:focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
-.block-library-site-logo__inspector-upload-container .block-library-site-logo__inspector-media-replace-title,
 .block-library-site-logo__inspector-media-replace-container .block-library-site-logo__inspector-media-replace-title {
   word-break: break-all;
   white-space: normal;
   text-align: start;
   text-align-last: center;
 }
-
 .block-library-site-logo__inspector-media-replace-container .components-dropdown {
   display: block;
 }

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

@@ -177,14 +177,12 @@
   color: inherit;
 }
 
-.block-library-site-logo__inspector-upload-container {
+.block-library-site-logo__inspector-media-replace-container {
   position: relative;
 }
-.block-library-site-logo__inspector-upload-container .components-drop-zone__content-icon {
+.block-library-site-logo__inspector-media-replace-container .components-drop-zone__content-icon {
   display: none;
 }
-
-.block-library-site-logo__inspector-upload-container button.components-button,
 .block-library-site-logo__inspector-media-replace-container button.components-button {
   color: #1e1e1e;
   box-shadow: inset 0 0 0 1px #ccc;
@@ -192,22 +190,18 @@
   display: block;
   height: 40px;
 }
-.block-library-site-logo__inspector-upload-container button.components-button:hover,
 .block-library-site-logo__inspector-media-replace-container button.components-button:hover {
   color: var(--wp-admin-theme-color);
 }
-.block-library-site-logo__inspector-upload-container button.components-button:focus,
 .block-library-site-logo__inspector-media-replace-container button.components-button:focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
-.block-library-site-logo__inspector-upload-container .block-library-site-logo__inspector-media-replace-title,
 .block-library-site-logo__inspector-media-replace-container .block-library-site-logo__inspector-media-replace-title {
   word-break: break-all;
   white-space: normal;
   text-align: start;
   text-align-last: center;
 }
-
 .block-library-site-logo__inspector-media-replace-container .components-dropdown {
   display: block;
 }

package/build-style/social-links/style-rtl.css

@@ -144,20 +144,17 @@
 .wp-block-social-link {
   display: block;
   border-radius: 9999px;
-  transition: transform 0.1s ease;
   height: auto;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .wp-block-social-link {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: transform 0.1s ease;
   }
 }
 .wp-block-social-link a {
   align-items: center;
   display: flex;
   line-height: 0;
-  transition: transform 0.1s ease;
 }
 .wp-block-social-link:hover {
   transform: scale(1.1);

package/build-style/social-links/style.css

@@ -144,20 +144,17 @@
 .wp-block-social-link {
   display: block;
   border-radius: 9999px;
-  transition: transform 0.1s ease;
   height: auto;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .wp-block-social-link {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: transform 0.1s ease;
   }
 }
 .wp-block-social-link a {
   align-items: center;
   display: flex;
   line-height: 0;
-  transition: transform 0.1s ease;
 }
 .wp-block-social-link:hover {
   transform: scale(1.1);

package/build-style/style-rtl.css

@@ -1607,7 +1607,7 @@ h6.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]) {
   vertical-align: bottom;
   box-sizing: border-box;
 }
-@media (prefers-reduced-motion: no-preference) {
+@media not (prefers-reduced-motion) {
   .wp-block-image img.hide {
     visibility: hidden;
   }
@@ -1724,7 +1724,11 @@ h6.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]) {
   text-align: center;
   padding: 0;
   border-radius: 4px;
-  transition: opacity 0.2s ease;
+}
+@media not (prefers-reduced-motion) {
+  .wp-lightbox-container button {
+    transition: opacity 0.2s ease;
+  }
 }
 .wp-lightbox-container button:focus-visible {
   outline: 3px auto rgba(90, 90, 90, 0.25);
@@ -1818,18 +1822,28 @@ h6.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]) {
 }
 .wp-lightbox-overlay.active {
   visibility: visible;
-  animation: both turn-on-visibility 0.25s;
 }
-.wp-lightbox-overlay.active img {
-  animation: both turn-on-visibility 0.35s;
+@media not (prefers-reduced-motion) {
+  .wp-lightbox-overlay.active {
+    animation: both turn-on-visibility 0.25s;
+  }
 }
-.wp-lightbox-overlay.show-closing-animation:not(.active) {
-  animation: both turn-off-visibility 0.35s;
+@media not (prefers-reduced-motion) {
+  .wp-lightbox-overlay.active img {
+    animation: both turn-on-visibility 0.35s;
+  }
 }
-.wp-lightbox-overlay.show-closing-animation:not(.active) img {
-  animation: both turn-off-visibility 0.25s;
+@media not (prefers-reduced-motion) {
+  .wp-lightbox-overlay.show-closing-animation:not(.active) {
+    animation: both turn-off-visibility 0.35s;
+  }
 }
-@media (prefers-reduced-motion: no-preference) {
+@media not (prefers-reduced-motion) {
+  .wp-lightbox-overlay.show-closing-animation:not(.active) img {
+    animation: both turn-off-visibility 0.25s;
+  }
+}
+@media not (prefers-reduced-motion) {
   .wp-lightbox-overlay.zoom.active {
     opacity: 1;
     visibility: visible;
@@ -2313,7 +2327,6 @@ ul {
   flex-direction: column;
   align-items: normal;
   opacity: 0;
-  transition: opacity 0.1s linear;
   visibility: hidden;
   width: 0;
   height: 0;
@@ -2321,6 +2334,11 @@ ul {
   right: -1px;
   top: 100%;
 }
+@media not (prefers-reduced-motion) {
+  .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
+    transition: opacity 0.1s linear;
+  }
+}
 .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
   display: flex;
   flex-grow: 1;
@@ -2553,8 +2571,6 @@ button.wp-block-navigation-item__content {
   display: flex;
   flex-direction: column;
   background-color: inherit;
-  animation: overlay-menu__fade-in-animation 0.1s ease-out;
-  animation-fill-mode: forwards;
   padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
   padding-left: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
   padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);
@@ -2562,10 +2578,10 @@ button.wp-block-navigation-item__content {
   overflow: auto;
   z-index: 100000;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .wp-block-navigation__responsive-container.is-menu-open {
-    animation-duration: 1ms;
-    animation-delay: 0s;
+    animation: overlay-menu__fade-in-animation 0.1s ease-out;
+    animation-fill-mode: forwards;
   }
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
@@ -3540,20 +3556,17 @@ ul.wp-block-rss.is-grid li {
 .wp-block-social-link {
   display: block;
   border-radius: 9999px;
-  transition: transform 0.1s ease;
   height: auto;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .wp-block-social-link {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: transform 0.1s ease;
   }
 }
 .wp-block-social-link a {
   align-items: center;
   display: flex;
   line-height: 0;
-  transition: transform 0.1s ease;
 }
 .wp-block-social-link:hover {
   transform: scale(1.1);