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

package/build-style/editor-rtl.css

@@ -104,7 +104,7 @@
 }
 .block-library-utils__media-control .block-library-utils__media-control__replace-flow button.components-button {
   color: #1e1e1e;
-  box-shadow: inset 0 0 0 1px #ccc;
+  border-color: #ccc;
   width: 100%;
   display: block;
   height: 40px;
@@ -113,9 +113,6 @@
 .block-library-utils__media-control .block-library-utils__media-control__replace-flow button.components-button:hover {
   color: var(--wp-admin-theme-color);
 }
-.block-library-utils__media-control .block-library-utils__media-control__replace-flow button.components-button:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
 
 .block-library-utils__media-control__inspector-media-replace-title {
   word-break: break-all;
@@ -938,16 +935,33 @@ html :where(.wp-block-column) {
   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;
+  }
 }
 
-.wp-block-icon__inserter-header {
-  align-items: center;
+@media (min-width: 782px) {
+  .wp-block-icon__inserter-panel {
+    margin-inline-start: 280px;
+  }
+}
+
+.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 {
@@ -969,6 +983,11 @@ html :where(.wp-block-column) {
 .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;
@@ -976,6 +995,7 @@ html :where(.wp-block-column) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  width: 100%;
 }
 
 .wp-block-icon__toolbar-content {
@@ -1199,8 +1219,8 @@ figure.wp-block-image:not(.wp-block) {
   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;
@@ -1400,7 +1420,7 @@ figure.wp-block-image:not(.wp-block) {
   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;
@@ -1494,7 +1514,7 @@ figure.wp-block-image:not(.wp-block) {
 .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;
 }
@@ -1634,8 +1654,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;
 }
 
@@ -1846,7 +1865,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 .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;
 }
@@ -1942,8 +1961,8 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   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;
@@ -2038,6 +2057,12 @@ html[dir=rtl] .has-drop-cap:not(:focus)::first-letter {
   margin-top: var(--wp--preset--spacing--30, 1em);
 }
 
+.wp-block-playlist__waveform-color-controls {
+  display: grid;
+  grid-column: 1/-1;
+  row-gap: 0;
+}
+
 .wp-block-post-excerpt .wp-block-post-excerpt__excerpt.is-inline {
   display: inline;
 }
@@ -2510,7 +2535,7 @@ html[dir=rtl] .has-drop-cap:not(:focus)::first-letter {
   color: #757575;
   text-transform: uppercase;
   font-size: 11px;
-  font-weight: 499;
+  font-weight: var(--wpds-typography-font-weight-emphasis, 600);
   display: block;
 }
 

package/build-style/editor.css

@@ -104,7 +104,7 @@
 }
 .block-library-utils__media-control .block-library-utils__media-control__replace-flow button.components-button {
   color: #1e1e1e;
-  box-shadow: inset 0 0 0 1px #ccc;
+  border-color: #ccc;
   width: 100%;
   display: block;
   height: 40px;
@@ -113,9 +113,6 @@
 .block-library-utils__media-control .block-library-utils__media-control__replace-flow button.components-button:hover {
   color: var(--wp-admin-theme-color);
 }
-.block-library-utils__media-control .block-library-utils__media-control__replace-flow button.components-button:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
 
 .block-library-utils__media-control__inspector-media-replace-title {
   word-break: break-all;
@@ -941,16 +938,33 @@ html :where(.wp-block-column) {
   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;
+  }
 }
 
-.wp-block-icon__inserter-header {
-  align-items: center;
+@media (min-width: 782px) {
+  .wp-block-icon__inserter-panel {
+    margin-inline-start: 280px;
+  }
+}
+
+.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 {
@@ -972,6 +986,11 @@ html :where(.wp-block-column) {
 .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;
@@ -979,6 +998,7 @@ html :where(.wp-block-column) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  width: 100%;
 }
 
 .wp-block-icon__toolbar-content {
@@ -1203,8 +1223,8 @@ figure.wp-block-image:not(.wp-block) {
   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;
@@ -1404,7 +1424,7 @@ figure.wp-block-image:not(.wp-block) {
   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;
@@ -1498,7 +1518,7 @@ figure.wp-block-image:not(.wp-block) {
 .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;
 }
@@ -1638,8 +1658,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;
 }
 
@@ -1850,7 +1869,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 .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;
 }
@@ -1946,8 +1965,8 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   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;
@@ -2042,6 +2061,12 @@ html[dir=rtl] .has-drop-cap:not(:focus)::first-letter {
   margin-top: var(--wp--preset--spacing--30, 1em);
 }
 
+.wp-block-playlist__waveform-color-controls {
+  display: grid;
+  grid-column: 1/-1;
+  row-gap: 0;
+}
+
 .wp-block-post-excerpt .wp-block-post-excerpt__excerpt.is-inline {
   display: inline;
 }
@@ -2514,7 +2539,7 @@ html[dir=rtl] .has-drop-cap:not(:focus)::first-letter {
   color: #757575;
   text-transform: uppercase;
   font-size: 11px;
-  font-weight: 499;
+  font-weight: var(--wpds-typography-font-weight-emphasis, 600);
   display: block;
 }
 

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,6 +146,11 @@
 .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;
@@ -86,6 +158,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  width: 100%;
 }
 
 .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,6 +146,11 @@
 .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;
@@ -86,6 +158,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  width: 100%;
 }
 
 .wp-block-icon__toolbar-content {

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,10 @@
 .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,10 @@
 .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;
 }