Add more data about the image as block props in the image block

docs/designers-developers/key-concepts.md

@@ -130,8 +130,10 @@ _N.B.:_ The defining aspect of blocks are their semantics and the isolation mech
 When blocks are saved to the content, after the editing session, its attributes—depending on the nature of the block—are serialized to these explicit comment delimiters.
 
 ```html
-<!-- wp:image -->
-<figure class="wp-block-image"><img src="source.jpg" alt="" /></figure>
+<!-- wp:image {"url":"source.jpg"} -->
+<figure class="wp-block-image">
+	<img src="source.jpg" alt="" />
+</figure>
 <!-- /wp:image -->
 ```
 

lib/compat.php

@@ -304,6 +304,286 @@ function gutenberg_warn_classic_about_blocks() {
 	<?php
 }
 
+/**
+ * Add 'actual_size' to the prepared attachment data for the Media Library.
+ *
+ * Needed as `wp_prepare_attachment_for_js()` (for the media modal) constrains
+ * the image sizes to the theme's `$content_width`.
+ *
+ * @param array   $response   Array of prepared attachment data.
+ * @param WP_Post $attachment Attachment object.
+ * @param array   $meta       Array of attachment meta data.
+ * @return array Array of prepared attachment data.
+ */
+function gutenberg_prepare_attachment_for_js( $response, $attachment, $meta ) {
+	if ( ! empty( $response['type'] ) && 'image' === $response['type'] && ! empty( $response['sizes'] ) ) {
+		foreach ( $response['sizes'] as $size_name => $size ) {
+			if ( array_key_exists( $size_name, $meta['sizes'] ) ) {
+				$response['sizes'][ $size_name ]['actual_size'] = array(
+					'width'  => (int) $meta['sizes'][ $size_name ]['width'],
+					'height' => (int) $meta['sizes'][ $size_name ]['height'],
+				);
+			}
+		}
+	}
+
+	return $response;
+}
+add_filter( 'wp_prepare_attachment_for_js', 'gutenberg_prepare_attachment_for_js', 10, 3 );
+
+/**
+ * Warm the object cache with post and meta information for all found image
+ * blocks to avoid making individual database calls (similarly to
+ * `wp_make_content_images_responsive()`).
+ *
+ * @access private
+ * @since 4.5.0
+ *
+ * @param string $content The post content.
+ * @return string $content Unchanged post content.
+ */
+function _gutenberg_cache_images_meta( $content ) {
+	// Need to find all image blocks and their attachment IDs BEFORE block
+	// filtering evaluates the rendered result so that attachements meta is
+	// retrieved all at once from the DB.
+	//
+	// [TODO]: When available, the regular expression should be avoided in
+	// favor of a filter on the parsed result of blocks, still prior to the
+	// rendered evaluation.
+	if ( preg_match_all( '/^<!-- wp:image {.*"id":(\d+).*} -->$/m', $content, $matches ) ) {
+		_prime_post_caches(
+			$matches[1],
+			/* $update_term_cache */ false,
+			/* $update_meta_cache */ true
+		);
+	}
+
+	return $content;
+}
+
+// Run before blocks are parsed.
+add_filter( 'the_content', '_gutenberg_cache_images_meta', 3 );
+
+/**
+ * Calculates the image width and height based on $block_witdh and the
+ * `editWidth` block attribute.
+ *
+ * @since 4.5.0
+ *
+ * @param array $block_attributes The block attributes.
+ * @param array $image_meta       Optional. The image attachment meta data.
+ * @return array|bool An array of the image width and height, in that order, or
+ *                    false if the image data is missing from $block_attributes.
+ */
+function gutenberg_get_image_width_height( $block_attributes, $image_meta = null ) {
+	if ( ! empty( $block_attributes['width'] ) && ! empty( $block_attributes['height'] ) ) {
+		// The image was resized.
+		$image_dimensions = array(
+			$block_attributes['width'],
+			$block_attributes['height'],
+		);
+
+		/*
+		 * Here we can use `$block_attributes['editWidth']` to scale the image
+		 * if we know the theme's "expected width" (in pixels).
+		 *
+		 * Note that if the `$block_attributes['userSetDimensions']` is set/true, the user has entered
+		 * the width and height by hand, they shouldn't probably be changed.
+		 *
+		 * Something like:
+		 *	if ( empty( $block_attributes['userSetDimensions'] ) && ! empty( $block_attributes['editWidth'] ) && $content_width <> $block_attributes['editWidth'] ) {
+		 *		// Scale the image if the block width in the editor was different than the current theme width.
+		 *		$scale = $content_width / $block_attributes['editWidth'];
+		 *		$image_width = round( $block_attributes['width'] * $scale );
+		 *
+		 *		$image_dimensions = wp_constrain_dimensions( $image_file_width, $image_file_height, $image_width );
+		 *	}
+		 */
+	} elseif ( ! empty( $block_attributes['fileWidth'] ) && ! empty( $block_attributes['fileHeight'] ) ) {
+		$image_dimensions = array(
+			$block_attributes['fileWidth'],
+			$block_attributes['fileHeight'],
+		);
+	} else {
+		return false;
+	}
+
+	/*
+	 * Do not constrain images with "wide" and "full" alignment to the "large" image size.
+	 * TODO: To reduce (fix) the need for upscaling or using the "full" size images
+	 * add "xlarge" image size generated by default!
+	 */
+	if (
+		! empty( $image_meta['sizes'] ) &&
+		! empty( $block_attributes['fileWidth'] ) &&
+		( 'wide' === $block_attributes['align'] || 'full' === $block_attributes['align'] )
+	) {
+		$size_updated = false;
+
+		// Attempt to find the largest image size that may have been added by themes or plugins.
+		if ( ! empty( $image_meta['sizes'] ) ) {
+			foreach( $image_meta['sizes'] as $size ) {
+				if ( $size['width'] > $image_dimensions[0] && wp_image_matches_ratio( $block_attributes['fileWidth'], $block_attributes['fileHeight'], $size['width'], $size['height'] ) ) {
+					$image_dimensions = array(
+						$size['width'],
+						$size['height'],
+					);
+
+					$size_updated = true;
+				}
+			}
+		}
+
+		if (
+			! $size_updated &&
+			$block_attributes['fileWidth'] < $image_meta['width'] &&
+			// Do not force site visitors to download HUGE images.
+			// Max 12 MP photo (that's still pretty arbitrary, may be over 3MB, consider reducing).
+			max( (int) $image_meta['width'], (int) $image_meta['height'] ) < 4300 &&
+			wp_image_matches_ratio( $block_attributes['fileWidth'], $block_attributes['fileHeight'], $image_meta['width'], $image_meta['height'] )
+		) {
+			$image_dimensions = array(
+				$image_meta['width'],
+				$image_meta['height'],
+			);
+		}
+	}
+
+	/**
+	 * Filters the image size for the image block.
+	 *
+	 * @since 4.5.0
+	 *
+	 * @param array $image_dimensions The calculated image size width and
+	 *                                height (in that order).
+	 * @param array $block_attributes The block attributes.
+	 * @param array $image_meta       The image attachment meta data.
+	 */
+	return apply_filters( 'block_core_image_get_width_height', $image_dimensions, $block_attributes, $image_meta );
+}
+
+/**
+ * Filters the rendered output of the Image block to include generated HTML
+ * attributes for front-end display.
+ *
+ * @since 4.5.0
+ *
+ * @param string $html  Original HTML.
+ * @param array  $block Parsed block.
+ * @return string Filtered Image block HTML.
+ */
+function gutenberg_render_block_core_image( $html, $block ) {
+	// Old post or... something's wrong.
+	if ( empty( $html ) || empty( $block['attrs'] ) ) {
+		return $html;
+	}
+
+	$defaults = array(
+		'url'   => '',
+		'alt'   => '',
+		'id'    => 0,
+		'align' => '',
+	);
+
+	$block_attributes = wp_parse_args( $block['attrs'], $defaults );
+
+	if ( empty( $block_attributes['url'] ) ) {
+		// We don't have enough data to construct new img tag. Fall back to the existing HTML.
+		return $html;
+	}
+
+	if ( ! empty( $block_attributes['id'] ) ) {
+		$attachment_id = (int) $block_attributes['id'];
+		$image_meta    = wp_get_attachment_metadata( $attachment_id );
+	} else {
+		$attachment_id = 0;
+		$image_meta    = null;
+	}
+
+	$image_dimensions = gutenberg_get_image_width_height( $block_attributes, $image_meta );
+	$image_src        = '';
+	$srcset           = '';
+	$sizes            = '';
+
+	if ( empty( $image_dimensions ) ) {
+		// We don't have enough data to construct new img tag. Fall back to the existing HTML.
+		return $html;
+	}
+
+	$image_src = $block_attributes['url'];
+
+	$image_attributes = array(
+		'src'    => $image_src,
+		'alt'    => empty( $block_attributes['alt'] ) ? '' : $block_attributes['alt'],
+		'width'  => $image_dimensions[0],
+		'height' => $image_dimensions[1],
+	);
+
+	if ( $image_meta ) {
+		// TODO: pass `$block_attributes` to the filter.
+		$srcset = wp_calculate_image_srcset( $image_dimensions, $image_src, $image_meta, $attachment_id );
+
+		if ( ! empty( $srcset ) ) {
+			// TODO: pass `$block_attributes` to the filter. This will let themes generate better `sizes` attribute.
+			$sizes = wp_calculate_image_sizes( $image_dimensions, $image_src, $image_meta, $attachment_id );
+		}
+
+		if ( $srcset && $sizes ) {
+			$image_attributes['srcset'] = $srcset;
+			$image_attributes['sizes']  = $sizes;
+		}
+	}
+
+	/**
+	 * Filters the image tag attributes when rendering the core image block.
+	 *
+	 * @since 4.5.0
+	 *
+	 * @param array  $image_attributes The (recalculated) image attributes.
+	 *                                 Note: expects valid HTML 5.0 attribute names.
+	 * @param array  $block_attributes The image block attributes.
+	 * @param string $html             The image block HTML coming from the
+	 *                                 editor. The img tag will be replaced.
+	 */
+	$image_attributes = apply_filters( 'render_block_core_image_tag_attributes', $image_attributes, $block_attributes, $html );
+
+	$attr = '';
+	foreach ( $image_attributes as $name => $value ) {
+		// Sanitize for valid HTML 5.0 attribute names.
+		// TODO: perhaps add core function to test this.
+		$name = strtolower( $name );
+
+		if ( strpos( $name, 'data-' ) === 0 ) {
+			$is_invalid_attribute_name = preg_match( '/[\\\\u007F-\\\\u009F "\'>\/=\\\\uFDD0-\\\\uFDEF]/', $name );
+		} else {
+			// List of valid HTML attribute names: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes.
+			$is_invalid_attribute_name = preg_match( '/[^a-z0-9-]/', $name );
+		}
+
+		if ( $is_invalid_attribute_name ) {
+			continue;
+		}
+
+		if ( 'src' === $name ) {
+			$value = esc_url( $value );
+		} elseif ( ( 'width' === $name || 'height' === $name ) && ! empty( $value ) ) {
+			$value = (int) $value;
+		} else {
+			$value = esc_attr( $value );
+		}
+
+		$attr .= sprintf( ' %s="%s"', $name, $value );
+	}
+
+	$image_tag = '<img' . $attr . ' />';
+
+	// Replace the img tag.
+	$html = preg_replace( '/<img\s[^>]+>/', $image_tag, $html );
+
+	return $html;
+}
+add_filter( 'render_block', 'gutenberg_render_block_core_image', 10, 2 );
+
 /**
  * Display the privacy policy help notice.
  *