@wordpress/block-library 8.6.0 → 8.8.0

package/build-style/editor-rtl.css

@@ -289,6 +289,11 @@ div[data-type="core/button"] {
   margin-top: 6px;
 }
 
+/* Center alignment for classic themes. */
+[data-align=center] .wp-block-categories {
+  text-align: center;
+}
+
 .wp-block-code code {
   background: none;
 }
@@ -485,20 +490,18 @@ html :where(.wp-block-column) {
   box-sizing: border-box;
 }
 .wp-block-cover.is-placeholder {
-  min-height: auto !important;
   padding: 0 !important;
-}
-.wp-block-cover.is-placeholder .block-library-cover__resize-container {
-  display: none;
+  display: flex;
+  align-items: stretch;
+  overflow: visible;
+  min-height: 240px;
 }
 .wp-block-cover.is-placeholder .components-placeholder.is-large {
-  min-height: 240px;
   justify-content: flex-start;
-  z-index: 1;
+  z-index: 32;
 }
-.wp-block-cover.is-placeholder .components-placeholder.is-large + .block-library-cover__resize-container {
-  min-height: 240px;
-  display: block;
+.wp-block-cover.is-placeholder:focus::after {
+  min-height: auto;
 }
 .wp-block-cover.components-placeholder h2 {
   color: inherit;
@@ -509,7 +512,7 @@ html :where(.wp-block-column) {
 }
 .wp-block-cover .components-spinner {
   position: absolute;
-  z-index: 1;
+  z-index: 32;
   top: 50%;
   right: 50%;
   transform: translate(50%, -50%);
@@ -550,8 +553,9 @@ html :where(.wp-block-column) {
   min-height: 50px;
 }
 
-.block-library-cover__resize-container:not(.is-resizing) {
-  height: auto !important;
+.components-popover.block-editor-block-popover.block-library-cover__resizable-box-popover .components-popover__content > div,
+.components-popover.block-editor-block-popover.block-library-cover__resizable-box-popover .block-library-cover__resize-container {
+  pointer-events: none;
 }
 
 .wp-block-cover > .components-drop-zone .components-drop-zone__content {
@@ -570,6 +574,10 @@ html :where(.wp-block-column) {
   min-height: auto;
 }
 
+.wp-block-details-summary div {
+  display: inline;
+}
+
 .wp-block-embed {
   margin-right: 0;
   margin-left: 0;
@@ -2285,52 +2293,33 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   border: none;
 }
 
-[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;
+  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;
+  box-sizing: border-box;
+  max-height: 250px;
+  resize: none;
   /* 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;
-  }
+  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;
 }
 
 .wp-block[data-align=center] > .wp-block-site-logo,
@@ -2538,11 +2527,13 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 }
 
 .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);
 }
 
@@ -2861,6 +2852,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   justify-content: center;
   align-items: center;
   padding: 0;
+  display: flex;
   min-height: 200px;
 }
 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-form-file-upload,

package/build-style/editor.css

@@ -290,6 +290,11 @@ div[data-type="core/button"] {
   margin-top: 6px;
 }
 
+/* Center alignment for classic themes. */
+[data-align=center] .wp-block-categories {
+  text-align: center;
+}
+
 .wp-block-code code {
   background: none;
 }
@@ -489,20 +494,18 @@ html :where(.wp-block-column) {
   box-sizing: border-box;
 }
 .wp-block-cover.is-placeholder {
-  min-height: auto !important;
   padding: 0 !important;
-}
-.wp-block-cover.is-placeholder .block-library-cover__resize-container {
-  display: none;
+  display: flex;
+  align-items: stretch;
+  overflow: visible;
+  min-height: 240px;
 }
 .wp-block-cover.is-placeholder .components-placeholder.is-large {
-  min-height: 240px;
   justify-content: flex-start;
-  z-index: 1;
+  z-index: 32;
 }
-.wp-block-cover.is-placeholder .components-placeholder.is-large + .block-library-cover__resize-container {
-  min-height: 240px;
-  display: block;
+.wp-block-cover.is-placeholder:focus::after {
+  min-height: auto;
 }
 .wp-block-cover.components-placeholder h2 {
   color: inherit;
@@ -513,7 +516,7 @@ html :where(.wp-block-column) {
 }
 .wp-block-cover .components-spinner {
   position: absolute;
-  z-index: 1;
+  z-index: 32;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -554,8 +557,9 @@ html :where(.wp-block-column) {
   min-height: 50px;
 }
 
-.block-library-cover__resize-container:not(.is-resizing) {
-  height: auto !important;
+.components-popover.block-editor-block-popover.block-library-cover__resizable-box-popover .components-popover__content > div,
+.components-popover.block-editor-block-popover.block-library-cover__resizable-box-popover .block-library-cover__resize-container {
+  pointer-events: none;
 }
 
 .wp-block-cover > .components-drop-zone .components-drop-zone__content {
@@ -574,6 +578,10 @@ html :where(.wp-block-column) {
   min-height: auto;
 }
 
+.wp-block-details-summary div {
+  display: inline;
+}
+
 .wp-block-embed {
   margin-left: 0;
   margin-right: 0;
@@ -2293,52 +2301,33 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   border: none;
 }
 
-[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;
+  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;
+  box-sizing: border-box;
+  max-height: 250px;
+  resize: none;
   /* 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;
-  }
+  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;
 }
 
 .wp-block[data-align=center] > .wp-block-site-logo,
@@ -2546,11 +2535,13 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 }
 
 .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);
 }
 
@@ -2872,6 +2863,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   justify-content: center;
   align-items: center;
   padding: 0;
+  display: flex;
   min-height: 200px;
 }
 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-form-file-upload,

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

@@ -86,9 +86,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-file {
-  margin-bottom: 1.5em;
-}
 .wp-block-file:not(.wp-element-button) {
   font-size: 0.8em;
 }
@@ -102,6 +99,10 @@
   margin-right: 0.75em;
 }
 
+:where(.wp-block-file) {
+  margin-bottom: 1.5em;
+}
+
 .wp-block-file__embed {
   margin-bottom: 1em;
 }

package/build-style/file/style.css

@@ -86,9 +86,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-file {
-  margin-bottom: 1.5em;
-}
 .wp-block-file:not(.wp-element-button) {
   font-size: 0.8em;
 }
@@ -103,6 +100,10 @@
   margin-left: 0.75em;
 }
 
+:where(.wp-block-file) {
+  margin-bottom: 1.5em;
+}
+
 .wp-block-file__embed {
   margin-bottom: 1em;
 }

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

@@ -564,6 +564,8 @@ button.wp-block-navigation-item__content {
 
 .wp-block-navigation__responsive-close {
   width: 100%;
+}
+.has-modal-open .wp-block-navigation__responsive-close {
   max-width: var(--wp--style--global--wide-size, 100%);
   margin-right: auto;
   margin-left: auto;

package/build-style/navigation/style.css

@@ -564,6 +564,8 @@ button.wp-block-navigation-item__content {
 
 .wp-block-navigation__responsive-close {
   width: 100%;
+}
+.has-modal-open .wp-block-navigation__responsive-close {
   max-width: var(--wp--style--global--wide-size, 100%);
   margin-left: auto;
   margin-right: auto;

package/build-style/post-excerpt/style-rtl.css

@@ -86,7 +86,7 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-post-excerpt {
+:where(.wp-block-post-excerpt) {
   margin-top: var(--wp--style--block-gap);
   margin-bottom: var(--wp--style--block-gap);
 }

package/build-style/post-excerpt/style.css

@@ -86,7 +86,7 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-post-excerpt {
+:where(.wp-block-post-excerpt) {
   margin-top: var(--wp--style--block-gap);
   margin-bottom: var(--wp--style--block-gap);
 }

package/build-style/post-featured-image/editor-rtl.css

@@ -96,6 +96,7 @@
   justify-content: center;
   align-items: center;
   padding: 0;
+  display: flex;
   min-height: 200px;
 }
 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-form-file-upload,

package/build-style/post-featured-image/editor.css

@@ -96,6 +96,7 @@
   justify-content: center;
   align-items: center;
   padding: 0;
+  display: flex;
   min-height: 200px;
 }
 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-form-file-upload,

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

@@ -102,7 +102,7 @@
   flex-wrap: wrap;
   gap: 1.25em;
 }
-.wp-block-post-template.is-flex-container li {
+.wp-block-post-template.is-flex-container > li {
   margin: 0;
   width: 100%;
 }

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

@@ -102,7 +102,7 @@
   flex-wrap: wrap;
   gap: 1.25em;
 }
-.wp-block-post-template.is-flex-container li {
+.wp-block-post-template.is-flex-container > li {
   margin: 0;
   width: 100%;
 }

package/build-style/post-time-to-read/style-rtl.css

@@ -0,0 +1,91 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * 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.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * 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
+*/
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * 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.
+ */
+.wp-block-post-time-to-read {
+  box-sizing: border-box;
+}

package/build-style/post-time-to-read/style.css

@@ -0,0 +1,91 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * 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.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * 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
+*/
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * 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.
+ */
+.wp-block-post-time-to-read {
+  box-sizing: border-box;
+}

package/build-style/pullquote/style-rtl.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: right;
 }

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;
 }