303: Add the useMediaSrc hook

README.md

@@ -61,6 +61,7 @@ One way to ensure all dependencies are loaded is to use the [`@wordpress/depende
 - [`useActiveBlockStyle`](src/hooks/useActiveBlockStyle)
 - [`useBlockStyles`](src/hooks/useBlockStyles)
 - [`useDisallowedBlocks`](src/hooks/useDisallowedBlocks)
+- [`useMediaSrc`](src/hooks/useMediaSrc)
 - [`useMeta`](src/hooks/useMeta)
 - [`useRenderAppenderWithBlockLimit`](src/hooks/useRenderAppenderWithBlockLimit)
 - [`useSelectBlock`](src/hooks/useSelectBlock)

src/hooks/useMediaSrc/README.md

@@ -0,0 +1,45 @@
+# useMediaSrc
+
+The `useMediaSrc` hook allows for the easy retrieval of source media URLs from an ID.
+
+## Usage
+
+The `useMediaSrc` hook takes an ID and returns a URL or undefined.
+
+```js
+import { useMediaSrc } from '@humanmade/block-editor-components';
+
+function BlockEdit( { attributes, setAttributes } ) {
+	const {
+		videoId
+	} = attributes;
+	const videoUrl = useMediaSrc( videoId );
+
+	return (
+		<>
+			<MediaUploadCheck>
+				<MediaUpload
+					onSelect={ ( media ) =>
+						setAttributes( { videoId: media.id } )
+					}
+					value={ videoId }
+					render={ ( { open } ) => (
+						<Button onClick={ open }>Open Media Library</Button>
+					) }
+				/>
+			</MediaUploadCheck>
+			<video src={ videoUrl } />
+		<>
+	);
+}
+```
+
+## Return
+
+The `useMediaSrc` hook returns either a URL string or undefined.
+
+## Dependencies
+
+The `useMediaSrc` hook requires the following dependencies, which are expected to be available:
+
+- `@wordpress/data`

src/hooks/useMediaSrc/index.js

@@ -0,0 +1,21 @@
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Returns the original source URL of media if available, or undefined, given an ID.
+ *
+ * @param {number} id attachment ID.
+ * @returns {string|undefined} Media source URL or undefined.
+ */
+export default function useMediaSrc( id ) {
+	const url = useSelect(
+		( select ) => {
+			const media = select( 'core' ).getMedia( id, { context: 'view' } );
+			if ( ! media ) {
+				return undefined;
+			}
+			return media.source_url;
+		},
+		[ id ]
+	);
+	return url;
+}

src/hooks/usePostThumbnail/index.js

@@ -36,7 +36,7 @@ export default function usePostThumbnail() {
 
 	const setPostThumbnail = useCallback(
 		( mediaId ) => {
-		// If the image has been removed, we can remove the post thumbnail.
+			// If the image has been removed, we can remove the post thumbnail.
 			editPost( { featured_media: mediaId } );
 		},
 		[ editPost ]

src/index.js

@@ -23,6 +23,7 @@ export {
 export { default as useActiveBlockStyle } from './hooks/useActiveBlockStyle';
 export { default as useBlockStyles } from './hooks/useBlockStyles';
 export { default as useDisallowedBlocks } from './hooks/useDisallowedBlocks';
+export { default as useMediaSrc } from './hooks/useMediaSrc';
 export { default as useMeta } from './hooks/useMeta';
 export { default as usePostThumbnail } from './hooks/usePostThumbnail';
 export { default as useRenderAppenderWithBlockLimit } from './hooks/useRenderAppenderWithBlockLimit';