Reinstate previous PHP filter for the Background image

I couldn't figure out how to enable a custom
size for the background image with purely JS.
This won't apply to Image blocks in a non-story
editor, like for posts.

Author: kienstra

assets/src/stories-editor/blocks/amp-story-page/edit.js

@@ -32,7 +32,6 @@ import {
 	withSelect,
 	withDispatch,
 	dispatch,
-	select,
 } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
@@ -122,10 +121,8 @@ class PageEdit extends Component {
 
 			mediaType = media.type;
 		}
-		const { getMedia } = select( 'core' );
-		const mediaObject = getMedia( media.id );
-		const mediaUrl = has( mediaObject, [ 'media_details', 'sizes', MAX_IMAGE_SIZE_SLUG, 'source_url' ] ) ? mediaObject.media_details.sizes[ MAX_IMAGE_SIZE_SLUG ].source_url : media.url;
 
+		const mediaUrl = has( media, [ 'sizes', MAX_IMAGE_SIZE_SLUG, 'url' ] ) ? media.sizes[ MAX_IMAGE_SIZE_SLUG ].url : media.url;
 		this.props.setAttributes( {
 			mediaUrl,
 			mediaId: media.id,
@@ -474,13 +471,13 @@ PageEdit.propTypes = {
 };
 
 export default compose(
-	withSelect( ( ownSelect, { clientId, attributes } ) => {
-		const { getMedia } = ownSelect( 'core' );
-		const { getBlockOrder, getBlockRootClientId } = ownSelect( 'core/block-editor' );
+	withSelect( ( select, { clientId, attributes } ) => {
+		const { getMedia } = select( 'core' );
+		const { getBlockOrder, getBlockRootClientId } = select( 'core/block-editor' );
 
 		const isFirstPage = getBlockOrder().indexOf( clientId ) === 0;
 		const isCallToActionAllowed = ! isFirstPage && ! getCallToActionBlock( clientId );
-		const { getAnimatedBlocks } = ownSelect( 'amp/story' );
+		const { getAnimatedBlocks } = select( 'amp/story' );
 
 		const { mediaId } = attributes;
 

includes/class-amp-story-post-type.php

@@ -271,6 +271,8 @@ public static function register() {
 		add_filter( 'use_block_editor_for_post_type', array( __CLASS__, 'use_block_editor_for_story_post_type' ), PHP_INT_MAX, 2 );
 		add_filter( 'classic_editor_enabled_editors_for_post_type', array( __CLASS__, 'filter_enabled_editors_for_story_post_type' ), PHP_INT_MAX, 2 );
 
+		add_filter( 'image_size_names_choose', array( __CLASS__, 'add_new_max_image_size' ) );
+
 		self::register_block_latest_stories();
 
 		register_block_type(
@@ -1523,4 +1525,27 @@ public static function change_embed_iframe_attributes( $output, $post ) {
 			$output
 		);
 	}
+
+	/**
+	 * Adds a new max image size to the images sizes available.
+	 *
+	 * In the AMP story editor, when selecting Background Media,
+	 * it will use this custom image size.
+	 * But this filter won't make it available in the Image block's 'Image Size' <select> element.
+	 *
+	 * @param array $image_sizes {
+	 *     An associative array of image sizes.
+	 *
+	 *     @type string $slug Image size slug, like 'medium'.
+	 *     @type string $name Image size name, like 'Medium'.
+	 * }
+	 * @return array $image_sizes The filtered image sizes.
+	 */
+	public static function add_new_max_image_size( $image_sizes ) {
+		if ( isset( $_POST['action'] ) && 'query-attachments' === $_POST['action'] ) { // phpcs:ignore WordPress.Security.NonceVerification.Missing
+			$image_sizes[ self::MAX_IMAGE_SIZE_SLUG ] = __( 'AMP Story Max Size', 'amp' );
+		}
+
+		return $image_sizes;
+	}
 }