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,6 @@ class GalleryImage extends Component {
  }
 }
 
-export default withAPIData( ( { id } ) => ( {
- image: id ? `/wp/v2/media/${ id }` : {},
+export default withSelect( ( select, { id } ) => ( {
+ image: id ? select( 'core' ).getMedia( id ) : {},
 } ) )( 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,14 @@ export default compose( [
  withContext( 'editor' )( ( settings ) => {
  return { settings };
  } ),
- withAPIData( ( props ) => {
+ withSelect( ( select, props ) => {
  const { id } = props.attributes;
  if ( ! id ) {
  return {};
  }
 
  return {
- image: `/wp/v2/media/${ id }`,
+ image: select( 'core' ).getMedia( id ),
  };
  } ),
 ] )( 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,19 @@ export function terms( state = {}, action ) {
  return 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,19 @@ describe( 'isRequestingTerms()', () => {
  expect( result ).toBe( true );
  } );
 } );
+
+describe( 'getMedia', () => {
+ it( 'returns a media element by id', () => {
+ let state = deepFreeze( {
+ media: {},
+ } );
+ expect( getMedia( state, 1 ) ).toBe( undefined );
+
+ 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,18 @@ 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 } ) => ( {
+ media: featuredImageId ? select( 'core' ).getMedia( featuredImageId ) : undefined,
+} ) );
+
 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',
  ),