@wordpress/block-library 8.19.11 → 8.19.13

package/build-style/style-rtl.css

@@ -1621,22 +1621,28 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 .wp-lightbox-container button {
   opacity: 0;
   border: none;
-  background: #000;
+  background-color: rgba(90, 90, 90, 0.25);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+          backdrop-filter: blur(16px) saturate(180%);
   cursor: zoom-in;
-  width: 24px;
-  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
   position: absolute;
   z-index: 100;
-  top: 10px;
-  left: 10px;
+  top: 16px;
+  left: 16px;
   text-align: center;
   padding: 0;
-  border-radius: 10%;
+  border-radius: 4px;
+  transition: opacity 0.2s ease;
 }
 .wp-lightbox-container button:focus-visible {
-  outline: 5px auto #212121;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: 5px;
+  outline: 3px auto rgba(90, 90, 90, 0.25);
+  outline: 3px auto -webkit-focus-ring-color;
+  outline-offset: 3px;
 }
 .wp-lightbox-container button:hover {
   cursor: pointer;
@@ -1646,7 +1652,7 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
   opacity: 1;
 }
 .wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
-  background: #000;
+  background-color: rgba(90, 90, 90, 0.25);
   border: none;
 }
 

package/build-style/style.css

@@ -1635,22 +1635,28 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 .wp-lightbox-container button {
   opacity: 0;
   border: none;
-  background: #000;
+  background-color: rgba(90, 90, 90, 0.25);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+          backdrop-filter: blur(16px) saturate(180%);
   cursor: zoom-in;
-  width: 24px;
-  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
   position: absolute;
   z-index: 100;
-  top: 10px;
-  right: 10px;
+  top: 16px;
+  right: 16px;
   text-align: center;
   padding: 0;
-  border-radius: 10%;
+  border-radius: 4px;
+  transition: opacity 0.2s ease;
 }
 .wp-lightbox-container button:focus-visible {
-  outline: 5px auto #212121;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: 5px;
+  outline: 3px auto rgba(90, 90, 90, 0.25);
+  outline: 3px auto -webkit-focus-ring-color;
+  outline-offset: 3px;
 }
 .wp-lightbox-container button:hover {
   cursor: pointer;
@@ -1660,7 +1666,7 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
   opacity: 1;
 }
 .wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
-  background: #000;
+  background-color: rgba(90, 90, 90, 0.25);
   border: none;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.19.11",
