@wordpress/block-library 10.1.0 → 10.2.0

package/build-style/html/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
  */
@@ -95,6 +101,13 @@
   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;

package/build-style/html/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
  */
@@ -95,6 +101,13 @@
   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;

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/image/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,6 +104,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;
 }

package/build-style/image/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,6 +104,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;
 }

package/build-style/image/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
  */
@@ -162,7 +168,6 @@
 }
 @supports ((-webkit-mask-image: none) or (mask-image: none)) or (-webkit-mask-image: none) {
   .wp-block-image.is-style-circle-mask img {
-    /* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
     -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
             mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
     mask-mode: alpha;

package/build-style/image/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
  */
@@ -168,7 +174,6 @@
 }
 @supports ((-webkit-mask-image: none) or (mask-image: none)) or (-webkit-mask-image: none) {
   .wp-block-image.is-style-circle-mask img {
-    /* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
     -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
             mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
     mask-mode: alpha;

package/build-style/image/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/image/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/latest-posts/style-rtl.css

@@ -1,3 +1,6 @@
+/**
+ * Breakpoints & Media Queries
+ */
 /**
  * Typography
  */
@@ -46,9 +49,6 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
-/**
- * Breakpoints & Media Queries
- */
 /**
 *  Converts a hex value into the rgb equivalent.
 *
@@ -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
  */
@@ -103,47 +109,52 @@
   clear: both;
   overflow-wrap: break-word;
 }
-.wp-block-latest-posts.is-grid {
+.wp-block-latest-posts.is-grid:not(.is-layout-grid) {
   display: flex;
   flex-wrap: wrap;
 }
-.wp-block-latest-posts.is-grid li {
+.wp-block-latest-posts.is-grid:not(.is-layout-grid) li {
   margin: 0 0 1.25em 1.25em;
   width: 100%;
 }
 @media (min-width: 600px) {
-  .wp-block-latest-posts.columns-2 li {
+  .wp-block-latest-posts.columns-2:not(.is-layout-grid) li {
     width: calc(100% / 2 - 1.25em + 1.25em / 2);
   }
-  .wp-block-latest-posts.columns-2 li:nth-child(2n) {
+  .wp-block-latest-posts.columns-2:not(.is-layout-grid) li:nth-child(2n) {
     margin-left: 0;
   }
-  .wp-block-latest-posts.columns-3 li {
+  .wp-block-latest-posts.columns-3:not(.is-layout-grid) li {
     width: calc(100% / 3 - 1.25em + 1.25em / 3);
   }
-  .wp-block-latest-posts.columns-3 li:nth-child(3n) {
+  .wp-block-latest-posts.columns-3:not(.is-layout-grid) li:nth-child(3n) {
     margin-left: 0;
   }
-  .wp-block-latest-posts.columns-4 li {
+  .wp-block-latest-posts.columns-4:not(.is-layout-grid) li {
     width: calc(100% / 4 - 1.25em + 1.25em / 4);
   }
-  .wp-block-latest-posts.columns-4 li:nth-child(4n) {
+  .wp-block-latest-posts.columns-4:not(.is-layout-grid) li:nth-child(4n) {
     margin-left: 0;
   }
-  .wp-block-latest-posts.columns-5 li {
+  .wp-block-latest-posts.columns-5:not(.is-layout-grid) li {
     width: calc(100% / 5 - 1.25em + 1.25em / 5);
   }
-  .wp-block-latest-posts.columns-5 li:nth-child(5n) {
+  .wp-block-latest-posts.columns-5:not(.is-layout-grid) li:nth-child(5n) {
     margin-left: 0;
   }
-  .wp-block-latest-posts.columns-6 li {
+  .wp-block-latest-posts.columns-6:not(.is-layout-grid) li {
     width: calc(100% / 6 - 1.25em + 1.25em / 6);
   }
-  .wp-block-latest-posts.columns-6 li:nth-child(6n) {
+  .wp-block-latest-posts.columns-6:not(.is-layout-grid) li:nth-child(6n) {
     margin-left: 0;
   }
 }
 
+@media (max-width: 600px) {
+  .wp-block-latest-posts-is-layout-grid[class*=columns-]:not(.has-native-responsive-grid) {
+    grid-template-columns: 1fr;
+  }
+}
 :root :where(.wp-block-latest-posts.is-grid) {
   padding: 0;
 }

package/build-style/latest-posts/style.css

@@ -1,3 +1,6 @@
+/**
+ * Breakpoints & Media Queries
+ */
 /**
  * Typography
  */
@@ -46,9 +49,6 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
-/**
- * Breakpoints & Media Queries
- */
 /**
 *  Converts a hex value into the rgb equivalent.
 *
@@ -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
  */
@@ -105,47 +111,52 @@
   clear: both;
   overflow-wrap: break-word;
 }
-.wp-block-latest-posts.is-grid {
+.wp-block-latest-posts.is-grid:not(.is-layout-grid) {
   display: flex;
   flex-wrap: wrap;
 }
-.wp-block-latest-posts.is-grid li {
+.wp-block-latest-posts.is-grid:not(.is-layout-grid) li {
   margin: 0 1.25em 1.25em 0;
   width: 100%;
 }
 @media (min-width: 600px) {
-  .wp-block-latest-posts.columns-2 li {
+  .wp-block-latest-posts.columns-2:not(.is-layout-grid) li {
     width: calc(100% / 2 - 1.25em + 1.25em / 2);
   }
-  .wp-block-latest-posts.columns-2 li:nth-child(2n) {
+  .wp-block-latest-posts.columns-2:not(.is-layout-grid) li:nth-child(2n) {
     margin-right: 0;
   }
-  .wp-block-latest-posts.columns-3 li {
+  .wp-block-latest-posts.columns-3:not(.is-layout-grid) li {
     width: calc(100% / 3 - 1.25em + 1.25em / 3);
   }
-  .wp-block-latest-posts.columns-3 li:nth-child(3n) {
+  .wp-block-latest-posts.columns-3:not(.is-layout-grid) li:nth-child(3n) {
     margin-right: 0;
   }
-  .wp-block-latest-posts.columns-4 li {
+  .wp-block-latest-posts.columns-4:not(.is-layout-grid) li {
     width: calc(100% / 4 - 1.25em + 1.25em / 4);
   }
-  .wp-block-latest-posts.columns-4 li:nth-child(4n) {
+  .wp-block-latest-posts.columns-4:not(.is-layout-grid) li:nth-child(4n) {
     margin-right: 0;
   }
-  .wp-block-latest-posts.columns-5 li {
+  .wp-block-latest-posts.columns-5:not(.is-layout-grid) li {
     width: calc(100% / 5 - 1.25em + 1.25em / 5);
   }
-  .wp-block-latest-posts.columns-5 li:nth-child(5n) {
+  .wp-block-latest-posts.columns-5:not(.is-layout-grid) li:nth-child(5n) {
     margin-right: 0;
   }
-  .wp-block-latest-posts.columns-6 li {
+  .wp-block-latest-posts.columns-6:not(.is-layout-grid) li {
     width: calc(100% / 6 - 1.25em + 1.25em / 6);
   }
-  .wp-block-latest-posts.columns-6 li:nth-child(6n) {
+  .wp-block-latest-posts.columns-6:not(.is-layout-grid) li:nth-child(6n) {
     margin-right: 0;
   }
 }
 
+@media (max-width: 600px) {
+  .wp-block-latest-posts-is-layout-grid[class*=columns-]:not(.has-native-responsive-grid) {
+    grid-template-columns: 1fr;
+  }
+}
 :root :where(.wp-block-latest-posts.is-grid) {
   padding: 0;
 }

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

@@ -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
  */
@@ -270,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;
@@ -364,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;
 }
@@ -504,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;
 }