Show the actual filesize of the selected image size slug, if known

.eslintrc

@@ -0,0 +1,13 @@
+{
+	"extends": [ "plugin:@wordpress/eslint-plugin/recommended" ],
+	"env": {
+		"browser": true
+	},
+	"rules": {
+		"import/no-extraneous-dependencies": [ "off" ],
+		"jsdoc/no-undefined-types": [ "off" ],
+		"jsdoc/check-line-alignment": [ "warn" ],
+		"jsdoc/check-tag-names": [ "warn" ],
+		"prettier/prettier": [ "off" ]
+	}
+}

.github/workflows/ci.yml

@@ -41,6 +41,6 @@ jobs:
     uses: ./.github/workflows/node.yml
     secrets: inherit
 
-  php:
-    uses: ./.github/workflows/php.yml
-    secrets: inherit
+  # php:
+  #   uses: ./.github/workflows/php.yml
+  #   secrets: inherit

altis-media-weight.php

@@ -47,7 +47,26 @@ function register_block_plugin_editor_scripts() {
 		'hm-media-weight',
 		'mediaWeightData',
 		[
-			'mediaThreshold' => apply_filters( 'altis_media_weight_threshold', 2.50 ),
+			/**
+			 * Filter the threshold at which a post is deemed "too heavy" due to media weight.
+			 *
+			 * @param float $threshold Maxmimum number of megabytes of media permitted per post.
+			 */
+			'mediaThreshold' => apply_filters( 'hm_media_weight_threshold', 2.50 ),
+			/**
+			 * Filter the expected maximum width (in pixels) for media displayed in post content.
+			 */
+			'contentColumnWidth' => apply_filters(
+				'hm_media_weight_content_column_width',
+				$GLOBALS['content_width'] ?? 1024
+			),
+			/**
+			 * Filter the expected maximum width (in pixels) for a desktop featured image.
+			 */
+			'featuredImageWidth' => apply_filters(
+				'hm_media_weight_featured_image_width',
+				$GLOBALS['content_width'] ?? 1024
+			),
 		]
 	);
 }

src/index.js

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { __, sprintf } from '@wordpress/i18n';
 import { media } from '@wordpress/icons';
 import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/editor';
@@ -12,6 +12,8 @@ const { mediaThreshold } = window.mediaWeightData;
 
 const PLUGIN_NAME = 'hm-media-weight';
 const SIDEBAR_NAME = PLUGIN_NAME;
