@wordpress/block-library 10.2.0 → 10.3.0

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

@@ -6,6 +6,8 @@
   --wfp-button-color: rgba(255, 255, 255, .9);
   --wfp-text-color: #ffffff;
   --wfp-text-secondary-color: rgba(255, 255, 255, .6);
+  --wfp-btn-artwork-color: rgba(255, 255, 255, .9);
+  --wfp-btn-artwork-scrim: rgba(0, 0, 0, .5);
 }
 
 .waveform-player.waveform-theme-light {
@@ -35,7 +37,7 @@
   width: var(--wfp-btn-size, 36px);
   height: var(--wfp-btn-size, 36px);
   min-width: var(--wfp-btn-size, 36px);
-  border-radius: 50%;
+  border-radius: var(--wfp-btn-radius, 50%);
   border: 2px solid currentColor;
   background: transparent;
   color: var(--wfp-button-color, inherit);
@@ -93,6 +95,41 @@
   display: block;
 }
 
+.waveform-btn-has-artwork {
+  --wfp-btn-size: 64px;
+  --wfp-btn-radius: 8px;
+  position: relative;
+  overflow: hidden;
+  border: none;
+  color: var(--wfp-btn-artwork-color);
+}
+
+.waveform-btn > .waveform-btn-artwork {
+  display: block;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.waveform-btn-has-artwork:after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--wfp-btn-artwork-scrim);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.waveform-btn-has-artwork > :not(.waveform-btn-artwork) {
+  position: relative;
+  z-index: 2;
+}
+
 .waveform-icon-play svg {
   margin-right: 1px;
 }
@@ -417,9 +454,9 @@
 
 @media (max-width: 480px) {
   .waveform-btn {
-    width: 32px;
-    height: 32px;
-    min-width: 32px;
+    width: var(--wfp-btn-size, 32px);
+    height: var(--wfp-btn-size, 32px);
+    min-width: var(--wfp-btn-size, 32px);
   }
   .waveform-container {
     min-height: 50px;
@@ -438,6 +475,9 @@
     animation-iteration-count: 1 !important;
   }
 }
+.wp-block-playlist {
+  box-sizing: border-box;
+}
 .wp-block-playlist .wp-block-playlist__waveform-player {
   width: 100%;
   margin: var(--wp--preset--spacing--20, 0.625em) 0;

package/build-style/playlist/style.css

@@ -6,6 +6,8 @@
   --wfp-button-color: rgba(255, 255, 255, .9);
   --wfp-text-color: #ffffff;
   --wfp-text-secondary-color: rgba(255, 255, 255, .6);
+  --wfp-btn-artwork-color: rgba(255, 255, 255, .9);
+  --wfp-btn-artwork-scrim: rgba(0, 0, 0, .5);
 }
 
 .waveform-player.waveform-theme-light {
@@ -35,7 +37,7 @@
   width: var(--wfp-btn-size, 36px);
   height: var(--wfp-btn-size, 36px);
   min-width: var(--wfp-btn-size, 36px);
-  border-radius: 50%;
+  border-radius: var(--wfp-btn-radius, 50%);
   border: 2px solid currentColor;
   background: transparent;
   color: var(--wfp-button-color, inherit);
@@ -93,6 +95,41 @@
   display: block;
 }
 
+.waveform-btn-has-artwork {
+  --wfp-btn-size: 64px;
+  --wfp-btn-radius: 8px;
+  position: relative;
+  overflow: hidden;
+  border: none;
+  color: var(--wfp-btn-artwork-color);
+}
+
+.waveform-btn > .waveform-btn-artwork {
+  display: block;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.waveform-btn-has-artwork:after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--wfp-btn-artwork-scrim);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.waveform-btn-has-artwork > :not(.waveform-btn-artwork) {
+  position: relative;
+  z-index: 2;
+}
+
 .waveform-icon-play svg {
   margin-left: 1px;
 }
@@ -417,9 +454,9 @@
 
 @media (max-width: 480px) {
   .waveform-btn {
-    width: 32px;
-    height: 32px;
-    min-width: 32px;
+    width: var(--wfp-btn-size, 32px);
+    height: var(--wfp-btn-size, 32px);
+    min-width: var(--wfp-btn-size, 32px);
   }
   .waveform-container {
     min-height: 50px;
@@ -438,6 +475,9 @@
     animation-iteration-count: 1 !important;
   }
 }
