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

package/build-style/playlist/style.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-left: 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-left: 0;

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

@@ -28,6 +28,16 @@
   font-size: 0.85em;
   opacity: 0.7;
 }
+.wp-block-playlist-track .wp-block-playlist-track__button .wp-block-playlist-track__image {
+  flex: 0 0 50px;
+  width: 50px;
+  height: 50px;
+  margin-left: var(--wp--preset--spacing--20, 0.5em);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-sizing: border-box;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
 .wp-block-playlist-track .wp-block-playlist-track__button .wp-block-playlist-track__content {
   flex: 1 1 0;
   min-width: 0;

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

@@ -28,6 +28,16 @@
   font-size: 0.85em;
   opacity: 0.7;
 }
+.wp-block-playlist-track .wp-block-playlist-track__button .wp-block-playlist-track__image {
+  flex: 0 0 50px;
+  width: 50px;
+  height: 50px;
+  margin-right: var(--wp--preset--spacing--20, 0.5em);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-sizing: border-box;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
 .wp-block-playlist-track .wp-block-playlist-track__button .wp-block-playlist-track__content {
   flex: 1 1 0;
   min-width: 0;

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

@@ -8,4 +8,8 @@
 
 .wp-block-pullquote__citation {
   color: inherit;
+}
+
+.wp-block-pullquote[style*=line-height] :where(p) {
+  line-height: inherit;
 }

package/build-style/pullquote/editor.css

@@ -8,4 +8,8 @@
 
 .wp-block-pullquote__citation {
   color: inherit;
+}
+
+.wp-block-pullquote[style*=line-height] :where(p) {
+  line-height: inherit;
 }

package/build-style/style-rtl.css

@@ -3207,6 +3207,8 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   --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 {
@@ -3236,7 +3238,7 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   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);
@@ -3294,6 +3296,41 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   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;
 }
@@ -3618,9 +3655,9 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
 
 @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;
@@ -3639,16 +3676,24 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
     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;
@@ -3661,12 +3706,43 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
 .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;
@@ -3715,6 +3791,16 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   font-size: 0.85em;
   opacity: 0.7;
 }
+.wp-block-playlist-track .wp-block-playlist-track__button .wp-block-playlist-track__image {
+  flex: 0 0 50px;
+  width: 50px;
+  height: 50px;
+  margin-left: var(--wp--preset--spacing--20, 0.5em);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-sizing: border-box;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
 .wp-block-playlist-track .wp-block-playlist-track__button .wp-block-playlist-track__content {
   flex: 1 1 0;
   min-width: 0;

package/build-style/style.css

@@ -3237,6 +3237,8 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   --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 {
@@ -3266,7 +3268,7 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   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);
@@ -3324,6 +3326,41 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   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-left: 1px;
 }
@@ -3648,9 +3685,9 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
 
 @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;
@@ -3669,16 +3706,24 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
     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;
@@ -3691,12 +3736,43 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
 .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-left: 0;
@@ -3745,6 +3821,16 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   font-size: 0.85em;
   opacity: 0.7;
 }
+.wp-block-playlist-track .wp-block-playlist-track__button .wp-block-playlist-track__image {
+  flex: 0 0 50px;
+  width: 50px;
+  height: 50px;
+  margin-right: var(--wp--preset--spacing--20, 0.5em);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-sizing: border-box;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
 .wp-block-playlist-track .wp-block-playlist-track__button .wp-block-playlist-track__content {
   flex: 1 1 0;
   min-width: 0;

package/build-style/tab-list/editor-rtl.css

@@ -0,0 +1,101 @@
+/**
+ * Typography
+ */
+/**
+ * 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.
+ */
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * 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.
+ */
+@media (min-width: 600px) {
+  .wp-block-tab-list__mover-button {
+    width: 24px;
+    min-width: 0 !important;
+  }
+}

package/build-style/tab-list/editor.css

@@ -0,0 +1,101 @@
+/**
+ * Typography
+ */
+/**
+ * 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.
+ */
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * 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.
+ */
+@media (min-width: 600px) {
+  .wp-block-tab-list__mover-button {
+    width: 24px;
+    min-width: 0 !important;
+  }
+}