@wordpress/block-library 10.1.1-next.v.202607070741.0 → 10.3.0

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

@@ -43,21 +43,88 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
+/**
+ * Typography
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+*  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.
+ */
+/**
+ * Standard focus rings for the WordPress Design System.
+ *
+ * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
+ * e.g. `&:focus { @include outset-ring__focus(); }`.
+ */
+/**
+ * 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.
+ */
+/**
+ * Creates a checkerboard pattern background to indicate transparency.
+ * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
+ */
 .wp-block[data-align=center] > .wp-block-icon {
   display: flex;
   justify-content: center;
 }
 
-.wp-block-icon__inserter {
-  padding: 0 24px;
-  margin: 0 -24px;
+.wp-block-icon__inserter-sidebar {
+  padding-bottom: 24px;
+}
+@media (min-width: 782px) {
+  .wp-block-icon__inserter-sidebar {
+    overflow-x: visible;
+    overflow-y: auto;
+    position: absolute;
+    top: 72px;
+    right: 0;
+    bottom: 0;
+    width: 280px;
+    padding-top: 24px;
+    padding-inline: 24px;
+  }
+}
+
+@media (min-width: 782px) {
+  .wp-block-icon__inserter-panel {
+    margin-inline-start: 280px;
+  }
 }
 
-.wp-block-icon__inserter-header {
-  align-items: center;
+.wp-block-icon__inserter-loading {
   display: flex;
-  justify-content: space-between;
-  margin-bottom: 16px;
+  justify-content: center;
+  padding: 24px;
 }
 
 .wp-block-icon__inserter-grid-icons-list {
@@ -79,13 +146,16 @@
 .wp-block-icon__inserter-grid-icons-list-item-icon {
   padding: 12px;
 }
+.wp-block-icon__inserter-grid-icons-list-item-icon svg {
+  display: block;
+  width: 24px;
+  height: 24px;
+}
 
 .wp-block-icon__inserter-grid-icons-list-item-title {
   font-size: 12px;
   padding: 4px 4px 8px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: break-word;
 }
 
 .wp-block-icon__toolbar-content {

package/build-style/icon/editor.css

@@ -43,21 +43,88 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
+/**
+ * Typography
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+*  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.
+ */
+/**
+ * Standard focus rings for the WordPress Design System.
+ *
+ * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
+ * e.g. `&:focus { @include outset-ring__focus(); }`.
+ */
+/**
+ * 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.
+ */
+/**
+ * Creates a checkerboard pattern background to indicate transparency.
+ * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
+ */
 .wp-block[data-align=center] > .wp-block-icon {
   display: flex;
   justify-content: center;
 }
 
-.wp-block-icon__inserter {
-  padding: 0 24px;
-  margin: 0 -24px;
+.wp-block-icon__inserter-sidebar {
+  padding-bottom: 24px;
+}
+@media (min-width: 782px) {
+  .wp-block-icon__inserter-sidebar {
+    overflow-x: visible;
+    overflow-y: auto;
+    position: absolute;
+    top: 72px;
+    left: 0;
+    bottom: 0;
+    width: 280px;
+    padding-top: 24px;
+    padding-inline: 24px;
+  }
+}
+
+@media (min-width: 782px) {
+  .wp-block-icon__inserter-panel {
+    margin-inline-start: 280px;
+  }
 }
 
-.wp-block-icon__inserter-header {
-  align-items: center;
+.wp-block-icon__inserter-loading {
   display: flex;
-  justify-content: space-between;
-  margin-bottom: 16px;
+  justify-content: center;
+  padding: 24px;
 }
 
 .wp-block-icon__inserter-grid-icons-list {
@@ -79,13 +146,16 @@
 .wp-block-icon__inserter-grid-icons-list-item-icon {
   padding: 12px;
 }
+.wp-block-icon__inserter-grid-icons-list-item-icon svg {
+  display: block;
+  width: 24px;
+  height: 24px;
+}
 
 .wp-block-icon__inserter-grid-icons-list-item-title {
   font-size: 12px;
   padding: 4px 4px 8px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: break-word;
 }
 
 .wp-block-icon__toolbar-content {

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

@@ -104,11 +104,12 @@ figure.wp-block-image:not(.wp-block) {
 .wp-block-image {
   position: relative;
 }
-.wp-block-image.is-transient:not(.alignwide):not(.alignfull) {
+.wp-block-image.is-transient:not(.alignwide):not(.alignfull), .wp-block-image:has(img.is-swapping-media):not(.alignwide):not(.alignfull) {
   width: -moz-fit-content;
   width: fit-content;
 }
-.wp-block-image .is-applying img, .wp-block-image.is-transient img {
+.wp-block-image .is-applying img, .wp-block-image.is-transient img,
+.wp-block-image img.is-swapping-media {
   opacity: 0.3;
 }
 .wp-block-image figcaption img {
@@ -191,36 +192,6 @@ figure.wp-block-image:not(.wp-block) {
   position: relative;
 }
 
-.wp-block-image__crop-area {
-  position: relative;
-  max-width: 100%;
-  width: 100%;
-  overflow: hidden;
-}
-.wp-block-image__crop-area .reactEasyCrop_Container {
-  pointer-events: auto;
-}
-.wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image {
-  border: none;
-  border-radius: 0;
-}
-
-.wp-block-image__crop-icon {
-  padding: 0 8px;
-  min-width: 48px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.wp-block-image__crop-icon svg {
-  fill: currentColor;
-}
-
-.wp-block-image__zoom .components-popover__content {
-  min-width: 260px;
-  overflow: visible !important;
-}
-
 .wp-block-image__toolbar_content_textarea__container {
   padding: 8px;
 }

package/build-style/image/editor.css

@@ -104,11 +104,12 @@ figure.wp-block-image:not(.wp-block) {
 .wp-block-image {
   position: relative;
 }
-.wp-block-image.is-transient:not(.alignwide):not(.alignfull) {
+.wp-block-image.is-transient:not(.alignwide):not(.alignfull), .wp-block-image:has(img.is-swapping-media):not(.alignwide):not(.alignfull) {
   width: -moz-fit-content;
   width: fit-content;
 }
-.wp-block-image .is-applying img, .wp-block-image.is-transient img {
+.wp-block-image .is-applying img, .wp-block-image.is-transient img,
+.wp-block-image img.is-swapping-media {
   opacity: 0.3;
 }
 .wp-block-image figcaption img {
@@ -191,36 +192,6 @@ figure.wp-block-image:not(.wp-block) {
   position: relative;
 }
 
-.wp-block-image__crop-area {
-  position: relative;
-  max-width: 100%;
-  width: 100%;
-  overflow: hidden;
-}
-.wp-block-image__crop-area .reactEasyCrop_Container {
-  pointer-events: auto;
-}
-.wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image {
-  border: none;
-  border-radius: 0;
-}
-
-.wp-block-image__crop-icon {
-  padding: 0 8px;
-  min-width: 48px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.wp-block-image__crop-icon svg {
-  fill: currentColor;
-}
-
-.wp-block-image__zoom .components-popover__content {
-  min-width: 260px;
-  overflow: visible !important;
-}
-
 .wp-block-image__toolbar_content_textarea__container {
   padding: 8px;
 }

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

@@ -59,8 +59,8 @@
   position: relative;
   font-size: 13px;
   text-transform: uppercase;
-  font-weight: 600;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-weight: var(--wpds-typography-font-weight-emphasis, 600);
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   color: #757575;
   display: inline-flex;
   white-space: nowrap;

package/build-style/more/editor.css

@@ -59,8 +59,8 @@
   position: relative;
   font-size: 13px;
   text-transform: uppercase;
-  font-weight: 600;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-weight: var(--wpds-typography-font-weight-emphasis, 600);
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   color: #757575;
   display: inline-flex;
   white-space: nowrap;

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

@@ -276,7 +276,7 @@
   align-items: center;
   min-width: 96px;
   font-size: 13px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 }
 .wp-block-navigation.is-selected .wp-block-navigation-placeholder__preview {
   display: none;
@@ -370,7 +370,7 @@
 .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;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   gap: 6px;
   align-items: center;
 }
@@ -510,8 +510,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   grid-column: span 2;
 }
 .wp-block-navigation__overlay-menu-preview.open {
-  box-shadow: inset 0 0 0 1px #e0e0e0;
-  outline: 1px solid transparent;
+  border-color: #e0e0e0;
   background-color: #fff;
 }
 

package/build-style/navigation/editor.css

@@ -276,7 +276,7 @@
   align-items: center;
   min-width: 96px;
   font-size: 13px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 }
 .wp-block-navigation.is-selected .wp-block-navigation-placeholder__preview {
   display: none;
@@ -370,7 +370,7 @@
 .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;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   gap: 6px;
   align-items: center;
 }
@@ -510,8 +510,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   grid-column: span 2;
 }
 .wp-block-navigation__overlay-menu-preview.open {
-  box-shadow: inset 0 0 0 1px #e0e0e0;
-  outline: 1px solid transparent;
+  border-color: #e0e0e0;
   background-color: #fff;
 }
 

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

@@ -122,7 +122,7 @@
 .link-control-transform__subheading {
   font-size: 11px;
   text-transform: uppercase;
-  font-weight: 499;
+  font-weight: var(--wpds-typography-font-weight-emphasis, 600);
   color: #1e1e1e;
   margin-bottom: 1.5em;
 }

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

@@ -122,7 +122,7 @@
 .link-control-transform__subheading {
   font-size: 11px;
   text-transform: uppercase;
-  font-weight: 499;
+  font-weight: var(--wpds-typography-font-weight-emphasis, 600);
   color: #1e1e1e;
   margin-bottom: 1.5em;
 }

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

@@ -59,8 +59,8 @@
   font-size: 13px;
   position: relative;
   text-transform: uppercase;
-  font-weight: 600;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-weight: var(--wpds-typography-font-weight-emphasis, 600);
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   color: #757575;
   border-radius: 4px;
   background: #fff;

package/build-style/nextpage/editor.css

@@ -59,8 +59,8 @@
   font-size: 13px;
   position: relative;
   text-transform: uppercase;
-  font-weight: 600;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-weight: var(--wpds-typography-font-weight-emphasis, 600);
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   color: #757575;
   border-radius: 4px;
   background: #fff;

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

@@ -1,4 +1,5 @@
-.wp-block-playlist li.block-list-appender.block-list-appender {
-  position: initial;
-  margin-top: var(--wp--preset--spacing--30, 1em);
+.wp-block-playlist__waveform-color-controls {
+  display: grid;
+  grid-column: 1/-1;
+  row-gap: 0;
 }

package/build-style/playlist/editor.css

@@ -1,4 +1,5 @@
-.wp-block-playlist li.block-list-appender.block-list-appender {
-  position: initial;
-  margin-top: var(--wp--preset--spacing--30, 1em);
+.wp-block-playlist__waveform-color-controls {
+  display: grid;
+  grid-column: 1/-1;
+  row-gap: 0;
 }

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

@@ -6,6 +6,8 @@
   --wfp-button-color: rgba(255, 255, 255, .9);
   --wfp-text-color: #ffffff;
   --wfp-text-secondary-color: rgba(255, 255, 255, .6);
+  --wfp-btn-artwork-color: rgba(255, 255, 255, .9);
+  --wfp-btn-artwork-scrim: rgba(0, 0, 0, .5);
 }
 
 .waveform-player.waveform-theme-light {
@@ -35,7 +37,7 @@
   width: var(--wfp-btn-size, 36px);
   height: var(--wfp-btn-size, 36px);
   min-width: var(--wfp-btn-size, 36px);
-  border-radius: 50%;
+  border-radius: var(--wfp-btn-radius, 50%);
   border: 2px solid currentColor;
   background: transparent;
   color: var(--wfp-button-color, inherit);
@@ -93,6 +95,41 @@
   display: block;
 }
 
+.waveform-btn-has-artwork {
+  --wfp-btn-size: 64px;
+  --wfp-btn-radius: 8px;
+  position: relative;
+  overflow: hidden;
+  border: none;
+  color: var(--wfp-btn-artwork-color);
+}
+
+.waveform-btn > .waveform-btn-artwork {
+  display: block;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.waveform-btn-has-artwork:after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--wfp-btn-artwork-scrim);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.waveform-btn-has-artwork > :not(.waveform-btn-artwork) {
+  position: relative;
+  z-index: 2;
+}
+
 .waveform-icon-play svg {
   margin-right: 1px;
 }
@@ -417,9 +454,9 @@
 
 @media (max-width: 480px) {
   .waveform-btn {
-    width: 32px;
-    height: 32px;
-    min-width: 32px;
+    width: var(--wfp-btn-size, 32px);
+    height: var(--wfp-btn-size, 32px);
+    min-width: var(--wfp-btn-size, 32px);
   }
   .waveform-container {
     min-height: 50px;
@@ -438,16 +475,24 @@
     animation-iteration-count: 1 !important;
   }
 }
+.wp-block-playlist {
+  box-sizing: border-box;
+}
 .wp-block-playlist .wp-block-playlist__waveform-player {
   width: 100%;
   margin: var(--wp--preset--spacing--20, 0.625em) 0;
   position: relative;
 }
+.wp-block-playlist .wp-block-playlist__waveform-player:focus-visible {
+  outline: revert;
+  outline-offset: revert;
+}
 .wp-block-playlist .waveform-track {
   height: 100px;
   gap: 0;
 }
 .wp-block-playlist .waveform-btn {
+  border: none;
   border-radius: 0;
   border-end-start-radius: 0.125rem;
   border-start-start-radius: 0.125rem;
@@ -460,12 +505,43 @@
 .wp-block-playlist .waveform-btn:hover:not(:disabled) {
   transform: none;
 }
+.wp-block-playlist .waveform-btn svg {
+  width: 3rem;
+  height: 3rem;
+}
+.wp-block-playlist .waveform-btn .waveform-icon-pause svg {
+  width: 2.625rem;
+  height: 2.625rem;
+}
+.wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn {
+  background-image: var(--wp--playlist--play-button-artwork);
+  background-position: center;
+  background-size: cover;
+  color: #fff;
+}
+.wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn svg {
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
+}
+.wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn svg path {
+  fill: #fff !important;
+}
 .wp-block-playlist .waveform-track.waveform-align-bottom .waveform-btn {
   margin-bottom: 0;
 }
-.wp-block-playlist .waveform-subtitle {
+.wp-block-playlist .waveform-btn:focus-visible,
+.wp-block-playlist .waveform-container:focus-visible {
+  outline: revert;
+  outline-offset: revert;
+}
+.wp-block-playlist .waveform-artist {
   opacity: 0.7;
 }
+.wp-block-playlist .waveform-info,
+.wp-block-playlist .waveform-artist,
+.wp-block-playlist .waveform-title,
+.wp-block-playlist .waveform-time {
+  font-size: inherit;
+}
 .wp-block-playlist .wp-block-playlist__tracklist {
   margin: 0;
   padding-right: 0;