+.wp-block-playlist {
+  box-sizing: border-box;
+}
 .wp-block-playlist .wp-block-playlist__waveform-player {
   width: 100%;
   margin: var(--wp--preset--spacing--20, 0.625em) 0;

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

@@ -8,4 +8,8 @@
 
 .wp-block-pullquote__citation {
   color: inherit;
+}
+
+.wp-block-pullquote[style*=line-height] :where(p) {
+  line-height: inherit;
 }

package/build-style/pullquote/editor.css

@@ -8,4 +8,8 @@
 
 .wp-block-pullquote__citation {
   color: inherit;
+}
+
+.wp-block-pullquote[style*=line-height] :where(p) {
+  line-height: inherit;
 }

package/build-style/style-rtl.css

@@ -3207,6 +3207,8 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   --wfp-button-color: rgba(255, 255, 255, .9);
   --wfp-text-color: #ffffff;
   --wfp-text-secondary-color: rgba(255, 255, 255, .6);
+  --wfp-btn-artwork-color: rgba(255, 255, 255, .9);
+  --wfp-btn-artwork-scrim: rgba(0, 0, 0, .5);
 }
 
 .waveform-player.waveform-theme-light {
@@ -3236,7 +3238,7 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   width: var(--wfp-btn-size, 36px);
   height: var(--wfp-btn-size, 36px);
   min-width: var(--wfp-btn-size, 36px);
-  border-radius: 50%;
+  border-radius: var(--wfp-btn-radius, 50%);
   border: 2px solid currentColor;
   background: transparent;
   color: var(--wfp-button-color, inherit);
@@ -3294,6 +3296,41 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   display: block;
 }
 
+.waveform-btn-has-artwork {
+  --wfp-btn-size: 64px;
+  --wfp-btn-radius: 8px;
+  position: relative;
+  overflow: hidden;
+  border: none;
+  color: var(--wfp-btn-artwork-color);
+}
+
+.waveform-btn > .waveform-btn-artwork {
+  display: block;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.waveform-btn-has-artwork:after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--wfp-btn-artwork-scrim);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.waveform-btn-has-artwork > :not(.waveform-btn-artwork) {
+  position: relative;
+  z-index: 2;
+}
+
 .waveform-icon-play svg {
   margin-right: 1px;
 }
@@ -3618,9 +3655,9 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
 
 @media (max-width: 480px) {
   .waveform-btn {
-    width: 32px;
-    height: 32px;
-    min-width: 32px;
+    width: var(--wfp-btn-size, 32px);
+    height: var(--wfp-btn-size, 32px);
+    min-width: var(--wfp-btn-size, 32px);
   }
   .waveform-container {
     min-height: 50px;
@@ -3639,6 +3676,9 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
     animation-iteration-count: 1 !important;
   }
 }
+.wp-block-playlist {
+  box-sizing: border-box;
+}
 .wp-block-playlist .wp-block-playlist__waveform-player {
   width: 100%;
   margin: var(--wp--preset--spacing--20, 0.625em) 0;

package/build-style/style.css

@@ -3237,6 +3237,8 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   --wfp-button-color: rgba(255, 255, 255, .9);
   --wfp-text-color: #ffffff;
   --wfp-text-secondary-color: rgba(255, 255, 255, .6);
+  --wfp-btn-artwork-color: rgba(255, 255, 255, .9);
+  --wfp-btn-artwork-scrim: rgba(0, 0, 0, .5);
 }
 
 .waveform-player.waveform-theme-light {
@@ -3266,7 +3268,7 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   width: var(--wfp-btn-size, 36px);
   height: var(--wfp-btn-size, 36px);
   min-width: var(--wfp-btn-size, 36px);
-  border-radius: 50%;
+  border-radius: var(--wfp-btn-radius, 50%);
   border: 2px solid currentColor;
   background: transparent;
   color: var(--wfp-button-color, inherit);
@@ -3324,6 +3326,41 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   display: block;
 }
 