+	"version": "8.19.13",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,36 +31,36 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.42.11",
-		"@wordpress/api-fetch": "^6.39.11",
-		"@wordpress/autop": "^3.42.11",
-		"@wordpress/blob": "^3.42.11",
-		"@wordpress/block-editor": "^12.10.11",
-		"@wordpress/blocks": "^12.19.11",
-		"@wordpress/components": "^25.8.11",
-		"@wordpress/compose": "^6.19.11",
-		"@wordpress/core-data": "^6.19.11",
-		"@wordpress/data": "^9.12.11",
-		"@wordpress/date": "^4.42.11",
-		"@wordpress/deprecated": "^3.42.11",
-		"@wordpress/dom": "^3.42.11",
-		"@wordpress/element": "^5.19.11",
-		"@wordpress/escape-html": "^2.42.11",
-		"@wordpress/hooks": "^3.42.11",
-		"@wordpress/html-entities": "^3.42.11",
-		"@wordpress/i18n": "^4.42.11",
-		"@wordpress/icons": "^9.33.11",
-		"@wordpress/interactivity": "^2.3.11",
-		"@wordpress/keycodes": "^3.42.11",
-		"@wordpress/notices": "^4.10.11",
-		"@wordpress/primitives": "^3.40.11",
-		"@wordpress/private-apis": "^0.24.11",
-		"@wordpress/reusable-blocks": "^4.19.11",
-		"@wordpress/rich-text": "^6.19.11",
-		"@wordpress/server-side-render": "^4.19.11",
-		"@wordpress/url": "^3.43.11",
-		"@wordpress/viewport": "^5.19.11",
-		"@wordpress/wordcount": "^3.42.11",
+		"@wordpress/a11y": "^3.42.13",
+		"@wordpress/api-fetch": "^6.39.13",
+		"@wordpress/autop": "^3.42.13",
+		"@wordpress/blob": "^3.42.13",
+		"@wordpress/block-editor": "^12.10.13",
+		"@wordpress/blocks": "^12.19.13",
+		"@wordpress/components": "^25.8.13",
+		"@wordpress/compose": "^6.19.13",
+		"@wordpress/core-data": "^6.19.13",
+		"@wordpress/data": "^9.12.13",
+		"@wordpress/date": "^4.42.13",
+		"@wordpress/deprecated": "^3.42.13",
+		"@wordpress/dom": "^3.42.13",
+		"@wordpress/element": "^5.19.13",
+		"@wordpress/escape-html": "^2.42.13",
+		"@wordpress/hooks": "^3.42.13",
+		"@wordpress/html-entities": "^3.42.13",
+		"@wordpress/i18n": "^4.42.13",
+		"@wordpress/icons": "^9.33.13",
+		"@wordpress/interactivity": "^2.3.13",
+		"@wordpress/keycodes": "^3.42.13",
+		"@wordpress/notices": "^4.10.13",
+		"@wordpress/primitives": "^3.40.13",
+		"@wordpress/private-apis": "^0.24.13",
+		"@wordpress/reusable-blocks": "^4.19.13",
+		"@wordpress/rich-text": "^6.19.13",
+		"@wordpress/server-side-render": "^4.19.13",
+		"@wordpress/url": "^3.43.13",
+		"@wordpress/viewport": "^5.19.13",
+		"@wordpress/wordcount": "^3.42.13",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -78,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6fcbf0077299e6c5aa42c83110c04cf3c9078e92"
+	"gitHead": "70b30e9461372ae518e3d0e50f7e5085eda8b46e"
 }

package/src/image/deprecated.js