+const MB_IN_B = 1000000;
+const KB_IN_B = 1000;
 
 const getMediaBlocks = ( blocks ) => blocks.reduce(
 	( mediaBlocks, block ) => {
@@ -27,14 +29,14 @@ const getMediaBlocks = ( blocks ) => blocks.reduce(
 );
 
 const useMediaBlocks = () => {
-	const blocks = useSelect( ( select ) => select( blockEditorStore ).getBlocks() );
+	const mediaBlocks = useSelect( ( select ) => getMediaBlocks( select( blockEditorStore ).getBlocks() ) );
 	const featuredImageId = useSelect( ( select ) => select( 'core/editor' ).getEditedPostAttribute( 'featured_media' ) );
+	/* eslint-disable no-shadow */
 	const { imageIds, videoIds, blocksByAttributeId } = useMemo( () => {
-		const mediaBlocks = getMediaBlocks( blocks );
 		const imageIds = [];
 		const videoIds = [];
 		const blocksByAttributeId = {};
-		for ( let block of mediaBlocks ) {
+		for ( const block of mediaBlocks ) {
 			if ( ! block.attributes?.id ) {
 				continue;
 			}
@@ -49,7 +51,8 @@ const useMediaBlocks = () => {
 			imageIds.push( featuredImageId );
 		}
 		return { imageIds, videoIds, blocksByAttributeId };
-	}, [ blocks, featuredImageId ] );
+	}, [ mediaBlocks, featuredImageId ] );
+	/* eslint-enable no-shadow */
 	const imageRecords = useEntityRecords( 'postType', 'attachment', {
 		per_page: imageIds.length,
 		include: imageIds,
@@ -62,25 +65,108 @@ const useMediaBlocks = () => {
 		attachments: imageRecords.concat( videoRecords ),
 		featuredImageId,
 		blocksByAttributeId,
+		mediaBlocks,
 		imageCount: imageIds.length,
 		videoCount: videoIds.length,
 	};
 };
 
-const HMMediaWeightSidebar = ( ...args ) => {
+/**
+ * Use a HEAD request to measure the size of a remote file (in bytes).
+ *
+ * This is necessary because WordPress doesn't store the filesizes of
+ * dynamic (Tachyon/Photon) images in the database.
+ *
+ * @async
+ * @param {string} imageUri URL for a remote image.
+ * @return {Promise<number>} The size of the remote image, in bytes.
+ */
+async function getFileSize( imageUri ) {
+	const response = await fetch( imageUri, { method: 'HEAD' } );
+
+	if ( ! response.ok ) {
+		throw new Error( `Failed to fetch: ${ response.status }` );
+	}
+
+	const contentLength = response.headers.get( 'Content-Length' );
+	if ( ! contentLength ) {
+		throw new Error( 'Content-Length header not found.' );
+	}
+
+	return parseInt( contentLength, 10 );
+}
+
+const imageSizesByUri = {};
+
+/**
+ * Cached wrapper for getFileSize, to avoid repeatedly checking the same image.
+ *
+ * @async
+ * @param {string} imageUri URL for a remote image.
+ * @return {number|Promise<number>} The size of the remote image, in bytes.
+ */
+async function checkImageSize( imageUri ) {
+	if ( ! imageSizesByUri[ imageUri ] ) {
+		imageSizesByUri[ imageUri ] = getFileSize( imageUri );
+	}
+
+	return imageSizesByUri[ imageUri ];
+}
+
+const HMMediaWeightSidebar = () => {
 	const {
 		attachments,
 		featuredImageId,
 		blocksByAttributeId,
+		mediaBlocks,
 		imageCount,
 		videoCount
 	} = useMediaBlocks();
 	const { selectBlock } = useDispatch( blockEditorStore );
 	let imagesSize = 0;
 	let videosSize = 0;
 
+	const [ resolvedRemoteImageSizes, setResolvedImageSizes ] = useState( {} );
+	let targetImageURIs = attachments
+		.map( ( attachment ) => {
+			if ( attachment.media_type !== 'image' ) {
+				return null;
+			}
+			if ( attachment.id === featuredImageId ) {
+				// TODO: Understand via filters the expected size of a featured image,
+				// and report the URI of the expected target file for measurement.
+				return null;
+			}
+			const associatedBlockClientId = blocksByAttributeId[ attachment.id ];
+			const associatedBlock = mediaBlocks.find( ( block ) => block.clientId === associatedBlockClientId );
+			const imageUri = attachment?.media_details?.sizes?.[ associatedBlock?.attributes?.sizeSlug ]?.source_url || null;
+			if ( ! imageUri ) {
+				return null;
+			}
+			return [ attachment.id, imageUri ];
+		} )
+		.filter( Boolean );
+
+	// Create a stable reference for triggering useEffect.
+	targetImageURIs = JSON.stringify( targetImageURIs );
+
+	useEffect( () => {
+		const imageSizeRequests = JSON.parse( targetImageURIs )
+			.map( ( [ id, uri ] ) => {
+				return checkImageSize( uri ).then( ( size ) => [ id, size ] );
+			} );
+		Promise.all( imageSizeRequests ).then( ( sizes ) => {
+			const resolvedSizes = sizes.reduce( ( memo, [ id, size ] ) => {
+				memo[ id ] = size;
+				return memo;
+			}, {} );
+			setResolvedImageSizes( resolvedSizes );
+		} );
+	}, [ targetImageURIs ] );
+
+	// eslint-disable-next-line no-shadow
 	const DisplayTotal = ( { imagesSize, videosSize } ) => {
-		const total = ( imagesSize + videosSize ).toFixed( 2 );
+		const total = ( ( imagesSize + videosSize ) / MB_IN_B ).toFixed( 2 );
 		let sizeColor;
 
 		if ( total >= 0 && total <= ( mediaThreshold / 2 ) ) {
@@ -94,6 +180,7 @@ const HMMediaWeightSidebar = ( ...args ) => {
 		const warningMsg = total >= mediaThreshold ? (
 			<p className="description">
 				{ sprintf(
+					/* translators: %f: Maximum allowed size (in megabytes) for all media on page. */
 					__( 'Warning! The media in this page exceeds the recommended threshold of %fmb', 'hm-media-weight' ),
 					mediaThreshold
 				) }
@@ -102,8 +189,8 @@ const HMMediaWeightSidebar = ( ...args ) => {
 
 		return (
 			<>
-				<p>{ __( 'Images total', 'hm-media-weight' ) }: { imagesSize.toFixed( 2 ) }mb</p>
-				<p>{ __( 'Videos total', 'hm-media-weight' ) }: { videosSize.toFixed( 2 ) }mb</p>
+				<p>{ __( 'Images total', 'hm-media-weight' ) }: { ( imagesSize / MB_IN_B ).toFixed( 2 ) }mb</p>
+				<p>{ __( 'Videos total', 'hm-media-weight' ) }: { ( videosSize / MB_IN_B ).toFixed( 2 ) }mb</p>
 				<p>
 					<strong>
 						{ __( 'Total media size', 'hm-media-weight' ) }: { ' ' }
@@ -131,7 +218,7 @@ const HMMediaWeightSidebar = ( ...args ) => {
 			</PluginSidebarMoreMenuItem>
 			<PluginSidebar className={ SIDEBAR_NAME } name={ SIDEBAR_NAME } title={ __( 'Media Weight', 'hm-media-weight' ) }>
 				<PanelBody
-					initialOpen={ false }
+					initialOpen={ true }
 					title={ __( 'Total Media Items', 'hm-media-weight' ) }
 				>
 					<p>Images: { imageCount }</p>
@@ -155,27 +242,44 @@ const HMMediaWeightSidebar = ( ...args ) => {
 						if ( attachment.id === featuredImageId ) {
 							type = __( 'Featured image', 'hm-media-weight' );
 						}
-						const mediaSize = attachment.media_details.filesize /  1000000;
+						let mediaSize = attachment.media_details.filesize;
 
 						if ( attachment.media_type === 'image' ) {
-							imagesSize = imagesSize + mediaSize;
+							const remoteImageSize = resolvedRemoteImageSizes[ attachment.id ];
+							mediaSize = remoteImageSize || mediaSize;
+							imagesSize = imagesSize + ( remoteImageSize || mediaSize );
 						} else {
 							videosSize = videosSize + mediaSize;
 						}
 
+						const thumbnail = attachment.media_type === 'image'
+							? ( attachment?.media_details?.sizes?.thumbnail?.source_url || attachment.source_url )
+							: null;
+
 						return (
 							<PanelRow key={ `media-details-${ attachment.id }` }>
 								<div>
+									{ thumbnail ? (
+										<img
+											src={ thumbnail }
+											alt=""
+											style={ { maxWidth: '100%' } }
+										/>
+									) : null }
 									<p>
 										<strong>
-											{ type }: { mediaSize.toFixed( 2 ) }mb
+											{ type }: {
+												( mediaSize < MB_IN_B )
+													? `${ ( mediaSize / KB_IN_B ).toFixed( 2 ) }kb`
+													: `${ ( mediaSize / MB_IN_B ).toFixed( 2 ) }mb`
+											}
 										</strong>
 									</p>
 									<p>
 										Attachment ID: { attachment.id }<br />
 										<small><a href={ attachment.link }>Go to the attachment post &rsaquo;</a></small>
 									</p>
-									<details style={ { margin: '0.5rem 0 1rem' } }>
+									<details style={ { display: 'none', margin: '0.5rem 0 1rem' } }>
 										<summary>{ __( 'View entity record JSON', 'hm-media-weight' ) }</summary>
 										<small>
 											<pre>