@wordpress/block-library 8.19.2 → 8.19.4

package/src/footnotes/index.php

@@ -39,15 +39,20 @@ function render_block_core_footnotes( $attributes, $content, $block ) {
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes();
+	$footnote_index     = 1;
 
 	$block_content = '';
 
 	foreach ( $footnotes as $footnote ) {
+		// Translators: %d: Integer representing the number of return links on the page.
+		$aria_label     = sprintf( __( 'Jump to footnote reference %1$d' ), $footnote_index );
 		$block_content .= sprintf(
-			'<li id="%1$s">%2$s <a href="#%1$s-link">↩︎</a></li>',
+			'<li id="%1$s">%2$s <a href="#%1$s-link" aria-label="%3$s">↩︎</a></li>',
 			$footnote['id'],
-			$footnote['content']
+			$footnote['content'],
+			$aria_label
 		);
+		++$footnote_index;
 	}
 
 	return sprintf(
@@ -68,9 +73,10 @@ function register_block_core_footnotes() {
 			$post_type,
 			'footnotes',
 			array(
-				'show_in_rest' => true,
-				'single'       => true,
-				'type'         => 'string',
+				'show_in_rest'      => true,
+				'single'            => true,
+				'type'              => 'string',
+				'revisions_enabled' => true,
 			)
 		);
 	}
@@ -84,106 +90,7 @@ function register_block_core_footnotes() {
 add_action( 'init', 'register_block_core_footnotes' );
 
 /**
- * Saves the footnotes meta value to the revision.
- *
- * @since 6.3.0
- *
- * @param int $revision_id The revision ID.
- */
-function wp_save_footnotes_meta( $revision_id ) {
-	$post_id = wp_is_post_revision( $revision_id );
-
-	if ( $post_id ) {
-		$footnotes = get_post_meta( $post_id, 'footnotes', true );
-
-		if ( $footnotes ) {
-			// Can't use update_post_meta() because it doesn't allow revisions.
-			update_metadata( 'post', $revision_id, 'footnotes', wp_slash( $footnotes ) );
-		}
-	}
-}
-add_action( 'wp_after_insert_post', 'wp_save_footnotes_meta' );
-
-/**
- * Keeps track of the revision ID for "rest_after_insert_{$post_type}".
- *
- * @since 6.3.0
- *
- * @global int $wp_temporary_footnote_revision_id The footnote revision ID.
- *
- * @param int $revision_id The revision ID.
- */
-function wp_keep_footnotes_revision_id( $revision_id ) {
-	global $wp_temporary_footnote_revision_id;
-	$wp_temporary_footnote_revision_id = $revision_id;
-}
-add_action( '_wp_put_post_revision', 'wp_keep_footnotes_revision_id' );
-
-/**
- * This is a specific fix for the REST API. The REST API doesn't update
- * the post and post meta in one go (through `meta_input`). While it
- * does fix the `wp_after_insert_post` hook to be called correctly after
- * updating meta, it does NOT fix hooks such as post_updated and
- * save_post, which are normally also fired after post meta is updated
- * in `wp_insert_post()`. Unfortunately, `wp_save_post_revision` is
- * added to the `post_updated` action, which means the meta is not
- * available at the time, so we have to add it afterwards through the
- * `"rest_after_insert_{$post_type}"` action.
- *
- * @since 6.3.0
- *
- * @global int $wp_temporary_footnote_revision_id The footnote revision ID.
- *
- * @param WP_Post $post The post object.
- */
-function wp_add_footnotes_revisions_to_post_meta( $post ) {
-	global $wp_temporary_footnote_revision_id;
-
-	if ( $wp_temporary_footnote_revision_id ) {
-		$revision = get_post( $wp_temporary_footnote_revision_id );
-
-		if ( ! $revision ) {
-			return;
-		}
-
-		$post_id = $revision->post_parent;
-
-		// Just making sure we're updating the right revision.
-		if ( $post->ID === $post_id ) {
-			$footnotes = get_post_meta( $post_id, 'footnotes', true );
-
-			if ( $footnotes ) {
-				// Can't use update_post_meta() because it doesn't allow revisions.
-				update_metadata( 'post', $wp_temporary_footnote_revision_id, 'footnotes', wp_slash( $footnotes ) );
-			}
-		}
-	}
-}
-
-add_action( 'rest_after_insert_post', 'wp_add_footnotes_revisions_to_post_meta' );
-add_action( 'rest_after_insert_page', 'wp_add_footnotes_revisions_to_post_meta' );
-
-/**
- * Restores the footnotes meta value from the revision.
- *
- * @since 6.3.0
- *
- * @param int $post_id     The post ID.
- * @param int $revision_id The revision ID.
- */
-function wp_restore_footnotes_from_revision( $post_id, $revision_id ) {
-	$footnotes = get_post_meta( $revision_id, 'footnotes', true );
-
-	if ( $footnotes ) {
-		update_post_meta( $post_id, 'footnotes', wp_slash( $footnotes ) );
-	} else {
-		delete_post_meta( $post_id, 'footnotes' );
-	}
-}
-add_action( 'wp_restore_post_revision', 'wp_restore_footnotes_from_revision', 10, 2 );
-
-/**
- * Adds the footnotes field to the revision.
+ * Adds the footnotes field to the revisions display.
  *
  * @since 6.3.0
  *
@@ -197,7 +104,7 @@ function wp_add_footnotes_to_revision( $fields ) {
 add_filter( '_wp_post_revision_fields', 'wp_add_footnotes_to_revision' );
 
 /**
- * Gets the footnotes field from the revision.
+ * Gets the footnotes field from the revision for the revisions screen.
  *
  * @since 6.3.0
  *
@@ -211,76 +118,3 @@ function wp_get_footnotes_from_revision( $revision_field, $field, $revision ) {
 	return get_metadata( 'post', $revision->ID, $field, true );
 }
 add_filter( '_wp_post_revision_field_footnotes', 'wp_get_footnotes_from_revision', 10, 3 );
-
-/**
- * The REST API autosave endpoint doesn't save meta, so we can use the
- * `wp_creating_autosave` when it updates an exiting autosave, and
- * `_wp_put_post_revision` when it creates a new autosave.
- *
- * @since 6.3.0
- *
- * @param int|array $autosave The autosave ID or array.
- */
-function _wp_rest_api_autosave_meta( $autosave ) {
-	// Ensure it's a REST API request.
-	if ( ! defined( 'REST_REQUEST' ) || ! REST_REQUEST ) {
-		return;
-	}
-
-	$body = rest_get_server()->get_raw_data();
-	$body = json_decode( $body, true );
-
-	if ( ! isset( $body['meta']['footnotes'] ) ) {
-		return;
-	}
-
-	// `wp_creating_autosave` passes the array,
-	// `_wp_put_post_revision` passes the ID.
-	$id = is_int( $autosave ) ? $autosave : $autosave['ID'];
-
-	if ( ! $id ) {
-		return;
-	}
-
-	update_post_meta( $id, 'footnotes', wp_slash( $body['meta']['footnotes'] ) );
-}
-// See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L391C1-L391C1.
-add_action( 'wp_creating_autosave', '_wp_rest_api_autosave_meta' );
-// See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L398.
-// Then https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/revision.php#L367.
-add_action( '_wp_put_post_revision', '_wp_rest_api_autosave_meta' );
-
-/**
- * This is a workaround for the autosave endpoint returning early if the
- * revision field are equal. The problem is that "footnotes" is not real
- * revision post field, so there's nothing to compare against.
- *
- * This trick sets the "footnotes" field (value doesn't matter), which will
- * cause the autosave endpoint to always update the latest revision. That should
- * be fine, it should be ok to update the revision even if nothing changed. Of
- * course, this is temporary fix.
- *
- * @since 6.3.0
- *
- * @param WP_Post         $prepared_post The prepared post object.
- * @param WP_REST_Request $request       The request object.
- *
- * See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L365-L384.
- * See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L219.
- */
-function _wp_rest_api_force_autosave_difference( $prepared_post, $request ) {
-	// We only want to be altering POST requests.
-	if ( $request->get_method() !== 'POST' ) {
-		return $prepared_post;
-	}
-
-	// Only alter requests for the '/autosaves' route.
-	if ( substr( $request->get_route(), -strlen( '/autosaves' ) ) !== '/autosaves' ) {
-		return $prepared_post;
-	}
-
-	$prepared_post->footnotes = '[]';
-	return $prepared_post;
-}
-
-add_filter( 'rest_pre_insert_post', '_wp_rest_api_force_autosave_difference', 10, 2 );

package/src/image/image.js

@@ -372,10 +372,10 @@ export default function Image( {
 	const lightboxSetting = useSetting( 'lightbox' );
 
 	const showLightboxToggle =
-		lightboxSetting === true || lightboxSetting?.allowEditing === true;
+		!! lightbox || lightboxSetting?.allowEditing === true;
 
 	const lightboxChecked =
-		lightbox?.enabled || ( ! lightbox && lightboxSetting?.enabled );
+		!! lightbox?.enabled || ( ! lightbox && !! lightboxSetting?.enabled );
 
 	const dimensionsControl = (
 		<DimensionsTool

package/src/image/index.php

@@ -9,10 +9,11 @@
  * Renders the `core/image` block on the server,
  * adding a data-id attribute to the element if core/gallery has added on pre-render.
  *
- * @param  array    $attributes The block attributes.
- * @param  string   $content    The block content.
- * @param  WP_Block $block      The block object.
- * @return string Returns the block content with the data-id attribute added.
+ * @param array    $attributes The block attributes.
+ * @param string   $content    The block content.
+ * @param WP_Block $block      The block object.
+ *
+ * @return string The block content with the data-id attribute added.
  */
 function render_block_core_image( $attributes, $content, $block ) {
 
@@ -64,19 +65,25 @@ function render_block_core_image( $attributes, $content, $block ) {
 	}
 
 	if ( $lightbox_enabled ) {
-		return block_core_image_render_lightbox( $processor->get_updated_html(), $block->parsed_block );
+		// This render needs to happen in a filter with priority 15 to ensure that it
+		// runs after the duotone filter and that duotone styles are applied to the image
+		// in the lightbox. We also need to ensure that the lightbox works with any plugins
+		// that might use filters as well. We can consider removing this in the future if the
+		// way the blocks are rendered changes, or if a new kind of filter is introduced.
+		add_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15, 2 );
 	}
 
 	return $processor->get_updated_html();
 }
 
 /**
- * Add the lightboxEnabled flag to the block data.
+ * Adds the lightboxEnabled flag to the block data.
  *
  * This is used to determine whether the lightbox should be rendered or not.
  *
- * @param  array $block Block data.
- * @return array        Filtered block data.
+ * @param array $block Block data.
+ *
+ * @return array Filtered block data.
  */
 function block_core_image_get_lightbox_settings( $block ) {
 	// Get the lightbox setting from the block attributes.
@@ -108,43 +115,44 @@ function block_core_image_get_lightbox_settings( $block ) {
 }
 
 /**
- * Add the directives and layout needed for the lightbox behavior.
+ * Adds the directives and layout needed for the lightbox behavior.
+ *
+ * @param string $block_content Rendered block content.
+ * @param array  $block         Block object.
  *
- * @param  string $block_content        Rendered block content.
- * @param  array  $block                Block object.
- * @return string                Filtered block content.
+ * @return string Filtered block content.
  */
 function block_core_image_render_lightbox( $block_content, $block ) {
 	$processor = new WP_HTML_Tag_Processor( $block_content );
 
 	$aria_label = __( 'Enlarge image' );
 
+	$processor->next_tag( 'img' );
 	$alt_attribute = $processor->get_attribute( 'alt' );
 
-	if ( null !== $alt_attribute ) {
+	// An empty alt attribute `alt=""` is valid for decorative images.
+	if ( is_string( $alt_attribute ) ) {
 		$alt_attribute = trim( $alt_attribute );
 	}
 
+	// It only makes sense to append the alt text to the button aria-label when the alt text is non-empty.
 	if ( $alt_attribute ) {
 		/* translators: %s: Image alt text. */
 		$aria_label = sprintf( __( 'Enlarge image: %s' ), $alt_attribute );
 	}
-	$content = $processor->get_updated_html();
 
 	// Currently, we are only enabling the zoom animation.
 	$lightbox_animation = 'zoom';
 
-	// We want to store the src in the context so we can set it dynamically when the lightbox is opened.
-	$z = new WP_HTML_Tag_Processor( $content );
-	$z->next_tag( 'img' );
-
+	// Note: We want to store the `src` in the context so we
+	// can set it dynamically when the lightbox is opened.
 	if ( isset( $block['attrs']['id'] ) ) {
 		$img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] );
 		$img_metadata     = wp_get_attachment_metadata( $block['attrs']['id'] );
 		$img_width        = $img_metadata['width'];
 		$img_height       = $img_metadata['height'];
 	} else {
-		$img_uploaded_src = $z->get_attribute( 'src' );
+		$img_uploaded_src = $processor->get_attribute( 'src' );
 		$img_width        = 'none';
 		$img_height       = 'none';
 	}
@@ -155,7 +163,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 		$scale_attr = false;
 	}
 
-	$w = new WP_HTML_Tag_Processor( $content );
+	$w = new WP_HTML_Tag_Processor( $block_content );
 	$w->next_tag( 'figure' );
 	$w->add_class( 'wp-lightbox-container' );
 	$w->set_attribute( 'data-wp-interactive', true );
@@ -175,7 +183,8 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 						"imageCurrentSrc": "",
 						"targetWidth": "%s",
 						"targetHeight": "%s",
-						"scaleAttr": "%s"
+						"scaleAttr": "%s",
+						"dialogLabel": "%s"
 					}
 				}
 			}',
@@ -183,7 +192,8 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 			$img_uploaded_src,
 			$img_width,
 			$img_height,
-			$scale_attr
+			$scale_attr,
+			__( 'Enlarged image' )
 		)
 	);
 	$w->next_tag( 'img' );