+.waveform-btn-has-artwork {
+  --wfp-btn-size: 64px;
+  --wfp-btn-radius: 8px;
+  position: relative;
+  overflow: hidden;
+  border: none;
+  color: var(--wfp-btn-artwork-color);
+}
+
+.waveform-btn > .waveform-btn-artwork {
+  display: block;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.waveform-btn-has-artwork:after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--wfp-btn-artwork-scrim);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.waveform-btn-has-artwork > :not(.waveform-btn-artwork) {
+  position: relative;
+  z-index: 2;
+}
+
 .waveform-icon-play svg {
   margin-left: 1px;
 }
@@ -3648,9 +3685,9 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
 
 @media (max-width: 480px) {
   .waveform-btn {
-    width: 32px;
-    height: 32px;
-    min-width: 32px;
+    width: var(--wfp-btn-size, 32px);
+    height: var(--wfp-btn-size, 32px);
+    min-width: var(--wfp-btn-size, 32px);
   }
   .waveform-container {
     min-height: 50px;
@@ -3669,6 +3706,9 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
     animation-iteration-count: 1 !important;
   }
 }
+.wp-block-playlist {
+  box-sizing: border-box;
+}
 .wp-block-playlist .wp-block-playlist__waveform-player {
   width: 100%;
   margin: var(--wp--preset--spacing--20, 0.625em) 0;

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

@@ -0,0 +1,101 @@
+/**
+ * Typography
+ */
+/**
+ * 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.
+ */
+/**
+ * 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.
+ */
+/**
+ * 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.
+ */
+@media (min-width: 600px) {
+  .wp-block-tab-list__mover-button {
+    width: 24px;
+    min-width: 0 !important;
+  }
+}

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

@@ -0,0 +1,101 @@
+/**
+ * Typography
+ */
+/**
+ * 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.
+ */
+/**
+ * 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.
+ */
+/**
+ * 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.
+ */
+@media (min-width: 600px) {
+  .wp-block-tab-list__mover-button {
+    width: 24px;
+    min-width: 0 !important;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "10.2.0",
+	"version": "10.3.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -92,53 +92,53 @@
 		"build-module/*/init.mjs"
 	],
 	"dependencies": {
-		"@arraypress/waveform-player": "^1.21.0",
-		"@wordpress/a11y": "^4.51.0",
-		"@wordpress/api-fetch": "^7.51.0",
-		"@wordpress/autop": "^4.51.0",
-		"@wordpress/base-styles": "^11.0.0",
-		"@wordpress/blob": "^4.51.0",
-		"@wordpress/block-editor": "^16.0.0",
-		"@wordpress/blocks": "^15.24.0",
-		"@wordpress/components": "^37.0.0",
-		"@wordpress/compose": "^8.4.0",
-		"@wordpress/core-data": "^7.51.0",
-		"@wordpress/data": "^10.51.0",
-		"@wordpress/date": "^5.51.0",
-		"@wordpress/deprecated": "^4.51.0",
-		"@wordpress/dom": "^4.51.0",
-		"@wordpress/element": "^8.3.0",
-		"@wordpress/escape-html": "^3.51.0",
-		"@wordpress/global-styles-engine": "^1.18.0",
-		"@wordpress/hooks": "^4.51.0",
-		"@wordpress/html-entities": "^4.51.0",
-		"@wordpress/i18n": "^6.24.0",
-		"@wordpress/icons": "^15.2.0",
-		"@wordpress/interactivity": "^6.51.0",
-		"@wordpress/interactivity-router": "^2.51.0",
-		"@wordpress/keyboard-shortcuts": "^5.51.0",
-		"@wordpress/keycodes": "^4.51.0",
-		"@wordpress/latex-to-mathml": "^1.19.0",
-		"@wordpress/notices": "^5.51.0",
-		"@wordpress/patterns": "^2.51.0",
-		"@wordpress/primitives": "^4.51.0",
-		"@wordpress/private-apis": "^1.51.0",
-		"@wordpress/reusable-blocks": "^5.51.0",
-		"@wordpress/rich-text": "^7.51.0",
-		"@wordpress/server-side-render": "^6.27.0",
-		"@wordpress/shortcode": "^4.51.0",
-		"@wordpress/ui": "^0.18.0",
-		"@wordpress/upload-media": "^0.36.0",
-		"@wordpress/url": "^4.51.0",
-		"@wordpress/viewport": "^6.51.0",
-		"@wordpress/wordcount": "^4.51.0",
+		"@arraypress/waveform-player": "^1.23.0",
+		"@wordpress/a11y": "^4.52.0",
+		"@wordpress/api-fetch": "^7.52.0",
+		"@wordpress/autop": "^4.52.0",
+		"@wordpress/base-styles": "^12.0.0",
+		"@wordpress/blob": "^4.52.0",
+		"@wordpress/block-editor": "^16.1.0",
+		"@wordpress/blocks": "^15.25.0",
+		"@wordpress/components": "^38.0.0",
+		"@wordpress/compose": "^8.5.0",
+		"@wordpress/core-data": "^7.52.0",
+		"@wordpress/data": "^10.52.0",
+		"@wordpress/date": "^5.52.0",
+		"@wordpress/deprecated": "^4.52.0",
+		"@wordpress/dom": "^4.52.0",
+		"@wordpress/element": "^8.4.0",
+		"@wordpress/escape-html": "^3.52.0",
+		"@wordpress/global-styles-engine": "^1.19.0",
+		"@wordpress/hooks": "^4.52.0",
+		"@wordpress/html-entities": "^4.52.0",
+		"@wordpress/i18n": "^6.25.0",
+		"@wordpress/icons": "^15.3.0",
+		"@wordpress/interactivity": "^6.52.0",
+		"@wordpress/interactivity-router": "^2.52.0",
+		"@wordpress/keyboard-shortcuts": "^5.52.0",
+		"@wordpress/keycodes": "^4.52.0",
+		"@wordpress/latex-to-mathml": "^1.20.0",
+		"@wordpress/notices": "^5.52.0",
+		"@wordpress/patterns": "^2.52.0",
+		"@wordpress/primitives": "^4.52.0",
+		"@wordpress/private-apis": "^1.52.0",
+		"@wordpress/reusable-blocks": "^5.52.0",
+		"@wordpress/rich-text": "^7.52.0",
+		"@wordpress/server-side-render": "^6.28.0",
+		"@wordpress/shortcode": "^4.52.0",
+		"@wordpress/ui": "^0.19.0",
+		"@wordpress/upload-media": "^0.37.0",
+		"@wordpress/url": "^4.52.0",
+		"@wordpress/viewport": "^6.52.0",
+		"@wordpress/wordcount": "^4.52.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.3",
 		"fast-average-color": "^9.1.1",
 		"fast-deep-equal": "^3.1.3",
 		"html-react-parser": "^5.2.11",
-		"memize": "^2.1.0",
+		"memize": "^2.1.1",
 		"remove-accents": "^0.5.0",
 		"uuid": "^14.0.0"
 	},
@@ -164,5 +164,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e9a74f9c14095a34398ecd4d1f7a908e55051205"
+	"gitHead": "7e8b17a983f9391d3ebc7717af2a1c9ed7efc7ab"
 }

package/src/accordion-panel/block.json

@@ -8,6 +8,7 @@
 	"parent": [ "core/accordion-item" ],
 	"usesContext": [ "core/accordion-open-by-default" ],
 	"supports": {
+		"__experimentalOnEnter": true,
 		"html": false,
 		"color": {
 			"background": true,

package/src/breadcrumbs/index.php

@@ -183,9 +183,11 @@ function render_block_core_breadcrumbs( $attributes, $content, $block ) {
 		return '';
 	}
 
+	$separator_attr     = $attributes['separator'] ?? null;
+	$separator          = is_string( $separator_attr ) ? addcslashes( $separator_attr, '\\"' ) : '';
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
-			'style'      => '--separator: "' . addcslashes( $attributes['separator'], '\\"' ) . '";',
+			'style'      => '--separator: "' . $separator . '";',
 			'aria-label' => __( 'Breadcrumbs' ),
 		)
 	);

package/src/button/index.php

@@ -62,7 +62,7 @@ function render_block_core_button( $attributes, $content ) {
 
 	$width = $attributes['style']['dimensions']['width'] ?? null;
 
-	if ( $width ) {
+	if ( is_string( $width ) && '' !== $width ) {
 		// Resolve preset references to their actual values.
 		$resolved_width = $width;
 		$is_preset      = str_starts_with( $width, 'var:preset|dimension|' );