@wordpress/block-library 7.7.0 → 7.10.0

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

@@ -75,14 +75,9 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 .wp-block-button__link {
-  color: #fff;
-  background-color: #32373c;
-  border-radius: 9999px;
   box-shadow: none;
   cursor: pointer;
   display: inline-block;
-  font-size: 1.125em;
-  padding: calc(0.667em + 2px) calc(1.333em + 2px);
   text-align: center;
   text-decoration: none;
   word-break: break-word;
@@ -98,6 +93,11 @@
   text-align: right;
 }
 
+:where(.wp-block-button__link) {
+  border-radius: 9999px;
+  padding: calc(0.667em + 2px) calc(1.333em + 2px);
+}
+
 .wp-block-buttons > .wp-block-button.has-custom-width {
   max-width: none;
 }

package/build-style/button/style.css

@@ -75,14 +75,9 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 .wp-block-button__link {
-  color: #fff;
-  background-color: #32373c;
-  border-radius: 9999px;
   box-shadow: none;
   cursor: pointer;
   display: inline-block;
-  font-size: 1.125em;
-  padding: calc(0.667em + 2px) calc(1.333em + 2px);
   text-align: center;
   text-decoration: none;
   word-break: break-word;
@@ -99,6 +94,11 @@
   text-align: right;
 }
 
+:where(.wp-block-button__link) {
+  border-radius: 9999px;
+  padding: calc(0.667em + 2px) calc(1.333em + 2px);
+}
+
 .wp-block-buttons > .wp-block-button.has-custom-width {
   max-width: none;
 }

package/build-style/comment-template/style-rtl.css

@@ -88,4 +88,16 @@
   max-width: 100%;
   list-style: none;
   padding-right: 2rem;