@@ -195,19 +205,20 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	// Wrap the image in the body content with a button.
 	$img = null;
 	preg_match( '/<img[^>]+>/', $body_content, $img );
-	$button       =
-				'<button
-					type="button"
-					aria-haspopup="dialog"
-					aria-label="' . esc_attr( $aria_label ) . '"
-					data-wp-on--click="actions.core.image.showLightbox"
-					data-wp-style--width="context.core.image.imageButtonWidth"
-					data-wp-style--height="context.core.image.imageButtonHeight"
-					data-wp-style--left="context.core.image.imageButtonLeft"
-					data-wp-style--top="context.core.image.imageButtonTop"
-				>
-				</button>'
-				. $img[0];
+
+	$button =
+		$img[0]
+		. '<button
+			type="button"
+			aria-haspopup="dialog"
+			aria-label="' . esc_attr( $aria_label ) . '"
+			data-wp-on--click="actions.core.image.showLightbox"
+			data-wp-style--width="context.core.image.imageButtonWidth"
+			data-wp-style--height="context.core.image.imageButtonHeight"
+			data-wp-style--left="context.core.image.imageButtonLeft"
+			data-wp-style--top="context.core.image.imageButtonTop"
+		></button>';
+
 	$body_content = preg_replace( '/<img[^>]+>/', $button, $body_content );
 
 	// We need both a responsive image and an enlarged image to animate