@@ -1047,6 +1047,14 @@ const v8 = {
 		},
 	},
 	migrate( { width, height, ...attributes } ) {
+		// We need to perform a check here because in cases
+		// where attributes are added dynamically to blocks,
+		// block invalidation overrides the isEligible() method
+		// and forces the migration to run, so it's not guaranteed
+		// that `behaviors` or `behaviors.lightbox` will be defined.
+		if ( ! attributes.behaviors?.lightbox ) {
+			return attributes;
+		}
 		const {
 			behaviors: {
 				lightbox: { enabled },

package/src/image/index.php

@@ -242,10 +242,9 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 			data-wp-on--click="actions.core.image.showLightbox"
 			data-wp-style--right="context.core.image.imageButtonRight"
 			data-wp-style--top="context.core.image.imageButtonTop"
-			style="background: #000"
 		>
-			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
-				<Path stroke="#FFFFFF" d="M6 4a2 2 0 0 0-2 2v3h1.5V6a.5.5 0 0 1 .5-.5h3V4H6Zm3 14.5H6a.5.5 0 0 1-.5-.5v-3H4v3a2 2 0 0 0 2 2h3v-1.5Zm6 1.5v-1.5h3a.5.5 0 0 0 .5-.5v-3H20v3a2 2 0 0 1-2 2h-3Zm3-16a2 2 0 0 1 2 2v3h-1.5V6a.5.5 0 0 0-.5-.5h-3V4h3Z" />
+			<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
+				<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
 			</svg>
 		</button>';
 
@@ -303,7 +302,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 		}
 	}
 
-	$close_button_icon  = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="15" height="15" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>';
+	$close_button_icon  = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>';
 	$close_button_label = esc_attr__( 'Close' );
 
 	$lightbox_html = <<<HTML

package/src/image/style.scss

@@ -168,22 +168,27 @@
 	button {
 		opacity: 0;
 		border: none;
-		background: #000;
+		background-color: rgb(90 90 90 / 25%);
+		backdrop-filter: blur($grid-unit-20) saturate(180%);
 		cursor: zoom-in;
-		width: 24px;
-		height: 24px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 20px;
+		height: 20px;
 		position: absolute;
 		z-index: 100;
-		top: 10px;
-		right: 10px;
+		top: 16px;
+		right: 16px;
 		text-align: center;
 		padding: 0;
-		border-radius: 10%;
+		border-radius: 4px;
+		transition: opacity 0.2s ease;
 
 		&:focus-visible {
-			outline: 5px auto #212121;
-			outline: 5px auto -webkit-focus-ring-color;
-			outline-offset: 5px;
+			outline: 3px auto rgb(90 90 90 / 25%);
+			outline: 3px auto -webkit-focus-ring-color;
+			outline-offset: 3px;
 		}
 
 		&:hover {
@@ -198,7 +203,7 @@
 		&:hover,
 		&:focus,
 		&:not(:hover):not(:active):not(.has-background) {
-			background: #000;
+			background-color: rgb(90 90 90 / 25%);
 			border: none;
 		}
 	}

package/src/image/view.js

@@ -340,26 +340,26 @@ store(
 								context.core.image.imageButtonTop =
 									( offsetHeight - referenceHeight ) / 2 +
 									buttonOffsetTop +
-									10;
+									16;
 								context.core.image.imageButtonRight =
-									buttonOffsetRight + 10;
+									buttonOffsetRight + 16;
 							} else {
 								// If it reaches the height first, keep
 								// the height and compute the width.
 								const referenceWidth =
 									offsetHeight * naturalRatio;
 								context.core.image.imageButtonTop =
-									buttonOffsetTop + 10;
+									buttonOffsetTop + 16;
 								context.core.image.imageButtonRight =
 									( offsetWidth - referenceWidth ) / 2 +
 									buttonOffsetRight +
-									10;
+									16;
 							}
 						} else {
 							context.core.image.imageButtonTop =
-								buttonOffsetTop + 10;
+								buttonOffsetTop + 16;
 							context.core.image.imageButtonRight =
-								buttonOffsetRight + 10;
+								buttonOffsetRight + 16;
 						}
 					},
 					setStylesOnResize: ( { state, context, ref } ) => {

package/src/pattern/edit.js

@@ -20,7 +20,7 @@ const PatternEdit = ( { attributes, clientId } ) => {
 	);
 
 	const currentThemeStylesheet = useSelect(
-		( select ) => select( coreStore ).getCurrentTheme().stylesheet
+		( select ) => select( coreStore ).getCurrentTheme()?.stylesheet
 	);
 
 	const { replaceBlocks, __unstableMarkNextChangeAsNotPersistent } =

package/src/query/index.php

@@ -44,11 +44,15 @@ function render_block_core_query( $attributes, $content, $block ) {
 			$block->block_type->supports['interactivity'] = true;
 
 			// Add a div to announce messages using `aria-live`.
-			$last_div_position = strripos( $content, '</div>' );
+			$html_tag = 'div';
+			if ( ! empty( $attributes['tagName'] ) ) {
+				$html_tag = esc_attr( $attributes['tagName'] );
+			}
+			$last_tag_position = strripos( $content, '</' . $html_tag . '>' );
 			$content           = substr_replace(
 				$content,
 				'<div
-					class="wp-block-query__enhanced-pagination-navigation-announce screen-reader-text"
+					class="screen-reader-text"
 					aria-live="polite"
 					data-wp-text="context.core.query.message"
 				></div>
@@ -57,7 +61,7 @@ function render_block_core_query( $attributes, $content, $block ) {
 					data-wp-class--start-animation="selectors.core.query.startAnimation"
 					data-wp-class--finish-animation="selectors.core.query.finishAnimation"
 				></div>',
-				$last_div_position,
+				$last_tag_position,
 				0
 			);
 		}