@wordpress/block-library 10.1.0 → 10.2.0

package/build-style/editor-rtl.css

@@ -67,6 +67,12 @@
 /**
  * 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
  */
@@ -98,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;
@@ -107,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;
@@ -707,9 +710,6 @@ html :where(.wp-block-column) {
 :root :where(figure.wp-block-gallery) > .blocks-gallery-caption {
   flex: 0 0 100%;
 }
-:root :where(figure.wp-block-gallery) > .blocks-gallery-media-placeholder-wrapper {
-  flex-basis: 100%;
-}
 :root :where(figure.wp-block-gallery) .block-editor-media-placeholder.is-appender .components-placeholder__label {
   display: none;
 }
@@ -788,6 +788,27 @@ html :where(.wp-block-column) {
   gap: 12px;
 }
 
+.wp-block-gallery__source-settings {
+  grid-column: 1/-1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.wp-block-gallery__source-settings .wp-block-gallery__source-description {
+  margin: 0;
+  color: #757575;
+  font-size: 12px;
+}
+.wp-block-gallery__source-settings .components-button {
+  justify-content: center;
+  width: 100%;
+}
+
+.wp-block-gallery__source-notice {
+  grid-column: 1/-1;
+  margin: 0;
+}
+
 /**
  * Group: All Alignment Settings
  */
@@ -840,6 +861,13 @@ html :where(.wp-block-column) {
   right: 0;
 }
 
+.block-library-html__edit-code {
+  margin: 16px;
+}
+.block-library-html__edit-code .block-library-html__edit-code-button {
+  justify-content: center;
+}
+
 @media (min-width: 600px) {
   .block-library-html__modal:not(.is-full-screen) {
     height: 9999rem;
@@ -907,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 {
@@ -938,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;
@@ -945,6 +995,7 @@ html :where(.wp-block-column) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  width: 100%;
 }
 
 .wp-block-icon__toolbar-content {
@@ -966,6 +1017,10 @@ figure.wp-block-image:not(.wp-block) {
 .wp-block-image {
   position: relative;
 }
+.wp-block-image.is-transient:not(.alignwide):not(.alignfull) {
+  width: -moz-fit-content;
+  width: fit-content;
+}
 .wp-block-image .is-applying img, .wp-block-image.is-transient img {
   opacity: 0.3;
 }
@@ -1164,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;
@@ -1365,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;
@@ -1459,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;
 }
@@ -1599,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;
 }
 
@@ -1811,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;
 }
@@ -1907,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;
@@ -2003,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;
 }
@@ -2475,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

@@ -67,6 +67,12 @@
 /**
  * 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
  */
@@ -98,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;
@@ -107,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;
@@ -709,9 +712,6 @@ html :where(.wp-block-column) {
 :root :where(figure.wp-block-gallery) > .blocks-gallery-caption {
   flex: 0 0 100%;
 }
-:root :where(figure.wp-block-gallery) > .blocks-gallery-media-placeholder-wrapper {
-  flex-basis: 100%;
-}
 :root :where(figure.wp-block-gallery) .block-editor-media-placeholder.is-appender .components-placeholder__label {
   display: none;
 }
@@ -790,6 +790,27 @@ html :where(.wp-block-column) {
   gap: 12px;
 }
 
+.wp-block-gallery__source-settings {
+  grid-column: 1/-1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.wp-block-gallery__source-settings .wp-block-gallery__source-description {
+  margin: 0;
+  color: #757575;
+  font-size: 12px;
+}
+.wp-block-gallery__source-settings .components-button {
+  justify-content: center;
+  width: 100%;
+}
+
+.wp-block-gallery__source-notice {
+  grid-column: 1/-1;
+  margin: 0;
+}
+
 /**
  * Group: All Alignment Settings
  */
@@ -842,6 +863,13 @@ html :where(.wp-block-column) {
   left: 0;
 }
 
+.block-library-html__edit-code {
+  margin: 16px;
+}
+.block-library-html__edit-code .block-library-html__edit-code-button {
+  justify-content: center;
+}
+
 @media (min-width: 600px) {
   .block-library-html__modal:not(.is-full-screen) {
     height: 9999rem;
@@ -910,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 {
@@ -941,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;
@@ -948,6 +998,7 @@ html :where(.wp-block-column) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  width: 100%;
 }
 
 .wp-block-icon__toolbar-content {
@@ -969,6 +1020,10 @@ figure.wp-block-image:not(.wp-block) {
 .wp-block-image {
   position: relative;
 }
+.wp-block-image.is-transient:not(.alignwide):not(.alignfull) {
+  width: -moz-fit-content;
+  width: fit-content;
+}
 .wp-block-image .is-applying img, .wp-block-image.is-transient img {
   opacity: 0.3;
 }
@@ -1168,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;
@@ -1369,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;
@@ -1463,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;
 }
@@ -1603,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;
 }
 
@@ -1815,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;
 }
@@ -1911,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;
@@ -2007,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;
 }
@@ -2479,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/embed/style-rtl.css

@@ -67,6 +67,12 @@
 /**
  * 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
  */

package/build-style/embed/style.css

@@ -67,6 +67,12 @@
 /**
  * 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
  */

package/build-style/embed/theme-rtl.css

@@ -67,6 +67,12 @@
 /**
  * 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
  */

package/build-style/embed/theme.css

@@ -67,6 +67,12 @@
 /**
  * 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
  */

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

@@ -67,6 +67,12 @@
 /**
  * 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
  */

package/build-style/freeform/editor.css

@@ -67,6 +67,12 @@
 /**
  * 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
  */

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

@@ -67,6 +67,12 @@
 /**
  * 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
  */
@@ -93,9 +99,6 @@
 :root :where(figure.wp-block-gallery) > .blocks-gallery-caption {
   flex: 0 0 100%;
 }
-:root :where(figure.wp-block-gallery) > .blocks-gallery-media-placeholder-wrapper {
-  flex-basis: 100%;
-}
 :root :where(figure.wp-block-gallery) .block-editor-media-placeholder.is-appender .components-placeholder__label {
   display: none;
 }
@@ -172,4 +175,25 @@
   display: flex;
   justify-content: flex-end;
   gap: 12px;
+}
+
+.wp-block-gallery__source-settings {
+  grid-column: 1/-1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.wp-block-gallery__source-settings .wp-block-gallery__source-description {
+  margin: 0;
+  color: #757575;
+  font-size: 12px;
+}
+.wp-block-gallery__source-settings .components-button {
+  justify-content: center;
+  width: 100%;
+}
+
+.wp-block-gallery__source-notice {
+  grid-column: 1/-1;
+  margin: 0;
 }

package/build-style/gallery/editor.css

@@ -67,6 +67,12 @@
 /**
  * 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
  */
@@ -93,9 +99,6 @@
 :root :where(figure.wp-block-gallery) > .blocks-gallery-caption {
   flex: 0 0 100%;
 }
-:root :where(figure.wp-block-gallery) > .blocks-gallery-media-placeholder-wrapper {
-  flex-basis: 100%;
-}
 :root :where(figure.wp-block-gallery) .block-editor-media-placeholder.is-appender .components-placeholder__label {
   display: none;
 }
@@ -172,4 +175,25 @@
   display: flex;
   justify-content: flex-end;
   gap: 12px;
+}
+
+.wp-block-gallery__source-settings {
+  grid-column: 1/-1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.wp-block-gallery__source-settings .wp-block-gallery__source-description {
+  margin: 0;
+  color: #757575;
+  font-size: 12px;
+}
+.wp-block-gallery__source-settings .components-button {
+  justify-content: center;
+  width: 100%;
+}
+
+.wp-block-gallery__source-notice {
+  grid-column: 1/-1;
+  margin: 0;
 }

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

@@ -67,6 +67,12 @@
 /**
  * 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
  */

package/build-style/gallery/style.css

@@ -67,6 +67,12 @@
 /**
  * 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
  */

package/build-style/gallery/theme-rtl.css

@@ -67,6 +67,12 @@
 /**
  * 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
  */

package/build-style/gallery/theme.css

@@ -67,6 +67,12 @@
 /**
  * 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
  */