@@ -215,7 +226,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	// image is a copy of the one in the body, which animates immediately
 	// as the lightbox is opened, while the enlarged one is a full-sized
 	// version that will likely still be loading as the animation begins.
-	$m = new WP_HTML_Tag_Processor( $content );
+	$m = new WP_HTML_Tag_Processor( $block_content );
 	$m->next_tag( 'figure' );
 	$m->add_class( 'responsive-image' );
 	$m->next_tag( 'img' );
@@ -231,7 +242,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$m->set_attribute( 'data-wp-style--object-fit', 'selectors.core.image.lightboxObjectFit' );
 	$initial_image_content = $m->get_updated_html();
 
-	$q = new WP_HTML_Tag_Processor( $content );
+	$q = new WP_HTML_Tag_Processor( $block_content );
 	$q->next_tag( 'figure' );
 	$q->add_class( 'enlarged-image' );
 	$q->next_tag( 'img' );
@@ -247,27 +258,37 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$q->set_attribute( 'data-wp-style--object-fit', 'selectors.core.image.lightboxObjectFit' );
 	$enlarged_image_content = $q->get_updated_html();
 
-	$background_color = esc_attr( wp_get_global_styles( array( 'color', 'background' ) ) );
+	// If the current theme does NOT have a `theme.json`, or the colors are not defined,
+	// we need to set the background color & close button color to some default values
+	// because we can't get them from the Global Styles.
+	$background_color   = '#fff';
+	$close_button_color = '#000';
+	if ( wp_theme_has_theme_json() ) {
+		$global_styles_color = wp_get_global_styles( array( 'color' ) );
+		if ( ! empty( $global_styles_color['background'] ) ) {
+			$background_color = esc_attr( $global_styles_color['background'] );
+		}
+		if ( ! empty( $global_styles_color['text'] ) ) {
+			$close_button_color = esc_attr( $global_styles_color['text'] );
+		}
+	}
 
 	$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_color = esc_attr( wp_get_global_styles( array( 'color', 'text' ) ) );
