@wordpress/block-library 6.0.20 → 6.1.0

package/build-style/comments-query-loop/editor.css

@@ -0,0 +1,79 @@
+/**
+ * Colors
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * 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.
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Shadows.
+ */
+/**
+ * Editor widths.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * 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.
+ */
+.block-library-comments-toolbar__popover .components-popover__content {
+  min-width: 230px;
+}

package/build-style/common-rtl.css

@@ -215,4 +215,23 @@
   top: 5px;
   width: auto;
   z-index: 100000;
+}
+
+/**
+ * The following provide a simple means of applying a default border style when
+ * a user first makes a selection in the border block support panel.
+ * This prevents issues such as where the user could set a border width
+ * and see no border due there being no border style set.
+ *
+ * This is intended to be removed once intelligent defaults can be set while
+ * making border selections via the block support.
+ *
+ * See: https://github.com/WordPress/gutenberg/pull/33743
+ */
+html :where(.has-border-color) {
+  border-style: solid;
+}
+
+html :where([style*="border-width"]) {
+  border-style: solid;
 }

package/build-style/common.css

@@ -217,4 +217,23 @@
   top: 5px;
   width: auto;
   z-index: 100000;
+}
+
+/**
+ * The following provide a simple means of applying a default border style when
+ * a user first makes a selection in the border block support panel.
+ * This prevents issues such as where the user could set a border width
+ * and see no border due there being no border style set.
+ *
+ * This is intended to be removed once intelligent defaults can be set while
+ * making border selections via the block support.
+ *
+ * See: https://github.com/WordPress/gutenberg/pull/33743
+ */
+html :where(.has-border-color) {
+  border-style: solid;
+}
+
+html :where([style*="border-width"]) {
+  border-style: solid;
 }

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

@@ -189,6 +189,10 @@
 .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-100 {
   opacity: 1;
 }
