@wordpress/block-library 9.0.3 → 9.0.4

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

@@ -93,11 +93,11 @@
 .wp-block-table th {
   word-break: normal;
 }
-.wp-block-table figcaption {
+.wp-block-table :where(figcaption) {
   color: #555;
   font-size: 13px;
   text-align: center;
 }
-.is-dark-theme .wp-block-table figcaption {
+.is-dark-theme .wp-block-table :where(figcaption) {
   color: rgba(255, 255, 255, 0.65);
 }

package/build-style/table/theme.css

@@ -93,11 +93,11 @@
 .wp-block-table th {
   word-break: normal;
 }
-.wp-block-table figcaption {
+.wp-block-table :where(figcaption) {
   color: #555;
   font-size: 13px;
   text-align: center;
 }
-.is-dark-theme .wp-block-table figcaption {
+.is-dark-theme .wp-block-table :where(figcaption) {
   color: rgba(255, 255, 255, 0.65);
 }

package/build-style/theme-rtl.css

@@ -86,12 +86,12 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-audio figcaption {
+.wp-block-audio :where(figcaption) {
   color: #555;
   font-size: 13px;
   text-align: center;
 }
-.is-dark-theme .wp-block-audio figcaption {
+.is-dark-theme .wp-block-audio :where(figcaption) {
   color: rgba(255, 255, 255, 0.65);
 }
 
@@ -106,12 +106,12 @@
   padding: 0.8em 1em;
 }
 
-.wp-block-embed figcaption {
+.wp-block-embed :where(figcaption) {
   color: #555;
   font-size: 13px;
   text-align: center;
 }
-.is-dark-theme .wp-block-embed figcaption {
+.is-dark-theme .wp-block-embed :where(figcaption) {
   color: rgba(255, 255, 255, 0.65);
 }
 
@@ -225,21 +225,21 @@
 .wp-block-table th {
   word-break: normal;
 }
-.wp-block-table figcaption {
+.wp-block-table :where(figcaption) {
   color: #555;
   font-size: 13px;
   text-align: center;
 }
-.is-dark-theme .wp-block-table figcaption {
+.is-dark-theme .wp-block-table :where(figcaption) {
   color: rgba(255, 255, 255, 0.65);
 }
 
-.wp-block-video figcaption {
+.wp-block-video :where(figcaption) {
   color: #555;
   font-size: 13px;
   text-align: center;
 }
-.is-dark-theme .wp-block-video figcaption {
+.is-dark-theme .wp-block-video :where(figcaption) {
   color: rgba(255, 255, 255, 0.65);
 }
 

package/build-style/theme.css

@@ -86,12 +86,12 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-audio figcaption {
+.wp-block-audio :where(figcaption) {
   color: #555;
   font-size: 13px;
   text-align: center;
 }
-.is-dark-theme .wp-block-audio figcaption {
+.is-dark-theme .wp-block-audio :where(figcaption) {
   color: rgba(255, 255, 255, 0.65);
 }
 
@@ -106,12 +106,12 @@
   padding: 0.8em 1em;
 }
 
-.wp-block-embed figcaption {
+.wp-block-embed :where(figcaption) {
   color: #555;
   font-size: 13px;
   text-align: center;
 }
-.is-dark-theme .wp-block-embed figcaption {
+.is-dark-theme .wp-block-embed :where(figcaption) {
   color: rgba(255, 255, 255, 0.65);
 }
 
@@ -225,21 +225,21 @@
 .wp-block-table th {
   word-break: normal;
 }
-.wp-block-table figcaption {
+.wp-block-table :where(figcaption) {
   color: #555;
   font-size: 13px;
   text-align: center;
 }
-.is-dark-theme .wp-block-table figcaption {
+.is-dark-theme .wp-block-table :where(figcaption) {
   color: rgba(255, 255, 255, 0.65);
 }
 
-.wp-block-video figcaption {
+.wp-block-video :where(figcaption) {
   color: #555;
   font-size: 13px;
   text-align: center;
 }
-.is-dark-theme .wp-block-video figcaption {
+.is-dark-theme .wp-block-video :where(figcaption) {
   color: rgba(255, 255, 255, 0.65);
 }
 

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

@@ -101,7 +101,7 @@
 .wp-block-video.aligncenter {
   text-align: center;
 }
-.wp-block-video figcaption {
+.wp-block-video :where(figcaption) {
   margin-top: 0.5em;
   margin-bottom: 1em;
 }

package/build-style/video/style.css

@@ -101,7 +101,7 @@
 .wp-block-video.aligncenter {
   text-align: center;
 }
-.wp-block-video figcaption {
+.wp-block-video :where(figcaption) {
   margin-top: 0.5em;
   margin-bottom: 1em;
 }

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

@@ -86,12 +86,12 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-video figcaption {
+.wp-block-video :where(figcaption) {
   color: #555;
   font-size: 13px;
   text-align: center;
 }
-.is-dark-theme .wp-block-video figcaption {
+.is-dark-theme .wp-block-video :where(figcaption) {
   color: rgba(255, 255, 255, 0.65);
 }
 

package/build-style/video/theme.css

@@ -86,12 +86,12 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-video figcaption {
+.wp-block-video :where(figcaption) {
   color: #555;
   font-size: 13px;
   text-align: center;
 }
-.is-dark-theme .wp-block-video figcaption {
+.is-dark-theme .wp-block-video :where(figcaption) {
   color: rgba(255, 255, 255, 0.65);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.0.3",
+	"version": "9.0.4",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -36,11 +36,11 @@
 		"@wordpress/api-fetch": "^7.0.1",
 		"@wordpress/autop": "^4.0.1",
 		"@wordpress/blob": "^4.0.1",
-		"@wordpress/block-editor": "^13.0.2",
-		"@wordpress/blocks": "^13.0.2",
-		"@wordpress/components": "^28.0.2",
+		"@wordpress/block-editor": "^13.0.3",
+		"@wordpress/blocks": "^13.0.3",
+		"@wordpress/components": "^28.0.3",
 		"@wordpress/compose": "^7.0.1",
-		"@wordpress/core-data": "^7.0.2",
+		"@wordpress/core-data": "^7.0.3",
 		"@wordpress/data": "^10.0.2",
 		"@wordpress/date": "^5.0.1",
 		"@wordpress/deprecated": "^4.0.1",
@@ -50,18 +50,18 @@
 		"@wordpress/hooks": "^4.0.1",
 		"@wordpress/html-entities": "^4.0.1",
 		"@wordpress/i18n": "^5.0.1",
-		"@wordpress/icons": "^10.0.1",
-		"@wordpress/interactivity": "^6.0.1",
-		"@wordpress/interactivity-router": "^2.0.1",
+		"@wordpress/icons": "^10.0.2",
+		"@wordpress/interactivity": "^6.0.2",
+		"@wordpress/interactivity-router": "^2.0.2",
 		"@wordpress/keyboard-shortcuts": "^5.0.2",
 		"@wordpress/keycodes": "^4.0.1",
 		"@wordpress/notices": "^5.0.2",
-		"@wordpress/patterns": "^2.0.2",
+		"@wordpress/patterns": "^2.0.3",
 		"@wordpress/primitives": "^4.0.1",
 		"@wordpress/private-apis": "^1.0.2",
-		"@wordpress/reusable-blocks": "^5.0.2",
+		"@wordpress/reusable-blocks": "^5.0.3",
 		"@wordpress/rich-text": "^7.0.2",
-		"@wordpress/server-side-render": "^5.0.2",
+		"@wordpress/server-side-render": "^5.0.3",
 		"@wordpress/url": "^4.0.1",
 		"@wordpress/viewport": "^6.0.2",
 		"@wordpress/wordcount": "^4.0.1",
@@ -82,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d0d80eabf45745725edbb19ce6667157fc68a6aa"
+	"gitHead": "9dd5f8dcfa4fc7242e5d48be20ee789ad087b432"
 }

package/src/audio/style.scss

@@ -4,7 +4,7 @@
 	// Supply caption styles to audio blocks, even if the theme hasn't opted in.
 	// Reason being: the new markup, <figcaptions>, are not likely to be styled in the majority of existing themes,
 	// so we supply the styles so as to not appear broken or unstyled in those themes.
-	figcaption {
+	:where(figcaption) {
 		@include caption-style();
 	}
 

package/src/audio/theme.scss

@@ -1,4 +1,4 @@
-.wp-block-audio figcaption {
+.wp-block-audio :where(figcaption) {
 	@include caption-style-theme();
 }
 

package/src/embed/style.scss

@@ -25,7 +25,7 @@
 	// Supply caption styles to embeds, even if the theme hasn't opted in.
 	// Reason being: the new markup, figcaptions, are not likely to be styled in the majority of existing themes,
 	// so we supply the styles so as to not appear broken or unstyled in those.
-	figcaption {
+	:where(figcaption) {
 		@include caption-style();
 	}
 

package/src/embed/theme.scss

@@ -1,4 +1,4 @@
-.wp-block-embed figcaption {
+.wp-block-embed :where(figcaption) {
 	@include caption-style-theme();
 }
 

package/src/image/editor.scss

@@ -176,19 +176,6 @@ figure.wp-block-image:not(.wp-block) {
 	}
 }
 
-.wp-block-image__aspect-ratio {
-	height: $grid-unit-60 - $border-width - $border-width;
-	margin-bottom: -$grid-unit-10;
-	display: flex;
-	align-items: center;
-
-	.components-button {
-		width: $button-size;
-		padding-left: 0;
-		padding-right: 0;
-	}
-}
-
 .wp-block-image__toolbar_content_textarea {
 	// Corresponds to the size of the textarea in the block inspector.
 	width: 250px;

package/src/image/image.js

@@ -426,6 +426,9 @@ export default function Image( {
 		</InspectorControls>
 	);
 
+	const arePatternOverridesEnabled =
+		metadata?.bindings?.__default?.source === 'core/pattern-overrides';
+
 	const {
 		lockUrlControls = false,
 		lockHrefControls = false,
@@ -470,7 +473,7 @@ export default function Image( {
 				lockHrefControls:
 					// Disable editing the link of the URL if the image is inside a pattern instance.
 					// This is a temporary solution until we support overriding the link on the frontend.
-					hasParentPattern,
+					hasParentPattern || arePatternOverridesEnabled,
 				lockCaption:
 					// Disable editing the caption if the image is inside a pattern instance.
 					// This is a temporary solution until we support overriding the caption on the frontend.
@@ -971,7 +974,11 @@ export default function Image( {
 				isSelected={ isSingleSelected }
 				insertBlocksAfter={ insertBlocksAfter }
 				label={ __( 'Image caption text' ) }
-				showToolbarButton={ isSingleSelected && hasNonContentControls }
+				showToolbarButton={
+					isSingleSelected &&
+					hasNonContentControls &&
+					! arePatternOverridesEnabled
+				}
 				readOnly={ lockCaption }
 			/>
 		</>

package/src/image/style.scss

@@ -78,7 +78,7 @@
 	// Supply caption styles to images, even if the theme hasn't opted in.
 	// Reason being: the new markup, <figcaptions>, are not likely to be styled in the majority of existing themes,
 	// so we supply the styles so as to not appear broken or unstyled in those themes.
-	figcaption {
+	:where(figcaption) {
 		@include caption-style();
 	}
 

package/src/media-text/index.php

@@ -29,28 +29,78 @@ function render_block_core_media_text( $attributes, $content ) {
 		return $content;
 	}
 
-	$image_tag = '<figure class="wp-block-media-text__media"><img>';
-	$content   = preg_replace( '/<figure\s+class="wp-block-media-text__media">/', $image_tag, $content );
+	$media_tag_processor   = new WP_HTML_Tag_Processor( $content );
+	$wrapping_figure_query = array(
+		'tag_name'   => 'figure',
+		'class_name' => 'wp-block-media-text__media',
+	);
+	$has_media_on_right    = isset( $attributes['mediaPosition'] ) && 'right' === $attributes['mediaPosition'];
+	$image_fill            = isset( $attributes['imageFill'] ) && $attributes['imageFill'];
+	$focal_point           = isset( $attributes['focalPoint'] ) ? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%' : '50% 50%';
+	$unique_id             = 'wp-block-media-text__media-' . wp_unique_id();
 
-	$processor = new WP_HTML_Tag_Processor( $content );
-	if ( isset( $attributes['imageFill'] ) && $attributes['imageFill'] ) {
-		$position = '50% 50%';
-		if ( isset( $attributes['focalPoint'] ) ) {
-			$position = round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%';
+	if ( $has_media_on_right ) {
+		// Loop through all the figure tags and set a bookmark on the last figure tag.
+		while ( $media_tag_processor->next_tag( $wrapping_figure_query ) ) {
+			$media_tag_processor->set_bookmark( 'last_figure' );
+		}
+		if ( $media_tag_processor->has_bookmark( 'last_figure' ) ) {
+			$media_tag_processor->seek( 'last_figure' );
+			if ( $image_fill ) {
+				$media_tag_processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $focal_point . ';' );
+			} else {
+				// Insert a unique ID to identify the figure tag.
+				$media_tag_processor->set_attribute( 'id', $unique_id );
+			}
+		}
+	} else {
+		if ( $media_tag_processor->next_tag( $wrapping_figure_query ) ) {
+			if ( $image_fill ) {
+				$media_tag_processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $focal_point . ';' );
+			} else {
+				// Insert a unique ID to identify the figure tag.
+				$media_tag_processor->set_attribute( 'id', $unique_id );
+			}
 		}
-		$processor->next_tag( 'figure' );
-		$processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $position . ';' );
-	}
-	$processor->next_tag( 'img' );
-	$media_size_slug = 'full';
-	if ( isset( $attributes['mediaSizeSlug'] ) ) {
-		$media_size_slug = $attributes['mediaSizeSlug'];
 	}
-	$processor->set_attribute( 'src', esc_url( $current_featured_image ) );
-	$processor->set_attribute( 'class', 'wp-image-' . get_post_thumbnail_id() . ' size-' . $media_size_slug );
-	$processor->set_attribute( 'alt', trim( strip_tags( get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ) ) );
 
-	$content = $processor->get_updated_html();
+	$content = $media_tag_processor->get_updated_html();
+
+	// If the image is not set to fill, add the image tag inside the figure tag,
+	// and update the image attributes in order to display the featured image.
+	if ( ! $image_fill ) {
+		$media_size_slug = isset( $attributes['mediaSizeSlug'] ) ? $attributes['mediaSizeSlug'] : 'full';
+		$image_tag       = '<img class="wp-block-media-text__featured_image">';
+		$content         = preg_replace(
+			'/(<figure\s+id="' . preg_quote( $unique_id, '/' ) . '"\s+class="wp-block-media-text__media"\s*>)/',
+			'$1' . $image_tag,
+			$content
+		);
+
+		$image_tag_processor = new WP_HTML_Tag_Processor( $content );
+		if ( $image_tag_processor->next_tag(
+			array(
+				'tag_name' => 'figure',
+				'id'       => $unique_id,
+			)
+		) ) {
+			// The ID is only used to ensure that the correct figure tag is selected,
+			// and can now be removed.
+			$image_tag_processor->remove_attribute( 'id' );
+			if ( $image_tag_processor->next_tag(
+				array(
+					'tag_name'   => 'img',
+					'class_name' => 'wp-block-media-text__featured_image',
+				)
+			) ) {
+				$image_tag_processor->set_attribute( 'src', esc_url( $current_featured_image ) );
+				$image_tag_processor->set_attribute( 'class', 'wp-image-' . get_post_thumbnail_id() . ' size-' . $media_size_slug );
+				$image_tag_processor->set_attribute( 'alt', trim( strip_tags( get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ) ) );
+
+				$content = $image_tag_processor->get_updated_html();
+			}
+		}
+	}
 
 	return $content;
 }

package/src/navigation/index.php

@@ -519,9 +519,11 @@ class WP_Navigation_Block_Renderer {
 			';
 		}
 
+		$overlay_inline_styles = esc_attr( safecss_filter_attr( $colors['overlay_inline_styles'] ) );
+
 		return sprintf(
 			'<button aria-haspopup="dialog" %3$s class="%6$s" %10$s>%8$s</button>
-				<div class="%5$s" style="%7$s" id="%1$s" %11$s>
+				<div class="%5$s" %7$s id="%1$s" %11$s>
 					<div class="wp-block-navigation__responsive-close" tabindex="-1">
 						<div class="wp-block-navigation__responsive-dialog" %12$s>
 							<button %4$s class="wp-block-navigation__responsive-container-close" %13$s>%9$s</button>
@@ -537,7 +539,7 @@ class WP_Navigation_Block_Renderer {
 			$toggle_aria_label_close,
 			esc_attr( implode( ' ', $responsive_container_classes ) ),
 			esc_attr( implode( ' ', $open_button_classes ) ),
-			esc_attr( safecss_filter_attr( $colors['overlay_inline_styles'] ) ),
+			( ! empty( $overlay_inline_styles ) ) ? "style=\"$overlay_inline_styles\"" : '',
 			$toggle_button_content,
 			$toggle_close_button_content,
 			$open_button_directives,
@@ -826,7 +828,7 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 		$tags->set_attribute( 'data-wp-interactive', 'core/navigation' );
 		$tags->set_attribute( 'data-wp-context', '{ "submenuOpenedBy": { "click": false, "hover": false, "focus": false }, "type": "submenu" }' );
 		$tags->set_attribute( 'data-wp-watch', 'callbacks.initMenu' );
-		$tags->set_attribute( 'data-wp-on-async--focusout', 'actions.handleMenuFocusout' );
+		$tags->set_attribute( 'data-wp-on--focusout', 'actions.handleMenuFocusout' );
 		$tags->set_attribute( 'data-wp-on--keydown', 'actions.handleMenuKeydown' );
 
 		// This is a fix for Safari. Without it, Safari doesn't change the active

package/src/navigation/style.scss

@@ -300,6 +300,7 @@ button.wp-block-navigation-item__content {
 	color: currentColor;
 	font-size: inherit;
 	font-family: inherit;
+	letter-spacing: inherit;
 	line-height: inherit;
 	font-style: inherit;
 	font-weight: inherit;

package/src/reset.scss

@@ -8,19 +8,18 @@
 // We use :where to keep specificity minimal.
 // https://css-tricks.com/almanac/selectors/w/where/
 :where(.editor-styles-wrapper) {
-	/**
-	* The following styles revert to the browser defaults overriding the WPAdmin styles.
-	* This is only needed while the block editor is not being loaded in an iframe.
-	*/
-	font-family: serif; // unfortunately initial doesn't work for font-family.
-	font-size: initial;
-	line-height: initial;
-	color: initial;
+	// The following styles revert to the browser defaults overriding the WPAdmin styles.
+	html & {
+		font-family: serif; // unfortunately initial doesn't work for font-family.
+		font-size: initial;
+		line-height: initial;
+		color: initial;
 
-	// Many themes with white backgrounds load editor styles but fail to also provide
-	// an explicit white background color, assuming a white editing canvas.
-	// So to match browser defaults, we provide a white default here as well.
-	background: #fff;
+		// Many themes with white backgrounds load editor styles but fail to also provide
+		// an explicit white background color, assuming a white editing canvas.
+		// So to match browser defaults, we provide a white default here as well.
+		background: #fff;
+	}
 
 	.wp-align-wrapper {
 		max-width: $content-width;

package/src/table/theme.scss

@@ -6,7 +6,7 @@
 		word-break: normal;
 	}
 
-	figcaption {
+	:where(figcaption) {
 		@include caption-style-theme();
 	}
 }

package/src/video/style.scss

@@ -19,7 +19,7 @@
 	// Supply caption styles to videos, even if the theme hasn't opted in.
 	// Reason being: the new markup, <figcaptions>, are not likely to be styled in the majority of existing themes,
 	// so we supply the styles so as to not appear broken or unstyled in those themes.
-	figcaption {
+	:where(figcaption) {
 		@include caption-style();
 	}
 }

package/src/video/theme.scss

@@ -1,4 +1,4 @@
-.wp-block-video figcaption {
+.wp-block-video :where(figcaption) {
 	@include caption-style-theme();
 }