+}
+.wp-block-comment-template.alignleft {
+  float: right;
+}
+.wp-block-comment-template.aligncenter {
+  margin-right: auto;
+  margin-left: auto;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.wp-block-comment-template.alignright {
+  float: left;
 }

package/build-style/comment-template/style.css

@@ -88,4 +88,16 @@
   max-width: 100%;
   list-style: none;
   padding-left: 2rem;
+}
+.wp-block-comment-template.alignleft {
+  float: left;
+}
+.wp-block-comment-template.aligncenter {
+  margin-left: auto;
+  margin-right: auto;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.wp-block-comment-template.alignright {
+  float: right;
 }

package/build-style/common-rtl.css

@@ -188,7 +188,6 @@
 .screen-reader-text {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
-  -webkit-clip-path: inset(50%);
   clip-path: inset(50%);
   height: 1px;
   margin: -1px;
@@ -202,8 +201,7 @@
 .screen-reader-text:focus {
   background-color: #ddd;
   clip: auto !important;
-  -webkit-clip-path: none;
-          clip-path: none;
+  clip-path: none;
   color: #444;
   display: block;
   font-size: 1em;

package/build-style/common.css

@@ -190,7 +190,6 @@
 .screen-reader-text {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
-  -webkit-clip-path: inset(50%);
   clip-path: inset(50%);
   height: 1px;
   margin: -1px;
@@ -204,8 +203,7 @@
 .screen-reader-text:focus {
   background-color: #ddd;
   clip: auto !important;
-  -webkit-clip-path: none;
-          clip-path: none;
+  clip-path: none;
   color: #444;
   display: block;
   font-size: 1em;

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

@@ -122,6 +122,13 @@
 .wp-block-cover .wp-block-cover__placeholder-background-options {
   width: 100%;
 }
+.wp-block-cover .wp-block-cover__image--placeholder-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
 
 [data-align=left] > .wp-block-cover,
 [data-align=right] > .wp-block-cover {
@@ -152,4 +159,8 @@
 
 .block-editor-block-patterns-list__list-item .has-parallax.wp-block-cover {
   background-attachment: scroll;
+}
+
+.color-block-support-panel__inner-wrapper > :not(.block-editor-tools-panel-color-gradient-settings__item) {
+  margin-top: 24px;
 }

package/build-style/cover/editor.css

@@ -122,6 +122,13 @@
 .wp-block-cover .wp-block-cover__placeholder-background-options {
   width: 100%;
 }
+.wp-block-cover .wp-block-cover__image--placeholder-image {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
 
 [data-align=left] > .wp-block-cover,
 [data-align=right] > .wp-block-cover {
@@ -152,4 +159,8 @@
 
 .block-editor-block-patterns-list__list-item .has-parallax.wp-block-cover {
   background-attachment: scroll;
+}
+
+.color-block-support-panel__inner-wrapper > :not(.block-editor-tools-panel-color-gradient-settings__item) {
+  margin-top: 24px;
 }

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

@@ -388,8 +388,7 @@
   height: 100%;
   max-width: none;
   max-height: none;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
   outline: none;
   border: none;
   box-shadow: none;

package/build-style/cover/style.css

@@ -388,8 +388,7 @@
   height: 100%;
   max-width: none;
   max-height: none;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
   outline: none;
   border: none;
   box-shadow: none;

package/build-style/editor-rtl.css

@@ -339,6 +339,13 @@ html :where(.wp-block-column) {
 .wp-block-cover .wp-block-cover__placeholder-background-options {
   width: 100%;
 }
+.wp-block-cover .wp-block-cover__image--placeholder-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
 
 [data-align=left] > .wp-block-cover,
 [data-align=right] > .wp-block-cover {
@@ -371,6 +378,10 @@ html :where(.wp-block-column) {
   background-attachment: scroll;
 }
 
+.color-block-support-panel__inner-wrapper > :not(.block-editor-tools-panel-color-gradient-settings__item) {
+  margin-top: 24px;
+}
+
 .wp-block-embed {
   margin-right: 0;
   margin-left: 0;
@@ -2134,18 +2145,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-button.components-button > svg {
   color: #fff;
 }
-.wp-block-site-logo.wp-block-site-logo .components-placeholder .components-placeholder__illustration {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  stroke: currentColor;
-  stroke-dasharray: 3;
-  opacity: 0.4;
-}
 .wp-block-site-logo.wp-block-site-logo.is-selected .components-button.components-button {
   background: var(--wp-admin-theme-color);
   border-color: var(--wp-admin-theme-color);
@@ -2531,8 +2530,8 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 }
 
 .block-editor-query-pattern__selection-modal .components-modal__content {
-  overflow: hidden;
   padding: 0;
+  margin-bottom: 60px;
 }
 .block-editor-query-pattern__selection-modal .components-modal__content::before {
   margin-bottom: 0;
@@ -2622,20 +2621,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   align-items: center;
   justify-content: center;
 }
-.wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder::before,
-.wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder::before {
-  content: "";
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  border: 1px dashed currentColor;
-  opacity: 0.4;
-  pointer-events: none;
-  border-radius: inherit;
-}
 .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-placeholder__fieldset,
 .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-placeholder__fieldset {
   width: auto;
@@ -2666,19 +2651,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-button.components-button > svg {
   color: #fff;
 }
-.wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-placeholder__illustration,
-.wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-placeholder__illustration {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  stroke: currentColor;
-  stroke-dasharray: 3;
-  opacity: 0.4;
-}
 .wp-block-post-featured-image.wp-block-post-featured-image[style*=height] .components-placeholder {
   min-height: 48px;
   min-width: 48px;
@@ -2707,6 +2679,9 @@ div[data-type="core/post-featured-image"] img {
 .wp-block-post-comments-form * {
   pointer-events: none;
 }
+.wp-block-post-comments-form *.block-editor-warning * {
+  pointer-events: auto;
+}
 
 :root .editor-styles-wrapper {
   /*

package/build-style/editor.css

@@ -343,6 +343,13 @@ html :where(.wp-block-column) {
 .wp-block-cover .wp-block-cover__placeholder-background-options {
   width: 100%;
 }
+.wp-block-cover .wp-block-cover__image--placeholder-image {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
 
 [data-align=left] > .wp-block-cover,
 [data-align=right] > .wp-block-cover {
@@ -375,6 +382,10 @@ html :where(.wp-block-column) {
   background-attachment: scroll;
 }
 
+.color-block-support-panel__inner-wrapper > :not(.block-editor-tools-panel-color-gradient-settings__item) {
+  margin-top: 24px;
+}
+
 .wp-block-embed {
   margin-left: 0;
   margin-right: 0;
@@ -2142,18 +2153,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-button.components-button > svg {
   color: #fff;
 }
-.wp-block-site-logo.wp-block-site-logo .components-placeholder .components-placeholder__illustration {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  stroke: currentColor;
-  stroke-dasharray: 3;
-  opacity: 0.4;
-}
 .wp-block-site-logo.wp-block-site-logo.is-selected .components-button.components-button {
   background: var(--wp-admin-theme-color);
   border-color: var(--wp-admin-theme-color);
@@ -2539,8 +2538,8 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 }
 
 .block-editor-query-pattern__selection-modal .components-modal__content {
-  overflow: hidden;
   padding: 0;
+  margin-bottom: 60px;
 }
 .block-editor-query-pattern__selection-modal .components-modal__content::before {
   margin-bottom: 0;
@@ -2633,20 +2632,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   align-items: center;
   justify-content: center;
 }
-.wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder::before,
-.wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder::before {
-  content: "";
-  display: block;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  border: 1px dashed currentColor;
-  opacity: 0.4;
-  pointer-events: none;
-  border-radius: inherit;
-}
 .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-placeholder__fieldset,
 .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-placeholder__fieldset {
   width: auto;
@@ -2677,19 +2662,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-button.components-button > svg {
   color: #fff;
 }
-.wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-placeholder__illustration,
-.wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-placeholder__illustration {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  stroke: currentColor;
-  stroke-dasharray: 3;
-  opacity: 0.4;
-}
 .wp-block-post-featured-image.wp-block-post-featured-image[style*=height] .components-placeholder {
   min-height: 48px;
   min-width: 48px;
@@ -2718,6 +2690,9 @@ div[data-type="core/post-featured-image"] img {
 .wp-block-post-comments-form * {
   pointer-events: none;
 }
+.wp-block-post-comments-form *.block-editor-warning * {
+  pointer-events: auto;
+}
 
 :root .editor-styles-wrapper {
   /*

package/build-style/elements-rtl.css

@@ -0,0 +1,82 @@
+/**
+ * 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.
+ */
+/**
+* Element styles.
+*/
+.wp-element-button {
+  cursor: pointer;
+}

package/build-style/elements.css

@@ -0,0 +1,82 @@
+/**
+ * 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.
+ */
+/**
+* Element styles.
+*/
+.wp-element-button {
+  cursor: pointer;
+}

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

@@ -94,7 +94,6 @@
 }
 
 .wp-block-embed {
-  margin: 0 0 1em 0;
   overflow-wrap: break-word;
 }
 .wp-block-embed figcaption {

package/build-style/embed/style.css

@@ -94,7 +94,6 @@
 }
 
 .wp-block-embed {
-  margin: 0 0 1em 0;
   overflow-wrap: break-word;
 }
 .wp-block-embed figcaption {

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

@@ -77,31 +77,30 @@
 .wp-block-file {
   margin-bottom: 1.5em;
 }
+.wp-block-file:not(.wp-element-button) {
+  font-size: 0.8em;
+}
 .wp-block-file.aligncenter {
   text-align: center;
 }
 .wp-block-file.alignright {
   text-align: right;
 }
-.wp-block-file .wp-block-file__embed {
+.wp-block-file * + .wp-block-file__button {
+  margin-right: 0.75em;
+}
+
+.wp-block-file__embed {
   margin-bottom: 1em;
 }
-.wp-block-file .wp-block-file__button {
-  background: #32373c;
+
+:where(.wp-block-file__button) {
   border-radius: 2em;
-  color: #fff;
-  font-size: 0.8em;
   padding: 0.5em 1em;
 }
-.wp-block-file a.wp-block-file__button {
-  text-decoration: none;
-}
-.wp-block-file a.wp-block-file__button:hover, .wp-block-file a.wp-block-file__button:visited, .wp-block-file a.wp-block-file__button:focus, .wp-block-file a.wp-block-file__button:active {
+:where(.wp-block-file__button):is(a):hover, :where(.wp-block-file__button):is(a):visited, :where(.wp-block-file__button):is(a):focus, :where(.wp-block-file__button):is(a):active {
   box-shadow: none;
   color: #fff;
   opacity: 0.85;
   text-decoration: none;
-}
-.wp-block-file * + .wp-block-file__button {
-  margin-right: 0.75em;
 }

package/build-style/file/style.css

@@ -77,6 +77,9 @@
 .wp-block-file {
   margin-bottom: 1.5em;
 }
+.wp-block-file:not(.wp-element-button) {
+  font-size: 0.8em;
+}
 .wp-block-file.aligncenter {
   text-align: center;
 }
@@ -84,25 +87,21 @@
   /*rtl:ignore*/
   text-align: right;
 }
-.wp-block-file .wp-block-file__embed {
+.wp-block-file * + .wp-block-file__button {
+  margin-left: 0.75em;
+}
+
+.wp-block-file__embed {
   margin-bottom: 1em;
 }
-.wp-block-file .wp-block-file__button {
-  background: #32373c;
+
+:where(.wp-block-file__button) {
   border-radius: 2em;
-  color: #fff;
-  font-size: 0.8em;
   padding: 0.5em 1em;
 }
-.wp-block-file a.wp-block-file__button {
-  text-decoration: none;
-}
-.wp-block-file a.wp-block-file__button:hover, .wp-block-file a.wp-block-file__button:visited, .wp-block-file a.wp-block-file__button:focus, .wp-block-file a.wp-block-file__button:active {
+:where(.wp-block-file__button):is(a):hover, :where(.wp-block-file__button):is(a):visited, :where(.wp-block-file__button):is(a):focus, :where(.wp-block-file__button):is(a):active {
   box-shadow: none;
   color: #fff;
   opacity: 0.85;
   text-decoration: none;
-}
-.wp-block-file * + .wp-block-file__button {
-  margin-left: 0.75em;
 }

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

@@ -157,8 +157,7 @@
   width: 100%;
   height: 100%;
   flex: 1;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item,
 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image,
@@ -347,8 +346,7 @@ figure.wp-block-gallery.has-nested-images {
   width: 100%;
   flex: 1 0 0%;
   height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) {
   width: 100%;