Data Module: Refactor media fetching to use the core data module

blocks/library/gallery/gallery-image.js

@@ -7,9 +7,10 @@ import classnames from 'classnames';
  * WordPress Dependencies
  */
 import { Component } from '@wordpress/element';
-import { IconButton, withAPIData, Spinner } from '@wordpress/components';
+import { IconButton, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { keycodes } from '@wordpress/utils';
+import { withSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -75,10 +76,10 @@ class GalleryImage extends Component {
 	}
 
 	componentWillReceiveProps( { isSelected, image } ) {
-		if ( image && image.data && ! this.props.url ) {
+		if ( image && ! this.props.url ) {
 			this.props.setAttributes( {
-				url: image.data.source_url,
-				alt: image.data.alt_text,
+				url: image.source_url,
+				alt: image.alt_text,
 			} );
 		}
 
@@ -147,6 +148,11 @@ class GalleryImage extends Component {
 	}
 }
 
-export default withAPIData( ( { id } ) => ( {
-	image: id ? `/wp/v2/media/${ id }` : {},
-} ) )( GalleryImage );
+export default withSelect( ( select, ownProps ) => {
+	const { getMedia } = select( 'core' );
+	const { id } = ownProps;
+
+	return {
+		image: id ? getMedia( id ) : null,
+	};
+} )( GalleryImage );

blocks/library/image/block.js

@@ -22,9 +22,9 @@ import {
 	SelectControl,
 	TextControl,
 	Toolbar,
-	withAPIData,
 	withContext,
 } from '@wordpress/components';
+import { withSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -136,7 +136,7 @@ class ImageBlock extends Component {
 	}
 
 	getAvailableSizes() {
-		return get( this.props.image, [ 'data', 'media_details', 'sizes' ], {} );
+		return get( this.props.image, [ 'media_details', 'sizes' ], {} );
 	}
 
 	render() {
@@ -297,14 +297,12 @@ export default compose( [
 	withContext( 'editor' )( ( settings ) => {
 		return { settings };
 	} ),
-	withAPIData( ( props ) => {
+	withSelect( ( select, props ) => {
+		const { getMedia } = select( 'core' );
 		const { id } = props.attributes;
-		if ( ! id ) {
-			return {};
-		}
 
 		return {
-			image: `/wp/v2/media/${ id }`,
+			image: id ? getMedia( id ) : null,
 		};
 	} ),
 ] )( ImageBlock );

core-data/actions.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { castArray } from 'lodash';
+
 /**
  * Returns an action object used in signalling that the request for a given
  * data type has been made.
@@ -31,3 +36,17 @@ export function receiveTerms( taxonomy, terms ) {
 		terms,
 	};
 }
+
+/**
+ * Returns an action object used in signalling that media have been received.
+ *
+ * @param {Array|Object} media Media received.
+ *
+ * @return {Object} Action object.
+ */
+export function receiveMedia( media ) {
+	return {
+		type: 'RECEIVE_MEDIA',
+		media: castArray( media ),
+	};
+}

core-data/reducer.js

@@ -1,7 +1,12 @@
 /**
  * External dependencies
  */
-import { combineReducers } from 'redux';
+import { keyBy } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { combineReducers } from '@wordpress/data';
 
 /**
  * Reducer managing terms state. Keyed by taxonomy slug, the value is either
@@ -37,6 +42,27 @@ export function terms( state = {}, action ) {
 	return state;
 }
 
+/**
+ * Reducer managing media state. Keyed by id.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {string} Updated state.
+ */
+export function media( state = {}, action ) {
+	switch ( action.type ) {
+		case 'RECEIVE_MEDIA':
+			return {
+				...state,
+				...keyBy( action.media, 'id' ),
+			};
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	terms,
+	media,
 } );

core-data/resolvers.js

@@ -6,7 +6,7 @@ import apiRequest from '@wordpress/api-request';
 /**
  * Internal dependencies
  */
-import { setRequested, receiveTerms } from './actions';
+import { setRequested, receiveTerms, receiveMedia } from './actions';
 
 /**
  * Requests categories from the REST API, yielding action objects on request
@@ -17,3 +17,14 @@ export async function* getCategories() {
 	const categories = await apiRequest( { path: '/wp/v2/categories' } );
 	yield receiveTerms( 'categories', categories );
 }
+
+/**
+ * Requests a media element from the REST API.
+ *
+ * @param {Object} state State tree
+ * @param {number} id    Media id
+ */
+export async function* getMedia( state, id ) {
+	const media = await apiRequest( { path: `/wp/v2/media/${ id }` } );
+	yield receiveMedia( media );
+}

core-data/selectors.js

@@ -45,3 +45,15 @@ export function isRequestingTerms( state, taxonomy ) {
 export function isRequestingCategories( state ) {
 	return isRequestingTerms( state, 'categories' );
 }
+
+/**
+ * Returns the media object by id.
+ *
+ * @param {Object} state Data state.
+ * @param {number} id    Media id.
+ *
+ * @return {Object?}     Media object.
+ */
+export function getMedia( state, id ) {
+	return state.media[ id ];
+}

core-data/test/reducer.js

@@ -6,7 +6,7 @@ import deepFreeze from 'deep-freeze';
 /**
  * Internal dependencies
  */
-import { terms } from '../reducer';
+import { terms, media } from '../reducer';
 
 describe( 'terms()', () => {
 	it( 'returns an empty object by default', () => {
@@ -67,3 +67,24 @@ describe( 'terms()', () => {
 		expect( state ).toEqual( {} );
 	} );
 } );
+
+describe( 'media', () => {
+	it( 'returns an empty object by default', () => {
+		const state = media( undefined, {} );
+
+		expect( state ).toEqual( {} );
+	} );
+
+	it( 'returns with received media by id', () => {
+		const originalState = deepFreeze( {} );
+		const state = media( originalState, {
+			type: 'RECEIVE_MEDIA',
+			media: [ { id: 1, title: 'beach' }, { id: 2, title: 'sun' } ],
+		} );
+
+		expect( state ).toEqual( {
+			1: { id: 1, title: 'beach' },
+			2: { id: 2, title: 'sun' },
+		} );
+	} );
+} );

core-data/test/resolvers.js

@@ -6,8 +6,8 @@ import apiRequest from '@wordpress/api-request';
 /**
  * Internal dependencies
  */
-import { getCategories } from '../resolvers';
-import { setRequested, receiveTerms } from '../actions';
+import { getCategories, getMedia } from '../resolvers';
+import { setRequested, receiveTerms, receiveMedia } from '../actions';
 
 jest.mock( '@wordpress/api-request' );
 
@@ -30,3 +30,21 @@ describe( 'getCategories', () => {
 		expect( received ).toEqual( receiveTerms( 'categories', CATEGORIES ) );
 	} );
 } );
+
+describe( 'getMedia', () => {
+	const MEDIA = { id: 1 };
+
+	beforeAll( () => {
+		apiRequest.mockImplementation( ( options ) => {
+			if ( options.path === '/wp/v2/media/1' ) {
+				return Promise.resolve( MEDIA );
+			}
+		} );
+	} );
+
+	it( 'yields with requested media', async () => {
+		const fulfillment = getMedia( {}, 1 );
+		const received = ( await fulfillment.next() ).value;
+		expect( received ).toEqual( receiveMedia( MEDIA ) );
+	} );
+} );

core-data/test/selectors.js

@@ -6,7 +6,7 @@ import deepFreeze from 'deep-freeze';
 /**
  * Internal dependencies
  */
-import { getTerms, isRequestingTerms } from '../selectors';
+import { getTerms, isRequestingTerms, getMedia } from '../selectors';
 
 describe( 'getTerms()', () => {
 	it( 'returns value of terms by taxonomy', () => {
@@ -56,3 +56,21 @@ describe( 'isRequestingTerms()', () => {
 		expect( result ).toBe( true );
 	} );
 } );
+
+describe( 'getMedia', () => {
+	it( 'should return undefined for unknown media', () => {
+		const state = deepFreeze( {
+			media: {},
+		} );
+		expect( getMedia( state, 1 ) ).toBe( undefined );
+	} );
+
+	it( 'should return a media element by id', () => {
+		const state = deepFreeze( {
+			media: {
+				1: { id: 1 },
+			},
+		} );
+		expect( getMedia( state, 1 ) ).toEqual( { id: 1 } );
+	} );
+} );

editor/components/post-featured-image/index.js

@@ -11,6 +11,7 @@ import { __ } from '@wordpress/i18n';
 import { Button, Spinner, ResponsiveWrapper, withAPIData } from '@wordpress/components';
 import { MediaUpload } from '@wordpress/blocks';
 import { compose } from '@wordpress/element';
+import { withSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -38,15 +39,15 @@ function PostFeaturedImage( { featuredImageId, onUpdateImage, onRemoveImage, med
 						modalClass="editor-post-featured-image__media-modal"
 						render={ ( { open } ) => (
 							<Button className="button-link editor-post-featured-image__preview" onClick={ open } >
-								{ media && !! media.data &&
+								{ media &&
 									<ResponsiveWrapper
-										naturalWidth={ media.data.media_details.width }
-										naturalHeight={ media.data.media_details.height }
+										naturalWidth={ media.media_details.width }
+										naturalHeight={ media.media_details.height }
 									>
-										<img src={ media.data.source_url } alt={ __( 'Featured image' ) } />
+										<img src={ media.source_url } alt={ __( 'Featured image' ) } />
 									</ResponsiveWrapper>
 								}
-								{ media && media.isLoading && <Spinner /> }
+								{ ! media && <Spinner /> }
 							</Button>
 						) }
 					/>
@@ -96,14 +97,22 @@ const applyConnect = connect(
 	}
 );
 
-const applyWithAPIData = withAPIData( ( { featuredImageId, postTypeName } ) => {
+const applyWithAPIData = withAPIData( ( { postTypeName } ) => {
 	return {
-		media: featuredImageId ? `/wp/v2/media/${ featuredImageId }` : undefined,
 		postType: postTypeName ? `/wp/v2/types/${ postTypeName }?context=edit` : undefined,
 	};
 } );
 
+const applyWithSelect = withSelect( ( select, { featuredImageId } ) => {
+	const { getMedia } = select( 'core' );
+
+	return {
+		image: featuredImageId ? getMedia( featuredImageId ) : null,
+	};
+} );
+
 export default compose(
 	applyConnect,
 	applyWithAPIData,
+	applyWithSelect,
 )( PostFeaturedImage );

lib/client-assets.php

@@ -255,6 +255,7 @@ function gutenberg_register_scripts_and_styles() {
 			'wp-utils',
 			'wp-viewport',
 			'wp-plugins',
+			'wp-core-data',
 			'word-count',
 			'editor',
 		),