-	$dialog_label       = $alt_attribute ? esc_attr( $alt_attribute ) : esc_attr__( 'Image' );
 	$close_button_label = esc_attr__( 'Close' );
 
 	$lightbox_html = <<<HTML
         <div data-wp-body="" class="wp-lightbox-overlay $lightbox_animation"
             data-wp-bind--role="selectors.core.image.roleAttribute"
-            aria-label="$dialog_label"
+            data-wp-bind--aria-label="selectors.core.image.dialogLabel"
             data-wp-class--initialized="context.core.image.initialized"
             data-wp-class--active="context.core.image.lightboxEnabled"
             data-wp-class--hideAnimationEnabled="context.core.image.hideAnimationEnabled"
-            data-wp-bind--aria-hidden="!context.core.image.lightboxEnabled"
-            aria-hidden="true"
-            data-wp-bind--aria-modal="context.core.image.lightboxEnabled"
-            aria-modal="false"
+            data-wp-bind--aria-modal="selectors.core.image.ariaModal"
             data-wp-effect="effects.core.image.initLightbox"
             data-wp-on--keydown="actions.core.image.handleKeydown"
-            data-wp-on--mousewheel="actions.core.image.hideLightbox"
+            data-wp-on--touchstart="actions.core.image.handleTouchStart"
+            data-wp-on--touchmove="actions.core.image.handleTouchMove"
+            data-wp-on--touchend="actions.core.image.handleTouchEnd"
             data-wp-on--click="actions.core.image.hideLightbox"
             >
                 <button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
