@wordpress/block-library 9.27.1-next.46f643fa0.0 → 9.28.1-next.0f6f9d12c.0

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

@@ -0,0 +1,223 @@
+/**
+ * Colors
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * Colors
+ */
+/**
+ * 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.
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Colors
+ */
+/**
+ * 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.
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+*  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.
+ */
+/**
+ * Typography
+ */
+/**
+ * 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-accordion-item {
+  display: grid;
+  grid-template-rows: max-content 0fr;
+}
+
+.wp-block-accordion-item.is-open {
+  grid-template-rows: max-content 1fr;
+}
+
+.accordion-item__heading {
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+
+.accordion-item__toggle {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  text-decoration: inherit;
+  word-spacing: inherit;
+  background: none;
+  border: none;
+  color: inherit;
+  padding: var(--wp--preset--spacing--20, 1em) 0;
+  cursor: pointer;
+  outline: none;
+  display: flex;
+  align-items: center;
+  text-align: inherit;
+  position: relative;
+  width: 100%;
+}
+
+.accordion-item__toggle > span {
+  width: 100%;
+}
+
+.is-layout-flow > .wp-block-accordion-panel,
+.wp-block-accordion-panel {
+  overflow: hidden;
+  margin: 0;
+}
+
+.accordion-panel__wrapper {
+  padding-bottom: var(--wp--preset--spacing--20, 1em);
+}
+
+/* No icon block style */
+.is-style-no-icon .accordion-item__toggle-icon {
+  background-color: unset;
+}
+
+.wp-block-accordion-header.icon-position-left .accordion-item__toggle {
+  /* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
+  flex-direction: row-reverse;
+}
+
+/* RTL language support */
+[dir=rtl] .wp-block-accordion-header:not(.icon-position-left) .accordion-item__toggle {
+  /* stylelint-disable-next-line declaration-property-value-allowed-list -- Automatically adjust icon position for RTL languages. */
+  flex-direction: row-reverse;
+}
+
+[dir=rtl] .wp-block-accordion-header.icon-position-left .accordion-item__toggle {
+  flex-direction: row;
+}
+
+.accordion-item__toggle:focus-visible {
+  outline: 2px solid -webkit-focus-ring-color;
+  outline-offset: 2px;
+}
+
+/* Add transitions only for users who do not prefer reduced motion */
+@media (prefers-reduced-motion: no-preference) {
+  .wp-block-accordion-item .accordion-item__toggle-icon {
+    transition: transform 0.2s ease-in-out;
+  }
+  .wp-block-accordion-item {
+    transition: grid-template-rows 0.3s ease-out;
+  }
+}
+.is-open .accordion-item__toggle-icon.has-icon-plus {
+  transform: rotate(-45deg);
+}

package/build-style/accordions/style.css

@@ -0,0 +1,223 @@
+/**
+ * Colors
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * Colors
+ */
+/**
+ * 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.
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Colors
+ */
+/**
+ * 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.
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+*  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.
+ */
+/**
+ * Typography
+ */
+/**
+ * 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-accordion-item {
+  display: grid;
+  grid-template-rows: max-content 0fr;
+}
+
+.wp-block-accordion-item.is-open {
+  grid-template-rows: max-content 1fr;
+}
+
+.accordion-item__heading {
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+
+.accordion-item__toggle {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  text-decoration: inherit;
+  word-spacing: inherit;
+  background: none;
+  border: none;
+  color: inherit;
+  padding: var(--wp--preset--spacing--20, 1em) 0;
+  cursor: pointer;
+  outline: none;
+  display: flex;
+  align-items: center;
+  text-align: inherit;
+  position: relative;
+  width: 100%;
+}
+
+.accordion-item__toggle > span {
+  width: 100%;
+}
+
+.is-layout-flow > .wp-block-accordion-panel,
+.wp-block-accordion-panel {
+  overflow: hidden;
+  margin: 0;
+}
+
+.accordion-panel__wrapper {
+  padding-bottom: var(--wp--preset--spacing--20, 1em);
+}
+
+/* No icon block style */
+.is-style-no-icon .accordion-item__toggle-icon {
+  background-color: unset;
+}
+
+.wp-block-accordion-header.icon-position-left .accordion-item__toggle {
+  /* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
+  flex-direction: row-reverse;
+}
+
+/* RTL language support */
+[dir=rtl] .wp-block-accordion-header:not(.icon-position-left) .accordion-item__toggle {
+  /* stylelint-disable-next-line declaration-property-value-allowed-list -- Automatically adjust icon position for RTL languages. */
+  flex-direction: row-reverse;
+}
+
+[dir=rtl] .wp-block-accordion-header.icon-position-left .accordion-item__toggle {
+  flex-direction: row;
+}
+
+.accordion-item__toggle:focus-visible {
+  outline: 2px solid -webkit-focus-ring-color;
+  outline-offset: 2px;
+}
+
+/* Add transitions only for users who do not prefer reduced motion */
+@media (prefers-reduced-motion: no-preference) {
+  .wp-block-accordion-item .accordion-item__toggle-icon {
+    transition: transform 0.2s ease-in-out;
+  }
+  .wp-block-accordion-item {
+    transition: grid-template-rows 0.3s ease-out;
+  }
+}
+.is-open .accordion-item__toggle-icon.has-icon-plus {
+  transform: rotate(45deg);
+}

package/build-style/editor-rtl.css

@@ -1374,26 +1374,18 @@ figure.wp-block-image:not(.wp-block) {
   text-align: center;
   white-space: nowrap;
 }
-.wp-block-more input[type=text] {
+.wp-block-more .rich-text {
   position: relative;
   font-size: 13px;
   text-transform: uppercase;
   font-weight: 600;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   color: #757575;
-  border: none;
-  box-shadow: none;
+  display: inline-flex;
   white-space: nowrap;
   text-align: center;
-  margin: 0;
-  border-radius: 4px;
   background: #fff;
-  padding: 6px 8px;
-  height: 24px;
-  max-width: 100%;
-}
-.wp-block-more input[type=text]:focus {
-  box-shadow: none;
+  padding: 10px 36px;
 }
 .wp-block-more::before {
   content: "";
@@ -2691,8 +2683,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 
 .wp-block-post-featured-image .block-editor-media-placeholder {
   z-index: 1;
-  -webkit-backdrop-filter: none;
-          backdrop-filter: none;
+  backdrop-filter: none;
 }
 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder,
 .wp-block-post-featured-image .components-placeholder {
@@ -2837,8 +2828,25 @@ div[data-type="core/post-featured-image"] img {
   opacity: 1;
   margin-top: 16px;
 }
+.block-library-poster-image__container .components-drop-zone__content {
+  border-radius: 2px;
+}
+.block-library-poster-image__container .components-drop-zone .components-drop-zone__content-inner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.block-library-poster-image__container .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
+  margin: 0;
+}
+.block-library-poster-image__container .components-spinner {
+  position: absolute;
+  top: 50%;
+  right: 50%;
+  margin-top: -9px;
+  margin-right: -9px;
+}
 
-.block-library-poster-image__toggle,
 .block-library-poster-image__preview {
   width: 100%;
   padding: 0;
@@ -2847,9 +2855,6 @@ div[data-type="core/post-featured-image"] img {
   min-height: 40px;
   display: flex;
   justify-content: center;
-}
-
-.block-library-poster-image__preview {
   height: auto !important;
   outline: 1px solid rgba(0, 0, 0, 0.1);
 }
@@ -2860,13 +2865,6 @@ div[data-type="core/post-featured-image"] img {
   aspect-ratio: 2/1;
 }
 
-.block-library-poster-image__toggle {
-  box-shadow: inset 0 0 0 1px #ccc;
-}
-.block-library-poster-image__toggle:focus:not(:disabled) {
-  box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-
 .block-library-poster-image__actions:not(.block-library-poster-image__actions-select) {
   bottom: 0;
   opacity: 0;
@@ -2879,8 +2877,7 @@ div[data-type="core/post-featured-image"] img {
   }
 }
 .block-library-poster-image__actions:not(.block-library-poster-image__actions-select) .block-library-poster-image__action {
-  -webkit-backdrop-filter: blur(16px) saturate(180%);
-          backdrop-filter: blur(16px) saturate(180%);
+  backdrop-filter: blur(16px) saturate(180%);
   background: rgba(255, 255, 255, 0.75);
 }
 .block-library-poster-image__actions .block-library-poster-image__action {

package/build-style/editor.css

@@ -1381,26 +1381,18 @@ figure.wp-block-image:not(.wp-block) {
   text-align: center;
   white-space: nowrap;
 }
-.wp-block-more input[type=text] {
+.wp-block-more .rich-text {
   position: relative;
   font-size: 13px;
   text-transform: uppercase;
   font-weight: 600;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   color: #757575;
-  border: none;
-  box-shadow: none;
+  display: inline-flex;
   white-space: nowrap;
   text-align: center;
-  margin: 0;
-  border-radius: 4px;
   background: #fff;
-  padding: 6px 8px;
-  height: 24px;
-  max-width: 100%;
-}
-.wp-block-more input[type=text]:focus {
-  box-shadow: none;
+  padding: 10px 36px;
 }
 .wp-block-more::before {
   content: "";
@@ -2699,8 +2691,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 
 .wp-block-post-featured-image .block-editor-media-placeholder {
   z-index: 1;
-  -webkit-backdrop-filter: none;
-          backdrop-filter: none;
+  backdrop-filter: none;
 }
 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder,
 .wp-block-post-featured-image .components-placeholder {
@@ -2845,8 +2836,25 @@ div[data-type="core/post-featured-image"] img {
   opacity: 1;
   margin-top: 16px;
 }
+.block-library-poster-image__container .components-drop-zone__content {
+  border-radius: 2px;
+}
+.block-library-poster-image__container .components-drop-zone .components-drop-zone__content-inner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.block-library-poster-image__container .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
+  margin: 0;
+}
+.block-library-poster-image__container .components-spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -9px;
+  margin-left: -9px;
+}
 
-.block-library-poster-image__toggle,
 .block-library-poster-image__preview {
   width: 100%;
   padding: 0;
@@ -2855,9 +2863,6 @@ div[data-type="core/post-featured-image"] img {
   min-height: 40px;
   display: flex;
   justify-content: center;
-}
-
-.block-library-poster-image__preview {
   height: auto !important;
   outline: 1px solid rgba(0, 0, 0, 0.1);
 }
@@ -2868,13 +2873,6 @@ div[data-type="core/post-featured-image"] img {
   aspect-ratio: 2/1;
 }
 
-.block-library-poster-image__toggle {
-  box-shadow: inset 0 0 0 1px #ccc;
-}
-.block-library-poster-image__toggle:focus:not(:disabled) {
-  box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-
 .block-library-poster-image__actions:not(.block-library-poster-image__actions-select) {
   bottom: 0;
   opacity: 0;
@@ -2887,8 +2885,7 @@ div[data-type="core/post-featured-image"] img {
   }
 }
 .block-library-poster-image__actions:not(.block-library-poster-image__actions-select) .block-library-poster-image__action {
-  -webkit-backdrop-filter: blur(16px) saturate(180%);
-          backdrop-filter: blur(16px) saturate(180%);
+  backdrop-filter: blur(16px) saturate(180%);
   background: rgba(255, 255, 255, 0.75);
 }
 .block-library-poster-image__actions .block-library-poster-image__action {

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

@@ -366,8 +366,7 @@ figure.wp-block-gallery.has-nested-images {
   height: 100%;
   max-height: 40%;
   pointer-events: none;
-  -webkit-backdrop-filter: blur(3px);
-          backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
   -webkit-mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
           mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
 }

package/build-style/gallery/style.css

@@ -366,8 +366,7 @@ figure.wp-block-gallery.has-nested-images {
   height: 100%;
   max-height: 40%;
   pointer-events: none;
-  -webkit-backdrop-filter: blur(3px);
-          backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
   -webkit-mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
           mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
 }

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

@@ -246,8 +246,7 @@
   opacity: 0;
   border: none;
   background-color: rgba(90, 90, 90, 0.25);
-  -webkit-backdrop-filter: blur(16px) saturate(180%);
-          backdrop-filter: blur(16px) saturate(180%);
+  backdrop-filter: blur(16px) saturate(180%);
   cursor: zoom-in;
   display: flex;
   justify-content: center;

package/build-style/image/style.css

@@ -252,8 +252,7 @@
   opacity: 0;
   border: none;
   background-color: rgba(90, 90, 90, 0.25);
-  -webkit-backdrop-filter: blur(16px) saturate(180%);
-          backdrop-filter: blur(16px) saturate(180%);
+  backdrop-filter: blur(16px) saturate(180%);
   cursor: zoom-in;
   display: flex;
   justify-content: center;