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

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
  */

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/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/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
  */

package/build-style/navigation/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/navigation/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/navigation/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/navigation-submenu/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/navigation-submenu/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/page-list/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
  */