@wordpress/block-library 10.3.0 → 10.5.0

package/build-style/form-input/style-rtl.css

@@ -1,32 +1,32 @@
-.wp-block-form-input__label {
+:where(.wp-block-form-input__label) {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 0.25em;
   margin-bottom: 0.5em;
 }
-.wp-block-form-input__label.is-label-inline {
+:where(.wp-block-form-input__label).is-label-inline {
   flex-direction: row;
   gap: 0.5em;
   align-items: center;
 }
-.wp-block-form-input__label.is-label-inline .wp-block-form-input__label-content {
+:where(.wp-block-form-input__label).is-label-inline .wp-block-form-input__label-content {
   margin-bottom: 0.5em;
 }
-.wp-block-form-input__label:has(input[type=checkbox]) {
+:where(.wp-block-form-input__label):has(input[type=checkbox]) {
   flex-direction: row;
   width: -moz-fit-content;
   width: fit-content;
 }
-.wp-block-form-input__label:has(input[type=checkbox]) .wp-block-form-input__label-content {
+:where(.wp-block-form-input__label):has(input[type=checkbox]) .wp-block-form-input__label-content {
   margin: 0;
 }
-.wp-block-form-input__label:has(.wp-block-form-input__label-content + input[type=checkbox]) {
+:where(.wp-block-form-input__label):has(.wp-block-form-input__label-content + input[type=checkbox]) {
   /* stylelint-disable-next-line declaration-property-value-allowed-list -- This style is required for old markup. */
   flex-direction: row-reverse;
 }
 
-.wp-block-form-input__label-content {
+:where(.wp-block-form-input__label-content) {
   width: -moz-fit-content;
   width: fit-content;
 }

package/build-style/form-input/style.css

@@ -1,32 +1,32 @@
-.wp-block-form-input__label {
+:where(.wp-block-form-input__label) {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 0.25em;
   margin-bottom: 0.5em;
 }
-.wp-block-form-input__label.is-label-inline {
+:where(.wp-block-form-input__label).is-label-inline {
   flex-direction: row;
   gap: 0.5em;
   align-items: center;
 }
-.wp-block-form-input__label.is-label-inline .wp-block-form-input__label-content {
+:where(.wp-block-form-input__label).is-label-inline .wp-block-form-input__label-content {
   margin-bottom: 0.5em;
 }
-.wp-block-form-input__label:has(input[type=checkbox]) {
+:where(.wp-block-form-input__label):has(input[type=checkbox]) {
   flex-direction: row;
   width: -moz-fit-content;
   width: fit-content;
 }
-.wp-block-form-input__label:has(input[type=checkbox]) .wp-block-form-input__label-content {
+:where(.wp-block-form-input__label):has(input[type=checkbox]) .wp-block-form-input__label-content {
   margin: 0;
 }
-.wp-block-form-input__label:has(.wp-block-form-input__label-content + input[type=checkbox]) {
+:where(.wp-block-form-input__label):has(.wp-block-form-input__label-content + input[type=checkbox]) {
   /* stylelint-disable-next-line declaration-property-value-allowed-list -- This style is required for old markup. */
   flex-direction: row-reverse;
 }
 
-.wp-block-form-input__label-content {
+:where(.wp-block-form-input__label-content) {
   width: -moz-fit-content;
   width: fit-content;
 }

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

@@ -1,3 +1,14 @@
+:where(.wp-block-navigation-overlay-close) {
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  text-transform: inherit;
+}
+
 .wp-block-navigation-overlay-close {
   display: inline-flex;
   align-items: center;

package/build-style/navigation-overlay-close/style.css

@@ -1,3 +1,14 @@
+:where(.wp-block-navigation-overlay-close) {
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  text-transform: inherit;
+}
+
 .wp-block-navigation-overlay-close {
   display: inline-flex;
   align-items: center;

package/build-style/page-list/editor-rtl.css

@@ -1,9 +1,3 @@
-/**
- * Breakpoints & Media Queries
- */
-/**
- * Typography
- */
 /**
  * SCSS Variables.
  *
@@ -49,50 +43,6 @@
  * 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.
- */
-/**
- * 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
- */
-/**
- * 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.
- */
-/**
- * Creates a checkerboard pattern background to indicate transparency.
- * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
- */
 .wp-block-navigation.items-justified-space-between .wp-block-page-list > div,
 .wp-block-navigation.items-justified-space-between .wp-block-page-list {
   display: contents;
@@ -110,18 +60,6 @@
   pointer-events: none;
 }
 
-@media (min-width: 600px) {
-  .wp-block-page-list-modal {
-    max-width: 480px;
-  }
-}
-
-.wp-block-page-list-modal-buttons {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-}
-
 .wp-block-page-list .open-on-click:focus-within > .wp-block-navigation__submenu-container {
   visibility: visible;
   opacity: 1;

package/build-style/page-list/editor.css

@@ -1,9 +1,3 @@
-/**
- * Breakpoints & Media Queries
- */
-/**
- * Typography
- */
 /**
  * SCSS Variables.
  *
@@ -49,50 +43,6 @@
  * 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.
- */
-/**
- * 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
- */
-/**
- * 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.
- */
-/**
- * Creates a checkerboard pattern background to indicate transparency.
- * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
- */
 .wp-block-navigation.items-justified-space-between .wp-block-page-list > div,
 .wp-block-navigation.items-justified-space-between .wp-block-page-list {
   display: contents;
@@ -110,18 +60,6 @@
   pointer-events: none;
 }
 
-@media (min-width: 600px) {
-  .wp-block-page-list-modal {
-    max-width: 480px;
-  }
-}
-
-.wp-block-page-list-modal-buttons {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-}
-
 .wp-block-page-list .open-on-click:focus-within > .wp-block-navigation__submenu-container {
   visibility: visible;
   opacity: 1;

package/build-style/post-author-biography/style-rtl.css

@@ -1,4 +1,5 @@
 .wp-block-post-author-biography {
   box-sizing: border-box;
   white-space: pre-wrap;
+  overflow-wrap: break-word;
 }

package/build-style/post-author-biography/style.css

@@ -1,4 +1,5 @@
 .wp-block-post-author-biography {
   box-sizing: border-box;
   white-space: pre-wrap;
+  overflow-wrap: break-word;
 }

package/build-style/post-comments-form/style-rtl.css

@@ -49,12 +49,6 @@
   box-sizing: border-box;
   width: 100%;
 }
-.wp-block-post-comments-form .comment-form-author label,
-.wp-block-post-comments-form .comment-form-email label,
-.wp-block-post-comments-form .comment-form-url label {
-  display: block;
-  margin-bottom: 0.25em;
-}
 .wp-block-post-comments-form .comment-form-cookies-consent {
   display: flex;
   gap: 0.25em;
@@ -68,4 +62,11 @@
 .wp-block-post-comments-form .comment-reply-title :where(small) {
   font-size: var(--wp--preset--font-size--medium, smaller);
   margin-right: 0.5em;
+}
+
+:where(.wp-block-post-comments-form .comment-form-author label),
+:where(.wp-block-post-comments-form .comment-form-email label),
+:where(.wp-block-post-comments-form .comment-form-url label) {
+  display: block;
+  margin-bottom: 0.25em;
 }

package/build-style/post-comments-form/style.css

@@ -49,12 +49,6 @@
   box-sizing: border-box;
   width: 100%;
 }
-.wp-block-post-comments-form .comment-form-author label,
-.wp-block-post-comments-form .comment-form-email label,
-.wp-block-post-comments-form .comment-form-url label {
-  display: block;
-  margin-bottom: 0.25em;
-}
 .wp-block-post-comments-form .comment-form-cookies-consent {
   display: flex;
   gap: 0.25em;
@@ -68,4 +62,11 @@
 .wp-block-post-comments-form .comment-reply-title :where(small) {
   font-size: var(--wp--preset--font-size--medium, smaller);
   margin-left: 0.5em;
+}
+
+:where(.wp-block-post-comments-form .comment-form-author label),
+:where(.wp-block-post-comments-form .comment-form-email label),
+:where(.wp-block-post-comments-form .comment-form-url label) {
+  display: block;
+  margin-bottom: 0.25em;
 }

package/build-style/query-no-results/style-rtl.css

@@ -0,0 +1,3 @@
+:where(.wp-block-query-no-results) {
+  box-sizing: border-box;
+}

package/build-style/query-no-results/style.css

@@ -0,0 +1,3 @@
+:where(.wp-block-query-no-results) {
+  box-sizing: border-box;
+}

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

@@ -71,7 +71,7 @@
   max-width: 100%;
 }
 
-.wp-block-search__label {
+:where(.wp-block-search__label) {
   width: 100%;
 }
 

package/build-style/search/style.css

@@ -71,7 +71,7 @@
   max-width: 100%;
 }
 
-.wp-block-search__label {
+:where(.wp-block-search__label) {
   width: 100%;
 }
 

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

@@ -1,4 +1,4 @@
-.wp-block-search .wp-block-search__label {
+:where(.wp-block-search .wp-block-search__label) {
   font-weight: bold;
 }
 

package/build-style/search/theme.css

@@ -1,4 +1,4 @@
-.wp-block-search .wp-block-search__label {
+:where(.wp-block-search .wp-block-search__label) {
   font-weight: bold;
 }
 

package/build-style/style-rtl.css

@@ -420,7 +420,8 @@
 .wp-block-categories.wp-block-categories-dropdown.aligncenter {
   text-align: center;
 }
-.wp-block-categories .wp-block-categories__label:not(.screen-reader-text) {
+
+:where(.wp-block-categories__label:not(.screen-reader-text)) {
   width: 100%;
   display: block;
 }
@@ -589,13 +590,6 @@
 .wp-block-post-comments .comment-body .commentmetadata {
   font-size: 0.875em;
 }
-.wp-block-post-comments .comment-form-comment label,
-.wp-block-post-comments .comment-form-author label,
-.wp-block-post-comments .comment-form-email label,
-.wp-block-post-comments .comment-form-url label {
-  display: block;
-  margin-bottom: 0.25em;
-}
 .wp-block-post-comments .comment-form textarea,
 .wp-block-post-comments .comment-form input:not([type=submit]):not([type=checkbox]) {
   display: block;
@@ -631,6 +625,14 @@
   padding: calc(0.667em + 2px);
 }
 
+:where(.wp-block-post-comments .comment-form-comment label),
+:where(.wp-block-post-comments .comment-form-author label),
+:where(.wp-block-post-comments .comment-form-email label),
+:where(.wp-block-post-comments .comment-form-url label) {
+  display: block;
+  margin-bottom: 0.25em;
+}
+
 :where(.wp-block-post-comments input[type=submit]) {
   border: none;
 }
@@ -1303,35 +1305,35 @@ body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-blo
   text-decoration: none;
 }
 
-.wp-block-form-input__label {
+:where(.wp-block-form-input__label) {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 0.25em;
   margin-bottom: 0.5em;
 }
-.wp-block-form-input__label.is-label-inline {
+:where(.wp-block-form-input__label).is-label-inline {
   flex-direction: row;
   gap: 0.5em;
   align-items: center;
 }
-.wp-block-form-input__label.is-label-inline .wp-block-form-input__label-content {
+:where(.wp-block-form-input__label).is-label-inline .wp-block-form-input__label-content {
   margin-bottom: 0.5em;
 }
-.wp-block-form-input__label:has(input[type=checkbox]) {
+:where(.wp-block-form-input__label):has(input[type=checkbox]) {
   flex-direction: row;
   width: -moz-fit-content;
   width: fit-content;
 }
-.wp-block-form-input__label:has(input[type=checkbox]) .wp-block-form-input__label-content {
+:where(.wp-block-form-input__label):has(input[type=checkbox]) .wp-block-form-input__label-content {
   margin: 0;
 }
-.wp-block-form-input__label:has(.wp-block-form-input__label-content + input[type=checkbox]) {
+:where(.wp-block-form-input__label):has(.wp-block-form-input__label-content + input[type=checkbox]) {
   /* stylelint-disable-next-line declaration-property-value-allowed-list -- This style is required for old markup. */
   flex-direction: row-reverse;
 }
 
-.wp-block-form-input__label-content {
+:where(.wp-block-form-input__label-content) {
   width: -moz-fit-content;
   width: fit-content;
 }
@@ -3109,6 +3111,17 @@ html.has-modal-open {
   text-transform: uppercase;
 }
 
+:where(.wp-block-navigation-overlay-close) {
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  text-transform: inherit;
+}
+
 .wp-block-navigation-overlay-close {
   display: inline-flex;
   align-items: center;
@@ -3849,6 +3862,7 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
 .wp-block-post-author-biography {
   box-sizing: border-box;
   white-space: pre-wrap;
+  overflow-wrap: break-word;
 }
 
 :where(.wp-block-post-comments-form textarea),
@@ -3899,12 +3913,6 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   box-sizing: border-box;
   width: 100%;
 }
-.wp-block-post-comments-form .comment-form-author label,
-.wp-block-post-comments-form .comment-form-email label,
-.wp-block-post-comments-form .comment-form-url label {
-  display: block;
-  margin-bottom: 0.25em;
-}
 .wp-block-post-comments-form .comment-form-cookies-consent {
   display: flex;
   gap: 0.25em;
@@ -3920,6 +3928,13 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   margin-right: 0.5em;
 }
 
+:where(.wp-block-post-comments-form .comment-form-author label),
+:where(.wp-block-post-comments-form .comment-form-email label),
+:where(.wp-block-post-comments-form .comment-form-url label) {
+  display: block;
+  margin-bottom: 0.25em;
+}
+
 .wp-block-post-comments-count {
   box-sizing: border-box;
 }
@@ -4207,6 +4222,10 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   margin-inline-end: auto;
 }
 
+:where(.wp-block-query-no-results) {
+  box-sizing: border-box;
+}
+
 .wp-block-query-pagination.is-content-justification-space-between > .wp-block-query-pagination-next:last-of-type {
   margin-inline-start: auto;
 }
@@ -4347,7 +4366,7 @@ ul.wp-block-rss.is-grid li {
   max-width: 100%;
 }
 
-.wp-block-search__label {
+:where(.wp-block-search__label) {
   width: 100%;
 }
 
@@ -5004,9 +5023,13 @@ ul.wp-block-rss.is-grid li {
   bottom: 0;
 }
 
-.wp-block-tab-panel[hidden], .wp-block-tab-panel:empty {
+.wp-block-tab-panel:empty {
   display: none !important;
 }
+.wp-block-tab-panel[hidden] {
+  margin-block-start: 0;
+  padding: 0 !important;
+}
 
 .wp-block-table {
   overflow-x: auto;