@wordpress/block-library 8.7.0 → 8.9.0

package/build-style/pullquote/style.css

@@ -87,7 +87,6 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 .wp-block-pullquote {
-  margin: 0 0 1em 0;
   padding: 3em 0;
   text-align: center;
   overflow-wrap: break-word;
@@ -109,6 +108,10 @@
   color: inherit;
 }
 
+:where(.wp-block-pullquote) {
+  margin: 0 0 1em 0;
+}
+
 .wp-block-pullquote.has-text-align-left blockquote {
   text-align: left;
 }

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

@@ -106,21 +106,17 @@
   max-height: 250px;
 }
 
-@media (min-width: 600px) {
-  .block-library-query-pattern__selection-modal .components-modal__frame {
-    width: calc(100% - 32px);
-    height: calc(100% - 120px);
-  }
+.block-library-query-pattern__selection-modal .block-editor-block-patterns-list {
+  column-count: 2;
+  column-gap: 24px;
 }
-@media (min-width: 782px) {
-  .block-library-query-pattern__selection-modal .components-modal__frame {
-    width: 750px;
+@media (min-width: 1280px) {
+  .block-library-query-pattern__selection-modal .block-editor-block-patterns-list {
+    column-count: 3;
   }
 }
-@media (min-width: 960px) {
-  .block-library-query-pattern__selection-modal .components-modal__frame {
-    height: 70%;
-  }
+.block-library-query-pattern__selection-modal .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
+  break-inside: avoid-column;
 }
 .block-library-query-pattern__selection-modal .block-library-query-pattern__selection-search {
   background: #fff;

package/build-style/query/editor.css

@@ -106,21 +106,17 @@
   max-height: 250px;
 }
 
-@media (min-width: 600px) {
-  .block-library-query-pattern__selection-modal .components-modal__frame {
-    width: calc(100% - 32px);
-    height: calc(100% - 120px);
-  }
+.block-library-query-pattern__selection-modal .block-editor-block-patterns-list {
+  column-count: 2;
+  column-gap: 24px;
 }
-@media (min-width: 782px) {
-  .block-library-query-pattern__selection-modal .components-modal__frame {
-    width: 750px;
+@media (min-width: 1280px) {
+  .block-library-query-pattern__selection-modal .block-editor-block-patterns-list {
+    column-count: 3;
   }
 }
-@media (min-width: 960px) {
-  .block-library-query-pattern__selection-modal .components-modal__frame {
-    height: 70%;
-  }
+.block-library-query-pattern__selection-modal .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
+  break-inside: avoid-column;
 }
 .block-library-query-pattern__selection-modal .block-library-query-pattern__selection-search {
   background: #fff;

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

@@ -124,6 +124,8 @@
   min-width: 3rem;
   border: 1px solid #949494;
   text-decoration: unset !important;
+  -webkit-appearance: initial;
+          appearance: initial;
 }
 
 .wp-block-search.wp-block-search__button-only .wp-block-search__button {

package/build-style/search/style.css

@@ -124,6 +124,8 @@
   min-width: 3rem;
   border: 1px solid #949494;
   text-decoration: unset !important;
+  -webkit-appearance: initial;
+          appearance: initial;
 }
 
 .wp-block-search.wp-block-search__button-only .wp-block-search__button {

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

@@ -86,50 +86,30 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-[data-type="core/shortcode"] .block-editor-plain-text {
-  max-height: 250px;
-}
 [data-type="core/shortcode"].components-placeholder {
   min-height: 0;
 }
 
 .blocks-shortcode__textarea {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  padding: 6px 8px;
-  box-shadow: 0 0 0 transparent;
-  transition: box-shadow 0.1s linear;
-  border-radius: 2px;
-  border: 1px solid #949494;
-  /* Fonts smaller than 16px causes mobile safari to zoom. */
-  font-size: 16px;
-  /* Override core line-height. To be reviewed. */
-  line-height: normal;
-}
-@media (prefers-reduced-motion: reduce) {
-  .blocks-shortcode__textarea {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
+  box-sizing: border-box;
+  max-height: 250px;
+  resize: none;
+  font-family: Menlo, Consolas, monaco, monospace !important;
+  color: #1e1e1e !important;
+  background: #fff !important;
+  padding: 12px !important;
+  border: 1px solid #1e1e1e !important;
+  box-shadow: none !important;
+  border-radius: 2px !important;
+  font-size: 16px !important;
 }
 @media (min-width: 600px) {
   .blocks-shortcode__textarea {
-    font-size: 13px;
-    /* Override core line-height. To be reviewed. */
-    line-height: normal;
+    font-size: 13px !important;
   }
 }
 .blocks-shortcode__textarea:focus {
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
-}
-.blocks-shortcode__textarea::-webkit-input-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-}
-.blocks-shortcode__textarea::-moz-placeholder {
-  opacity: 1;
-  color: rgba(30, 30, 30, 0.62);
-}
-.blocks-shortcode__textarea:-ms-input-placeholder {
-  color: rgba(30, 30, 30, 0.62);
+  border-color: var(--wp-admin-theme-color) !important;
+  box-shadow: 0 0 0 1px var(--wp-admin-theme-color) !important;
+  outline: 2px solid transparent !important;
 }

package/build-style/shortcode/editor.css

@@ -86,50 +86,30 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-[data-type="core/shortcode"] .block-editor-plain-text {
-  max-height: 250px;
-}
 [data-type="core/shortcode"].components-placeholder {
   min-height: 0;
 }
 
 .blocks-shortcode__textarea {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  padding: 6px 8px;
-  box-shadow: 0 0 0 transparent;
-  transition: box-shadow 0.1s linear;
-  border-radius: 2px;
-  border: 1px solid #949494;
-  /* Fonts smaller than 16px causes mobile safari to zoom. */
-  font-size: 16px;
-  /* Override core line-height. To be reviewed. */
-  line-height: normal;
-}
-@media (prefers-reduced-motion: reduce) {
-  .blocks-shortcode__textarea {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
+  box-sizing: border-box;
+  max-height: 250px;
+  resize: none;
+  font-family: Menlo, Consolas, monaco, monospace !important;
+  color: #1e1e1e !important;
+  background: #fff !important;
+  padding: 12px !important;
+  border: 1px solid #1e1e1e !important;
+  box-shadow: none !important;
+  border-radius: 2px !important;
+  font-size: 16px !important;
 }
 @media (min-width: 600px) {
   .blocks-shortcode__textarea {
-    font-size: 13px;
-    /* Override core line-height. To be reviewed. */
-    line-height: normal;
+    font-size: 13px !important;
   }
 }
 .blocks-shortcode__textarea:focus {
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
-}
-.blocks-shortcode__textarea::-webkit-input-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-}
-.blocks-shortcode__textarea::-moz-placeholder {
-  opacity: 1;
-  color: rgba(30, 30, 30, 0.62);
-}
-.blocks-shortcode__textarea:-ms-input-placeholder {
-  color: rgba(30, 30, 30, 0.62);
+  border-color: var(--wp-admin-theme-color) !important;
+  box-shadow: 0 0 0 1px var(--wp-admin-theme-color) !important;
+  outline: 2px solid transparent !important;
 }

package/build-style/site-logo/editor-rtl.css

@@ -152,4 +152,50 @@
 }
 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-button.components-button > svg {
   color: inherit;
+}
+
+.block-library-site-logo__inspector-upload-container {
+  position: relative;
+}
+.block-library-site-logo__inspector-upload-container .components-drop-zone__content-icon {
+  display: none;
+}
+
+.block-library-site-logo__inspector-upload-container button.components-button,
+.block-library-site-logo__inspector-media-replace-container button.components-button {
+  color: #1e1e1e;
+  box-shadow: inset 0 0 0 1px #ccc;
+  width: 100%;
+  display: block;
+  height: 40px;
+}
+.block-library-site-logo__inspector-upload-container button.components-button:hover,
+.block-library-site-logo__inspector-media-replace-container button.components-button:hover {
+  color: var(--wp-admin-theme-color);
+}
+.block-library-site-logo__inspector-upload-container button.components-button:focus,
+.block-library-site-logo__inspector-media-replace-container button.components-button:focus {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.block-library-site-logo__inspector-upload-container .block-library-site-logo__inspector-media-replace-title,
+.block-library-site-logo__inspector-media-replace-container .block-library-site-logo__inspector-media-replace-title {
+  word-break: break-all;
+  white-space: normal;
+  text-align: start;
+  text-align-last: center;
+}
+
+.block-library-site-logo__inspector-media-replace-container .components-dropdown {
+  display: block;
+}
+.block-library-site-logo__inspector-media-replace-container img {
+  width: 20px;
+  aspect-ratio: 1;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+  border-radius: 50% !important;
+}
+.block-library-site-logo__inspector-media-replace-container .block-library-site-logo__inspector-readonly-logo-preview {
+  padding: 6px 12px;
+  display: flex;
+  height: 40px;
 }

package/build-style/site-logo/editor.css

@@ -152,4 +152,50 @@
 }
 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-button.components-button > svg {
   color: inherit;
+}
+
+.block-library-site-logo__inspector-upload-container {
+  position: relative;
+}
+.block-library-site-logo__inspector-upload-container .components-drop-zone__content-icon {
+  display: none;
+}
+
+.block-library-site-logo__inspector-upload-container button.components-button,
+.block-library-site-logo__inspector-media-replace-container button.components-button {
+  color: #1e1e1e;
+  box-shadow: inset 0 0 0 1px #ccc;
+  width: 100%;
+  display: block;
+  height: 40px;
+}
+.block-library-site-logo__inspector-upload-container button.components-button:hover,
+.block-library-site-logo__inspector-media-replace-container button.components-button:hover {
+  color: var(--wp-admin-theme-color);
+}
+.block-library-site-logo__inspector-upload-container button.components-button:focus,
+.block-library-site-logo__inspector-media-replace-container button.components-button:focus {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.block-library-site-logo__inspector-upload-container .block-library-site-logo__inspector-media-replace-title,
+.block-library-site-logo__inspector-media-replace-container .block-library-site-logo__inspector-media-replace-title {
+  word-break: break-all;
+  white-space: normal;
+  text-align: start;
+  text-align-last: center;
+}
+
+.block-library-site-logo__inspector-media-replace-container .components-dropdown {
+  display: block;
+}
+.block-library-site-logo__inspector-media-replace-container img {
+  width: 20px;
+  aspect-ratio: 1;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+  border-radius: 50% !important;
+}
+.block-library-site-logo__inspector-media-replace-container .block-library-site-logo__inspector-readonly-logo-preview {
+  padding: 6px 12px;
+  display: flex;
+  height: 40px;
 }

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

@@ -98,11 +98,13 @@
 }
 
 .wp-block-spacer.is-hovered .block-library-spacer__resize-container,
-.block-library-spacer__resize-container.has-show-handle {
+.block-library-spacer__resize-container.has-show-handle,
+.wp-block-spacer.is-selected.custom-sizes-disabled {
   background: rgba(0, 0, 0, 0.1);
 }
 .is-dark-theme .wp-block-spacer.is-hovered .block-library-spacer__resize-container,
-.is-dark-theme .block-library-spacer__resize-container.has-show-handle {
+.is-dark-theme .block-library-spacer__resize-container.has-show-handle,
+.is-dark-theme .wp-block-spacer.is-selected.custom-sizes-disabled {
   background: rgba(255, 255, 255, 0.15);
 }
 

package/build-style/spacer/editor.css

@@ -98,11 +98,13 @@
 }
 
 .wp-block-spacer.is-hovered .block-library-spacer__resize-container,
-.block-library-spacer__resize-container.has-show-handle {
+.block-library-spacer__resize-container.has-show-handle,
+.wp-block-spacer.is-selected.custom-sizes-disabled {
   background: rgba(0, 0, 0, 0.1);
 }
 .is-dark-theme .wp-block-spacer.is-hovered .block-library-spacer__resize-container,
-.is-dark-theme .block-library-spacer__resize-container.has-show-handle {
+.is-dark-theme .block-library-spacer__resize-container.has-show-handle,
+.is-dark-theme .wp-block-spacer.is-selected.custom-sizes-disabled {
   background: rgba(255, 255, 255, 0.15);
 }
 

package/build-style/style-rtl.css

@@ -353,7 +353,6 @@
 
 .wp-block-columns {
   display: flex;
-  margin-bottom: 1.75em;
   box-sizing: border-box;
   flex-wrap: wrap !important;
   align-items: initial !important;
@@ -400,6 +399,10 @@
   flex-grow: 0;
 }
 
+:where(.wp-block-columns) {
+  margin-bottom: 1.75em;
+}
+
 :where(.wp-block-columns.has-background) {
   padding: 1.25em 2.375em;
 }
@@ -920,7 +923,7 @@ video.wp-block-cover__video-background.has-parallax {
   background-size: cover;
   background-repeat: no-repeat;
 }
-@supports (-webkit-overflow-scrolling: touch) {
+@supports (-webkit-touch-callout: inherit) {
   .wp-block-cover-image.has-parallax,
 .wp-block-cover.has-parallax,
 .wp-block-cover__image-background.has-parallax,
@@ -1015,6 +1018,14 @@ section.wp-block-cover-image > h2,
   color: #000;
 }
 
+.wp-block-details {
+  overflow: hidden;
+}
+
+.wp-block-details-summary {
+  cursor: pointer;
+}
+
 .wp-block[data-align=left] > [data-type="core/embed"],
 .wp-block[data-align=right] > [data-type="core/embed"],
 .wp-block-embed.alignleft,
@@ -1086,9 +1097,6 @@ section.wp-block-cover-image > h2,
   padding-top: 200%;
 }
 
-.wp-block-file {
-  margin-bottom: 1.5em;
-}
 .wp-block-file:not(.wp-element-button) {
   font-size: 0.8em;
 }
@@ -1102,6 +1110,10 @@ section.wp-block-cover-image > h2,
   margin-right: 0.75em;
 }
 
+:where(.wp-block-file) {
+  margin-bottom: 1.5em;
+}
+
 .wp-block-file__embed {
   margin-bottom: 1em;
 }
@@ -2495,7 +2507,7 @@ p.has-background {
   box-sizing: border-box;
 }
 
-.wp-block-post-excerpt {
+:where(.wp-block-post-excerpt) {
   margin-top: var(--wp--style--block-gap);
   margin-bottom: var(--wp--style--block-gap);
 }
@@ -2621,7 +2633,6 @@ p.has-background {
 }
 
 .wp-block-pullquote {
-  margin: 0 0 1em 0;
   padding: 3em 0;
   text-align: center;
   overflow-wrap: break-word;
@@ -2643,6 +2654,10 @@ p.has-background {
   color: inherit;
 }
 
+:where(.wp-block-pullquote) {
+  margin: 0 0 1em 0;
+}
+
 .wp-block-pullquote.has-text-align-left blockquote {
   text-align: right;
 }
@@ -2867,6 +2882,8 @@ ul.wp-block-rss.is-grid li {
   min-width: 3rem;
   border: 1px solid #949494;
   text-decoration: unset !important;
+  -webkit-appearance: initial;
+          appearance: initial;
 }
 
 .wp-block-search.wp-block-search__button-only .wp-block-search__button {
@@ -3748,7 +3765,7 @@ html :where(img[class*="wp-image-"]) {
 /**
  * Reset user agent styles for figure element margins.
  */
-figure {
+:where(figure) {
   margin: 0 0 1em 0;
 }
 

package/build-style/style.css

@@ -356,7 +356,6 @@
 
 .wp-block-columns {
   display: flex;
-  margin-bottom: 1.75em;
   box-sizing: border-box;
   flex-wrap: wrap !important;
   align-items: initial !important;
@@ -403,6 +402,10 @@
   flex-grow: 0;
 }
 
+:where(.wp-block-columns) {
+  margin-bottom: 1.75em;
+}
+
 :where(.wp-block-columns.has-background) {
   padding: 1.25em 2.375em;
 }
@@ -927,7 +930,7 @@ video.wp-block-cover__video-background.has-parallax {
   background-size: cover;
   background-repeat: no-repeat;
 }
-@supports (-webkit-overflow-scrolling: touch) {
+@supports (-webkit-touch-callout: inherit) {
   .wp-block-cover-image.has-parallax,
 .wp-block-cover.has-parallax,
 .wp-block-cover__image-background.has-parallax,
@@ -1022,6 +1025,14 @@ section.wp-block-cover-image > h2,
   color: #000;
 }
 
+.wp-block-details {
+  overflow: hidden;
+}
+
+.wp-block-details-summary {
+  cursor: pointer;
+}
+
 .wp-block[data-align=left] > [data-type="core/embed"],
 .wp-block[data-align=right] > [data-type="core/embed"],
 .wp-block-embed.alignleft,
@@ -1093,9 +1104,6 @@ section.wp-block-cover-image > h2,
   padding-top: 200%;
 }
 
-.wp-block-file {
-  margin-bottom: 1.5em;
-}
 .wp-block-file:not(.wp-element-button) {
   font-size: 0.8em;
 }
@@ -1110,6 +1118,10 @@ section.wp-block-cover-image > h2,
   margin-left: 0.75em;
 }
 
+:where(.wp-block-file) {
+  margin-bottom: 1.5em;
+}
+
 .wp-block-file__embed {
   margin-bottom: 1em;
 }
@@ -2525,7 +2537,7 @@ p.has-background {
   box-sizing: border-box;
 }
 
-.wp-block-post-excerpt {
+:where(.wp-block-post-excerpt) {
   margin-top: var(--wp--style--block-gap);
   margin-bottom: var(--wp--style--block-gap);
 }
@@ -2651,7 +2663,6 @@ p.has-background {
 }
 
 .wp-block-pullquote {
-  margin: 0 0 1em 0;
   padding: 3em 0;
   text-align: center;
   overflow-wrap: break-word;
@@ -2673,6 +2684,10 @@ p.has-background {
   color: inherit;
 }
 
+:where(.wp-block-pullquote) {
+  margin: 0 0 1em 0;
+}
+
 .wp-block-pullquote.has-text-align-left blockquote {
   text-align: left;
 }
@@ -2901,6 +2916,8 @@ ul.wp-block-rss.is-grid li {
   min-width: 3rem;
   border: 1px solid #949494;
   text-decoration: unset !important;
+  -webkit-appearance: initial;
+          appearance: initial;
 }
 
 .wp-block-search.wp-block-search__button-only .wp-block-search__button {
@@ -3785,7 +3802,7 @@ html :where(img[class*="wp-image-"]) {
 /**
  * Reset user agent styles for figure element margins.
  */
-figure {
+:where(figure) {
   margin: 0 0 1em 0;
 }
 

package/build-style/template-part/editor-rtl.css

@@ -89,21 +89,17 @@
 .block-editor-template-part__selection-modal {
   z-index: 1000001;
 }
-@media (min-width: 600px) {
-  .block-editor-template-part__selection-modal .components-modal__frame {
-    width: calc(100% - 32px);
-    height: calc(100% - 120px);
-  }
+.block-editor-template-part__selection-modal .block-editor-block-patterns-list {
+  column-count: 2;
+  column-gap: 24px;
 }
-@media (min-width: 782px) {
-  .block-editor-template-part__selection-modal .components-modal__frame {
-    width: 750px;
+@media (min-width: 1280px) {
+  .block-editor-template-part__selection-modal .block-editor-block-patterns-list {
+    column-count: 3;
   }
 }
-@media (min-width: 960px) {
-  .block-editor-template-part__selection-modal .components-modal__frame {
-    height: 70%;
-  }
+.block-editor-template-part__selection-modal .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
+  break-inside: avoid-column;
 }
 
 .block-library-template-part__selection-search {

package/build-style/template-part/editor.css

@@ -89,21 +89,17 @@
 .block-editor-template-part__selection-modal {
   z-index: 1000001;
 }
-@media (min-width: 600px) {
-  .block-editor-template-part__selection-modal .components-modal__frame {
-    width: calc(100% - 32px);
-    height: calc(100% - 120px);
-  }
+.block-editor-template-part__selection-modal .block-editor-block-patterns-list {
+  column-count: 2;
+  column-gap: 24px;
 }
-@media (min-width: 782px) {
-  .block-editor-template-part__selection-modal .components-modal__frame {
-    width: 750px;
+@media (min-width: 1280px) {
+  .block-editor-template-part__selection-modal .block-editor-block-patterns-list {
+    column-count: 3;
   }
 }
-@media (min-width: 960px) {
-  .block-editor-template-part__selection-modal .components-modal__frame {
-    height: 70%;
-  }
+.block-editor-template-part__selection-modal .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
+  break-inside: avoid-column;
 }
 
 .block-library-template-part__selection-search {