@@ -275,7 +296,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
                 </button>
                 <div class="lightbox-image-container">$initial_image_content</div>
 				<div class="lightbox-image-container">$enlarged_image_content</div>
-                <div class="scrim" style="background-color: $background_color"></div>
+                <div class="scrim" style="background-color: $background_color" aria-hidden="true"></div>
         </div>
 HTML;
 
@@ -283,11 +304,13 @@ HTML;
 }
 
 /**
- * Ensure that the view script has the `wp-interactivity` dependency.
+ * Ensures that the view script has the `wp-interactivity` dependency.
  *
  * @since 6.4.0
  *
  * @global WP_Scripts $wp_scripts
+ *
+ * @return void
  */
 function block_core_image_ensure_interactivity_dependency() {
 	global $wp_scripts;
@@ -303,6 +326,8 @@ add_action( 'wp_print_scripts', 'block_core_image_ensure_interactivity_dependenc
 
 /**
  * Registers the `core/image` block on server.
+ *
+ * @return void
  */
 function register_block_core_image() {
 	register_block_type_from_metadata(

package/src/image/style.scss

@@ -154,6 +154,8 @@
 
 .wp-lightbox-container {
 	position: relative;
+	display: flex;
+	flex-direction: column;
 
 	button {
 		border: none;
@@ -169,6 +171,13 @@
 			outline: 5px auto -webkit-focus-ring-color;
 			outline-offset: 5px;
 		}
+
+		&:hover,
+		&:focus,
+		&:not(:hover):not(:active):not(.has-background) {
+			background: none;
+			border: none;
+		}
 	}
 }
 
@@ -186,11 +195,23 @@
 
 	.close-button {
 		position: absolute;
-		top: calc(env(safe-area-inset-top) + 12.5px);
-		right: calc(env(safe-area-inset-right) + 12.5px);
+		top: calc(env(safe-area-inset-top) + 16px); // equivalent to $grid-unit-20
+		right: calc(env(safe-area-inset-right) + 16px); // equivalent to $grid-unit-20
 		padding: 0;
 		cursor: pointer;
 		z-index: 5000000;
+		min-width: 40px; // equivalent to $button-size-next-default-40px
+		min-height: 40px; // equivalent to $button-size-next-default-40px
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		&:hover,
+		&:focus,
+		&:not(:hover):not(:active):not(.has-background) {
+			background: none;
+			border: none;
+		}
 	}
 
 	.lightbox-image-container {
@@ -297,10 +318,6 @@
 	}
 }
 
-html.wp-has-lightbox-open {
-	overflow: hidden;
-}
-
 @keyframes turn-on-visibility {
 	0% {
 		opacity: 0;