+.wp-block-cover-image .block-library-cover__padding-visualizer,
+.wp-block-cover .block-library-cover__padding-visualizer {
+  z-index: 2;
+}
 .wp-block-cover-image.alignleft, .wp-block-cover-image.alignright,
 .wp-block-cover.alignleft,
 .wp-block-cover.alignright {

package/build-style/cover/style.css

@@ -189,6 +189,10 @@
 .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-100 {
   opacity: 1;
 }
+.wp-block-cover-image .block-library-cover__padding-visualizer,
+.wp-block-cover .block-library-cover__padding-visualizer {
+  z-index: 2;
+}
 .wp-block-cover-image.alignleft, .wp-block-cover-image.alignright,
 .wp-block-cover.alignleft,
 .wp-block-cover.alignright {

package/build-style/editor-rtl.css

@@ -81,6 +81,17 @@ ul.wp-block-archives {
 .wp-block-audio {
   margin-right: 0;
   margin-left: 0;
+  position: relative;
+}
+.wp-block-audio.is-transient audio {
+  opacity: 0.3;
+}
+.wp-block-audio .components-spinner {
+  position: absolute;
+  top: 50%;
+  right: 50%;
+  margin-top: -9px;
+  margin-right: -9px;
 }
 
 .edit-post-visual-editor .block-library-block__reusable-block-container .is-root-container {
@@ -219,21 +230,50 @@ div[data-type="core/button"] {
   margin-left: 0;
 }
 
-@media (min-width: 600px) {
-  .editor-styles-wrapper .block-editor-block-list__block.wp-block-column:nth-child(even) {
-    margin-right: var(--wp--style--block-gap, 2em);
-  }
-}
-@media (min-width: 782px) {
-  .editor-styles-wrapper .block-editor-block-list__block.wp-block-column:not(:first-child) {
-    margin-right: var(--wp--style--block-gap, 2em);
-  }
-}
 html :where(.wp-block-column) {
   margin-top: 0;
   margin-bottom: 0;
 }
 
+.block-library-comments-toolbar__popover .components-popover__content {
+  min-width: 230px;
+}
+
+.wp-block[data-align=center] > .wp-block-comments-pagination {
+  justify-content: center;
+}
+
+.editor-styles-wrapper .wp-block-comments-pagination {
+  max-width: 100%;
+}
+.editor-styles-wrapper .wp-block-comments-pagination.block-editor-block-list__layout {
+  margin: 0;
+}
+
+.wp-block-comments-pagination > .wp-block-comments-pagination-next,
+.wp-block-comments-pagination > .wp-block-comments-pagination-previous,
+.wp-block-comments-pagination > .wp-block-comments-pagination-numbers {
+  margin-right: 0;
+  margin-top: 0.5em;
+  margin-right: 0.5em;
+  margin-bottom: 0.5em;
+}
+.wp-block-comments-pagination > .wp-block-comments-pagination-next:last-child,
+.wp-block-comments-pagination > .wp-block-comments-pagination-previous:last-child,
+.wp-block-comments-pagination > .wp-block-comments-pagination-numbers:last-child {
+  margin-right: 0;
+}
+
+.wp-block-comments-pagination-numbers a {
+  text-decoration: underline;
+}
+.wp-block-comments-pagination-numbers .page-numbers {
+  margin-left: 2px;
+}
+.wp-block-comments-pagination-numbers .page-numbers:last-child {
+  margin-right: 0;
+}
+
 .wp-block-cover {
   /* Extra specificity needed because the reset.css applied in the editor context is overriding this rule. */
 }
@@ -321,19 +361,7 @@ html :where(.wp-block-column) {
 }
 .wp-block-embed.is-loading {
   display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
-  padding: 1em;
-  min-height: 200px;
-  text-align: center;
-  border-radius: 2px;
-  background-color: #fff;
-  box-shadow: inset 0 0 0 1px #1e1e1e;
-}
-.wp-block-embed.is-loading p {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  font-size: 13px;
 }
 .wp-block-embed .components-placeholder__error {
   word-break: break-word;
@@ -755,18 +783,6 @@ figure.wp-block-gallery .block-editor-media-placeholder.is-appender .block-edito
 figure.wp-block-gallery .block-editor-media-placeholder {
   margin: 0;
 }
-figure.wp-block-gallery .block-editor-media-placeholder::before {
-  box-shadow: 0 0 0 1px #fff inset, 0 0 0 3px var(--wp-admin-theme-color) inset;
-  content: "";
-  outline: 2px solid transparent;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 1;
-  pointer-events: none;
-}
 figure.wp-block-gallery .block-editor-media-placeholder .components-placeholder__label {
   display: flex;
 }
@@ -884,15 +900,16 @@ figure.wp-block-gallery .components-spinner {
   margin: 0;
 }
 
-.wp-block-update-gallery-modal {
-  max-width: 400px;
+@media (min-width: 600px) {
+  .wp-block-update-gallery-modal {
+    max-width: 480px;
+  }
 }
-.wp-block-update-gallery-modal .wp-block-update-gallery-modal-buttons {
+
+.wp-block-update-gallery-modal-buttons {
   display: flex;
   justify-content: flex-end;
-}
-.wp-block-update-gallery-modal .wp-block-update-gallery-modal-buttons .components-button {
-  margin-right: 12px;
+  gap: 12px;
 }
 
 /**
@@ -1099,6 +1116,13 @@ figure.wp-block-image:not(.wp-block) {
   margin-bottom: 20px;
 }
 
+.editor-latest-posts-image-alignment-control .components-base-control__label {
+  display: block;
+}
+.editor-latest-posts-image-alignment-control .components-toolbar {
+  border-radius: 2px;
+}
+
 .wp-block-media-text__media {
   position: relative;
 }
@@ -1182,8 +1206,7 @@ figure.wp-block-image:not(.wp-block) {
   padding-right: 0;
 }
 .editor-styles-wrapper .wp-block-navigation .wp-block-navigation-item.wp-block {
-  margin-right: revert;
-  margin-left: revert;
+  margin: revert;
 }
 
 .wp-block-navigation-item__label {
@@ -1593,6 +1616,21 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   margin-bottom: 16px;
 }
 
+.wp-block-navigation__overlay-menu-preview {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background-color: #f0f0f0;
+  padding: 0 24px;
+  height: 64px;
+  margin-bottom: 12px;
+}
+.wp-block-navigation__overlay-menu-preview.open {
+  box-shadow: inset 0 0 0 1px #e0e0e0;
+  outline: 1px solid transparent;
+  background-color: #fff;
+}
+
 /**
  * Submenus.
  */
@@ -1773,16 +1811,16 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   margin: 0.5em;
 }
 
-.wp-block-page-list-modal {
-  max-width: 400px;
+@media (min-width: 600px) {
+  .wp-block-page-list-modal {
+    max-width: 480px;
+  }
 }
 
 .wp-block-page-list-modal-buttons {
   display: flex;
   justify-content: flex-end;
-}
-.wp-block-page-list-modal-buttons .components-button {
-  margin-right: 12px;
+  gap: 12px;
 }
 
 .wp-block-page-list .open-on-click:focus-within > .wp-block-navigation__submenu-container {
@@ -1793,6 +1831,10 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   min-width: 200px;
 }
 
+.wp-block-page-list .components-notice {
+  margin-right: 0;
+}
+
 .block-editor-block-list__block[data-type="core/paragraph"].has-drop-cap:focus {
   min-height: auto !important;
 }
@@ -2085,6 +2127,9 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   display: inline-block;
   margin-right: 8px;
 }
+.wp-block-social-links.wp-block-social-links {
+  background: none;
+}
 
 .wp-social-link:hover {
   transform: none;
@@ -2191,6 +2236,10 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 .block-library-spacer__resize-container {
   clear: both;
 }
+.block-library-spacer__resize-container:not(.is-resizing) {
+  height: 100% !important;
+  width: 100% !important;
+}
 .block-library-spacer__resize-container .components-resizable-box__handle::before {
   content: none;
 }
@@ -2459,10 +2508,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   margin: 0;
 }
 
-.block-library-query-pagination-toolbar__popover .components-popover__content {
-  min-width: 230px;
-}
-
 .wp-block-query-pagination > .wp-block-query-pagination-next,
 .wp-block-query-pagination > .wp-block-query-pagination-previous,
 .wp-block-query-pagination > .wp-block-query-pagination-numbers {
@@ -2595,13 +2640,6 @@ div[data-type="core/post-featured-image"] img {
   display: block;
 }
 
-.block-library-post-featured-image-dimension-controls {
-  margin-bottom: 8px;
-}
-.block-library-post-featured-image-dimension-controls.scale-control-is-visible {
-  margin-bottom: 16px;
-}
-
 :root .editor-styles-wrapper {
   /*
    * Our classes uses the same values we set for gradient value attributes,

package/build-style/editor.css

@@ -81,6 +81,17 @@ ul.wp-block-archives {
 .wp-block-audio {
   margin-left: 0;
   margin-right: 0;
+  position: relative;
+}
+.wp-block-audio.is-transient audio {
+  opacity: 0.3;
+}
+.wp-block-audio .components-spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -9px;
+  margin-left: -9px;
 }
 
 .edit-post-visual-editor .block-library-block__reusable-block-container .is-root-container {
@@ -220,21 +231,53 @@ div[data-type="core/button"] {
   margin-right: 0;
 }
 
-@media (min-width: 600px) {
-  .editor-styles-wrapper .block-editor-block-list__block.wp-block-column:nth-child(even) {
-    margin-left: var(--wp--style--block-gap, 2em);
-  }
-}
-@media (min-width: 782px) {
-  .editor-styles-wrapper .block-editor-block-list__block.wp-block-column:not(:first-child) {
-    margin-left: var(--wp--style--block-gap, 2em);
-  }
-}
 html :where(.wp-block-column) {
   margin-top: 0;
   margin-bottom: 0;
 }
 
+.block-library-comments-toolbar__popover .components-popover__content {
+  min-width: 230px;
+}
+
+.wp-block[data-align=center] > .wp-block-comments-pagination {
+  justify-content: center;
+}
+
+.editor-styles-wrapper .wp-block-comments-pagination {
+  max-width: 100%;
+}
+.editor-styles-wrapper .wp-block-comments-pagination.block-editor-block-list__layout {
+  margin: 0;
+}
+
+.wp-block-comments-pagination > .wp-block-comments-pagination-next,
+.wp-block-comments-pagination > .wp-block-comments-pagination-previous,
+.wp-block-comments-pagination > .wp-block-comments-pagination-numbers {
+  margin-left: 0;
+  margin-top: 0.5em;
+  /*rtl:ignore*/
+  margin-right: 0.5em;
+  margin-bottom: 0.5em;
+}
+.wp-block-comments-pagination > .wp-block-comments-pagination-next:last-child,
+.wp-block-comments-pagination > .wp-block-comments-pagination-previous:last-child,
+.wp-block-comments-pagination > .wp-block-comments-pagination-numbers:last-child {
+  /*rtl:ignore*/
+  margin-right: 0;
+}
+
+.wp-block-comments-pagination-numbers a {
+  text-decoration: underline;
+}
+.wp-block-comments-pagination-numbers .page-numbers {
+  margin-right: 2px;
+}
+.wp-block-comments-pagination-numbers .page-numbers:last-child {
+  /*rtl:ignore*/
+  margin-right: 0;
+}
+
 .wp-block-cover {
   /* Extra specificity needed because the reset.css applied in the editor context is overriding this rule. */
 }
@@ -322,19 +365,7 @@ html :where(.wp-block-column) {
 }
 .wp-block-embed.is-loading {
   display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
-  padding: 1em;
-  min-height: 200px;
-  text-align: center;
-  border-radius: 2px;
-  background-color: #fff;
-  box-shadow: inset 0 0 0 1px #1e1e1e;
-}
-.wp-block-embed.is-loading p {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  font-size: 13px;
 }
 .wp-block-embed .components-placeholder__error {
   word-break: break-word;
@@ -760,18 +791,6 @@ figure.wp-block-gallery .block-editor-media-placeholder.is-appender .block-edito
 figure.wp-block-gallery .block-editor-media-placeholder {
   margin: 0;
 }
-figure.wp-block-gallery .block-editor-media-placeholder::before {
-  box-shadow: 0 0 0 1px #fff inset, 0 0 0 3px var(--wp-admin-theme-color) inset;
-  content: "";
-  outline: 2px solid transparent;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1;
-  pointer-events: none;
-}
 figure.wp-block-gallery .block-editor-media-placeholder .components-placeholder__label {
   display: flex;
 }
@@ -889,15 +908,16 @@ figure.wp-block-gallery .components-spinner {
   margin: 0;
 }
 
-.wp-block-update-gallery-modal {
-  max-width: 400px;
+@media (min-width: 600px) {
+  .wp-block-update-gallery-modal {
+    max-width: 480px;
+  }
 }
-.wp-block-update-gallery-modal .wp-block-update-gallery-modal-buttons {
+
+.wp-block-update-gallery-modal-buttons {
   display: flex;
   justify-content: flex-end;
-}
-.wp-block-update-gallery-modal .wp-block-update-gallery-modal-buttons .components-button {
-  margin-left: 12px;
+  gap: 12px;
 }
 
 /**
@@ -1104,6 +1124,13 @@ figure.wp-block-image:not(.wp-block) {
   margin-bottom: 20px;
 }
 
+.editor-latest-posts-image-alignment-control .components-base-control__label {
+  display: block;
+}
+.editor-latest-posts-image-alignment-control .components-toolbar {
+  border-radius: 2px;
+}
+
 .wp-block-media-text__media {
   position: relative;
 }
@@ -1187,8 +1214,7 @@ figure.wp-block-image:not(.wp-block) {
   padding-left: 0;
 }
 .editor-styles-wrapper .wp-block-navigation .wp-block-navigation-item.wp-block {
-  margin-left: revert;
-  margin-right: revert;
+  margin: revert;
 }
 
 .wp-block-navigation-item__label {
@@ -1598,6 +1624,21 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   margin-bottom: 16px;
 }
 
+.wp-block-navigation__overlay-menu-preview {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background-color: #f0f0f0;
+  padding: 0 24px;
+  height: 64px;
+  margin-bottom: 12px;
+}
+.wp-block-navigation__overlay-menu-preview.open {
+  box-shadow: inset 0 0 0 1px #e0e0e0;
+  outline: 1px solid transparent;
+  background-color: #fff;
+}
+
 /**
  * Submenus.
  */
@@ -1778,16 +1819,16 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   margin: 0.5em;
 }
 
-.wp-block-page-list-modal {
-  max-width: 400px;
+@media (min-width: 600px) {
+  .wp-block-page-list-modal {
+    max-width: 480px;
+  }
 }
 
 .wp-block-page-list-modal-buttons {
   display: flex;
   justify-content: flex-end;
-}
-.wp-block-page-list-modal-buttons .components-button {
-  margin-left: 12px;
+  gap: 12px;
 }
 
 .wp-block-page-list .open-on-click:focus-within > .wp-block-navigation__submenu-container {
@@ -1798,6 +1839,10 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   min-width: 200px;
 }
 
+.wp-block-page-list .components-notice {
+  margin-left: 0;
+}
+
 .block-editor-block-list__block[data-type="core/paragraph"].has-drop-cap:focus {
   min-height: auto !important;
 }
@@ -2090,6 +2135,9 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   display: inline-block;
   margin-left: 8px;
 }
+.wp-block-social-links.wp-block-social-links {
+  background: none;
+}
 
 .wp-social-link:hover {
   transform: none;
@@ -2196,6 +2244,10 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 .block-library-spacer__resize-container {
   clear: both;
 }
+.block-library-spacer__resize-container:not(.is-resizing) {
+  height: 100% !important;
+  width: 100% !important;
+}
 .block-library-spacer__resize-container .components-resizable-box__handle::before {
   content: none;
 }
@@ -2464,10 +2516,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   margin: 0;
 }
 
-.block-library-query-pagination-toolbar__popover .components-popover__content {
-  min-width: 230px;
-}
-
 .wp-block-query-pagination > .wp-block-query-pagination-next,
 .wp-block-query-pagination > .wp-block-query-pagination-previous,
 .wp-block-query-pagination > .wp-block-query-pagination-numbers {
@@ -2603,13 +2651,6 @@ div[data-type="core/post-featured-image"] img {
   display: block;
 }
 
-.block-library-post-featured-image-dimension-controls {
-  margin-bottom: 8px;
-}
-.block-library-post-featured-image-dimension-controls.scale-control-is-visible {
-  margin-bottom: 16px;
-}
-
 :root .editor-styles-wrapper {
   /*
    * Our classes uses the same values we set for gradient value attributes,

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

@@ -81,19 +81,7 @@
 }
 .wp-block-embed.is-loading {
   display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
-  padding: 1em;
-  min-height: 200px;
-  text-align: center;
-  border-radius: 2px;
-  background-color: #fff;
-  box-shadow: inset 0 0 0 1px #1e1e1e;
-}
-.wp-block-embed.is-loading p {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  font-size: 13px;
 }
 .wp-block-embed .components-placeholder__error {
   word-break: break-word;